WordPress versnellen Hoe we de prestaties van lijst 25 met 256% hebben geoptimaliseerd

Wilt u uw WordPress-site versnellen? Wil je de WordPress-optimalisatietrucs kennen die je kunnen helpen om de laadtijd van je site te verkorten? In dit artikel laten we u zien hoe u WordPress kunt versnellen door te delen hoe we onze List25-site hebben geoptimaliseerd om de prestaties te verbeteren.

Je hebt waarschijnlijk gehoord dat WordPress-snelheid belangrijk is voor SEO. Een snellere site heeft een betere gebruikersbetrokkenheid, meer paginaweergaves en betere verkopen. In een case-study van strangeloop vonden ze dat een vertraging van één seconde je 7% van de omzet kan kosten, 11% minder pageviews en 16% minder klanttevredenheid.

Dus hoe versnelt u WordPress eigenlijk??

In plaats van alleen een lijst met snelheidstips te delen, hebben we besloten om een ​​volledige casestudy uit te voeren om u de resultaten van onze List25-site te laten zien, samen met hoe we dit allemaal hebben bereikt.

Overzicht

List25 is een entertainmentblog gestart door onze oprichter Syed Balkhi. De site heeft meer dan 1,5 miljoen abonnees en het YouTube-kanaal heeft meer dan een kwart MILJARD keer bekeken.

De inhoud van de site bestaat voornamelijk uit afbeeldingen en video's die terabytes bandbreedte in beslag nemen, dus optimalisatie van de totale snelheid was cruciaal voor ons om de kosten laag te houden, paginaverlaten te verminderen en de tijd op de site te verbeteren.

Voordat we aan de optimalisatie begonnen, kostte het ons op onze homepage 2,21 seconden om volgens Pingdom te laden. Nadat we klaar waren, zakte onze laadtijd van de pagina naar 1,21 seconden (~ 45% sneller).

Tijdens deze optimalisatie konden we onze reactietijd op de server versnellen, onze prestaties van de prestaties van de paginasnelheid verbeteren, het aantal totale aanvragen verminderen en de totale laadtijd verbeteren.

Laten we eens kijken naar de optimalisatietechnieken die ons hielpen onze WordPress-site te versnellen.

WordPress Hosting

Het hebben van een goede webhost is cruciaal voor de snelheid van uw website. Toen onze site populairder werd, zijn we simpelweg ons vorige hostingbedrijf (HostGator) ontgroeid.

Hun servers konden eenvoudigweg een site van deze omvang niet aan omdat List25 tientallen miljoenen paginaweergaves ontvangt. HostGator is geweldig voor kleinere sites, maar niet voor iets van deze omvang.

We hebben gekeken naar verschillende beheerde WordPress-hostingopties en uiteindelijk gebruikten we SiteGround voor het hosten van List25 omdat ze de beste algemene waarde voor deze site boden..

U kunt onmiddellijk de verbetering in de reactietijd van onze server zien. We gingen van max 442ms naar 172ms responstijd. Dat is een verbetering van 256%.

Siteground heeft prestatieboosters gebouwd voor specifieke platforms zoals WordPress, Joomla en Magento. Op basis van het platform van uw site, optimaliseren ze speciaal uw servers wat resulteert in betere algemene prestaties.

We hebben een artikel geschreven over wanneer je van webhosting moet wisselen, waarbij wordt gesproken over de 7 belangrijkste indicatoren.

Als u hosts wilt veranderen, probeer SiteGround dan zeker eens. WPBeginner-gebruikers krijgen een exclusieve 60% korting op hosting + gratis domein.

Caching-plugin

Als het gaat om het versnellen van WordPress, is caching de op één na belangrijkste factor na uw webhosting.

Normaal gesproken, wanneer een bezoeker uw WordPress-site bezoekt, geeft uw server de PHP-aanvraag door aan de MySQL-database, die de gevraagde pagina vindt, deze on-the-fly genereert en aan de bezoeker toont. Dit kost veel middelen. Wanneer u cachegeheugen hebt, bespaart u tijd en middelen.

Het onderstaande diagram belicht het proces. Denk in termen van leken over caching als een snelkoppeling op het bureaublad waarmee u sneller naar het bestand kunt gaan.

Voor de List25-site gebruiken we de SiteGround SuperCacher, een plug-in die speciaal voor hun klanten is gebouwd. Bovendien voegden ze geavanceerde dynamische cachingopties toe met behulp van Varnish (onderdeel van hun prestatiebooster).

Als je niet op Siteground bent, maak je dan geen zorgen. U kunt de cache instellen op uw WordPress-site met behulp van een van de vele beschikbare oplossingen zoals W3 Total Cache of WP Super Cache.

Bij WPBeginner gebruiken we W3 Total Cache, dat een aantal pagina-cacheopties, database-caching en objectcaching biedt.

Naarmate meer hostingbedrijven zich specialiseren voor WordPress, zullen er meer aangepaste cacheoplossingen worden gebouwd. Pagely en WPEngine bieden ook hun eigen ingebouwd cachesysteem.

CDN

Content Delivery Networks (CDN) kan u helpen de snelheid van uw website te verbeteren. We gebruiken MaxCDN sinds het begin van List25, dus dit deel is niet veranderd.

We hebben een volledig artikel geschreven over wat een CDN is en waarom je het nodig hebt, samen met een infographic.

Met CDN kunnen we alle CSS, Javascript en afbeeldingen van een Content Delivery Network bedienen. Dit werkt door de locatie van de sitebezoeker te bepalen en inhoud op te slaan vanaf een server die zich het dichtst bij de bezoeker bevindt.

Als u niet op zoek bent naar een premium CDN-oplossing, dan kunt u Cloudflare gebruiken.

Bestanden combineren om HTTP-verzoeken te verminderen

Naarmate u meer plug-ins toevoegt, voegen ze vaak hun eigen JavaScript- en CSS-bestanden toe. Elk extra bestand is een nieuw HTTP-verzoek.

We hebben deze JavaScript- en CSS-bestanden samengevoegd in één bestand voor elk om verzoeken te verminderen en de laadtijd te versnellen. U kunt hier meer details over zien hoe WordPress-plug-ins de laadtijd beïnvloeden.

Hoewel we nu wat kleine functionaliteit laden die we mogelijk niet nodig hebben op een bepaald gedeelte van de site, wordt deze code in de cache opgeslagen op het CDN en de resultaten laten zien dat minder aanvragen voor bestanden betere prestaties bieden dan het laden van verschillende kleinere JS-bestanden.

Dit is iets wat u regelmatig moet doen, omdat de plug-ins die u gebruikt, overuren wijzigen.

Image Sprites

We maakten gebruik van een afbeeldingsprite die verschillende sociale en sitepictogrammen combineerde tot één enkele afbeelding:

Wanneer we een bepaald pictogram moesten weergeven, gebruikten we CSS om:

1. Laad de afbeelding als achtergrondafbeelding
2. Definieer de breedte en hoogte van het element waarvoor we het pictogram nodig hebben
3. Stel de achtergrondpositie in voor onze afbeelding om het benodigde pictogram te laden

Om de social media-pictogrammen van de zijbalk te laden, gebruiken we bijvoorbeeld:

li.widget_social_icons ul li float: left; breedte: 36px; hoogte: 36px; marge: 0 10px 10px 0; opvulling: 0; achtergrond: url (... /images/sprite.png) geen herhaling;  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;  

De background-position, breedte en hoogte CSS-eigenschappen helpen ons het specifieke gedeelte van de afbeelding te targeten dat we willen uitvoeren:

Als gevolg hiervan gebruikt alleen de eerste aanvraag voor dit afbeeldingsbestand de bandbreedte. Daaropvolgende verzoeken aan de CDN voor de afbeelding resulteren erin dat de in cache opgeslagen (meestal lokale) versie wordt geladen, evenals dat slechts één enkele afbeelding moet worden aangevraagd versus zes verschillende sociale pictogrammen.

Door JavaScript, CSS en afbeeldingen samen te combineren, hebben we het aantal verzoeken aanzienlijk verminderd.

Codering

Codeminimalisatie omvat het verwijderen van witruimte en regeleinden om de bestandsgrootte te verkleinen, waardoor het sneller kan worden geladen wanneer daarom wordt gevraagd.

Voor List25 gebruiken we SCSS, een syntaxisgebaseerd stylesheet (Intro to Sass). Dit stelt ons in staat onze CSS-bestanden in verschillende ontwikkelgebieden te structureren in een gemakkelijk leesbare lay-out:

We gebruiken CodeKit om de SCSS-bestanden vervolgens in een enkel CSS-bestand te compileren. CodeKit verwijdert ook witruimten en regeleinden om ervoor te zorgen dat het bestand zo klein mogelijk is:

Als gevolg hiervan konden we onze CSS-bestandsgrootte met 28% verminderen.

Beeldoptimalisatie

We optimaliseerden onze afbeeldingen op twee gebieden: ons WordPress-thema en geüploade inhoud.

Voor ons WordPress-thema hebben we met CodeKit ervoor gezorgd dat alle afbeeldingen zonder verlies zijn gecomprimeerd. Dit zorgt ervoor dat de bestandsgroottes zo klein mogelijk zijn, zonder kwaliteitsverlies.

We hebben ook al onze schrijvers voorgelicht over het belang van het opslaan van afbeeldingen die zijn geoptimaliseerd voor internet. Raadpleeg onze handleiding over het opslaan van afbeeldingen die zijn geoptimaliseerd voor internet.

Sociaal delen zonder Javascript

Social sharing voor List25 is net als elke andere website echt belangrijk. Plug-ins voor sociaal delen kunnen uw site echter aanzienlijk vertragen.

Hoewel de integratie van de scripts van deze vier sociale netwerken geen invloed had op de laadtijd van pagina's in onze tests, vertraagde het de website zichtbaar tijdens het bekijken op een mobiel apparaat. Knoppen voor het delen van sociale gegevens zouden een paar seconden nodig hebben om te verschijnen, ondanks dat de scripts asynchroon worden geladen, waardoor de inhoud van de berichten wordt verplaatst terwijl de knoppen in het scherm worden geladen.

Om dit probleem aan te pakken, zijn we overgegaan op een (bijna) Javascript-vrije oplossing. Alle deelknoppen van het sociale netwerk worden weergegeven door onze aangepaste WordPress-plug-in en het Javascript van het thema wordt alleen gebruikt om het webbrowservenster te openen wanneer de gebruiker op een knop klikt.

We wilden echter nog steeds het totale aantal shares weergeven dat een bericht had op alle sociale netwerken. Hiervoor hebben we een kleine aangepaste WordPress-plug-in gemaakt om het aantal sociale shares van elk sociaal netwerk op te halen en op te slaan in de tabel Post-meta. Deze tellingen worden elke 24 uur bijgewerkt, waardoor tijdrovende zoekopdrachten niet constant worden uitgevoerd.

Je kunt een API zoals Sharre gebruiken of de zwevende sociale balk voor maatwerk ontleden.

Door gebruik te maken van RUM van Pingdom (Real User Monitoring), verminderde deze nieuwe plugin voor delen de 'ware' laadtijd van de pagina van 6 seconden naar iets meer dan 2 seconden. Het heeft er ook voor gezorgd dat we het aantal aanvragen voor scripts van derden hebben verlaagd.

Resultaat

We hebben onze sitesnelheid aanzienlijk verbeterd. Laadtijd ging van 2,2 seconden naar 1,22 seconden.

We konden onze reactietijd van onze server aanzienlijk verminderen.

Dit hielp de tijd die het kostte om een ​​pagina te downloaden door de Google-bot te verminderen, wat onze crawlsnelheid heeft verbeterd.

Ons algehele bouncepercentage daalde met 7% omdat de site sneller werd geladen en door van host te wisselen, konden we serverfouten verminderen.

Zoals je je kunt voorstellen met het lagere bouncepercentage, ging de tijd die op de site werd doorgebracht ook met meer dan 30 seconden omhoog.

Conclusie

Zoals u kunt zien, kan een sneller ladende website de betrokkenheid van bezoekers vergroten. De technieken die we hebben besproken, hebben betrekking op een reeks basis- en tussenliggende verbeteringen die u kunt implementeren om uw WordPress-site te optimaliseren. 

We hopen dat dit artikel u heeft geholpen om uw WordPress-site te versnellen. U kunt ook ons ​​artikel over 20 WordPress-plug-ins voor 2015 bekijken.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.