Løsning af ydeevne på langsomme websteder

Hvis dit websted bevæger sig som en af ​​disse dovendyr fra DMV i Zootopia, er der måder, du muligvis kan løse, hvad der bremser det. At finde ud af, hvad der forårsager problemet, er halvdelen af ​​slaget, så når du først har isoleret årsagerne, har du i det mindste svarene til at løse problemet.

Hosting af lav kvalitet er den mest sandsynlige skyldige

Når det kommer til webhosting, betyder begrebet lav kvalitet ikke altid det samme, som det gør i andre sammenhænge. For eksempel er den pris, du betaler for hosting ikke altid en nøjagtig afspejling af den kvalitet, du kan forvente. Tjenestens popularitet er heller ikke, eller hvor velkendt mærkenavnet er.

Faktisk er nogle af de mest populære hosting-mærker de værste valg, simpelthen fordi for mange mennesker bruger dem. Det afhænger lidt af kvaliteten af ​​deres infrastruktur. Hvis de investerer ordentligt i deres teknologi, vil du muligvis ikke opleve betydelige ydelsesproblemer. På den anden side deler du muligvis en enkelt server med hundreder af andre websteder, og dette problem øges, når disklagringskapaciteten fortsætter med at vokse.

Så i denne situation er det muligt, at skifte til en mindre, mindre kendt webhostingstjeneste med god teknologi kunne være et bedre valg. At gøre dette kan også betyde, at du får mere personlig kundeservice på et højere kvalitetsniveau, end du får fra en behemoth. Det er værd at tænke over, og det er nemt at teste ved blot at købe et måneds abonnement på den nye vært og benchmarking af ydelsen mod dit eksisterende websted.

Brug din F12-nøgle

De fleste webbrowsere er indstillet til at få adgang til deres debugkonsol gennem F12-nøglen, og din er sandsynligvis ikke en undtagelse. Og når man taler om undtagelser, er det stort set det, du leder efter eller for at være præcise, fejl i din JavaScript-kode, der kaster undtagelser og påvirker ydelsen.

Du finder disse fejl både i din egen kode og i importerede kodebiblioteker som jQuery. Bare fordi jQuery er stort og populært, betyder det ikke, at det er fejlfrit. Her er et eksempel på den slags ting, du leder efter:

Fejlene, der er markeret med blåt, er kun CSS-fejl, og du kan generelt forvente at se dem på grund af mængden af ​​skinnende udviklere skal gøre, når de bygger stilark, simpelthen fordi der stadig ikke er en enkelt standard, der er blevet brugt i alle browsere. De bør normalt ikke påvirke ydeevnen, medmindre du bruger en masse animationer eller transistionseffekter.

Men denne fejl, der er markeret med orange, er en JavaScript-fejl, og ikke kun det, i dette tilfælde er det jackpotten, fordi den specifikt fortæller os, at denne specielle fejl vil få koden til at køre meget langsomt.

Få nogle gratis råd fra Google

Vidste du, at Google kan analysere din webside gratis og give dig tip til, hvordan du løser problemer? Alt hvad du skal gøre er at besøge Googles side om sidehastighedsindsigt og indtaste URL'en på den side, du vil analysere.

Det kunne virkelig ikke være lettere, selvom du muligvis ikke nødvendigvis ønsker at følge deres råd. Googles system er god til at finde ud af, hvad der kan bremse din side ned, men nogle rettelser løser muligvis ikke så mange problemer, som de skaber.

Ideelt set ønsker du at se scoringer over 85. Selvom ingen ved det sikkert, menes mange sider at indlæsningstider har en betydelig indflydelse på din siderangering i Google. Fortvivl ikke, hvis dit websted ikke er lige der oppe øverst i den grønne zone, fordi mange store websteder ikke får fantastiske scoringer.

Nogle bemærkelsesværdige eksempler inkluderer:

  • http://bbc.com (70m/77d)
  • http://cnn.com (47m/65d)
  • http://whitehouse.gov (58m/56d)
  • http://microsoft.com (49m/71d)
  • http://apple.com (61m/72d)
  • http://linux.com (33m/44d)
  • http://ubuntu.com (69m/81d)
  • http://linuxmint.com (59m/67d)
  • http://youtube.com (53m/69d)
  • http://facebook.com (49m/81d)

Ingen af ​​disse eksempler er virkelig en undskyldning for at lade dit eget websted fungere dårligt, men de beviser, at et trægt sted ikke nødvendigvis er synonymt med fiasko.

Brug billeder korrekt

Hvis nogen kender de korrekte billedformater, der skal bruges, og hvornår skulle det være designere, ikke? Men forbløffende ser det ud til, at du ikke ved noget, eller når du gør det, synes du, at det ikke betyder noget. Nå her er nyheden: det betyder noget hele tiden.

Dette problem har samlet fart, siden en bestemt skabelonstil er blevet brugt som defacto-standard for forretningssteder, og det er en tendens, der ikke viser tegn på at bremse. Som professionel designer skylder du dig selv og dine klienter ikke at falde i fælden med doven designgenveje.

En af disse uheldige genveje har brugt store PNG-billeder til heltenheder øverst på en side (eller andre steder, men det er her, du normalt finder dem). Nu siger det sig selv, at du aldrig skal gøre dette nogensinde, selvom du har brug for gennemsigtige sektioner på billedet.

Her er de grundlæggende elementer, du skal huske på, når du opretter det mesterværk:

  • Brug store billeder sparret, hvis overhovedet

Store billeder er en frygtelig idé, fordi jo større billedet er, jo længere tager det at indlæse. Nu er der et par forskellige teknikker, du kan bruge til at få store billeder til at fungere langt mere effektivt, men inden vi går ind på det, lad os bare sige, at du burde bruge mindre billeder for det meste og gemme store, til når de er virkelig brug for.

  • Indstil PPI / DPI-værdien korrekt

Afhængig af hvilken grafikeditor, du bruger, kan den muligvis vise værdier for DPI eller PPI. Det sidstnævnte er bedre, fordi det viser, at din grafikredigerer er designet til internetbrug i stedet for udskrivning. Problemet med at ændre DPI i nogle versioner af PhotoShop er, at de ikke kun justerer DPI, men også de fysiske dimensioner af dit billede. Dette er ikke et problem i den nyeste version af PhotoShop (som bruger PPI), så hvis du bruger en ældre version, er det tid til at opgradere. Eller brug GIMP i stedet.

  • Skær store billeder

Det er her magien starter. Du kan finde mange mennesker, der fortæller dig, at skive dine billeder ikke forbedrer indlæsningstiderne, fordi du stadig downloader det samme antal byte, og enhver opfattet forbedring er blot psykologisk. Disse mennesker bruger den doveste version af billedskæring, så de ikke kender de sande muligheder.

Efter at have skåret dit billede har du chancen for at optimere det. Forudsat at det originale billede var i PNG-format, kan du nu konvertere alle ikke-gennemsigtige dele til JPG-format og gemme en masse bytes, hvilket efterlader de dele, der kræver gennemsigtighed som PNG-billeder.

Derefter kan du spille med komprimeringsniveauet for hver enkelt skive, indtil denne skive er perfekt optimeret. Den samlede effekt af denne optimering kan resultere i besparelser på over 50% i sammenligning med det oprindelige uoptimerede billede.

Video kan også optimeres

Kunsten med videokomprimering er afhængig af to ting: målformatet og den codec, du bruger til kodning. Hvilket format du vælger afhænger helt af dine behov. Generelt, hvis du har brug for høj kvalitet, giver MP4 med H.264-kodning den bedste kvalitet ved høj komprimering, men når du ikke har brug for den høje kvalitet, giver WebM og FLV mindre filstørrelser. Din videoredigeringssoftware tilbyder muligvis stadig FLV som en mulighed, men det anbefales ikke at bruge dette format.

Hvis du har brug for DVD-kvalitet, giver MP4 med H.264-kodning fremragende resultater, men kommer til prisen for at være en heftig download. For streaming af video giver WebM meget bedre komprimering. Problemet er, at ikke alle mobile operativsystemer understøtter WebM endnu (de burde, men de ser ud til at have en skør grund til ikke at muligvis følge mobiludviklerens gyldne regel: Du skal upraktisk og forvirre din kunde så meget som du kan).

Skal du bruge MPEG-4-codec i stedet for H.264 med MP4-videoer? Generelt ikke, fordi det resulterer i større filstørrelser på samme kvalitetsniveau. Men hvis din video vil have små fysiske dimensioner, og du ønsker perfekt transmission af videoen til streaming, er MPEG-4 en god codec, fordi den har indbygget fejlkorrektion for at sikre dataintegritet.

Hvad med WMV? Dette er et specielt tilfælde. Det giver næsten den samme videokvalitet som MP4, men med endnu bedre komprimering. Ulempen her er, at Mac- og iOS-brugere kun kan se din video, hvis de bruger en payware-videokonverter, som indfører en forsinkelse i afspilningen, hvilket er nøjagtigt det, vi forsøgte at undgå ved at optimere vores side.

WMV-filer har ingen problemer for Android-, Windows- eller Linux-brugere. Men med 12.5% af internetfællesskabet, der bruger Apple-enheder, skal du beslutte, om det er værd at genere dem. Personligt vil jeg ikke anbefale, at du gør det bare for at få en hurtigere belastningstid.

Og til sidst, fordi det er internetvideo, hvis du ikke tillader afspilning på fuld skærm eller teatertilstand, skal du formindske den fysiske størrelse på videoen ned til den størrelse, du viser på din side, og se, hvor mange byte du kan gemme .

Bogdan Rancea

Bogdan er et grundlæggende medlem af Inspired Mag og har akkumuleret næsten 6 års erfaring i denne periode. På fritiden kan han lide at studere klassisk musik og udforske billedkunst. Han er også ganske besat af fixies. Han ejer allerede 5.