Fremskynde WordPress Hvordan vi optimaliserte List25 Performance med 256%

Ønsker du å øke hastigheten på WordPress-siden din? Vil du vite WordPress optimalisering triks som kan hjelpe deg å redusere belastningstiden for nettstedet ditt? I denne artikkelen vil vi vise deg hvordan du kan øke WordPress ved å dele hvordan vi optimaliserte vårt List25-nettsted for å øke ytelsen.

Du har sikkert hørt WordPress-hastighet er viktig for SEO. Et raskere nettsted har bedre brukerengasjement, flere sidevisninger og bedre salg. I en strangeloop casestudie fant de at en forsinkelse på en sekund kan koste deg 7% av salget, 11% færre sidevisninger og 16% reduksjon i kundetilfredshet.

Så hvordan øker du faktisk WordPress?

Vel, i stedet for bare å dele en liste med farttips, bestemte vi oss for å gjøre en full case-studie for å vise deg resultatene fra vårt List25-sted sammen med hvordan vi oppnådde alt.

Oversikt

List25 er en underholdningsblogg startet av vår grunnlegger Syed Balkhi. Nettstedet har over 1,5 millioner abonnenter, og YouTube-kanalen har over kvartalet MILLIARDER visninger.

Innholdet på nettstedet er for det meste bilder og videoer som tar opp båndbredde terabytene, slik at total hastighetsoptimalisering var avgjørende for at vi kunne holde kostnadene nede, redusere sideoppgivelse og forbedre tid på stedet.

Før vi begynte optimaliseringen tok vår hjemmeside 2.21 sekunder å laste i henhold til Pingdom. Etter at vi var ferdig, gikk vår lastetid ned til 1,21 sekunder (~ 45% raskere).

Under denne optimaliseringen var vi i stand til å øke hastigheten på serverens responstid, forbedre sidens hastighetsytelsespoengsum, redusere antall totalforespørsel og forbedre total belastetid.

La oss ta en titt på optimaliseringsteknikkene som hjalp oss med å øke hastigheten på vår WordPress-side.

WordPress Hosting

Å ha en god webverten er avgjørende for nettsiden din hastighet. Siden nettstedet vårt ble mer populært, utbrøt vi bare vårt tidligere hostingfirma (HostGator).

Deres servere kunne ikke håndtere et nettsted av denne størrelsen fordi List25 mottar titalls millioner sidevisninger. HostGator er flott for mindre steder, men ikke for noe av denne størrelsen.

Vi så på ulike administrerte WordPress-hostingalternativer, og til slutt endte opp med å bruke SiteGround for hosting List25 fordi de tilbød den beste samlede verdien for dette nettstedet.

Du kan se forbedringen i serverens svartid umiddelbart. Vi gikk fra maks 442ms til 172ms responstid. Det er en forbedring på 256%.

Siteground har bygget ytelsesboosters for spesifikke plattformer som WordPress, Joomla og Magento. Basert på plattformen til nettstedet ditt optimaliserer de serverne dine spesielt, noe som resulterer i en bedre ytelse.

Vi skrev en artikkel om når du skal bytte web hosting som snakker om de 7 nøkkelen indikatorene.

Hvis du ønsker å bytte verter, så gi SiteGround en prøve. WPBeginner-brukere får en eksklusiv 60% rabatt på hosting + gratis domene.

Caching Plugin

Når det gjelder å øke WordPress, er caching den nest viktigste faktoren etter web hosting.

Normalt når en besøkende kommer til ditt WordPress-område, overfører serveren din PHP-forespørselen til MySQL-databasen, som finner siden som blir forespurt, genererer den i fly, og viser den til den besøkende. Dette tar opp mange ressurser. Når du har caching, sparer det tid og ressurser.

Diagrammet nedenfor fremhever prosessen. I layman-termer, tenk på caching som å lage en skrivebordsgenvei som hjelper deg med å komme til filen raskere.

For List25-siden bruker vi SiteGround SuperCacher, et plugin de spesialbygget for sine kunder. På toppen av det lagde de avanserte dynamiske cachingalternativer ved hjelp av Varnish (del av deres ytelsesforsterker).

Hvis du ikke er på Siteground, så ikke bekymre deg. Du kan sette opp cache på WordPress-siden din ved å bruke en av de mange tilgjengelige løsningene som W3 Total Cache eller WP Super Cache.

På WPBeginner bruker vi W3 Total Cache, som gir en rekke sidekrypingsalternativer, database caching og objekt caching.

Som flere hostingfirmaer spesialiserer seg på WordPress, vil vi se flere tilpassede caching-løsninger bygget. Pagely og WPEngine tilbyr også sitt eget innebygde caching system.

CDN

Content Delivery Networks (CDN) kan hjelpe deg med å øke hastigheten på nettsiden din. Vi har brukt MaxCDN siden begynnelsen av List25, så denne delen endret seg ikke.

Vi har skrevet en full artikkel om hva som er en CDN og hvorfor du trenger det sammen med en infografisk.

CDN tillater oss å betjene alle CSS, Javascript og bilder fra et Content Delivery Network. Dette fungerer ved å bestemme stedets besøkende, og serverer innhold fra en server nærmest den besøkende.

Hvis du ikke er i markedet for en premium CDN-løsning, kan du bruke Cloudflare.

Kombinerer filer for å redusere HTTP-forespørsler

Når du legger til flere plugins, legger de ofte sine egne JavaScript- og CSS-filer. Hver ekstra fil er en ny HTTP-forespørsel.

Vi kombinerte disse JavaScript- og CSS-filene i en enkelt fil for hver for å redusere forespørsler og øke hastigheten på ladetiden. Du kan se flere detaljer om dette på hvordan WordPress-plugins påvirker ladetid.

Mens vi nå laster inn litt liten funksjonalitet som vi kanskje ikke trenger på en bestemt del av nettstedet, er denne koden cached på CDN, og resultatene viser at færre forespørsler om filer gir bedre ytelse enn å laste flere mindre JS-filer.

Dette er noe du må gjøre regelmessig fordi plugins du bruker, endrer overtid.

Image Sprites

Vi benyttet seg av et image sprite som kombinerte flere sosiale og nettsted ikoner til et enkelt bilde:

Når vi trengte å vise et bestemt ikon, ville vi bruke CSS til å:

1. Legg bildet som et bakgrunnsbilde
2. Definer bredden og høyden til elementet vi trenger ikonet for
3. Sett bakgrunnsposisjonen for bildet vårt for å laste det nødvendige ikonet

For eksempel, for å laste sidebarens sosiale medierikoner, bruker vi:

li.widget_social_icons ul li float: left; bredde: 36px; høyde: 36px; margin: 0 10px 10px 0; polstring: 0; bakgrunn: url (... /images/sprite.png) no-repeat;  li.widget_social_icons ul li.twitter bakgrunnsstilling: 0 -50px;  li.widget_social_icons ul li.facebook bakgrunnsposisjon: -36px -50px;  li.widget_social_icons ul li.pinterest bakgrunnsposisjon: -72px -50px;  li.widget_social_icons ul li.google bakgrunnsposisjon: -108px -50px;  li.widget_social_icons ul li.rss bakgrunnsposisjon: -144px -50px;  li.widget_social_icons ul li.youtube bakgrunnsposisjon: -180px -50px;  

De Bakgrunnen-stilling, bredde og høyde CSS-egenskaper hjelper oss med å målrette mot den spesifikke delen av bildet som vi vil sende ut:

Som et resultat, bruker bare den første forespørselen for denne bildefilen båndbredde. Etterfølgende forespørsler til CDN for bildet vil resultere i at den cachede (vanligvis lokale) versjonen lastes inn, i tillegg til at det bare trenger å be om et enkelt bilde vs. 6 forskjellige sosiale ikoner.

Ved å kombinere JavaScript, CSS og bilder sammen, reduserte vi antall forespørsler betydelig.

Kode Minifisering

Kodereduksjon innebærer fjerning av hvite plass og linjeskift for å redusere filstørrelsen som gjør det raskere å laste inn når det blir forespurt.

For List25 bruker vi SCSS, et syntaksbasert stilark (Intro til Sass). Dette gjør at vi kan strukturere våre CSS-filer på tvers av flere områder av utvikling i et lettlest layout:

Vi bruker CodeKit til å kompilere SCSS-filene i en enkelt CSS-fil. CodeKit fjerner også hvite rom og linjeskift for å sikre at filen er så liten som mulig:

Som et resultat var vi i stand til å redusere vår CSS filstørrelse med 28%.

Bildeoptimalisering

Vi optimaliserte bildene våre på to områder: vårt WordPress-tema og lastet opp innhold.

For vårt WordPress-tema brukte vi CodeKit for å sikre at alle bilder ble komprimert løst. Dette sikrer at filstørrelsene er så små som mulig uten tap av kvalitet.

Vi har også utdannet alle våre forfattere om viktigheten av å lagre bilder optimalisert for web. Se vår guide for hvordan du lagrer bilder som er optimalisert for web.

Javascript-fri sosial deling

Sosial deling for List25 er virkelig viktig akkurat som alle andre nettsider. Men sosialdelingsplugins kan betydelig redusere nettstedet ditt.

Mens integrering av disse fire sosiale nettverksskriptene ikke påvirket sidelastningstiden i testene, ble det synlig redusert nettsiden når de ble vist på en mobilenhet. Knapper for sosiale deling vil ta noen sekunder å vises, til tross for at skriptene lastes asynkront, noe som resulterer i at innleggets innhold beveger seg som knappene lastes inn i visning.

For å takle dette problemet, flyttet vi til en (nesten) Javascript-fri løsning. Hvert av de sosiale nettverkens delingsknapper blir gjengitt av vår egendefinerte WordPress Plugin, og temaets Javascript brukes bare til å åpne nettleservinduet når brukeren klikker en knapp.

Imidlertid ønsket vi fortsatt å vise totalt antall aksjer et innlegg hadde over alle sosiale nettverk. For å gjøre dette, produserte vi et lite tilpasset WordPress-plugin for å hente og cache de sosiale akseltellingene fra hvert sosialt nettverk til Post-metatabellen. Disse tallene oppdateres hver 24. time, slik at tidkrevende spørringer ikke kjører kontinuerlig.

Du kan enten bruke en API som Sharre eller dissekere Floating Social Bar for tilpasning.

Ved å bruke Pingdom's RUM (Real User Monitoring), reduserte denne nye delingspluggen «sant» lastetid fra 6 sekunder til litt over 2 sekunder. Det sørget også for at vi reduserte antall forespørsler gjort for tredjepartsskript.

Resultat

Vi forbedret vesentlig vår nettsidehastighet. Lastetiden gikk fra 2,2 sekunder til 1,22 sekunder.

Vi var i stand til å redusere serverens responstid betydelig.

Dette bidro til å redusere tiden for å laste ned en side av Google bot som hjalp vår gjennomsøkingsrate.

Vår totale studsfrekvens falt med 7% fordi nettstedet lastet raskere, og ved å bytte verter var vi i stand til å redusere serverfeil.

Som du kan tenke deg med den lavere sprettfrekvensen, gikk tiden på stedet opp også med over 30 sekunder.

Konklusjon

Som du kan se et raskere lastingswebområde, kan du forbedre besøkendes engasjement. Teknikkene vi har diskutert har dekket en rekke grunnleggende og mellomliggende forbedringer som du kan implementere for å optimalisere ditt WordPress-nettsted. 

Vi håper denne artikkelen hjalp deg med å øke hastigheten på WordPress-nettstedet ditt. Du vil kanskje også sjekke ut vår artikkel om 20 må ha WordPress-plugins for 2015.

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.