Het hebben van een trage website is een frustrerende ervaring. Niet alleen scoort het slecht in de zoekmachines (laadsnelheid is een van de rangorde factoren in Google), het geeft je bezoeker ook een slechte gebruikerservaring. Hoewel de meeste webmasters hun websites graag willen versnellen, beschikken de meeste van hen niet over de technische kennis om dit te doen. Als je in dit kamp valt en WordPress gebruikt, hebben we een complete snelheidsoptimalisatiegids voor je. De volgende stappen zijn wat we hebben gedaan voor deze site en ze hebben goed voor ons gewerkt.

Slank de website af

Wanneer een bezoeker uw site bezoekt, moet de browser de pagina van uw server opvragen en de pagina volledig laden voordat de lezer deze kan bekijken. Dit betekent dat als u een opgeblazen site heeft, het lang zal duren voordat de browser deze download en rendert. Hier zijn enkele manieren om uw WordPress-site af te slanken:

1. Herhaal bij het themaontwerp van uw site

Evalueer het ontwerp van uw site opnieuw en kijk of u overbodige items van de site kunt verwijderen. Het heeft geen zin om teveel informatie in de zijbalk te stoppen als de bezoeker alleen geïnteresseerd is in de daadwerkelijke inhoud. Hier zijn enkele dingen die u kunt verwijderen:

  • Fantasievolle schuifregelaar, animatie en effecten.
  • Diverse widgets op de zijbalk
  • Advertenties - alleen als u te veel advertenties heeft toegevoegd. In sommige gevallen kunt u meer verdienen met minder advertenties

2. Verwijder onnodige plug-ins

U bent twee hoofdtypen van WordPress-plug-ins: één die alleen van invloed is op het admingebied en een die extra inhoud toevoegt aan de site. Voor de laatste is het altijd vergezeld van extra javascript- en css-bestanden die extra gewicht aan de site toevoegen.

Bekijk uw lijst met plug-ins en deactiveer die oude plug-ins die inefficiënt zijn en niet langer in gebruik zijn. Als een plug-in al geruime tijd niet is bijgewerkt, wilt u misschien ook andere plug-ins bekijken die minder zwaar zijn en toch efficiënter kunnen werken.

3. Verklein de bestandsgrootte van uw HTML, CSS en Javascript

Er zijn twee manieren om de algehele grootte van uw site te verminderen. De eerste is om meerdere stylesheets en javascript-bestanden in één te combineren, en de tweede is om de bestanden te verkleinen. Minifying betekent het verwijderen van onnodige spaties en opmerkingen en het combineren van meerdere herhaalde codes in één. Een goede plug-in die u kunt gebruiken om dit te bereiken, is de plug-in W3 Total Cache.

Zet op de pagina W3 Total Cache-instellingen onder de "Algemene instellingen" de modus "Verkleinen" aan.

Ga vervolgens naar "Verkleinen -> HTML & XML" sectie, vink de vakjes naast "Inschakelen", "Inline CSS Minificatie", "Inline JS Minification" en "Verwijder lijnonderbreking".

Vervolgens is de sectie "JS-minificatie". Dit is een lastig onderdeel omdat het voor sommige thema's werkt, maar niet voor anderen. Persoonlijk heb ik geen geluk met deze instelling, maar misschien wilt u het uitproberen en kijken of het werkt voor uw site.

Eén ding dat ik voor deze instelling aanbeveel, is om "Verkleinen" te gebruiken in plaats van "Alleen combineren." Het combineren van verschillende javascripts kan ongewenste effecten veroorzaken en de site doorbreken.

Het laatste deel dat u hier moet configureren, is het gedeelte "CSS-minificatie". Hiermee kun je alle CSS die in het thema wordt gebruikt verkleinen en combineren.

Om hier het beste uit te halen, is het het beste om uw website te openen, de broncode te bekijken en alle CSS-links naar het veld "Bestand URI" in het gedeelte "CSS-bestandsbeheer" te kopiëren. Alle CSS-bestanden die u aan dit veld hebt toegevoegd, worden verkleind en gecombineerd tot één CSS-bestand.

4. Optimalisatie van de afbeeldingen

Afbeeldingsbestanden zijn meestal de bestanden die het grootste deel van de bestandsgrootte van de site vormen, dus het is belangrijk dat u de afbeeldingen optimaliseert en ze zo klein mogelijk houdt. Wp Smush.it is een geweldige plug-in die je afbeeldingen optimaliseert wanneer je ze uploadt. Het komt ook met een bulk-smush-functie die alle eerder geüploade afbeeldingen kan optimaliseren.

Versnel de laadsnelheid van de site

Sommige manieren om de laadsnelheid van de site te versnellen, zijn onder meer:

  • cache de site
  • stel browsercache in
  • schakel over naar jQuery van Google
  • uitgesteld laden van javascript
  • gebruik lui laden van afbeeldingen
  • gebruik asynchrone javascript
  • gebruik CDN

Hier zijn enkele plug-ins die het bovengenoemde werk voor u kunnen doen.

1. W3 Total Cache

We hebben dekking besproken in de bovenstaande sectie, maar wat W3 Total Cache krachtig maakt, is de cachemodule. Schakel eerst de module "Pagina-cache" in het gedeelte "Algemene instellingen" in. Selecteer op een shared hosting "Disk: Basic" voor de cache-modus van de pagina. Selecteer voor VPS of dedicated server 'Disk: Enhanced'.

Blader verder op de pagina totdat u het gedeelte 'Browsercache' ziet; vink het vakje aan om het ook in te schakelen.

Hiermee wordt zowel de cache van de pagina's als de cache voor de onthulling voor uw site ingeschakeld. De pagina-cache is gewoon een statische HTML-pagina die wordt weergegeven in plaats van de dynamische PHP-pagina. De browsercache informeert de browser om uw pagina in de cache op te slaan en deze vanuit de cache te serveren wanneer de lezer dezelfde pagina opnieuw bezoekt.

2. WP Uitgesteld script

De meeste javascript-bestanden blokkeren de aard, wat betekent dat de site moet wachten totdat alle javascript-bestanden zijn geladen voordat de inhoud kan worden geladen. Dit wordt ook wel synchroon laden genoemd. Een van de manieren om dit te bestrijden is door javascripts naar de onderkant van de pagina te verplaatsen, zodat deze pas worden geladen nadat de inhoud is geladen.

WP Deferred Script is een nuttige plug-in die alle wachtrijen naar de onderkant van de pagina verplaatst. Het gebruikt lab.js in de backend en werkt met de meeste plug-ins. Er zijn geen instellingen om te configureren. Eenmaal geactiveerd, zal het automatisch het laden van javascript automatisch uitstellen naar het einde van de pagina. Een ander voordeel is dat het asynchroon javascripts laadt, wat betekent dat het javascript parallel met de inhoud laadt.

3. Jetpack Photon

Een andere goede manier om de laadsnelheid te verlagen, is door alle afbeeldingen van een CDN-bron te laden. Als u de Jetpack-plug-in hebt geïnstalleerd, wordt door het activeren van de Photon-module automatisch een afbeeldings-CDN aan uw site toegevoegd.

Als u een extern CDN gebruikt, zoals MaxCDN of Amazon CloudFront, kunt u ook de CDN-module in de W3 Total Cache-plug-in configureren om gebruik te maken van de CDN-services.

4. Luie lading

Is het je opgevallen hoe de afbeeldingen op aanvraag worden geladen wanneer je naar beneden scrolt? Dit wordt Lazy Loading genoemd en het is ook een goede manier om de site te versnellen. De plug-in die we hier gebruiken, onthult Lazy Load, maar als je lui laadt, zijn er genoeg luie laadplug-ins die je kunt gebruiken; sommige zijn zelfs geoptimaliseerd voor video's en iframe.

5. DFP

Als u advertenties op uw site weergeeft, weet u dat advertenties vaak het langst worden geladen en ervoor zorgen dat de site traag wordt. Het ergste is nog, de meeste advertenties zijn synchroon van aard en blokkeren de inhoud totdat deze volledig is geladen. Een van de manieren om van dit probleem af te komen, is door advertenties weer te geven via Google DFP. Voor degenen die het niet weten, is Google DFP een advertentiebeheersprogramma waarmee u uw advertenties kunt beheren.

Op deze site gebruiken we het script jquery.dfp.js om alle DFP-tags op aanvraag te laden, dus het laden van de site wordt niet vertraagd. De implementatie kan nogal ingewikkeld zijn en we zullen het hier niet behandelen. Als er voldoende interesse is (u kunt uw interesse in de opmerkingen kenbaar maken), zal ik een andere zelfstudie uitvoeren waarin het stapsgewijze proces voor de implementatie ervan in uw site wordt beschreven.

Conclusie

Als u de bovenstaande stappen hebt gevolgd, kan ik u verzekeren dat uw site nu sneller wordt uitgevoerd dan voorheen, zelfs als u op een gedeelde host bent. Een goede manier om de laadsnelheid van uw site te testen, is de tool Google PageSpeed ​​Insights. Voer eenvoudig uw URL in en deze analyseert uw site voor u. Doe het voor en na de optimalisatie en zie de enorme verschillen.

Afbeelding tegoed: nergens snel heen