Snabbare WordPress: Hur vi optimerade List25:s prestanda med 256%

Vill du snabba upp din WordPress site? Vill du veta WordPress optimering tricks som kan hjälpa dig att minska din site hämtar tid? I den här artikeln kommer vi att visa dig hur du kan snabba upp WordPress genom att dela hur vi optimerade vår List25 site för att öka prestandan.

Du har förmodligen hört att WordPress hastighet är viktig för sökmotorsoptimering. En snabbare site har bättre engagemang hos användarna, fler sidvisningar och bättre försäljning. I en fallstudie från Strangeloop fann de att en fördröjning på en sekund kan kosta you 7% av försäljningen, 11% färre sidvisningar och 16% minskad kundnöjdhet.

Så hur gör du egentligen WordPress snabbare?

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

Översikt

List25 är en blogg om underhållning som startades av vår grundare Syed Balkhi. Webbplatsen har över 1,5 miljoner prenumeranter och YouTube-kanalen har över en kvarts miljard views.

Innehållet på webbplatsen är mestadels images och videoklipp som tar upp terabyte av bandbredd, så övergripande hastighetsoptimering var avgörande för oss för att hålla kostnaderna nere, minska antalet övergivna sidor och förbättra tiden på webbplatsen.

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

Under denna optimering kunde vi snabba upp vår server responstid, förbättra vår page speed performance score, minska antalet totala request och förbättra den totala laddningstiden.

Låt oss ta en titt på de optimeringstekniker som hjälpte oss att snabba upp vår site WordPress.

WordPress Webbhotell

Att ha en bra server är avgörande för hastigheten på din website. I takt med att vår site blev mer populär växte vi helt enkelt ifrån vårt tidigare webbhotell (HostGator).

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

Vi klurade på olika hanterade alternativ för hosting av WordPress och valde till slut SiteGround som webbhotell för List25 eftersom de erbjöd det bästa totalvärdet för den här webbplatsen.

You can see the improvement in our server response time immediately. Vi gick från max 442 ms till 172 ms response time. Det är en förbättring med 256%.

Siteground har built-in prestandaförstärkare för specifika plattformar som WordPress, Joomla och Magento. Baserat på plattformen för din site optimerar de speciellt dina servrar vilket resulterar i en bättre övergripande prestanda.

Vi skrev en artikel om när du bör byta webbhotell där vi tar upp de 7 viktigaste indikatorerna.

Om du funderar på att byta server, ge definitivt SiteGround ett försök. WPBeginners användare får en exklusiv 60% rabatt på webbhotell + gratis domän.

Tillägg för caching

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

Normalt när en besökare kommer till din WordPress site, skickar din server PHP-förfrågan till MySQL Database som hittar den sida som begärs, genererar den i farten och visar den för besökaren. Detta tar upp en hel del resurser. När du har caching sparar du tid och resurser.

Diagrammet under belyser processen. I enkla termer kan du tänka på caching som att skapa en genväg på skrivbordet som hjälper dig att komma till filen snabbare.

För List25-webbplatsen använder vi SiteGround SuperCacher, ett plugin som de specialbyggt för sina customize. Högst upp på det har de lagt till avancerade dynamiska alternativ för caching med hjälp av Varnish (en del av deras prestandaförstärkare).

Om du ej har Siteground behöver du inte oroa dig. Du kan ställa in caching på din WordPress site genom att använda en av de många tillgängliga lösningarna som W3 Total C ache eller WP Super Cache.

På WPBeginner använder vi W3 Total Cache som tillhandahåller ett antal alternativ för page caching, database caching och object caching.

I takt med att fler webbhotell specialiserar sig för WordPress kommer vi att se fler customize caching-lösningar byggas. Page och WPEngine erbjuder också sina egna built-in system för caching.

CDN

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

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

CDN allow oss att servera all CSS, JavaScript och images från ett Content Delivery Network. Detta fungerar genom att bestämma webbplatsens besökares location och servera content från en server som är närmast besökaren.

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

Kombinera filer för att minska HTTP-requests

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

Vi kombinerade dessa JavaScript- och CSS-filer till en enda fil för varje för att minska requests och påskynda laddningstiden. Du kan se mer detaljer om detta på hur WordPress tillägg påverkar laddningstiden.

Även om vi nu hämtar en del små funktioner som vi kanske inte behöver på en viss section av webbplatsen, cachelagras denna kod på CDN, och resultaten visar att färre requests för filer ger bättre prestanda än att hämta flera mindre JS-filer.

Det här är något du måste göra regelbundet eftersom de tillägg du använder ändras övertid.

Image Sprites

Vi använde oss av en image sprite som kombinerade flera sociala ikoner och webbplatsikoner i en enda image:

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

1. Hämtar imagen som bakgrundsbild
2. Definiera bredden och höjden på det element som vi behöver ikonen för
3. Ställ in bakgrundspositionen för vår image för att ladda den nödvändiga ikonen

Till exempel, för att hämta sidebarens social media icons använder vi:

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 bakgrund-position, bredd och höjd hjälper oss att rikta in oss på den specifika sektionen av den image som vi vill mata ut:

Som ett resultat använder endast den första requesten för denna image-fil bandbredd. Efterföljande förfrågningar till CDN för bilden kommer att resultera i att den cachelagrade (vanligtvis lokala) versionen hämtar, samt att endast en enda image behöver requestas jämfört med 6 olika sociala icons.

Genom att kombinera JavaScript, CSS och images tillsammans minskade vi antalet requests avsevärt.

Minifiering av kod

Minifiering av kod innebär att man tar bort blanksteg och radbrytningar för att minska filstorleken och göra den snabbare att hämta när den requestas.

För List25 använder vi SCSS, en syntaxbaserad stylesheet (Intro to Sass). Detta allow oss att strukturera våra CSS-filer över flera områden av utvecklare i en lättläst layout:

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

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

Optimering av images

Vi optimerade våra images på två area: vårt theme WordPress och uppladdat content.

För vårt WordPress theme använde vi CodeKit för att säkerställa att all images komprimerades förlustfritt. Detta säkerställer att filstorlekarna är så små som möjligt utan att kvaliteten försämras.

Vi utbildade också alla våra skribenter om vikten av att save images som är optimerade för webben. Se vår guide om hur man sparar images optimerade för webben.

Social delning utan JavaScript

Social delning för List25 är verkligen viktigt, gillar alla andra webbplatser. Tillägg för social delning kan dock avsevärt sakta ner din site.

Även om integreringen av dessa fyra sociala nätverks skript inte påverkade sidans laddningstid i våra tester, saktade det synligt ner webbplatsen när den viewades på en mobil device. Det tog några sekunder för delningsknappar att visas, trots att skripten hämtar asynkront, vilket resulterade i att innehållet i posten rörde sig när knapparna laddades in i view.

För att lösa detta problem gick vi över till en lösning som (nästan) är gratis JavaScript. Var och en av de sociala nätverkens delningsknappar återges av vårt custom WordPress Plugin, och temats JavaScript används endast för att öppna webbläsarens fönster när användaren klickar på en knapp.

Vi ville dock fortfarande visa det totala antalet delningar som ett post hade i alla sociala nätverk. För att göra detta producerade vi ett litet custom WordPress Plugin för att hämta och cachelagra antalet delningar från varje socialt nätverk i metatabellen för inlägg. Dessa räkningar uppdateras var 24:e timme, vilket säkerställer att tidskrävande sökningar ej konstant körs.

Du kan antingen använda ett API som Sharre eller dissekera den flytande sociala baren för customize.

Med hjälp av Pingdoms RUM (Real User Monitoring) minskade detta nya plugin för delning den ”sanna” laddningstiden för sidan från 6 sekunder till drygt 2 sekunder. Det såg också till att vi minskade antalet requests för skript från tredje part.

Resultat

Vi förbättrade hastigheten på vår site avsevärt. Hämtningstiden gick från 2,2 sekunder till 1,22 sekunder.

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

Detta bidrog till att minska den tid som spenderas för att ladda ner en page av Google bot vilket hjälpte vår crawl rate.

Vår totala avvisningsfrekvens sjönk med 7% eftersom sajten hämtar snabbare och genom att byta server kunde vi minska antalet error på servern.

Som you kan föreställa sig med den lägre avvisningsfrekvensen ökade också tiden på webbplatsen med över 30 sekunder.

Slutsats

Som du kan se kan en webbplats som hämtar snabbare förbättra engagemanget hos besökarna. De tekniker som vi har diskuterat har täckt en rad grundläggande och mellanliggande förbättringar som du kan implementera för att optimera din WordPress site.

Vi hoppas att den här artikeln hjälpte dig att snabba upp din WordPress site. Du kanske också vill kontrollera vår artikel om 20 tillägg till WordPress som du måste ha 2015.

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