Guide till en snabbare WordPress-sida

Ni har frågat och vi har lyssnat. Vår tidigare “Guide till en säkrare och snabbare WordPress-sida” är ett av våra mest lästa, uppskattade och länkade inlägg. Men det har snart två år på nacken och mycket har hänt sedan dess. Det är därför dags för en uppföljning och revidering av vår tidigare guide.

Snabbare WordPress hos FS Data

Precis som tidigare så är det här en praktisk guide som utgår från en riktig optimering av en WordPress-sida. Förra gången handlade det om min egen blogg, denna gång har jag optimerat hemsidan för Svenska Saabklubben (som för en tid sedan flyttade från Drupal till WordPress).

Förra gången inkluderade vi även tips om hur man får en säkrare WordPress-sida. Denna gång ligger fokus enbart på hastigheten, men även säkerheten är viktig så läs (och följ) gärna inledningen av vår tidigare guide likaså.

Denna guide visar hur man får en så snabb WordPress-sida som möjligt hos ett webbhotell. Om man har en server eller VPS rekommenderas vår “Guide till en blixtsnabb WordPress-server“. Vi utgår från ett helt vanligt webbhotell hos FS Data och fokuserar på en så enkel optimering som möjligt, främst med hjälp av ett antal WordPress-tillägg.

Tanken är att alla, oavsett kunskapsnivå, ska kunna få en så snabb WordPress-sida som möjligt.

Hur viktigt är det med en snabb hemsida?

En snabb hemsida är en bra hemsida, både för besökare och sökmotorer.

Ett flertal undersökningar visar att besökare inte orkar vänta mer än ett par sekunder på att en hemsida ska ladda. De lämnar långsamma sidor och återkommer inte. Google och andra sökmotorer prioriterar snabba hemsidor (ger dem bättre positioner).

För att hårddra det hela: hellre en snabb hemsida, med viss nedtid, än en långsam och alltid tillgänglig hemsida.

Dags att snabba upp WordPress

I denna guide så utgår vi från att man har en WordPress-sida installerad och klar, gärna med en del material (sidor, inlägg, bilder osv). Om du inte har kommit så långt så har vi en utmärkt guide till hur man installerar WordPress. Vi kommer främst att snabba upp vår hemsida med olika tillägg, men först ska vi förbereda vår hemsida en aning.

– GTmetrix

Vi börjar med det viktigaste, ett verktyg för att mäta hastigheten på hemsidan. En av våra favoritverktyg för detta är webbtjänsten GTmetrix. Börja med att besöka deras hemsida och kontrollera din hemsida.

Är resultatet nedslående? Oroa dig inte, det kommer snart att bli bättre.

– PHP 5.5

Ett av de bästa sätten att hålla en hemsida så snabb som möjligt, det är att använda så uppdaterade serverprogram som möjligt. FS Data erbjuder bl a den senaste och snabbaste versionen av PHP, version 5.5. Logga bara in i vår kontrollpanel och gå in under “Hemsida” > “PHP” för att aktivera PHP 5.5.

– Uppdatera .htaccess

Även om mycket går att ordna i WordPress med olika tillägg så är vissa saker enklare att lösa direkt på serversidan. För att få till ordentlig komprimering, utgångstiden på vissa filer samt för att sätta vissa headers rätt så lägger vi in lite kod i .htaccess-filen som ligger i hemkatalogen för WordPress på webbservern.

Anslut till hemkatalogen för din WordPress-sida med ett FTP-program och leta reda på en fil som heter “.htaccess” (det är en dold fil, så du kan behöva välja att visa dolda filer i inställningarna för ditt FTP-program). Öppna denna fil och lägg in följande kod i slutet på filen:

Uppdatering 2014-05-21: FS Datas webbhotellspaket erbjuder stöd för komprimerade hemsidor redan från början. Nedanstående .htaccess har anpassats därefter. Läs gärna detta inlägg för mer information: Snabbare hemsidor med komprimering.

# WordPress-optimering från blogg.fsdata.se/

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>

<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

Glöm inte bort att spara och ladda upp filen ordentligt.

Så, nu är det dags att börja installera och konfigurera lite WordPress-tillägg.

– WP Super Cache

Ett bra cachetillägg är grundstenen i varje optimerad WordPress-sida. WordPress är en dynamisk hemsidelösning där innehållet (sidor, inlägg osv) genereras från en databas. Detta kräver att PHP-kod exekveras och att databasanrop utförs, vilket är tidskrävande. Med ett cachetillägg så genereras innehållet i förväg, så att det bara behöver levereras till hemsidebesökarna som vanlig (statisk) HTML-kod.

Det finns ett antal olika cachetillägg för WordPress, men favoriten för undertecknad är WP Super Cache. Detta beroende på att det fungerar i de flesta servermiljöer (webbhotell), att det har en bra historik och att det uppdateras och förbättras flitigt. Andra populära cachetillägg är t ex W3 Total Cache och Hyper Cache.

Med WP Super Cache installerat och aktiverat, gå in under “Inställningar” > “WP Super Cache”. Under fliken “Avancerat”, bocka i alternativen “Använd mod_rewrite …”, “Komprimera sidor …”, “Cacha inte sidor för kända användare” och “Clear all cache when a post or page is published …”. Klicka sedan på knappen “Uppdatera status”. När sidan har laddat om, klicka på knappen “Uppdatera Mod_rewrite reglerna”. Under rubriken “Utgångstid & upprensning”, ange 604800 i rutan för “Cache Timeout” och klicka på knappen “Ändra utgång”.

Gå sedan in under fliken “Förladda” och välj att uppdatera förladdade cachefiler var 60 minut. Bocka i “Förladdningsläge” och klicka på “Uppdatera inställningar”. Genom att förladda samtliga sidor på din hemsida så förblir de snabba, oavsett vilken sida som dina besökare (eller sökmotorerna) råkar hitta. Detta är väldigt bra för sökresultatet i Google.

– EWWW Image Optimize

Av de element som en hemsida består av så är det bilderna som brukar vara störst och därmed även bidrar mest till en långsam hemsida. Många bildhanteringsprogram erbjuder möjlighet till komprimering (förminskning) av bilder för webben, men ett enklare alternativ är att använda ett WordPress-tillägg för detta, såsom EWWW Image Optimize.

I vår tidigare guide så rekommenderade vi tillägget WP Smush.it. Det är fortfarande ett bra tillägg, men EWWW Image Optimize erbjuder en bättre komprimering, på ett smartare sätt. Medan WP Smush.it arbetar mot Yahoo’s servrar så utför EWWW Image Optimize komprimeringen via den server som hemsidan ligger på. Det är avsevärt snabbare, men kräver att man har stöd för de bibliotek/funktioner som EWWW Image Optimize kräver (vilket man givetvis har med webbhotell hos FS Data). Om EWWW Image Optimize inte fungerar, använd WP Smush.it.

Installera och aktivera EWWW Image Optimize. Gå sedan in under “Media” > “Bulk Optimize” och klicka på “Start optimizing”. Låt optimeringen köra klart. Därefter kommer alla nya bilder som laddas upp att bli optimerade automatiskt.

– Autoptimize

En hemsida består av rätt många element (bilder, texter, script osv) nuförtiden. Ju fler element man har, desto fler anslutningar behöver en webbläsare öppna (starta, genomföra, stänga, starta, genomföra, stänga osv). Detta leder naturligtvis till en långsammare hemsida.

Autoptimize är ett tillägg som sammanfogar, förminskar, komprimerar och flyttar script och stilmallar (CSS) på väldigt bra sätt. Det är enkelt att använda, men kan samtidigt – beroende på vad man använder för tema och andra tillägg – ställa till med rätt stora problem. Se därför till att först kontrollera att din hemsida och dess funktioner fungerar ordentligt innan du installerar detta tillägg.

När Autoptimize är installerat och aktiverat, gå in under “Inställningar” > “Autoptimize” och bocka i samtliga “Optimize”-alternativ (HTML, Javascript och CSS). Nu testar du din hemsida och ser vad som händer. De flesta webbläsare har inbyggda funktioner (eller via tillägg) för felsökning av hemsidor. Använd dessa för att avgöra t ex vilket/vilka script som inte fungerar och exkludera dem under “Exklude scripts from autoptimize”-rutan.

Autoptimize fungerar väldigt bra med WP Super Cache. Tänk bara på att även tömma cachen när du ställer in denna optimering, via knappen “Save changes and Empty Cache” längst ner under “Inställningar” > “Autoptimize”. Exakt hur mycket man kan optimera med detta tillägg beror som sagt på aktuellt tema/övriga tillägg, i slutändan är det upp till dig att testa dig fram med inställningarna för Autoptimize.

– JS & CSS Script Optimizer

JS & CSS Script Optimizer är ett bra komplement till Autoptimize, för ytterligare optimering av Javascript och CSS. Installera och aktivera detta tillägg, gå sedan in under “Inställningar” > “Script Optimizer”. Bocka i “Enable plugin”, välj “Combine & Move all JavaScripts to the bottom” och klicka på knappen “Save options” längst ner.

Även detta tillägg kan orsaka lite oreda, beroende på tidigare teman/tillägg. Så testa dig fram till ett bra resultat här.

– AddThis Share

En snabb hemsida i sig är inte tillräckligt för att attrahera besökare. Det är likaså viktigt att enkelt kunna sprida, eller länka, hemsidan till olika sociala nätverk såsom Facebook, Twitter, Google+ osv. Det är dock vanligt att WordPress-tillägg för sociala nätverk har en negativ inverkan på hemsidans hastighet, tack vare dålig optimering och inkludering av många externa element (script).

Om man ändå vill ha ett tillägg för detta så kan vi rekommendera AddThis Share. Av de sociala nätverks-tillägg som vi har testat så har detta tillägg minst negativ inverkan på hastigheten.

När inlägget är installerat och aktiverat så hanteras det under “Inställningar” > “AddThis Share”. Där kan det vara en bra idé att enbart visa de mindre ikonerna t ex enbart i botten av varje inlägg/sida. En annan fördel med AddThis är att man kan skapa ett kostnadsfritt konto hos dem och få mer detaljerad statistik om tilläggets användning.

– 2012.FFWD Twenty Twelve

Avslutningsvis så vill vi tipsa om ett child theme för WordPress-temat Twenty Twelve. Twenty Twelve var som bekant standardtemat för WordPress tidigare och även om det är väldigt trevligt ur ett användarperspektiv, med tydlig layout och bra stöd för responsivitet, så är det inte optimerat för hastighet. Twenty Twelve i dess grundutförande innehåller alldeles för många element och tungladdad typografi.

För att snabba upp Twenty Twelve så kan man använda ett child theme som heter 2012.FFWD Twenty Twelve. Det är bara att ladda ner detta child theme, packa upp det på din dator, ladda upp det till /wp-content/themes/ och aktivera det i WordPress under “Utseende” > “Teman”. Utseendemässigt och funktionellt sett så skiljer sig dessa teman ytterst lite från varandra, men om man ser till hastigheten så är skillnaden markant.

– GTMetrix (igen)

Om du har tagit dig ändå hit så har du garanterat en klart snabbare WordPress-sida än tidigare. Belöna dig själv med att besöka GTMetrix hemsida igen och kontrollera din sida på nytt. Om allt har gått bra så bör du se ett resultat liknande detta:

Saabklubben.se hos GTmetrix

Faktum är att allt över 95 % i “Page Speed Grade” är ett väldigt bra resultat när det gäller optimering av hemsidor.

Har du några frågor på detta? Lämna då gärna en kommentar här nedan!

You Might Also Like
28 Comments
  • Patrik
    says:

    Är det här gamla koden ni skrev här förut?

    # WordPress-optimering från blogg.fsdata.se/

    mod_gzip_on Yes

    mod_gzip_dechunk Yes

    mod_gzip_keep_workfiles No

    mod_gzip_can_negotiate Yes

    mod_gzip_add_header_count Yes

    mod_gzip_send_vary Yes

    mod_gzip_command_version ‘/mod_gzip_status’

    mod_gzip_min_http 1000

    mod_gzip_minimum_file_size 300

    mod_gzip_maximum_file_size 512000

    mod_gzip_maximum_inmem_size 60000

    mod_gzip_handle_methods GET POST

    mod_gzip_temp_dir /tmp

    mod_gzip_item_include file .html$

    mod_gzip_item_include file .php$

    mod_gzip_item_include file .pl$

    mod_gzip_item_include file .rb$

    mod_gzip_item_include file .py$

    mod_gzip_item_include file .cgi$

    mod_gzip_item_include file .css$

    mod_gzip_item_include file .js$

    mod_gzip_item_include mime ^application/javascript$

    mod_gzip_item_include mime ^application/x-javascript$

    mod_gzip_item_include mime ^text/.*

    mod_gzip_item_include mime ^httpd/unix-directory$

    mod_gzip_item_include handler ^cgi-script$

    mod_gzip_item_include handler ^server-status$

    mod_gzip_item_include handler ^server-info$

    mod_gzip_item_include handler ^application/x-httpd-php

    mod_gzip_item_exclude mime ^image/.*

    ExpiresActive On

    ExpiresByType image/jpg “access plus 1 year”

    ExpiresByType image/jpeg “access plus 1 year”

    ExpiresByType image/gif “access plus 1 year”

    ExpiresByType image/png “access plus 1 year”

    ExpiresByType text/css “access plus 1 month”

    ExpiresByType application/pdf “access plus 1 month”

    ExpiresByType text/x-javascript “access plus 1 month”

    ExpiresByType application/x-shockwave-flash “access plus 1 month”

    ExpiresByType image/x-icon “access plus 1 year”

    ExpiresDefault “access plus 2 days”

    Header append Vary: Accept-Encoding

    # BEGIN WordPress

    RewriteEngine On

    RewriteBase /

    RewriteRule ^index.php$ – [L]

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule . /index.php [L]

    # END WordPress

  • Patrik
    says:

    Står redan

    RewriteEngine On

    RewriteBase /

    RewriteRule ^index.php$ – [L]

    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule . /index.php [L]

    sedan en gammal flytt. Ska jag ta bort det?

    • Karina
      says:

      Och ligger ändringarna ovan kvar efter en uppdatering att temat?

      Och vad innebär: “FS Datas webbhotellspaket erbjuder stöd för komprimerade hemsidor redan från början. Nedanstående .htaccess har anpassats därefter. ” Behöver man inte klistra in den där koden då?

      • sulo
        says:

        Om man vill göra ändringar i ett tema så rekommenderas ett child theme. Vid en uppdatering av det huvudsakliga temat kvarstår de ändringar man har gjort i sitt child theme. Så det är väldigt bra att använda child theme och att validera sin kod.

        Vi uppdaterade .htaccess-innehållet för att passa användare med våra webbhotellspaket. Denna kod var avsevärt längre tidigare (innan vi införde stöd för komprimerade sidor på servernivå). Du ska med andra ord klistra in den där koden.

  • Lari Salminen
    says:

    Jag har följt stegen som finns gällande WP Super Cache, och får nu detta meddelande:

    Zlib utdatakomprimering aktiverad!

    PHP komprimerar datat som sänds till besökare på din webbsida. Det rekommenderas att stänga av det eftersom tillägget sparar det komprimerade utdatat en gång i stället för att komprimera samma sida om och om igen. Se också #21 på felsökningssidan. Se denna sida för instruktioner hur du ändrar din php.ini.

    Är det något jag inte behöver bry mig om eller?

  • Petter Knutsson
    says:

    Nu har ju det här inägget ett par månader på nacken, men en dialog har dykt upp i WP Super Cache på sistone som säger:

    “Zlib utdatakomprimering aktiverad!
    PHP komprimerar datat som sänds till besökare på din webbsida. Det rekommenderas att stänga av det eftersom tillägget sparar det komprimerade utdatat en gång i stället för att komprimera samma sida om och om igen. Se också #21 på felsökningssidan. Se denna sida för instruktioner hur du ändrar din php.ini.”

    Jag antar att detta är något som ni aktiverat på FS Data för samtliga kunder? Om ja, har du någon rekommendation i förhållningssätt till detta?

  • Patrik
    says:

    STORT TACK för det här inlägget!

    Uppdaterade .htaccess och installerade wp super cashe och gick från:

    86% – B och 69% – D 5,27s requests: 55

    till

    97% A och 99% A 0,65s requests: 1

    Oväntat bra resultat. Lite rädd att jag gjort något fel dock eftersom det blir så sinnessjukt mycket bättre, hehe.

    Är dock på F på Page speed > Enable gzip compression:

    Compressing the following resources with gzip could reduce their transfer size by 1.7KiB (19% reduction).

    Vad betyder det?

    • Patrik
      says:

      Gjorde samma sak på andra sajter och fick inte alls samma fantastiska resultat. Sajterna är ganska lika så förstår inte alls vad som är skillnad. Blir inte klok på det här. 🙂

      • sulo
        says:

        Patrik, det är lite svårt att ge svar på detta utan att se vad du får för resultat i GTmetrix. Har du någon länk till dina tester?

  • BeRKA
    says:

    Har nu tagit mig tid med att uppdatera min htaccess (för min sida zho.berka.com) enligt ert förslag.

    Av de rapporter jag fått från GTMetrix så får jag bättre grade, men sämre laddningstid. (Har gjort flera försök) Om jag tar bort stycket med gzip så sjunker laddningstiden dock något (jämfört med vad jag hade innan jag la till detta i htaccess). Kan det vara så att gzip är långsam på servern eller för GTMetrix, eller var det något temporärt?

    Jag fick ett bra tips av GTMatrix. Jag har en facebook widget, och den visar bilder utan storleksaangivelse. Jag halverade antalet bilder. Då blev det lite bättre.

    Jag ser även att GTMatrix ger felaktiga tips. Den påstår att jag borde krympa min header i storlek. Men för temat 20-11 så ska header vara 1000 pixlar, och det är det den visar i rätt skärmupplösning. GTMatrix tycker att den kan minskas till 964 pixlar.

    Jag vill inte använda en cache plugin. Jag har tidigare gjort det men då sett att det blivit konflikt med Wordfence. Vad som händer är att blockerade sidor cachas och att ej blockerade användare får se dessa. Jag har hellre säkerhet än snabbhet. Ni kanske vet något annat bra sett att kombinera både säkerhet och snabbhet?

    • sulo
      says:

      Tack för din kommentar!

      Att laddningstiden blir längre med gzip låter väldigt konstigt. Testar du hela tiden från samma server? Om du registrerar ett (kostnadsfritt) konto hos GTMetrix så kan du t ex välja att testa enbart från deras server i London. Gzip tar knappt några serverresurser men kan minska uppåt 70 % av storleken på CSS och HTML-filer.

      Att du får ett fel i GTMetrix vad gäller din headerbild beror på att temat är responsivt. GTMetrix har lite svårt för att hantera responsiva bilder. Så kör på den storlek som rekommenderas för ditt tema.

      Känner inte igen problemet med Wordfence och cacheplugins. Använder personligen WPSC och Wordfence på sulo.se utan några problem. Ett alternativ kan annars vara att exkludera specifika sidor/mappar från cachen, vilket man kan göra i WPSC.

  • Stefan Nilsson
    says:

    Trevligt. Lyckades gå från 6.72s till 2.95s. Mycket p.g.a. att jag tog bort två delningsplugin och ersatte dessa med AddThis Share. Är inte helt nöjd och tror att jag kan plocka bort ytterligare laddningstid om jag får bort all väntetid som skapas när man försöker hämta flera bilder samtidigt. Gissningsvis sköts detta bäst genom att få bilderna på en subdomän. Frågan är hur jag gör det i praktiken?

Lämna ett svar