Vi har alla hört hur viktigt det är att ens hemsida laddar snabbt och de flesta har nog använt verktyg så som Pingdom, Google PageSpeed Insights, GTmetrix för att mäta hur snabbt ens sida laddar. Men hur många är det egentligen som förstår mätresultaten som dessa verktyg presenterar?
I detta blogginlägg tänkte jag på ett så pedagogiskt vis som möjligt gå igenom vad de vanligaste förbättringspunkterna egentligen betyder på ren svenska samt vad man kan göra åt dem.
Nu kör vi!
Innehållsförteckning:
- Reduce DNS lookups
- Make fewer HTTP requests
- Avoid URL redirects
- Add expire headers / Leverage browser caching
- Enable gzip compression
- Use cookie-free domains
- Eliminate render-blocking resources / Defer parsing of JavaScript
- Serve images in next-gen formats
Reduce DNS lookups
Varningen ”Reduce DNS lookups” beror på att det hämtas resurser från ett ganska stort antal olika domäner när man laddar en sida. Bakom varje domän finns det en IP-adress och första gången en domän anropas så görs en s.k. DNS lookup så att besökarens dator vet vilken IP-adress som ligger bakom varje domän.
Varje domän kräver en DNS lookup vilket tar lite tid att genomföra. Det man kan göra för att förbättra detta är att gå igenom vilka domäner det hämtas resurser ifrån när ens sida laddas och se om det finns något onödigt som man kan ta bort. Kanske har du något plugin som du inte längre använder som hämtar resurser från en CDN?
Make fewer HTTP requests
Varje gång någon besöker din hemsida så laddas det alltid flera olika filer som exempelvis bilder, JavaScript och CSS-filer. Varje gång en fil hämtas så skickas en s.k. HTTP request från din webbläsare till servern där filernas hämtas ifrån, och ju fler filer som hämtas desto längre tid tar en sida att ladda – därav rådet ”make fewer HTTP requests”.
Medan närapå alla hemsidor kräver ett flertal filer för att ens fungera så är det förstås inte bra om det är för många resurser som behöver hämtas hem. Detta trots det faktum att HTTP2, som är standard hos alla seriösa webbhotell idag, är betydligt effektivare på att hantera många requests.
En vanlig åtgärd för att minska antalet requests, förutom att gå igenom exakt vad som laddas och ta bort ev. resurser som man inte verkligen behöver, är att kombinera CSS och JS-filer med varandra hjälp av plugin så som exempelvis Asset CleanUp, WP Fastest Cache m.m.
Avoid URL redirects
Detta är en varning som visas då adressen som man försöker mäta vidarebefordrar besökaren till en annan adress, eller att resurser som hämtas från tredje part har pekats om.
För att försöka få bort denna varning så bör man först kontrollera att adressen man skrivit in är korrekt och att man inte blandat ihop https:// med http:// eller att man glömt ett ”/” på slutet av adressen. Det är också en bra idé att kontrollera så att kopplingar med trejde part så som t.ex. Google Analytics, supportchatt och andra plugins är uppdaterade och följer utvecklarens senaste anvisningar.
Add expire headers / Leverage browser caching
Expire headers är något som sätts utav en webbserver som talar om för alla besökare hur länge filer som hämtas bör sparas i besökares webbläsare. Om expire headers inte är satta rå riskeras varje fil hämtas på nytt vid varje sidvisning, därav uppmaningen ”add expire headers”.
Hur man åtgärdar detta beror på vilket webbhotell man har och hur deras servermiljö ser ut, men oftast görs det genom att modifiera sin .htaccess-fil eller installera ett plugin som gör jobbet åt en.
Tyvärr så är det inte sällan externa resurser från ex. Google och Facebook som inte cache:as i besökarens webbläsare och som sänker ens mätresultat i detta avseende, och externa resurser har man ingen möjlighet att påverka annat än att överväga att ta bort dem.
Enable gzip compression
Gzip är likt det i folkmun mer välkända zip en kompressionsteknik som gör filer mindre och därmed snabbare att ladda. Gzip-komprimering på en hemsida gör så att istället för att varje fil hämtas i klartext så komprimeras de först till gzip-format vilket gör att mängden data som måste hämtas vid varje besök blir mindre.
Då gzip-komprimering är något som görs på servernivå så är det likt expire headers något som hanteras olika beoroende på ens webbhotell, men oftast med hjälp av plugin eller manuellt ändrade av ens .htaccess-fil.
Use cookie-free domains
En cookie ä ren liten fil som hemsidor först skickar till besökarens dator, ofta för att kunna komma ihåg vem besökaren är och för att kunna servera skräddarsytt innehåll för varje besökare. Efter att en cookie har sparats så skickas sedan besökarens alla cookies för den domänen man besöker med vid varje request, något som förstås kräver viss extra bandbredd även om vi cookies vanligen är väldigt små.
Cookies är en nödvändighet för att saker som varukorgar och inloggningar ska kunna fungera, men vad det gäller hämtning av statiska filer så skickas besökarens cookies med helt i onödan och därför kan man snabba upp något genom att servera statiska filer så som bilder, JavaScript och CSS via en CDN med en annan domän som inte sparar några cookies.
Eliminate render-blocking resources / Defer parsing of JavaScript
Varningen “eliminate render-blocking resources” visas när du har JavaScript eller CSS-filer som förhindrar sidan att så snabbt som möjligt bli synlig i besökarens webbläsare. Viss JavaScript och CSS-kod är inte absolut nödvändig för att en hemsida ska kunna visas och därför är det bättre att icke obligatorisk kod laddas på ett sätt som inte blockerar sidan att renderas i en webbläsare.
Man kan göra så att JavaScript laddas på ett sätt som inte är ”render-blocking” genom att använda sig av ”async” eller ”defer”-attribut som talar om för webbläsare att inte vänta på JavaScript-filer innan andra saker kan laddas.
För att få bukt på det här problemet så finns det en mängd plugins till WordPress som kan hjälpa till, men man bör ha i åtanke att det kan krävas en hel del pillande och testande innan man hittat exakt vilka JavaScript man kan mixtra med utan att oväntade problem på hemsidan dyker upp. Så kom ihåg att testa noggrant!
Några plugins som är värda att kolla in är Speed Boster Pack, Autoptimize, Async JavaScript samt Humming Bird.
Serve images in next-gen formats
Sedan en väldigt lång tid tillbaka så har JPG varit det mest populära filformatet för bilder på internet. Det blev snabbt väldigt populärt då det levererade väldigt bra komprimering vilket gjorde bilder mindre i storlek och snabbare att ladda. Men sedan en tid tillbaka så finns det nu en konkurrent till JPG – närmare bestämt WebP.
WebP erbjuder ännu bättre komprimering än JPG och möjlighet att spara 25-35% i storlek med snarlik bildkvalité. Utöver bättre komprimering så har WebP även andra fördelar över JPG så som stöd för animationer och transparens.
Då WordPress (ännu) inte har inbyggt stöd för bilder i WebP-format så kräver det hjälp från plugin och webbserver för att få det att fungera. Vi på Templ.io har hjälpt flera av våra kunder att konfigurera och komma igång med pluginet WebP Express och kan rekommendera det.
Sammanfattning
Med den här artikeln hoppas vi att vi har bringat lite mer klarhet i de mätresultat som de populära verktygen presenterar och gett dig några konkreta lösningar på hur du kan snubba upp din hemsida.
Om ni kommer på flera termer gällande hastighet så tveka inte på att fråga oss i kommentarerna nedan.
