Fixa problem med prestanda på långsamma webbplatser

Om din webbplats rör sig som en av de doven från DMV i Zootopia finns det sätt du kan fixa vad som bromsar det. Att räkna ut vad som orsakar problemet är halva striden, så när du har isolerat orsakerna kommer du åtminstone ha svaren på att lösa problemet.

Hosting av låg kvalitet är den mest troliga syndaren

När det gäller webbhotell betyder begreppet låg kvalitet inte alltid samma sak som det gör i andra sammanhang. Till exempel är det pris du betalar för webbhotell inte alltid en korrekt återspegling av kvaliteten du kan förvänta dig. Tjänstens popularitet är inte heller eller hur känt varumärket är.

Faktum är att några av de mest populära värdmärkena är de värsta valen, helt enkelt för att alltför många använder dem. Det beror lite på kvaliteten på deras infrastruktur. Om de investerar ordentligt i sin teknik kanske du inte får några betydande prestationsproblem. Å andra sidan kanske du delar en enda server med hundratals andra webbplatser, och problemet kommer att öka när lagringskapaciteten på hårddisken fortsätter att växa.

Så i den situationen är det möjligt att byta till en mindre, mindre känd webbhotell med bra teknik kan vara ett bättre val. Om du gör detta kan det också innebära att du får mer personlig kundservice på en högre kvalitetsnivå än du får från en behemoth. Det är värt att tänka på, och det är lätt att testa genom att bara köpa ett månads abonnemang på den nya värden och benchmarka prestandan mot din befintliga webbplats.

Använd din F12-nyckel

De flesta webbläsare är inställda på att få sin felsökningskonsol åtkomlig via F12-tangenten, och din är sannolikt inte ett undantag. Och om man talar om undantag är det ganska mycket det du letar efter, eller för att vara exakt, fel i din JavaScript-kod som kastar undantag och som påverkar prestanda.

Du hittar dessa fel både i din egen kod och i importerade kodbibliotek som jQuery. Bara för att jQuery är stort och populärt betyder inte att det är felfri. Här är ett exempel på den typ du letar efter:

De fel som är markerade med blått är bara CSS-fel och du kan i allmänhet förvänta dig att se de på grund av mängden skymning som utvecklare måste göra när du bygger formatmallar, helt enkelt för att det fortfarande inte finns en enda standard som har antagits i alla webbläsare. De borde normalt inte påverka prestanda om du inte använder många animationer eller transistionseffekter.

Men det felet som markeras med orange är ett JavaScript-fel, och inte bara det, i det här fallet är det jackpotten eftersom det specifikt säger att det här felet kommer att göra att koden körs mycket långsamt.

Få gratis råd från Google

Visste du att Google kan analysera din webbsida gratis och ge dig tips om hur du löser problem? Allt du behöver göra är att besöka Googles sida för sidhastighetsinsikter och ange webbadressen till den sida du vill analysera.

Det kan verkligen inte vara lättare, men du kanske inte nödvändigtvis vill följa alla deras råd. Googles system är bra på att ta reda på vad som kan bromsa din sida, men vissa korrigeringar kanske inte löser så många problem som de skapar.

Helst vill du se poäng över 85. Även om ingen vet med säkerhet, anses sidläsningstider allmänt ha ett betydande inflytande på din sidrankning i Google. Fortala inte om din webbplats inte är där uppe i den gröna zonen, eftersom många stora webbplatser inte får fantastiska poäng.

Några anmärkningsvärda exempel inkluderar:

  • 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)

Inget av dessa exempel är egentligen en ursäkt för att låta din egen webbplats fungera dåligt, men de bevisar att en trög webbplats inte nödvändigtvis är synonymt med misslyckande.

Använd bilder korrekt

Om någon skulle veta rätt bildformat att använda och när, borde det vara formgivare, eller hur? Men förvånansvärt verkar det ganska mycket av du inte vet, eller när du gör det, tror du att det inte spelar någon roll. Nåväl här är nyheterna: det spelar ingen roll, hela tiden.

Detta problem har tagit fart sedan en viss mallstil har antagits som defacto-standarden för affärssidor, och det är en trend som inte visar några tecken på att sakta ner. Som professionell designer är du skyldig dig själv och dina kunder att inte falla i fällan med lata designgenvägar.

En av dessa olyckliga genvägar har använt stora PNG-bilder för hjälteenheter högst upp på en sida (eller någon annanstans, men det är där du normalt hittar dem). Det säger sig självklart att du aldrig ska göra det någonsin, även om du behöver transparenta sektioner i bilden.

Här är de grunder som du bör tänka på när du skapar det mästerverket:

  • Använd stora bilder sparsamt om alls

Stora bilder är en fruktansvärd idé eftersom ju större bilden är, desto längre tid tar det att ladda. Nu finns det några olika tekniker du kan använda för att få stora bilder att fungera mycket mer effektivt, men innan vi går in på det, låt oss bara säga att du borde använda mindre bilder för det mesta och spara stora bilder för när de är verkligen behövs.

  • Ställ in PPI / DPI-värdet på rätt sätt

Beroende på vilken grafikredigerare du använder kan den visa värden för DPI eller PPI. Det senare är bättre, eftersom det indikerar att din grafikredigerare är designad för webbanvändning istället för utskrift. Problemet med att byta DPI i vissa versioner av PhotoShop är att de inte bara justerar DPI utan också de fysiska dimensionerna på din bild. Detta är inte ett problem i den senaste versionen av PhotoShop (som använder PPI), så om du använder en äldre version är det dags att uppgradera. Eller använd GIMP istället.

  • Skär stora bilder

Det är här magin börjar. Du hittar många som säger att skivning av dina bilder inte förbättrar laddningstiderna eftersom du fortfarande laddar ner samma antal byte och varje upplevd förbättring är bara psykologisk. Dessa människor använder den lataste versionen av bildskärning, så de vet inte de verkliga möjligheterna.

När du har skuren din bild har du chansen att optimera den. Anta att den ursprungliga bilden var i PNG-format, kan du nu konvertera alla icke-transparenta delar till JPG-format och spara en hel del byte, vilket lämnar de delar som kräver transparens som PNG-bilder.

Därefter kan du spela med kompressionsnivån för varje enskild skiva tills den skivan är perfekt optimerad. Den totala effekten av denna optimering kan resultera i besparingar på mer än 50% jämfört med den ursprungliga ooptimerade bilden.

Video kan också optimeras

Konsten till videokomprimering förlitar sig på två saker: målformatet och codec du använder för kodning. Vilket format du väljer beror helt på dina behov. I allmänhet, om du behöver hög kvalitet, MP4 med H.264-kodning ger den bästa kvaliteten vid hög komprimering, men när du inte behöver den höga kvaliteten, ger WebM och FLV mindre filstorlekar. Din videoredigeringsprogramvara kan fortfarande erbjuda FLV som ett alternativ, men det rekommenderas inte att använda detta format.

Om du behöver DVD-kvalitet kommer MP4 med H.264-kodning att ge utmärkta resultat, men kommer till en kostnad för en rejäl nedladdning. För streaming av video ger WebM mycket bättre komprimering. Problemet är att inte alla mobila operativsystem stöder WebM ännu (de borde, men de verkar ha någon galen anledning att inte, eventuellt följa mobilutvecklarens gyllene regel: du ska besvär och förvirra din kund så mycket du kan).

Ska du använda MPEG-4-codec istället för H.264 med MP4-videor? Vanligtvis inte, eftersom det resulterar i större filstorlekar på samma kvalitetsnivå. Men om din video kommer att ha små fysiska dimensioner, och du vill ha perfekt överföring av videon för strömning, är MPEG-4 en bra codec eftersom den har inbyggd felkorrigering för att säkerställa dataintegritet.

Vad sägs om WMV? Det här är ett speciellt fall. Det ger praktiskt taget samma videokvalitet som MP4, men med ännu bättre komprimering. Nackdelen med detta är att Mac- och iOS-användare bara kan visa din video om de använder en ljudprogram omvandlare, vilket innebär en försening i uppspelningen, vilket är exakt det vi försökte undvika när vi optimerar vår sida.

WMV-filer har inga problem för Android-, Windows- eller Linux-användare. Men med 12.5% av internetgemenskapen som använder Apple-enheter, måste du bestämma om det är värt att besvära dem. Personligen skulle jag inte rekommendera att du gör det bara för att få en snabbare laddningstid.

Och slutligen, eftersom det är internetvideo, om du inte tillåter uppspelning på helskärm eller teaterläge, krympa den fysiska storleken på videon till den storlek du ska visa på din sida och se hur många byte du kan spara .

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.