Google klockar dig – optimering av laddningstider

by Mikael Uusitalo on 28/08/2010

Den senaste tiden så har jag arbetat med att optimera mina sidor så att de laddas och presenteras snabbare. Många gånger så har jag mer än halverat laddningstider och överförd data.

I början av april meddelade nämligen Google att laddningstider numera definitivt är en del av deras sökalgoritm och således något värt att beakta ur en SEO synpunkt.

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings.

I inlägget från Google i april så meddelas att detta endast gäller engelskspråkiga sidor. Hur det ligger till idag kan jag inte svara på eller har hittat någon information om. Men det finns inget som hindrar oss från att göra det redan idag. Inte minst för att förbättra användarupplevelsen (Aftonbladet någon?). I det här inlägget har jag därför tänkt att presentera hur jag arbetat med att förbättra hastigheten på ett antal av mina sidor, främst de med WordPress under huven. Testfallet i fråga är denna blogg.

Problemet

WordPress är en trevlig plattform om man snabbt vill sätta en hemsida online. Tyvärr saknar plattformen i sitt standardutförande riktigt utbyggd funktionalitet för att arbeta med prestandaoptimering. Det finns mycket att hämta i form av caching, Javascript och CSS kombinering (färre HTTP requests), minification av HTML och CSS samt gzipping (för att skyffla mindre data). Genom att identifiera flaskhalsar och applicera rätt lösningar så finns det således mycket att vinna.

Mäta

Innan man börjar att optimera så bör man självfallet mäta hur och vad som är problemet med ens hemsida. Lyckligtvis så behöver vi inte sitta med tidtagarur för att genomföra detta. Det finns verktyg att tillgå.

Google PageSpeed – Google Page speed är en Firefoxplug som graderar din hemsida utifrån en 100-gradig skala för hur väl du optimerat din hemsida för att nå snabbare laddningstider. Du får i en överskådlig lista möjliga problemområden och rekommendationer på vad du bör åtgärda.

Yahoo YSlow – Från Yahoo så kommer ett liknande verktyg som som Page speed. Här du blir du istället gradera från F till A, generellt och på specifika punkter. Jämfört med Page speed så ger dig Yslow dig även några hjälpmedel för att identifiera vilka komponenter som laddas på din hemsida.

Vilken du väljer av dessa två är mer av en smaksak. Jag personligen föredrar Page speed, mest för att det är ett verktyg från Google och det är mot dess sökresultat som jag optimerar.

WebpageTest – WebpageTest ger dig i ett diagram en överblick om hur din sida laddas och hur och vilka komponenter som tar längst tid. Du får även förslag på områden att optimera och förbättra.

Google Webmaster Tools – För dig med som använder Google Webmaster Tools så finns det numera en graf (under Labs -> Site Performance) som visar hur snabbt Google uppfattar att sidan laddas. Mycket värdefull data då det är mot Google som jag åter igen i huvudsak optimerar mina sidor.

Optimera i WordPress

Eftersom jag arbetar WordPress så finns det självfallet bra plugins för underlätta detta arbete. För just mina sidor har jag använt ett plugin som heter W3 Total Cache.  Enkelt att installera och flera (flest) möjligheter till specialanpassningar på ett stort antal områden och punkter.

W3 Total Cache improves the user experience of your blog by improving your server performance, caching every aspect of your site, reducing the download time of your theme and providing transparent content delivery network (CDN) integration.

Resultatet

Före implementation av Total Cache så ger Google Page speed oss 78 poäng av 100 möjliga. WebPagetest meddelar att sidan laddas på 1.77 sekunder. Total storlek uppgår till 120KB.

Efter implementation av Total Cache så ger Page speed oss 90 poäng av 100 möjliga. WebPagetest meddelar att sidan laddas på 1.33 sekunder, total storlek beräknas med all komprimering till 56KB. Det är en 25% förbättring i hastighet och en nära 50% förminskning av överförd data.

Övriga tips och tankar

Poängen ovan är alla “out of the box”, Total Cache har i princip bara installerats och aktiverats. Med ytterligare optimering så finns det säkerligen ännu mer att hämta för den som önskar och vill lägga ner tiden.

I YSlow från Yahoo så ingår det en trevlig funktion kallad Smush.it. Genom en optimering så kan Smush.it skala bort icke nödvändig data från bilder för att krympa dem. I det här fallet så kan en vända genom Smush.it spara så mycket som 10% av nuvarande totala bilddata.

Värt att notera att en stor del av mina hemsidor finns lokaliserade i webhotell utanför Sverige varför det finns anledning att tro att det finns ännu mer tid att tjäna på att ta hem dem.

Hur gör du? Vad är dina tips för att nå en snabb hemsida?

En kommentar

Awesome text!

*knäcka kommentarsoskulden* HÄHÄ!

by @ficklampa on 08/28/2010 at 11:31 pm. Reply #

Lämna din kommentar

Obligatorisk.

Obligatorisk. Publiceras ej.

Om du har en.