En snabb hemsida är som bekant en bra hemsida, för såväl besökare som sökmotorer.
Historiskt sett har optimering av hemsidor (dvs, arbetet med att göra en hemsida snabbare) främst handlat om att få ner storleken på bilder, videofilmer och liknande element. Nuförtiden handlar det dock mer om att få ner storleken på script och stilmallar (CSS). Dagens hemsidor består nämligen till allt större del av script och stilmallar.
– Vad består din hemsida av egentligen?
Du kan själv kontrollera vad din egen hemsida består av (i form av bilder, script och stilmallar). Med webbläsaren Firefox, gå in under ”Verktyg”, ”Webbutvecklare” och ”Nätverk”. Besök din hemsida och klicka på länken för ”Växla prestandaanalys” längst ner till höger i Nätverksfältet.
Av de två cirkeldiagram som du nu ser så är det den till höger, under rubriken ”Inaktiverad cache”, mest intressant. Där kan du tydligt se vad din hemsida innehåller i form av script (js), bilder (images), HTML, stilmallar (css) osv.
Här är ett exempel från en rätt så väloptimerad hemsida:
– Optimera dina stilmallar enkelt (med WordPress)
Nu ska vi visa hur man kan optimera sina stilmallar, med fokus på WordPress-baserade hemsidor. Man måste inte köra WordPress för att praktisera dessa tips, de hjälper även om man kör andra lösningar eller har en egenutvecklad hemsida, men vi kommer arbeta med ett specifikt WordPress-tillägg.
Vi börjar med att installera/aktivera WordPress-tillägget Autoptimize. Det är ett tillägg som vi har tipsat om tidigare, i vår guide till en snabbare WordPress-sida. Undertecknad har använt detta tillägg i flera års tid och även översatt det till svenska. Det är med andra ord ett väldigt bra tillägg.
Autoptimize hanteras under ”Inställningar” och ”Autoptimize”. Börja med att bocka i alternativen ”Optimera HTML-kod?” och ”Optimera CSS-kod?” och spara ändringarna med rätt knapp längst ner på sidan (välj knapp beroende på om du har ett cache-tillägg eller inte).
Nu har Autoptimize kombinerat alla stilmallar (med vissa undantag) på din hemsida till en enda optimerad fil. Om du kontrollerade innehållet på din hemsida med Firefox tidigare, testa gärna att göra det nu igen. Inte illa va?
Dags att gräva ner sig i de lite mer avancerade inställningarna. Klicka på knappen ”Visa avancerade inställningar” högst upp på sidan. Under ”CSS-alternativ” visas nu följande:
Här är en genomgång av dessa olika alternativ:
– Det första alternativet, ”Generera data: URI för bilder?”, innebär att mindre bilder infogas på hemsidan via CSS, istället för separata filer. Det fungerar inte för alla bilder, men testa gärna att aktivera detta och kontrollera hur hemsidan ser ut därefter.
– Alternativet ”Remove Google Fonts?” kan man använda om man har inbäddade typsnitt från Google, t ex i sitt tema, som man egentligen inte behöver. Det är inte tvunget, men innebär ofta en tydlig hastighetsförbättring (då hemsidan inte laddar in dessa externa filer från Google).
– Det tredje alternativet, ”Also aggregate inline CSS?”, bör man aktivera. Autoptimize optimerar som standard stilmallar som inkluderas externt, men med detta alternativ inkluderas (och optimeras) även stilmallar som är inbäddade i HTML-koden för sidan.
– Därefter behöver man välja mellan alternativen ”Inkludera och senarelägg inladdning av CSS?” och ”Inkludera all CSS”. I båda dessa fall bäddar Autoptimize in den optimerade stilmallen i HTML-koden för hemsidan. Det som skiljer dem åt är hur mycket av stilmallarna som inkluderas i HTML-koden.
– Har du besökt en hemsida där du märkt att sidan i princip ”väntar” på att få renderas/visas upp?
Detta kan man reglera genom att inkludera den del av stilmallen som krävs för att den första renderingen ska ske (above the fold) direkt i HTML-koden. Men hur avgör man vilken del av stilmallen som reglerar detta? Jo, med en svensk webbtjänst: Critical Path CSS Generator.
Besök Critical Path CSS Generator och ange adressen till din hemsida under ”Enter Page URL” samt klistra in din stilmall i fältet för ”Full CSS”. Du hittar din fullständiga (optimerade) stilmall i källkoden för din hemsida. Med Autoptimize heter stilmallen alltid ”autoptimize_” följt av slumpmässiga tecken och ”.css”.
Därefter klickar du på knappen ”Create Critical Path CSS”. Efter en stund visas ett fält med den del av stilmallen som krävs för att den första renderingen ska ske. Kopiera detta, återgå till inställningarna för Autoptimize, klicka på ”Inkludera och senarelägg inladdning av CSS?” och klistra in stilmallen i fältet där.
Om din hemsida inte har så många besökare och en rätt så liten stilmall så kan alternativet ”Inkludera all CSS” vara bättre här. Men överlag så brukar det första av dessa två alternativ vara bäst.
– Under det sista alternativet i Autoptimize kan man exkludera stilmallar från att optimeras. Om du upplever problem med stilmallen för en viss del av hemsidan eller specifika funktioner, inaktivera CSS-optimeringen i Autoptimize, kontrollera vilken stilmall det är som berörs och lägg till den här (och aktivera CSS-optimeringen i Autoptimize igen).
– Avslutningsvis
Om du följer denna guide, se då även till att testa din hemsida ordentligt också. Autoptimize har bra dokumentation och dess utvecklare är aktiv i supportforumet hos WordPress (så sök/ställ gärna frågor där).
Mycket av det vi gått igenom kan man även applicera för att optimera script. Man bör dock vara mer insatt i vilka funktioner som scripten på hemsidan hanterar innan man gör det. Det är därför vi inte har gått igenom scriptoptimeringen i Autoptimize här.
Om du har några frågor eller funderingar kring detta – eller tips på hur du själv arbetar med dina stilmallar – så får du gärna lämna en kommentar här nedan!