Snabba upp WordPress: Hur vi optimerade List25-prestanda med 256%

Vill du snabba upp din WordPress-webbplats? Vill du veta vilka WordPress-optimeringsknep som kan hjälpa dig att minska din webbplats laddningstid? I den här artikeln visar vi dig hur du snabbar upp WordPress genom att dela med oss av hur vi optimerade vår List25-webbplats för att öka prestandan.

Du har förmodligen hört att WordPress-hastighet är viktigt för SEO. En snabbare webbplats har bättre användarengagemang, fler sidvisningar och bättre försäljning. I en fallstudie från Strangeloop fann de att en sekunds fördröjning kan kosta dig 7 % av försäljningen, 11 % färre sidvisningar och 16 % minskad kundnöjdhet.

Så hur snabbar du faktiskt upp WordPress?

Istället för att bara dela en lista med snabbtips bestämde vi oss för att göra en fullständig fallstudie för att visa dig resultaten från vår List25-sida tillsammans med hur vi åstadkom allt.

Översikt

List25 är en underhållningsblogg som startades av vår grundare Syed Balkhi. Webbplatsen har över 1,5 miljoner prenumeranter, och YouTube-kanalen har över en kvarts MILJARD visningar.

Innehållet på webbplatsen består mestadels av bilder och videor som kräver terabyte av bandbredd, så övergripande hastighetsoptimering var avgörande för att hålla nere kostnaderna, minska antalet avhopp och förbättra tiden på webbplatsen.

Innan vi började optimeringen tog vår startsida 2,21 sekunder att ladda enligt Pingdom. Efter att vi var klara sjönk vår sidladdningstid till 1,21 sekunder (~45% snabbare).

Under denna optimering kunde vi snabba upp vår svarstid på servern, förbättra vår sidhastighetspoäng, minska antalet totala förfrågningar och förbättra den totala laddningstiden.

Låt oss titta på optimeringsteknikerna som hjälpte oss att snabba upp vår WordPress-webbplats.

WordPress-värdskap

Att ha en bra webbhotell är avgörande för din webbplatshastighet. När vår sida blev mer populär växte vi helt enkelt ur vårt tidigare hostingföretag (HostGator).

Deras servrar kunde helt enkelt inte hantera en webbplats av denna storlek eftersom List25 får tiotals miljoner sidvisningar. HostGator är bra för mindre webbplatser, men inte för något av denna magnitud.

Vi tittade på olika alternativ för hanterad WordPress-hosting och slutade till slut med att använda SiteGround för att hosta List25 eftersom de erbjöd det bästa totala värdet för denna webbplats.

Du kan omedelbart se förbättringen i vår serverresponstid. Vi gick från maximalt 442 ms till 172 ms responstid. Det är en förbättring på 256%.

Siteground har byggt prestandaboosters för specifika plattformar som WordPress, Joomla och Magento. Baserat på din webbplats plattform optimerar de dina servrar speciellt, vilket resulterar i bättre övergripande prestanda.

Vi skrev en artikel om när du bör byta ditt webbhotell som handlar om de 7 nyckelindikatorerna.

Om du funderar på att byta värd, prova definitivt SiteGround. WPBeginner-användare får en exklusiv 60% rabatt på hosting + gratis domän.

Cache-plugin

När det gäller att snabba upp WordPress är cachning den näst viktigaste faktorn efter din webbhotell.

Normalt när en besökare kommer till din WordPress-webbplats skickar din server PHP-begäran till MySQL-databasen som hittar sidan som begärs, genererar den i farten och visar den för besökaren. Detta kräver mycket resurser. När du har cachning sparar det tid och resurser.

Diagrammet nedan belyser processen. Enkelt uttryckt, tänk på cachning som att skapa en genväg på skrivbordet som hjälper dig att komma åt filen snabbare.

För List25-webbplatsen använder vi SiteGround SuperCacher, ett plugin som de speciellt byggt för sina kunder. Utöver det har de lagt till avancerade dynamiska cachningsalternativ med Varnish (en del av deras prestandaförstärkare).

Om du inte använder Siteground, oroa dig inte. Du kan ställa in cache på din WordPress-webbplats med hjälp av en av de många tillgängliga lösningarna som W3 Total Cache eller WP Super Cache.

På WPBeginner använder vi W3 Total Cache som erbjuder ett antal sid-cache-alternativ, databas-cache och objekt-cache.

I takt med att fler hostingföretag specialiserar sig på WordPress kommer vi att se fler anpassade cachningslösningar byggas. Pagely och WPEngine erbjuder också sina egna inbyggda cachningssystem.

CDN

Content Delivery Networks (CDN) kan hjälpa dig att öka din webbplatshastighet. Vi har använt MaxCDN sedan starten av List25, så den här delen ändrades inte.

Vi har skrivit en fullständig artikel om vad är en CDN och varför du behöver det tillsammans med en infografik.

CDN tillåter oss att leverera all CSS, Javascript och bilder från ett Content Delivery Network. Detta fungerar genom att bestämma besökarens plats och leverera innehåll från en server närmast besökaren.

Om du inte är ute efter en premium CDN-lösning, kan du använda Cloudflare.

Kombinera filer för att minska HTTP-förfrågningar

När du lägger till fler plugins lägger de ofta till sina egna JavaScript- och CSS-filer. Varje ytterligare fil är en ny HTTP-begäran.

Vi kombinerade dessa JavaScript- och CSS-filer till en enda fil för varje för att minska antalet förfrågningar och snabba upp laddningstiden. Du kan se mer detaljer om detta på hur WordPress-plugins påverkar laddningstiden.

Även om vi nu laddar viss liten funktionalitet som vi kanske inte behöver på en viss del av webbplatsen, cachas denna kod på CDN, och resultat visar att färre förfrågningar om filer ger bättre prestanda än att ladda flera mindre JS-filer.

Detta är något du måste göra regelbundet eftersom plugins du använder ändras över tid.

Bildspriter

Vi använde en bildsprite som kombinerade flera sociala och webbplatsikoner till en enda bild:

När vi behövde visa en viss ikon använde vi CSS för att:

1. Ladda bilden som en bakgrundsbild
2. Definiera bredden och höjden på elementet vi behöver ikonen för
3. Ställ in bakgrundspositionen för att vår bild ska ladda den nödvändiga ikonen

För att ladda sidofältets ikoner för sociala medier använder vi till exempel:

li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; }
li.widget_social_icons ul li.twitter { background-position: 0 -50px; }
li.widget_social_icons ul li.facebook { background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest { background-position: -72px -50px; }
li.widget_social_icons ul li.google { background-position: -108px -50px; }
li.widget_social_icons ul li.rss { background-position: -144px -50px; }
li.widget_social_icons ul li.youtube { background-position: -180px -50px; }

CSS-egenskaperna background-position, width och height hjälper oss att rikta in oss på den specifika delen av bilden som vi vill mata ut:

Som ett resultat använder endast den första förfrågan för denna bildfil bandbredd. Efterföljande förfrågningar till CDN för bilden kommer att resultera i att den cachade (vanligtvis lokala) versionen laddas, samt att endast behöva begära en enda bild jämfört med 6 olika sociala ikoner.

Genom att kombinera JavaScript, CSS och bilder tillsammans minskade vi antalet förfrågningar avsevärt.

Kodminifiering

Kodminifiering innebär att man tar bort blanksteg och radbrytningar för att minska filstorleken, vilket gör att den laddas snabbare när den begärs.

För List25 använder vi SCSS, en syntaxbaserad stilmall (Intro till Sass). Detta gör att vi kan strukturera våra CSS-filer över flera områden av utvecklingen på ett lättläst sätt:

Vi använder CodeKit för att sedan kompilera SCSS-filerna till en enda CSS-fil. CodeKit tar också bort blanksteg och radbrytningar för att säkerställa att filen är så liten som möjligt:

Som ett resultat kunde vi minska storleken på vår CSS-fil med 28%.

Bildoptimering

Vi optimerade våra bilder inom två områden: vårt WordPress-tema och uppladdat innehåll.

För vårt WordPress-tema använde vi CodeKit för att säkerställa att alla bilder komprimerades förlustfritt. Detta säkerställer att filstorlekarna är så små som möjligt, utan kvalitetsförlust.

Vi informerade också alla våra skribenter om vikten av att spara bilder optimerade för webben. Se vår guide om hur man sparar bilder optimerade för webben.

Javascript-fri social delning

Social delning för List25 är verkligen viktig precis som för alla andra webbplatser. Men plugins för social delning kan avsevärt sakta ner din webbplats.

Även om integrationen av dessa fyra sociala nätverks skript inte påverkade sidans laddningstid i våra tester, saktade det märkbart ner webbplatsen vid visning på en mobil enhet. Knappar för social delning tog några sekunder att visas, trots att skripten laddades asynkront, vilket resulterade i att inläggets innehåll flyttades runt när knapparna laddades in.

För att lösa detta problem gick vi över till en (nästan) Javascript-fri lösning. Varje socialt nätverks delningsknappar renderas av vår anpassade WordPress-plugin, och tematets Javascript används endast för att öppna webbläsarfönstret när användaren klickar på en knapp.

Vi ville dock fortfarande visa det totala antalet delningar ett inlägg hade över alla sociala nätverk. För att göra detta producerade vi ett litet anpassat WordPress-plugin för att hämta och cacha antalet sociala delningar från varje socialt nätverk till Post meta-tabellen. Dessa antal uppdateras var 24:e timme, vilket säkerställer att tidskrävande frågor inte körs konstant.

Du kan antingen använda ett API som Sharre eller analysera Floating Social Bar för anpassning.

Med hjälp av Pingdoms RUM (Real User Monitoring) minskade detta nya delningsplugin den 'sanna' sidladdningstiden från 6 sekunder till drygt 2 sekunder. Det säkerställde också att vi minskade antalet förfrågningar som gjordes för tredjepartsskript.

Resultat

Vi förbättrade vår webbplatshastighet avsevärt. Laddningstiden gick från 2,2 sekunder till 1,22 sekunder.

Vi kunde minska vår svarstid på servern avsevärt.

Detta hjälpte till att minska tiden som Googlebot spenderade på att ladda ner en sida, vilket förbättrade vår genomsökningshastighet.

Vår totala avvisningsfrekvens sjönk med 7% eftersom webbplatsen laddades snabbare, och genom att byta värd kunde vi minska serverfel.

Som du kan föreställa dig, med den lägre avvisningsfrekvensen, ökade även tiden som spenderades på webbplatsen med över 30 sekunder.

Slutsats

Som du kan se kan en snabbare laddande webbplats förbättra besökares engagemang. Teknikerna vi har diskuterat har täckt en rad grundläggande och medelstora förbättringar som du kan implementera för att optimera din WordPress-webbplats. 

Vi hoppas att den här artikeln hjälpte dig att snabba upp din WordPress-webbplats. Du kanske också vill kolla in vår artikel om 20 måste-ha WordPress-plugins för 2015.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videohandledningar. Du kan också hitta oss på Twitter och Facebook.