PĂ„skynda WordPress: Hur vi optimerade List25-prestanda med 256%

PĂ„skynda WordPress: Hur vi optimerade List25-prestanda med 256%

Vill du pÄskynda din WordPress-webbplats? Vill du veta WordPress-optimeringstricken som kan hjÀlpa dig att minska laddningstiden för din webbplats? I den hÀr artikeln visar vi dig hur du pÄskyndar WordPress genom att dela hur vi optimerade vÄr List25-webbplats för att öka prestanda.

Du har nog hört WordPress-hastighet Àr viktig för SEO. En snabbare webbplats har bÀttre anvÀndarengagemang, fler sidvisningar och bÀttre försÀljning. I en strangeloop-fallstudie fann de att en fördröjning pÄ en sekund kan kosta dig 7% av försÀljningen, 11% fÀrre sidvisningar och 16% minskad kundnöjdhet.

SÄ hur pÄskyndar du faktiskt WordPress?

Tja, 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 resultaten frÄn vÄr List25-webbplats tillsammans med hur vi uppnÄdde allt.

Översikt

List25 Àr en underhÄllningsblogg startad av vÄr grundare Syed Balkhi. Webbplatsen har över 1,5 miljoner prenumeranter och YouTube-kanalen har över kvartalet MILJARD utsikt.

InnehÄllet pÄ webbplatsen Àr mestadels bilder och videor som tar upp terabyte bandbredd, sÄ den totala hastighetsoptimeringen var avgörande för oss för att hÄlla kostnaderna nere, minska sidans övergivenhet och förbÀttra tiden pÄ webbplatsen.

Innan vi startade optimeringen tog vÄr hemsida 2,21 sekunder att ladda enligt Pingdom. NÀr vi var klara sjönk vÄr laddningstid till 1,21 sekunder (~ 45% snabbare).

Under denna optimering kunde vi pÄskynda vÄr serversvarstid, förbÀttra vÄr sidhastighetsprestanda, minska antalet totala förfrÄgningar och förbÀttra den totala laddningstiden.

LÄt oss ta en titt pÄ optimeringsteknikerna som hjÀlpte oss att pÄskynda vÄr WordPress-webbplats.

WordPress-vÀrd

Att ha en bra webbhotell Àr avgörande för din webbplatshastighet. NÀr vÄr webbplats blev mer populÀr, vÀxte vi helt enkelt ut vÄrt tidigare webbhotell (HostGator).

Deras servrar kunde helt enkelt inte hantera en webbplats av denna storlek eftersom List25 fÄr tiotals miljoner sidvisningar. HostGator Àr utmÀrkt för mindre webbplatser, men inte för nÄgot av denna storlek.

Vi tittade pÄ olika hanterade WordPress-vÀrdalternativ och slutligen slutade anvÀnda SiteGround för att vara vÀrd för List25 eftersom de erbjöd det bÀsta totala vÀrdet för den hÀr webbplatsen.

Du kan se förbÀttringen av vÄr servertid omedelbart. Vi gick frÄn max 442ms till 172ms svarstid. Det Àr en förbÀttring pÄ 256%.

List25 Server svarstid efter byte till SiteGround

Siteground har byggt prestandaförstÀrkare för specifika plattformar som WordPress, Joomla och Magento. Baserat pÄ plattformen pÄ din webbplats optimerar de speciellt dina servrar vilket resulterar i bÀttre totalprestanda.

Vi skrev en artikel om nÀr du ska byta webbhotell som talar om de 7 nyckelindikatorerna.

Om du vill byta vÀrd, prova definitivt SiteGround. WPBeginner-anvÀndare fÄr exklusiva 60% rabatt pÄ hosting + gratis domÀn.

Caching-plugin

NÀr det gÀller att pÄskynda WordPress Àr cachning den nÀst viktigaste faktorn efter ditt webbhotell.

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

Diagrammet nedan belyser processen. NÀr det gÀller lekman, tÀnk pÄ cachning som att skapa en skrivbordsgenvÀg som hjÀlper dig att komma snabbare till filen.

Vad Àr Page Cache?

För List25-webbplatsen anvÀnder vi SiteGround SuperCacher, ett plugin som de specialbyggt för sina kunder. Utöver det lade de till avancerade dynamiska cachealternativ med Varnish (en del av deras prestationsförstÀrkare).

Om du inte Àr pÄ Siteground, oroa dig inte. Du kan stÀlla in cache pÄ din WordPress-webbplats genom att anvÀnda 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 ger ett antal sidcachningsalternativ, databascaching och objektcaching.

NÀr fler webbhotell specialiserar sig pÄ WordPress kommer vi att se fler anpassade cachelösningar byggda. Pagely och WPEngine erbjuder ocksÄ sitt eget inbyggda caching-system.

CDN

Content Delivery Networks (CDN) kan hjÀlpa dig att öka din webbplatshastighet. 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 som Àr ett CDN och varför du behöver det tillsammans med en infografik.

Vad Àr en CDN

CDN tillÄter oss att betjÀna alla CSS, Javascript och bilder frÄn ett innehÄllsleveransnÀtverk. Detta fungerar genom att bestÀmma platsbesökarens plats och betjÀna innehÄll frÄn en server nÀrmast besökaren.

Om du inte letar 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 i en enda fil för varje för att minska förfrÄgningar och pÄskynda laddningstiden. Du kan se mer information om detta om hur WordPress-plugins pÄverkar laddningstiden.

Medan vi nu laddar lite funktionalitet som vi kanske inte behöver pÄ en viss del av webbplatsen, cachas den hÀr koden pÄ CDN, och resultaten visar att fÀrre förfrÄgningar om filer ger bÀttre prestanda Àn att ladda flera mindre JS-filer.

Det hÀr Àr nÄgot du mÄste göra regelbundet eftersom de plugins du anvÀnder Àndrar övertid.

Bildsprites

Vi anvÀnde oss av en bildsprite som kombinerade flera sociala ikoner och webbplatsikoner till en bild:

List25 Sprite

NÀr vi behövde visa en viss ikon skulle vi anvÀnda CSS för att:

    Ladda bilden som bakgrundsbild Definiera bredden och höjden pÄ det element vi behöver ikonen för StÀll in bakgrundspositionen för vÄr bild för att ladda den nödvÀndiga ikonen

För att till exempel ladda sidofÀltets ikoner för sociala medier 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 för bakgrundsposition, bredd och höjd hjÀlper oss att rikta in det specifika avsnittet i bilden som vi vill mata ut:

List25 Sprite, redigerad

Som ett resultat anvÀnder endast den första begÀran om den hÀr bildfilen bandbredd. Efterföljande förfrÄgningar till CDN för bilden kommer att resultera i att den cachade (vanligtvis lokala) versionen laddas, sÄvÀl som att de bara behöver begÀra en enstaka bild mot 6 olika sociala ikoner.

Genom att kombinera JavaScript, CSS och bilder minskade vi antalet förfrÄgningar avsevÀrt.

Kodminifiering

Kodminifiering innebÀr att man tar bort mellanslag och radbrytningar för att minska filstorleken vilket gör det snabbare att ladda pÄ begÀran.

För List25 anvÀnder vi SCSS, ett syntaxbaserat formatmall (Intro to Sass). Detta gör att vi kan strukturera vÄra CSS-filer över flera utvecklingsomrÄden i en lÀttlÀst layout:

List25 SCSS

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

Som ett resultat kunde vi minska vÄr CSS-filstorlek med 28%.

Bildoptimering

Vi optimerade vÄra bilder pÄ 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 komprimerade utan förlust. Detta sÀkerstÀller att filstorlekarna Àr sÄ smÄ som möjligt utan kvalitetsförlust.

List25 Bildoptimering

Vi utbildade ocksÄ alla vÄra författare om vikten av att spara bilder som Àr optimerade för webben. Se vÄr guide om hur du sparar bilder som Àr optimerade för webben.

Javascript-fri social delning

Social delning för List25 Àr verkligen viktigt precis som alla andra webbplatser. Men sociala delningsinsticksprogram kan avsevÀrt sakta ner din webbplats.

List25 Sociala delningsknappar

Medan integreringen av dessa fyra sociala nÀtverksskript inte pÄverkade sidladdningstiden i vÄra tester saktade den synligt ner webbplatsen nÀr den visades pÄ en mobil enhet. Sociala delningsknappar skulle ta nÄgra sekunder att visas, trots att manuserna laddades asynkront, vilket resulterade i att postinnehÄllet rörde sig nÀr knapparna laddades in i vyn.

För att ta itu med detta problem flyttade vi till en (nÀstan) Javascript-fri lösning. Var och en av de sociala nÀtverkens delningsknappar Äterges av vÄrt anpassade WordPress-plugin, och temat Javascript anvÀnds bara för att öppna webblÀsarfönstret nÀr anvÀndaren klickar pÄ en knapp.

Vi ville dock fortfarande visa det totala antalet aktier som ett inlÀgg hade i 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 andelar frÄn varje socialt nÀtverk i metatabellen Post. Dessa rÀkningar uppdateras var 24: e timme, vilket sÀkerstÀller att tidskrÀvande frÄgor inte stÀndigt körs.

Du kan antingen anvÀnda ett API som Sharre eller dissekera den flytande sociala fÀltet för anpassning.

Med hjĂ€lp av Pingdoms RUM (Real User Monitoring) minskade det hĂ€r nya delningsprogrammet den “sanna” sidladdningstiden frĂ„n 6 sekunder till drygt 2 sekunder. Det sĂ€kerstĂ€llde ocksĂ„ att vi minskade antalet begĂ€randen om tredjepartsskript.

Resultat

Vi förbÀttrade vÄr webbplatshastighet avsevÀrt. Lasttiden gick frÄn 2,2 sekunder till 1,22 sekunder.

6

Vi kunde minska vÄr servertid betydligt.

List25 Server svarstid efter byte till SiteGround

Detta hjÀlpte till att minska tiden för nedladdning av en Google-sida som hjÀlpte vÄr genomsökningshastighet.

Webmaster Tools tid spenderad sida

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

List25 Avvisningsfrekvens

Som du kan förestÀlla dig med den lÀgre studsfrekvensen ökade tiden pÄ webbplatsen ocksÄ med över 30 sekunder.

Slutsats

Som du ser kan en snabbare laddning webbplats förbÀttra besökarnas engagemang. De tekniker 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-webbplats.

Vi hoppas att den hÀr artikeln hjÀlpte dig att pÄskynda 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 sedan pÄ vÄr YouTube-kanal för WordPress-sjÀlvstudier. Du hittar oss ocksÄ pÄ Twitter och Facebook.