Å fikse ytelsesproblemer på langsomme nettsteder

Hvis nettstedet ditt beveger seg som en av de dovendyrene fra DMV i Zootopia, er det måter du muligens kan fikse det som bremser det. Å finne ut hva som forårsaker problemet er halve slaget, så når du har isolert årsakene, vil du i det minste ha svarene på å løse problemet.

Hosting av lav kvalitet er den mest sannsynlige synderen

Når det gjelder webhotell, betyr ikke begrepet lav kvalitet alltid det samme som det gjør i andre sammenhenger. For eksempel er prisen du betaler for hosting ikke alltid en nøyaktig gjenspeiling av kvaliteten du kan forvente. Tjenestenes popularitet er heller ikke, eller hvor kjent merkenavnet er.

Faktisk er noen av de mest populære hostingmerkene de verste valgene, ganske enkelt fordi for mange mennesker bruker dem. Det avhenger litt av kvaliteten på infrastrukturen deres. Hvis de investerer skikkelig i teknologien sin, kan det hende du ikke vil oppleve betydelige ytelsesproblemer. På den annen side kan det hende du deler en enkelt server med hundrevis av andre nettsteder, og det problemet vil øke når lagringskapasiteten på disken fortsetter å vokse.

Så i den situasjonen er det mulig at det kan være et bedre valg å bytte til en mindre, mindre kjent webhotell med god teknologi. Hvis du gjør dette, kan det også bety at du får mer personlig kundeservice, på et høyere kvalitetsnivå enn du får fra en behemoth. Det er verdt å tenke på, og det er enkelt å teste ved bare å kjøpe et måneds abonnement på den nye verten og benchmarking ytelsen mot det eksisterende nettstedet ditt.

Bruk din F12-nøkkel

De fleste nettlesere er innstilt på å få tilgang til avlusingskonsollen via F12-tasten, og din er sannsynligvis ikke et unntak. Og snakk om unntak, er det stort sett det du leter etter, eller for å være nøyaktig, feil i JavaScript-koden som kaster unntak og påvirker ytelsen.

Du finner disse feilene både i din egen kode og i importerte kodebiblioteker som jQuery. Bare fordi jQuery er stort og populært, betyr ikke det at det er feilfritt. Her er et eksempel på hva du leter etter:

Feilene som er flagget med blått er bare CSS-feil, og du kan generelt forvente å se dem på grunn av mengden skimmere utviklere må gjøre når de bygger stilark, ganske enkelt fordi det fremdeles ikke er en standard som er tatt i bruk i alle nettlesere. De skal normalt ikke påvirke ytelsen med mindre du bruker mange animasjoner eller transistjonseffekter.

Men den feilen som er markert med oransje er en JavaScript-feil, og ikke bare det, i dette tilfellet er det jackpoten fordi den spesifikt forteller oss at denne feilen vil føre til at koden kjører veldig sakte.

Få gratis råd fra Google

Visste du at Google kan analysere websiden din gratis og gi deg tips om hvordan du løser problemer? Alt du trenger å gjøre er å besøke Googles side for sidehastighetsinnsikt og oppgi URL-adressen til siden du vil analysere.

Det kan virkelig ikke være enklere, selv om du kanskje ikke nødvendigvis ønsker å følge alle deres råd. Googles system er flinke til å finne ut hva som kan bremse siden din, men noen rettelser løser kanskje ikke så mange problemer som de skaper.

Ideelt sett vil du se score over 85. Selv om ingen vet det sikkert, er det ofte antatt sidetidlastingstider vil ha en betydelig innflytelse på siden din i Google. Fortvil ikke hvis nettstedet ditt ikke er der oppe i den grønne sonen, fordi mange store nettsteder ikke får fantastiske score.

Noen viktige 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 av disse eksemplene er egentlig en unnskyldning for å la ditt eget nettsted fungere dårlig, men de beviser at et tregt nettsted ikke nødvendigvis er synonymt med feil.

Bruk bilder riktig

Hvis noen ville vite riktige bildeformater å bruke og når, burde det være designere, ikke sant? Men utrolig virker det ganske mye av du ikke vet, eller når du gjør det, tror du at det ikke betyr noe. Vel, her er nyheten: det betyr noe, hele tiden.

Dette problemet har fått fart siden en bestemt malstil har blitt brukt som defacto-standard for bedriftsnettsteder, og det er en trend som ikke viser tegn til å bremse. Som profesjonell designer skylder du deg selv og kundene dine å ikke falle i fella av late designgenveier.

En av disse uheldige snarveiene har brukt store PNG-bilder for heltenheter øverst på siden (eller hvor som helst ellers, men det er der du vanligvis finner dem). Nå sier det seg selv at du aldri skal gjøre dette, noen gang, selv om du trenger transparente seksjoner i bildet.

Her er det grunnleggende du bør huske på når du lager det mesterverket:

  • Bruk store bilder sparsomt om i det hele tatt

Store bilder er en forferdelig idé fordi jo større bildet er, jo lenger tid tar det å laste. Nå er det noen forskjellige teknikker du kan bruke for å få store bilder til å fungere langt mer effektivt, men før vi kommer inn på det, la oss bare si at du burde bruke mindre bilder mesteparten av tiden, og spare store bilder for når de er virkelig behov.

  • Angi PPI / DPI-verdien på riktig måte

Avhengig av hvilken grafikkredigerer du bruker, kan det vise verdier for DPI eller PPI. Det siste er bedre, fordi det indikerer at grafikkredigeringsprogrammet er designet for nettbruk i stedet for utskrift. Problemet med å endre DPI i noen versjoner av PhotoShop er at de ikke bare justerer DPI, men også de fysiske dimensjonene til bildet ditt. Dette er ikke et problem i den nyeste versjonen av PhotoShop (som bruker PPI), så hvis du bruker en eldre versjon, er det på tide å oppgradere. Eller bruk GIMP i stedet.

  • Del store bilder

Det er her magien starter. Du vil finne mange som forteller deg at det å skive bildene dine ikke forbedrer lastetidene fordi du fremdeles laster ned det samme antallet byte, og all forbedring er bare psykologisk. Disse menneskene bruker den late versjonen av skive av bilder, så de vet ikke de sanne mulighetene.

Etter å ha skåret bildet, har du sjansen til å optimalisere det. Antar at det originale bildet var i PNG-format, kan du nå konvertere alle ikke-transparente deler til JPG-format, og lagre mange byte, og etterlate de delene som krever transparens som PNG-bilder.

Deretter kan du spille med komprimeringsnivået til hver enkelt skive til den skiven er perfekt optimalisert. Den samlede effekten av denne optimaliseringen kan resultere i besparelser på mer enn 50% sammenlignet med det opprinnelige uoptimerte bildet.

Video kan også optimaliseres

Kunsten til videokomprimering er avhengig av to ting: målformatet og kodeken du bruker til koding. Hvilket format du velger, avhenger helt av dine behov. Generelt, hvis du trenger høy kvalitet, vil MP4 med H.264-koding gi den beste kvaliteten ved høy komprimering, men når du ikke trenger den høye kvaliteten, gir WebM og FLV mindre filstørrelser. Programvaren for videoredigering kan fremdeles tilby FLV som et alternativ, men det anbefales ikke å bruke dette formatet.

Hvis du trenger DVD-kvalitet, vil MP4 med H.264-koding gi utmerkede resultater, men kommer på bekostning av å være en heftig nedlasting. For streaming av video gir WebM mye bedre komprimering. Problemet er at ikke alle mobile operativsystemer støtter WebM ennå (de burde, men de ser ut til å ha en eller annen gal grunn til ikke å gjøre det, muligens etter mobilutviklerens gylne regel: du skal bry deg og forvirre kunden din så mye du kan).

Bør du bruke MPEG-4-kodeken i stedet for H.264 med MP4-videoer? Vanligvis ikke, fordi det resulterer i større filstørrelser på samme kvalitetsnivå. Men hvis videoen din vil ha små fysiske dimensjoner, og du vil ha perfekt overføring av videoen for streaming, er MPEG-4 en god kodek fordi den har innebygd feilretting for å sikre dataintegritet.

Hva med WMV? Vel, dette er en spesiell sak. Det gir tilnærmet samme videokvalitet som MP4, men med enda bedre komprimering. Ulempen her er at Mac- og iOS-brukere bare kan se videoen din hvis de bruker en betalingsvare-videokonverterer, som introduserer en forsinkelse i avspillingen, som er akkurat det vi prøvde å unngå i å optimalisere siden vår.

WMV-filer har ingen problemer for Android-, Windows- eller Linux-brukere. Men med 12.5% av Internett-fellesskapet som bruker Apple-enheter, må du bestemme om det er verdt å bry dem. Personlig vil jeg ikke anbefale deg å gjøre det bare for å få en raskere lastetid.

Og til slutt, fordi det er internettvideo, hvis du ikke tillater avspilling på fullskjerm eller teatermodus, krympe den fysiske størrelsen på videoen ned til størrelsen du vil vise på siden din, og se hvor mange byte du kan lagre .

Bogdan Rancea

Bogdan er et grunnleggende medlem av Inspired Mag, etter å ha opparbeidet seg nesten 6 års erfaring i løpet av denne perioden. På fritiden liker han å studere klassisk musikk og utforske billedkunst. Han er ganske besatt av fixies også. Han eier 5 allerede.