Guide – Sida 3

apr 03 2014

WP Super Cache vs. W3 Total Cache

WP Super Cache vs W3 Total Cache Vilket cache-tillägg är bäst för WordPress – WP Super Cache (WPSC) eller W3 Total Cache (W3TC)? Det är en fråga som delar lägret för WordPress-användare över hela världen. Det är WordPress-gemenskapens motsvarighet till Linux vs. Windows, Mac vs. PC, iPhone vs. Android osv.

Det är ingen hemlighet att undertecknad föredrar WPSC. Det är det cache-tillägg som vi har skrivit mest om här i vår blogg, bl a i vår tidigare guide till en snabbare WordPress-sida.

Men som med alla frågor så gäller det att ha ett öppet sinne för att hitta rätt svar.

Vi har därför installerat, konfigurerat och ingående testat både WPSC och W3TC. Tilläggen installerades på två olika webbplatser, med identiskt innehåll, hanterade av samma webbserver hos oss. Webbplatserna är konfigurerade på exakt samma sätt som när vi visade varför man ska köra PHP 5.5 (WordPress + WooCommerce).

Med andra ord är detta även en guide till hur man bäst optimerar WooCommerce på ett webbhotell. Två flugor i ett test. Men innan vi går in på testet så vill vi kort förklara hur dessa cache-tillägg fungerar.

WPSC vs. W3TC – introduktion

WP Super Cache

WPSC är ett av de äldsta och mest utvecklade cache-tilläggen för WordPress. Upphovsman till detta tillägg är Donncha Ó Caoimh, som numera arbetar för Automattic (företaget bakom WordPress). WPSC har laddats ner mer än 5 miljoner gånger från WordPress tilläggsdatabas.

WPSC är ett renodlat cache-tillägg, på så sätt att det fokuserar på att hantera statiska filer. Det har i sitt grundutförande inte lika många funktioner som W3TC.

W3 Total Cache

W3TC är ett yngre och mer modernt cache-tillägg och dess upphovsman heter Frederick Townes. W3TC har laddats ner mer än 3 miljoner gånger från WordPress tilläggsdatabas.

W3TC är mer än bara ett cache-tillägg. Förutom att hantera statistika filer så ingår även funktioner för minifiering av HTML, CSS och JS samt möjlighet att hantera sk. serverheaders (data som berättar för webbläsare hur en webbplats fungerar). W3TC är en mer heltäckande lösning än WPSC.

Med det förklarat, nu är det dags att installera och konfigurera dessa cache-tillägg.

WPSC vs. W3TC – konfiguration

Konfiguration av WP Super Cache + extra tillägg

WP Super Cache är installerat och konfigurerat enligt vår tidigare guide till en snabbare WordPress-sida. Det innebär att några extra tillägg är installerade, för att matcha de funktioner som ingår i W3TC. Av samma orsak har även några justeringar skett.

I .htaccess-filen har följande rad lagts till:

FileETag None

Sedan ersattes tillägget JS & CSS Script Optimizer med tillägget MnCombine. Båda tillägg gör nästan samma sak (optimerar CSS/JS), men MnCombine är ett mer stabilt tillägg (JS & CSS Script Optimizer kraschade WooCommerce).

MnCombine konfigureras under ”Tillägg” > ”Asset Combine” med alternativen ”Google Closure”, ”Compress CSS, Yes”, ”Mode, Production”, ”Force Combine, In the footer”. Under flikarna ”Javascript” och ”CSS” valde vi enbart att komprimera alla filer.

Konfiguration av W3 Total Cache

W3 Total Cache är installerat och konfigurerat enligt, mig veterligen, bästa praxis. Alternativen nedan är valda, utöver de inställningar som ingår från början. Konfigurationen av W3TC är rätt så omfattande, då alla funktioner ingår redan från början i detta tillägg.

Under ”General Settings” är följande alternativ aktiverade/valda:

Page cache, Enable. Page cache method, Disk: Enhanced.
Minify, Enable. Välj Auto.
Database Cache, Enable. Database Cache Method, Disk.
Object Cache, Enable. Object Cache Method, Disk.

Under ”Page Cache” är följande alternativ aktiverade/valda:

Cache front page, Cache feeds: …, Cache requests only for …, Don’t cache pages for logged in users
Cache Preload, Automatically prime the page cache

Under ”Minify” är följande alternativ aktiverade/valda:

General, Disable minify for logged in users
HTML minify settings, Enable. Inline CSS minification, Inline JS minification, Line break removal.
HTML & XML, Ignored comment stems: mfunc
JS minify settings, Enable. Embed type, ”defer”, Preserved comment removal
CSS minify settings, Enable. Preserved comment removal, Line break removal.

Under ”Database Cache” är följande alternativ aktiverade/valda:

Ignored query stems, _wc_session_

Under ”Browser Cache” är följande alternativ aktiverade/valda:

General, Set Last-Modified header, Set expires header, Set cache control header, Set entity tag (eTag), Set W3 Total Cache header, Enable HTTP (gzip) compression

Om du har några förslag till ändringar i ovanstående konfigurationer, både av WPSC och W3TC, lämna då gärna en kommentar till detta inlägg.

– Övrig (gemensam) optimering

Förutom ovanstående cache/optimeringsinställningar så har vi även optimerat bilderna på våra webbplatser med hjälp av tillägget EWWW Image Optimizer samt Mac-programmet ImageOptim. Bilderna är så optimerade de bara kan vara och båda webbplatserna har exakt samma bilder.

Båda webbplatser testades även ingående, så att funktionaliteten i WordPress och WooCommerce skulle bestå. Cache kan vara lite klurigt när man har en e-handelssida, men med ovanstående konfigurationer fungerade båda webbplatser fullt ut.

WPSC vs. W3TC – testresultat

Båda dessa webbplatser testades upprepade gånger med GTMetrix, Pingdom Website Speed Test, WebPageTest och Google PageSpeed Insights. Dessa tjänster testar webbplatser på lite olika sätt, men överlag så var de överens i sina bedömningar och betyg.

Då vi föredrar och främst använder GTMetrix så är det resultatet från den tjänsten som redovisas här.

Här är resultatet för optimeringen med WP Super Cache:

WP Super Cache, testresultat

Här är resultatet för optimeringen med W3 Total Cache:

W3 Total Cache, testresultat

Båda webbplatserna blev avsevärt snabbare med dessa cachetillägg, men det går inte att säga att det ena tillägget var snabbare än det andra. Det som främst skiljer tilläggen åt är hur de optimerar HTML/CSS/JavaScript.

WPSC med Autoptimize och MnCombine är bättre på denna optimering än W3TC och Minify. WPSC-lösningen genererar nämligen färre filer att ladda ner (via webbläsaren). Det var extra tydligt i Google PageSpeed Insights, som även testar webbplatser för mobila besökare.

Mobilt test, WPSC — Mobilt test, WP Super Cache

Mobilt test, W3TC — Mobilt test, W3 Total Cache

Att det mobila testet ändå gav ett så (relativt) lågt resultat för båda dessa webbplatser beror främst på att temat för webbplatserna bäddar in externa typsnitt (från Google), som orsakar viss fördröjning. Det går att optimera bort, men det fick kvarstå i detta test.

WPSC vs. W3TC – sammanfattning

Bortsett från de konkreta siffrorna här ovan är det svårt att objektivt testa dessa två cache-tillägg. Som jag skrev inledningsvis så har jag använt WPSC i många år, hos många olika webbhotell, med väldigt bra erfarenhet. WPSC gör sitt jobb och gör det väldigt bra, i kombination med några extra tillägg/konfigurationer.

W3TC är ett riktigt bra cache-tillägg det också. Det kan vara svårt att lära sig, det är fullt av reklam på den generella inställningssidan och .htaccess-filen som W3TC genererar är nästan dubbelt så stor som motsvarande .htaccess-fil för WPSC. Men W3TC är ändå riktigt, riktigt bra.

Det går inte att säga att WPSC är bättre än W3TC eller att W3TC är bättre än WPSC. I slutändan spelar det ingen större roll vilket cache-tillägg man väljer. Det viktigaste är snarare att man faktiskt använder ett cache-tillägg i WordPress. Detta oavsett hur stor eller liten webbplats man har.

Om du idag använder ett av dessa cache-tillägg så har du ingen anledning att byta tillägg. Om du däremot inte har ett cache-tillägg så är mitt råd följande:

– Om du vill ha en cachelösning med allt i ett, som kan vara lite svår att konfigurera, välj då W3TC.

– Om du vill ha en cachelösning som är lite enklare att hantera, men kräver extra tillägg, välj då WPSC.

Har du frågor om detta test? Har du egna erfarenheter eller åsikter om dessa cache-tillägg? Eller har du någon annan lösning som du föredrar? Lämna gärna en kommentar här nedan!

dec 20 2013

Enkel checklista för en ny hemsida

Att planera, utveckla och lansera en ny hemsida är lite som att bli förälder. Oavsett hur mycket man förbereder sig så kommer man alltid, oavsett, att råka ut för något oväntat. Men precis som med barn så kan man få hjälp även med hemsidor.

Checklista för hemsida Vi har rätt bra erfarenhet av det här med hemsidor. Vi vet vad man ofta gör för misstag, missar eller glömmer bort när en ny hemsida lanseras. Så vi har tagit fram en enkel checklista för nya hemsidor, som vi vill dela med oss av här.

Checklistan är generell och gäller oavsett hur hemsidan är utvecklad. FS Data är dock ett lite extra WordPress-vänligt webbhotell, så vi har lagt in några tips om olika WordPress-tillägg i listan. Vi hoppas du får nytta av denna lista!

Enkel checklista för en ny hemsida

– Kontrollera alla texter (stavning, grammatik, form osv)

Oavsett hur mycket tid som redan har lagts på hemsidetexterna, läs allt om igen och kontrollera att all grammatik och stavning stämmer. Om du är osäker på stavningen, kör då texten genom en stavningskontroll (i ett program såsom Word eller Pages).

Tänk på att vara konkret, att tidigt på varje sida komma till poängen och att använda typsnitt, tabeller, punkter samt passande bilder för att förstärka budskapet. Använd ett naturligt och genomgående (enhetligt) språk som passar målgruppen för hemsidan.

Låt andra människor, vänner och kollegor, få läsa sidan och kommentera den. Förstår de snabbt och enkelt vad hemsidan handlar om, vilka tjänster som förmedlas och dess nytta? Förstår de hur man lägger en beställning eller kontaktar er?

– Lyft fram kontaktuppgifterna

Om man bedriver en säljande verksamhet så måste man tydligt visa upp sina kontaktuppgifter på hemsidan. Det spelar ingen roll var på hemsidan en besökare befinner sig, kontaktuppgifterna ska alltid framgå tydligt. På vår hemsida, fsdata.se, har vi t ex en meny längst ner på alla sidor med våra kontaktuppgifter.

– Kontrollera alla länkar på hemsidan

Klicka runt på länkarna på hemsidan och kontrollera att de fungerar. Det gäller både interna länkar och externa länkar (till andra hemsidor). Om hemsidan har utvecklats i en separat miljö, t ex en utvecklingsmiljö, kontrollera då att länkarna inte är hårdkodade (sökvägar) inom denna miljö.

Med WordPress-tillägget Broken Link Checker är det enkelt att hitta och rätta felaktiga länkar på en hemsida.

Men oavsett hur mycket man lagar trasiga länkar så kommer de ändå alltid att uppstå. För att hantera dem på bästa sätt, ordna en egen 404-sida (en sida som visas om en länk inte fungerar). Här är vår 404-sida: https://fsdata.se/404

– Besök hemsidan i olika webbläsare

Fungerar och ser hemsidan bra ut i Internet Explorer, Firefox, Chrome och Safari (samt Opera)? Ser det bra ut i dessa webbläsare under Windows, Mac OS X och Linux?

Att installera och testa hemsidan med alla olika kombinationer av operativsystem och webbläsare är smått omöjligt. För att få en bra överblick och förståelse för de operativ/läsare man bör kolla närmare på så kan webbtjänsten Browser Shots, som tar skärmdumpar av hemsidan i olika webbläsare, rekommenderas.

Det viktigaste är att testa hemsidan med de webbläsare som besökare av hemsidan använder. Om möjligt, utgå från tidigare statistik från hemsidan, annars kan t ex webbläsarstatistiken hos StatCounter hjälpa.

– Se till att hemsidan validerar

Det bästa sättet att få en hemsida att fungera bra i olika webbläsare är att att följa de webbstandarder som finns. Webbstandarderna definierar hur olika element på en hemsida ska se ut, hur olika funktioner ska fungera osv. Merparten av de moderna webbläsarna stödjer dessa standarder.

Om en hemsida bryter mot standarderna så kan den ladda långsamt och i värsta fall även sluta fungera. Det är enkelt att testa om en hemsida följer webbstandarderna hos World Wide Web Consortium.

– Tänk på de mobila besökarna

Glöm inte bort att testa hemsidan ordentligt i mobilen. Om man lanserar en ny hemsida nu så måste den vara responsiv och anpassa sig efter besökarnas skärmar, oavsett om de surfar med datorer, pekplattor eller mobiltelefoner.

Det finns ett antal olika tillägg som gör WordPress ”responsivt”, eller egentligen visar upp en helt annan design för mobila enheter, men det är fel väg att gå. Desto bättre att skapa/använda en riktigt responsiv design. På så sätt känner besökarna sig hemma oavsett vad de surfar med.

– Testa alla formulär på hemsidan

Fungerar kontaktformuläret som det ska? Om e-post skickas genom kontaktformuläret, kommer det fram till rätt mottagare? Om hemsidan har ett orderformulär, fungerar det ordentligt? Gör det till en vana att testa formulären på hemsidan med jämna mellanrum. Formulär som inte fungerar kan betyda förlorade kunder.

– Glöm inte bort sökmotorerna

Är alla sidor på hemsidan optimerad för sökmotorerna? Det finns ett stort antal guider till hur man SEO-optimerar sin hemsidan, en av våra favoriter är Nikke Lindqvists checklista för sökmotoroptimering. Läs den.

Kort sammanfattat så måste alla sidor ha en titel, en beskrivning och nyckelord. En sida bör innehålla 250-300 (relevanta) ord, ha en bild och använda rätt typ av rubriker (H1, H2 osv).

Men viktigast av allt: sidorna ska vara så bra att besökare själva vill länka/sprida dem. Glöm inte det.

För WordPress så kan vi rekommendera tillägget WordPress SEO. Med detta tillägg är det enkelt att optimera sin hemsida, med bl a tydliga fält för all information som krävs samt betygsättning av hur pass väl optimerad varje sida är.

– Hjälp sökmotorerna hitta rätt med en sidkarta

Även om sökmotorer är duktiga på att spindla hemsidor (att kartlägga dem via länkar) så ska man ändå ha en sidkarta. En sidkarta visar exakt vilka sidor som finns under hemsidan och hur relevanta de är (hur ofta de uppdateras), så att sökmotorerna kan återkomma med jämna mellanrum och hitta alla förändringar (t ex nya blogginlägg).

Om man använder WordPress så kan vi rekommendera BWP Google XML Sitemaps. Detta i synnerhet med WordPress i ett nätverk (Multi-site).

– Håll koll på statistiken

Se till att hålla koll på statistiken redan från början. Ju mer statistik man har, desto enklare är det att utveckla och förbättra sin hemsida. Att se vad besökarna tycker är intressant, hur besökarantalet ökar och hur blogginlägg sprids vidare är något av det roligaste som finns med att ha en egen hemsida.

Läs gärna vår tidigare guide till statistiklösningen Piwik, som är ett bra alternativ till Google Analytics där man själv äger sin data (istället för Google). För integration med WordPress rekommenderas tillägget WP-Piwik.

– Lägg upp en favicon

En underskattad detalj. De flesta som surfar på nätet använder flera samtidiga flikar i sin webbläsare. Med en favicon får er hemsida en egen ikon i den flik där hemsidan befinner sig, vilket underlättar för besökare att hitta ”rätt flik” i sin webbläsare.

En favicon är en liten bild som man lägger i hemkatalogen för sin hemsida. Därefter anger man, i hemsidans kod, att detta ska vara en favicon. För WordPress kan vi rekommendera tillägget All In One Favicon för enkel hantering/uppladdning av favicon.

– Hur snabb är hemsidan?

Det är väldigt viktigt att ha en så snabb hemsida som möjligt. Hemsidebesökare börjar tröttna om en sida tar mer än 2-3 sekunder att ladda och det finns statistik som visar att varannan besökare lämnar e-handelssidor som laddar för långsamt.

Om din hemsida är snabbare än dina branschkollegors hemsidor så har du en klar fördel både hos besökare och sökmotorer. För att turboladda din WordPress-baserade hemsida, läs vår senaste guide till en snabbare WordPress-sida.

– Är alla domännamn rätt registrerade?

Egentligen inte direkt relaterat till hemsidan, men det kan vara väldigt bra att se över sitt domännamn när man lanserar en ny hemsida. Har du bara ett domännamn? Under enbart en toppdomän (.se, .com, .nu)? Är stavningen på domännamnet självklart eller kan du registrera alternativa stavningar (och peka dessa till hemsidan)?

Om du har en IDN-domän (domännamn med tecken som å, ä och ö), glöm då inte bort att registrera domänen utan IDN (för IDN-domänen räksmörgås.se bör man t ex även registrera den vanliga domänen raksmorgas.se).

Att registrera domännamn är billigt. Att förlora besökare pga att någon annan har registrerat en liknande domän kan bli väldigt, väldigt dyrt.

– Övrigt (säkerhet, backup, skala upp, övervakning osv)

Andra saker som kan vara bra att tänka på med en ny hemsida är att hemsidan är säker (ordentligt uppdaterad, skyddad av brandvägg osv), att backup/säkerhetskopiering sker regelbundet (vissa webbhotell inkluderar detta) och att det går att växa upp i storlek om hemsidan blir väldigt populär (erbjuder din leverantör servertjänster?).

Man kan även övervaka sin hemsida, t ex via Pingdom, så att man får larm om den slutar fungera (om nedtid uppstår). Webbhotell brukar övervaka sina kundservrar och åtgärda eventuella serverfel, men det skadar inte att ha koll själv. Om hemsidan ofta slutar att fungera så kan det vara en idé att se över sitt val av webbhotell.

Så, det var vår enkla lilla checklista för en ny hemsida. 🙂

Har du några frågor eller funderingar kring detta? Är det något du saknar? Lämna gärna en kommentar!

nov 20 2013

Piwik, ett alternativ till Google Analytics

Med en bra statistiklösning har man möjlighet att snabbt och enkelt se hur många besökare en webbplats har, vilka sidor som är mest populära, vilka sökord som används för att hitta olika sidor och annan viktig information om besökarna (så att man kan förbättra deras upplevelse av webbplatsen).

Med webbhotell hos FS Data ingår statistik via en lösning som heter Wusage. Det är en effektiv lösning, som täcker stora delar av den statistik som man kan tänkas behöva. Många av våra kunder använder Wusage med goda resultat.

Det finns även ett antal kunder hos oss som har sin statistik hos Google, via statistiklösningen Google Analytics. Analytics är en bra lösning, om än att det går att ifrågasätta lagring av data hos Google (med utländsk övervakning).

Om man vill ha statistik såsom Google Analytics, men äga sin egen data, så har vi ett bra tips.

Piwik är en kostnadsfri statistiklösning, baserad på öppen källkod, som till stor del liknar Google Analytics vad gäller funktioner, utseende osv. Piwik är översatt till svenska, har över 500 funktioner och används av närmare en halv miljon webbplatser. Piwik kan enkelt integreras med WordPress, Joomla, Drupal m.m.

Här är en video som demonstrerar hur Piwik fungerar:

Det finns två stora skillnader mellan Google Analytics och Piwik: med Piwik äger du själv din data (statistik) och Piwik är en lösning som man själv installerar. Att installera Piwik är riktigt enkelt och Piwik fungerar utmärkt med våra webbhotellspaket.

Vi har en guide till Piwik i våra manualer: Installera Piwik (statistik) på en hemsida

Läs gärna denna guide för ett bra alternativ till Google Analytics. Om du har några frågor om Piwik, installationen eller något annat relaterat till detta så får du gärna lämna en kommentar här i vår blogg.

nov 07 2013

Så felsöker man tillägg i WordPress

WordPress är i grund och botten ett väldigt enkelt system. Det går att göra mycket från start, men det är först när man börjar anpassar WordPress med tillägg som dess verkliga styrka framträder. Inget är, i princip, omöjligt att lösa med olika tillägg i WordPress.

Att installera tillägg i WordPress är enkelt. Ja, det är så enkelt att man lätt glömmer bort att man har installerat vissa tillägg. Det kan få rätt så dåliga konsekvenser (läs: resultera i en hackad hemsida) om man inte ser till att hålla tilläggen ordentligt uppdaterade.

Men även om man uppdaterar sina tillägg i WordPress så kan man stöta på problem. Det är rätt vanligt att en hemsida som har fungerat bra och varit snabb helt plötsligt börjar bete sig konstigt och går långsamt. Många gånger beror det på fel i ett tillägg (eller att två tillägg krockar).

Vi tänkte därför visa ett enkelt sätt att felsöka tillägg i WordPress.

1. Logga in i wp-admin på din WordPress-webbplats och gå in under ”Tillägg” > ”Lägg till nytt”. Där söker du efter ”P3” och installerar/aktiverar sedan P3 (Plugin Performance Profiler).

2. När tillägget är aktiverat, gå under ”Verktyg” > ”P3 Plugin Profiler”. Börja med att klicka på länken/knappen ”Start Scan”, välj ”Auto Scan” och vänta en stund medan kontrollen utförs. Klicka på ”View Results” när kontrollen är klar.

3. Nu visas information om hur många tillägg man har på sin webbplats och hur mycket dessa tillägg bidrar till laddningstiden. Mitt på sidan framgår tydligt exakt vilka tillägg det är som orsakar mest laddningstid.

Här är ett exempel:

P3 Profiler

Här kan vi se att tillägget ”WordPress Beta Tester” står för hälften av laddningstiden på denna webbplats. Nu laddar denna sida väldigt snabbt (den är optimerad enligt vår guide till en snabbare WordPress-sida), men om så inte vore fallet så hade vi inaktiverat (och tagit bort) detta tillägg.

Det är värt att poängtera att det inte räcker med att inaktivera tillägget. Man behöver även ta bort det ordentligt. Annars kan det ligga kvar och fortsätta orsaka problem. En bra regel, vad gäller tillägg i WordPress, är att aldrig ha några inaktiva tillägg installerade.

Vad gör man om det är ett viktigt tillägg som orsakar problem? Det enklaste är att försöka hitta ett alternativt tillägg, som erbjuder samma/snarlik funktioner. Man kan även felanmäla tillägget i WordPress Plugin Directory. Sök efter tillägget där, besök dess sida, gå in under fliken ”Support” och skapa ett inlägg (kontrollera först att det inte finns fler liknande inlägg).

4. Kontrollera gärna övriga flikar under ”Verktyg” > ”P3 Plugin Profiler”. Under ”Detailed Breakdown” kan man se exakt laddningstid för alla installerade tillägg. Under fliken ”Advanced Metrics” kan man t ex se den totala laddningstiden samt dess fördelning mellan Core (själva WordPress), teman och tillägg.

Det här är ett enkelt sätt att felsöka tillägg i WordPress. Det finns givetvis fler sätt att göra detta på, såsom att använda WP_DEBUG, men P3 (Plugin Performance Profiler) är onekligen en av de enklaste metoderna.

Lämna gärna en kommentar här nedan om du har några frågor, om detta tips har hjälpt dig eller om du har några andra tips på felsökning av tillägg.

aug 27 2013

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.

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 fsdata.se/blogg/


<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:

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!