Förhöjning av WordPress Hur vi optimerade List25 Prestanda med 256%

Vill du påskynda din WordPress-webbplats? Vill du veta WordPress optimeringstrender som kan hjälpa dig att minska din belastningstid på webbplatsen? I den här artikeln visar vi hur du snabbar på WordPress genom att dela hur vi optimerade vår List25-webbplats för att öka prestanda.

Du har nog hört 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 strangeloop-fallstudie fann de att en ensonsfördröjning kan kosta 7% av försäljningen, 11% färre sidvisningar och 16% minskning av kundnöjdhet.

Så hur snabbar du faktiskt WordPress?

Nåväl, istället för att bara dela en lista med tips om hastighet, bestämde vi oss för att göra en fullständig fallstudie för att visa resultat från vår List25-sida tillsammans med hur vi lyckades.

Översikt

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

Innehållet på webbplatsen är mestadels bilder och videor som tar upp bandbredds terabytor, så den totala hastighetsoptimeringen var avgörande för att vi skulle kunna hålla kostnaderna nere, minska nedläggningen och förbättra tiden på platsen.

Innan vi började optimera tog vår hemsida 2,21 sekunder att ladda enligt Pingdom. När vi var färdiga, föll vår sidlastningstid till 1,21 sekunder (~ 45% snabbare).

Under denna optimering kunde vi påskynda vår serverkonsvarstid, förbättra vår prestanda för sidhastighet, minska antalet totala förfrågningar och förbättra den totala belastningstiden.

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

WordPress Hosting

Att ha en bra webbhotell är avgörande för din webbplatshastighet. Eftersom vår webbplats blev mer populär utbröt vi helt enkelt vårt tidigare webbhotell (HostGator).

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

Vi tittade på olika hanterade WordPress-hostingalternativ och slutade slutligen använda SiteGround för hosting List25 eftersom de erbjöd det bästa totala värdet för den här webbplatsen.

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

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

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

Om du vill byta värdar, ge definitivt SiteGround ett försök. WPBeginner-användare får en exklusiv 60% rabatt på hosting + gratis domän.

Cacheplugin

När det gäller att påskynda WordPress är caching den näst viktigaste faktorn efter din webbhotell.

Normalt när en besökare kommer till din WordPress-webbplats, skickar din server PHP-förfrågan till MySQL-databasen som hittar den sida som begärs, genererar den på flyg och visar den till besökaren. Det tar upp många resurser. När du har cachning sparar du tid och resurser.

Diagrammet nedan belyser processen. Tänk på caching när det gäller att skapa en skrivbordsgenväg som hjälper dig att komma till filen snabbare.

För List25-webbplats använder vi SiteGround SuperCacher, ett plugin som de speciellt byggde för sina kunder. Utöver detta lade de till avancerade dynamiska cacheringsalternativ med hjälp av Varnish (del av deras prestanda booster).

Om du inte är på Siteground, oroa dig inte. Du kan konfigurera cacheminnet 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 alternativ för cachelagring av sidor, databas cachning och objekt caching.

Eftersom fler hostingföretag specialiserar sig för WordPress ser vi fler anpassade caching-lösningar som byggts. Pagely och WPEngine erbjuder även sitt eget inbyggda cachningssystem.

CDN

Content Delivery Networks (CDN) kan hjälpa dig att öka din webbplatshastighet. Vi har använt MaxCDN sedan början av List25, så denna del ändrades inte.

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

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

Om du inte är på marknaden för 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 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 var och en för att minska önskemål och öka uppladdningstiden. Du kan se mer information om detta på hur WordPress-plugins påverkar laddningstiden.

Medan vi nu laddar lite liten 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.

Detta är något du måste göra regelbundet eftersom plugins du använder förändrar övertid.

Image Sprites

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

När vi behövde visa en viss ikon, skulle vi använda CSS till:

1. Ladda bilden som en 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 bild för att ladda den nödvändiga ikonen

Till exempel, för att ladda sidofältets sociala medierikoner använder vi:

li.widget_social_icons ul li float: left; bredd: 36px; höjd: 36px; marginal: 0 10px 10px 0; vaddering: 0; bakgrund: url (... /images/sprite.png) no-repeat;  li.widget_social_icons ul li.twitter bakgrundsposition: 0 -50px;  li.widget_social_icons ul li.facebook bakgrundsposition: -36px -50px;  li.widget_social_icons ul li.pinterest bakgrundsposition: -72px -50px;  li.widget_social_icons ul li.google bakgrundsposition: -108px -50px;  li.widget_social_icons ul li.rss bakgrundsposition: -144px -50px;  li.widget_social_icons ul li.youtube bakgrundsposition: -180px -50px;  

De bakgrund-positionen, bredd och höjd CSS-egenskaper hjälper oss att rikta in den specifika delen av bilden som vi vill utföra:

Till följd av detta 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, liksom endast att behöva be om en enda bild vs 6 olika sociala ikoner.

Genom att kombinera JavaScript, CSS och bilder tillsammans, reducerade vi antalet begäranden betydligt.

Kod Minifiering

Kodminifiering innebär att du tar bort whitespace och radbrytningar för att minska filstorleken vilket gör det snabbare att ladda när det begärs.

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

Vi använder CodeKit för att sedan kompilera SCSS-filerna i en enda CSS-fil. CodeKit tar bort även blankytor och rader 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 komprimerades förlustlöst. Detta säkerställer att filstorlekarna är så små som möjligt, utan att det går förlorad kvalitet.

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

Javascript-fri social delning

Social delning för List25 är verkligen viktig precis som vilken som helst annan webbplats. Men pluggar för social delning kan avsevärt sakta ner din webbplats.

Även om integrering av dessa fyra sociala nätverkskonflikter inte påverkade sidladdningstiden i våra test sänktes den synligt på webbplatsen när den visades på en mobilenhet. Knappar för sociala delning skulle ta några sekunder att visas, trots att skriptet laddas asynkront, vilket resulterar i att inlägget flyttas som knapparna laddade i sikte.

För att ta itu med detta problem flyttade vi till en (nästan) Javascript-fri lösning. Varje av de sociala nätverkens delningsknappar görs 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 emellertid 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 cache de sociala delräkningarna från varje socialt nätverk till Postmetabordet. Dessa räkningar uppdateras var 24: e timme, vilket gör att tidskrävande frågor inte löper ständigt.

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

Med hjälp av Pingdom's RUM (Real User Monitoring) minskade denna nya delprofil min "sant" sidlastningstid från 6 sekunder till drygt 2 sekunder. Det säkerställde också att vi minskade antalet förfrågningar som gjordes för skript från tredje part.

Resultat

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

Vi har kunnat minska vår serverrespons tid väsentligt.

Detta bidrog till att minska tiden för nedladdning av en sida av Google Bot som hjälpte vår krypningsgrad.

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

Som du kan tänka dig med den lägre studsfrekvensen, gick tiden på plats också upp med över 30 sekunder.

Slutsats

Som du kan se en snabbare lastning webbplats kan förbättra besökarens 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 ditt WordPress-webbplats. 

Vi hoppas att den här artikeln hjälper dig att snabba på 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 kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.