WPO: Lägg stilmallarna i HEAD och “sänk” laddningstiden

Jag har tidigare skrivit lite om Web Performance Optimization (WPO) och jag är övertygad om att alla inser vikten av detta. Tänkte i detta inlägg, och även i några framtida, komma med några konkreta tips på hur man kan jobba med webbplatsen för att optimera laddningstiderna.

De smarta forskarna på Yahoo! upptäckte under sina prestandatester att om man flyttar stilmallarna upp till dokumentets <HEAD> så kan man få sidan att verka ladda snabbare. Detta är ju givetvis något av en standard idag, men alla kanske inte är helt med på varför. Genom att lägga stilmallarna i headern så tillåts nämligen sidan att laddas progressivt.

Vad betyder progressiv laddning?
Jo det betyder att vi vill att så fort det finns något att visa så skall webbläsaren visa det. Detta är speciellt viktigt om man antingen har mycket innehåll på en sida eller om man sitter på långsam internetuppkoppling. Vikten ligger i att ge användarna återkoppling om laddningsstatus på sidan vilket bevisats är av stor vikt för användarupplevelsen.  När sidan laddar progressivt så funkar alla element på sidan (huvud, meny, logga etc) som en visuell återkoppling på att sidan laddas korrekt och tillfredsställer förhoppnignsvis därmed den ivriga anvädnaren.

Skulle du fundera på att lägga stilmallarna i botten på sidan så kan detta avrekommenderas.  Dels för att W3C inte tycker att det är en bra idé men även för att detta hindrar många webbläsare (bland annat IE, surpirse) från att progressivt rendera sidan. Om sidan inte laddas progressivt så kommer användarna att sitta där med en blank skärm utan att veta vad som händer.

Summa summarum: Genom att lägga stillmallarna i headern så uppfattar användarna det som att sidan laddas snabbare och får även viseuell feedback om att sidan fakiskt laddas.

Related Posts Plugin for WordPress, Blogger...