Waarom uw website langzaam laadt (en hoe u dit kunt oplossen): 22 stappen die ik heb gedaan om 100% GTmetrix PageSpeed-scores en onmiddellijke laadtijden te krijgen

Langzaam ladende website


Heb een langzaam ladende website?

Wat als ik je vertel dat mijn site wordt geladen <1’s met 100% GTmetrix-scores? En dat ik al een van de meest populaire WordPress-snelheidsgidsen online heb geschreven met meer dan 400 reacties?

Sommige optimalisaties zijn specifiek voor WordPress, andere zijn universeel. Maar ze zijn allemaal best practices, zelfs als u Squarespace, Shopify, Wix en andere platforms voor het bouwen van websites gebruikt.

Als je vragen hebt of hulp nodig hebt, kun je je GTmetrix-rapport in de reacties plaatsen en ik zal je een paar tips geven. Je kan ook huur mijn website snelheidsoptimalisatie als je WordPress gebruikt.

1. Test uw website in GTmetrix

GTmetrix laat je zien:

  • Laadtijd (primaire statistiek)
  • Welke afbeeldingen moet worden geoptimaliseerd
  • Welke plug-ins worden langzaam geladen (controleer het tabblad Waterval)
  • Jouw tijd tot eerste byte (geeft de snelheid van uw hosting aan)
  • Of je nu cache-plug-in doet zijn werk (ik raad WP Rocket aan)
  • Of je nu een Content Delivery Network (Ik raad Cloudflare aan)
  • Langzaam laden externe bronnen (AdSense, Maps, YouTube / Facebook-insluitingen)

Snelle reparaties?
Hosting is de # 1 factor in de officiële WordPress-optimalisatiegids (verreweg). Het verbetert misschien de GTmetrix-scores niet, maar het kan de laadtijden met meerdere seconden verbeteren, vooral als je van een langzame host (Bluehost, HostGator, GoDaddy) naar een snelle host gaat (SiteGround, Cloudways). Deze twee hosts scoorden het hoogst in meer dan 40 Facebook-peilingen die ik van Facebook-groepen heb verzameld.

Cache-plug-ins hebben de grootste invloed op scores en verbeteren ook de laadtijden. WP Rocket is beter dan W3 Total Cache of WP Fastest Cache omdat het meer functies heeft (zoals lui laden, database opschonen en Google Font + Analytics-optimalisatie) terwijl andere cacheplug-ins dat niet doen.

WordPress Speed ​​Video-zelfstudie
Als je WordPress gebruikt, heb ik vele uren besteed aan het maken van deze 42 minuten durende video over het versnellen van WordPress-sites. U kunt tijdstempels in de videobeschrijving gebruiken om naar specifieke secties te springen.

Het bewijs is de pudding:

2019-GTmetrix-rapport

2. Formaat van grote afbeeldingen wijzigen

Dit is wat dienen geschaalde afbeeldingen betekent in GTmetrix.

Dit betekent dat u grote afbeeldingen met onjuiste afmetingen uploadt. Elk gedeelte van uw website heeft specifieke afmetingen (schuifregelaars, miniaturen, carrousel-, volledige breedte- en zijbalkafbeeldingen).

Ik weet bijvoorbeeld dat de inhoud van mijn blog 680 pixels breed is. Alle afbeeldingen met volledige breedte die ik voor mijn blog gebruik, moeten altijd naar die afmetingen worden aangepast.

GTmetrix toont u alle niet-geoptimaliseerde afbeeldingen (en de juiste afmetingen waarnaar ze moeten worden verkleind), maar alleen voor de enkele pagina die u test. Het enige dat u hoeft te doen, is het formaat van die afbeeldingen wijzigen en de oude versie vervangen door de nieuwe.

Serveer geschaalde afbeeldingen

Bonus: maak een spiekbriefje – noteer alle verschillende afbeeldingsformaten op uw website.

  • Logo: 200 x 58 px
  • Favicon: 16 x 16 px
  • Schuifregelaars: 1903 x 400 px
  • Carrouselafbeeldingen: 115px
  • Widgetafbeeldingen: 420 x 250 px
  • Uitgelichte afbeeldingen: 250 x 250 px
  • Afbeeldingen van blogpost met volledige breedte: 680px
  • Yoast Twitter OG Afbeelding: 1024 x 512px
  • Yoast Facebook OG-afbeelding: 1200 x 630px

Squarespace, Wix, en WordPress-thema’s moeten instructies bevatten voor het vergroten of verkleinen van afbeeldingen.

3. Afbeeldingen comprimeren

Dit is wat afbeeldingen optimaliseren betekent in GTmetrix.

Er zijn veel tools om dit te doen (ik gebruik de ShortPixel WordPress-plug-in). Zorg dat je verwijderen EXIF-gegevens om afbeeldingen nog sneller te laten laden, wat ook kan worden gedaan in een aantal van de onderstaande tools.

beeldoptimalisatie

Hulpmiddelen voor beeldcompressie

Zal ik kwaliteit verliezen?
Zelfs als u kiest voor compressie zonder verlies, merkt u mogelijk een klein kwaliteitsverlies. Daarom kunt u het beste vooraf een paar afbeeldingen testen en een back-up maken als u alle afbeeldingen in bulk optimaliseert.

4. Voeg caching toe

Als je geen gebruik van WordPress, uw platform moet ervoor zorgen caching, minificatie, het combineren van bestanden en andere optimalisaties in GTmetrix waarvoor normaal gesproken een plug-in nodig zou zijn.

Als je gebruikt WordPress, vraag jezelf:

  • Gebruikt u een cacheplug-in?
  • Welke cacheplug-in gebruikt u?
  • Heb je het geconfigureerd met de optimale instellingen?

Deze 3 factoren hebben de grootste invloed op uw scores in GTmetrix, Google PageSpeed ​​Insights en vrijwel alle tools voor snelheidstests. Caching en hosting zijn super belangrijk!

Welke cacheplug-in is het beste?
ik raad aan WP Rocket wat een premium cache plugin is. Het wordt geleverd met veel functies die andere cacheplug-ins niet hebben (database opschonen, hartslagcontrole, lui laden, optimalisatie van Google Fonts + Analytics, CDN-integratie). Als je deze functies met andere cacheplug-ins zou willen gebruiken, zou je ongeveer 6 extra plug-ins moeten installeren om voor deze optimalisaties te zorgen, terwijl WP Rocket alles heeft ingebouwd. De dichtstbijzijnde gratis cacheplug-in die dit doet, is Swift.

WP Rocket werd ook beoordeeld als # 1 in meerdere Facebook-peilingen:

2016 beste cacheplug-in-poll

Poll voor cacheplug-in 2019

Swift vs WP Rocket

Poll voor cacheplug-in 2016

Beste cacheplug-ins 2018 poll

wp rocket vs w3 totla cache

5. Upgrade naar PHP 7.3

Dit is alleen van toepassing als u hosting heeft gekocht (bijv. SiteGround, Bluehost, GoDaddy).

Upgraden naar PHP 7+ is heel eenvoudig en zou een aanzienlijke impact moeten hebben op de laadtijden.

WordPress PHP Benchmarks

Stap 1: Log in op uw hostingaccount en zoek de PHP-versiebeheerder (of vergelijkbaar).

Stap 2: Upgrade naar de hoogste PHP-versie die beschikbaar is op uw hostingaccount (bijv. PHP 7.3).

Stap 3: Test uw website op fouten. Als je er een ziet, komt dit waarschijnlijk door incompatibele WordPress-plug-ins, in welk geval je kunt gebruiken PHP-compatibele checker. Deze tool laat je incompatibele plug-ins zien; u moet ze verwijderen of terugkeren naar een eerdere PHP-versie.

Stap 4: Houd uw PHP-versie actueel. Als je host een nieuwe stabiele PHP-versie uitbrengt, gebruik deze dan.

6. Controleer de reactietijden van de server

Google PageSpeed ​​Insights vertelt je of je langzaam bent server reactietijden (Google raadt aan dat het onder de 200 ms moet zijn). Servers worden uiteraard beheerd door uw hosting.

Reduceer de reactietijd van de server

Hoe de reactietijd van de server te verbeteren

  • Betere hosting krijgen (bijv. Cloudways of SiteGround)
  • Blijf weg van EIG-hosts die berucht langzaam zijn
  • Zorg ervoor dat caching is ingeschakeld op uw website
  • Gebruik een contentleveringsnetwerk zoals het CDN van Cloudflare
  • Verwijder alle zware en ongebruikte plug-ins op uw website
  • Gebruik een premium DNS-provider (haal dit via uw host)

7. Kies de juiste hosting

Hosting is verreweg de belangrijkste factor voor websitesnelheid:

Veel tutorials zullen je proberen te verwijzen naar Bluehost, HostGator, GoDaddy en EIG-merken.

Dit zijn allemaal hosts van lage kwaliteit die u waarschijnlijk een overvloed aan problemen zullen bezorgen: trage reactietijden van de server, stilstandtijden, verouderde PHP-versies, beveiligingsproblemen en slechte ondersteuning.

Doe je onderzoek in Facebook-groepen en bekijk enkele opiniepeilingen die zijn genomen. Je kunt ook kijken naar mensen die van en naar bepaalde hostingbedrijven zijn gemigreerd en hun resultaten hebben gepost.

SiteGround en Cloudways zijn meestal # 1 en # 2 in meer dan 40 Facebook-polls. SiteGround is goed voor gedeelde hosting en Cloudways voor cloudhosting. Beide hosts bieden gratis websitemigraties aan.

Juli 2019 Hosting-aanbeveling

Aanbevelingen van Elementor Hosting

2017-WordPress-Hosting-FB-Poll

Hosting Aanbeveling Poll

WordPress-Host-Poll-augustus-2018

Shared-Hosting-Poll-2017

2019-Hosting-Poll

Go-To-Hosting-bedrijf

WordPress-Hosting-Poll-2017

Aanbevelingen voor hosting van 2018

Favoriete hosting voor Elementor

2016-WordPress-Hosting-FB-Poll

WordPress Hosting Poll

WordPress Hosting Poll september 2018.png

Managed-WordPress-Hosting-Poll-2017

2019-Hosts-Poll-1

Hosting-Poll-For-Speed

WordPress-Hosting-Poll-1 juni

Migreren naar snellere hosting maakt een groot verschil:

Overschakelen naar SiteGround

SiteGround laadtijdmigratie

Bluehost voor SiteGround GTmetrix

HostGator naar SiteGround

SiteGround Google PageSpeed ​​Insights

SiteGround GoGeek laadtijd

Verminderde laadtijden met SiteGround

Nieuwe SiteGround-responstijden

Reactietijden van Cloudways

HostGator naar migratie van sitegronds

SiteGround reactietijden op Joomla

Overgeschakeld naar SiteGround Hosting

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

SiteGround Blogging Migration

Nieuwe SiteGround-responstijd

Verbetering van de reactietijd op de site

Ongetiteld

8. Voeg het CDN van Cloudflare toe

EEN CDN (content delivery network) betekent dat uw website wordt gehost in meerdere datacenters over de hele wereld. Dit vermindert de geografische afstand tussen uw server en bezoeker, terwijl u bronnen naar die datacentra overlaadt (wat de belasting op uw eigen server verlicht). Je kunt zelfs meerdere CDN’s gebruiken, zoals StackPath of KeyCDN wat nog meer datacenters toevoegt.

CDN-WordPress-aanbeveling

Cloudflare is gratis en heeft 200+ datacenters wat ruim boven de meeste premium CDN’s ligt.

Stap 1: Controleer of uw host u Cloudflare in uw account laat inschakelen. Als dat het geval is, activeert u Cloudflare, dan bent u klaar. Als dat niet het geval is, moet u naamservers wijzigen vanaf stap 2.

Stap 2: Meld u aan voor Cloudflare, kies het gratis abonnement, voeg uw website toe en laat Cloudflare hun scan uitvoeren. Cloudflare leidt je door een reeks pagina’s totdat ze je 2 naamservers toewijzen.

Stap 3: Log in bij uw domeinregistreerder en vind de optie om aangepaste naamservers in te stellen (Google “custom namesevers on XYZ hosting company)”. Vervang die naamservers door Cloudflare’s.

9. Schakel Hotlinking uit

Als u afbeeldingen van hoge kwaliteit op uw website heeft, ‘lenen’ mensen deze mogelijk voor gebruik op hun eigen site. Maar in plaats van de afbeeldingen op te slaan en te uploaden, kopiëren en plakken mensen ze van uw site naar die van hen. Dit betekent dat u die afbeeldingen op uw server host (niet goed).

U kunt hotlink-beveiliging inschakelen in Cloudflare of vaak, in je hostingaccount. Dit voorkomt dat mensen uw kostbare serverbronnen gebruiken door uw afbeeldingen te kopiëren / plakken.

Cloudflare Hotlink-bescherming

10. Bestanden verkleinen

GTmetrix vertelt je om HTML-, CSS- en JavaScript-bestanden te verkleinen.

Uw cacheplug-in moet hiervoor zorgen (zo niet, zorg dan dat hun instellingen zijn ingeschakeld).

11. Combineer bestanden

Als je meerdere CSS- of JavaScript-bestanden hebt, probeer ze dan te combineren in één enkel bestand.

Hoe minder CSS- en JavaScript-bestanden u heeft, hoe minder verzoeken op uw website worden geladen.

Stap 1: Vind uw CSS (of JavaScript-bestanden).

Stap 2: Kopieer / plak de inhoud zodat ze allemaal in één bestand staan.

Of de meeste cacheplug-ins hebben een optie om CSS + JavaScript te combineren:

Minify Combineer JavaScript-bestanden

12. Vermijd zware plug-ins

Als u WordPress-plug-ins, Joomla-extensies of andere “add-ons” gebruikt die functionaliteit aan uw website toevoegen, zorg er dan voor dat ze niet bijdragen aan uw laadtijden (gebruik GTmetrix voor benchmarks).

De meest voorkomende langzame plug-ins zijn gerelateerd aan portfolio’s, schuifregelaars, sociaal delen, paginabuilders, live chat, kalenders, statistiek (analyse), contactformulier of gerelateerde post-plug-ins.

Hoe u langzame plug-ins op uw website kunt vinden
Als u dezelfde plug-in meerdere keren ziet verschijnen in uw GTmetrix-rapport en deze heeft hoge laadtijden op uw tabblad Waterval, overweeg dan om deze te verwijderen en te vervangen door een lichtere plug-in. Voor WordPress kun je ook gebruiken Query Monitor om je langzaamst ladende plug-ins te zien.

Bonus: selectief plug-ins uitschakelen
Gebruik een plug-in zoals Activabeheerder om selectief uit te schakelen dat plug-ins op bepaalde pagina’s worden uitgevoerd. Als u bijvoorbeeld alleen uw contactformulier op de contactpagina gebruikt, schakel het dan overal uit.

13. Maak uw database schoon

Terwijl u berichten bijwerkt, plug-ins installeert en verwijdert of andere taken op uw website uitvoert, begint dit een opgeblazen gevoel in uw database op te bouwen. U kunt het het beste om de twee weken of zo schoonmaken.

U kunt uw database opschonen met behulp van de gratis WP-Optimize plug-in, of gebruik WP Rocket:

WP-Optimize Schone database

14. Optimaliseer externe bronnen

Externe bronnen zijn alles van ingesloten YouTube-video’s tot Google Fonts, Google Analytics, Gravatars en alles waarvoor informatie uit een externe website moet worden gehaald. Deze kunnen uw GTmetrix-rapport vernietigen, vooral Google AdSense omdat het op elke pagina wordt uitgevoerd.

Tips voor het optimaliseren van externe bronnen

15. Combineer Google Fonts

Gebruikt u Google Fonts, Font Awesome of andere externe fonts?

Deze zullen waarschijnlijk extra verzoeken in GTmetrix veroorzaken omdat ze een externe bron zijn.

Google-lettertypen-GTmetrix

Tips voor het optimaliseren van Google-lettertypen

  • Host Google Fonts lokaal
  • Selecteer alleen lettertypen / gewichten die u nodig heeft
  • Combineer meerdere lettertypebestanden in 1 bestand (handmatig of via WP Rocket of Autoptimize)

16. Lui Laad afbeeldingen + video’s

Lui laden betekent dat afbeeldingen, video’s en iframes pas worden geladen als gebruikers naar beneden scrollen en ze daadwerkelijk zien. Dit kan de initiële laadtijden van uw pagina’s aanzienlijk verbeteren.

Ingesloten video’s kunnen een van de zwaarste elementen op een pagina zijn – lui laden van 2 video’s (en het iframe vervangen door een voorbeeldafbeelding) scheerde maar liefst 4 seconden van een van mijn berichten.

Voor WordPress kunt u WP Rocket, WP YouTube Lyte of de Lazy Load-plug-in gebruiken.

Probeer dit voor Squarespace Lazy Load-functie.

WP-Rocket-Lazy-Load

17. Vermijd advertenties

Google AdSense is berucht omdat het ervoor zorgt dat websites langzaam laden, en het is zelfs niet zo winstgevend. Je kan het proberen Ad Balancer en Raketlader, maar u zult veel fouten in uw GTmetrix-rapport hebben, ongeacht en u kunt beter inkomsten genereren met affiliate marketing. Vergeet AdSense – de meest succesvolle mensen die $ 50k + verdienen, gebruiken affiliate-links die uw site niet vertragen.

GTmetrix-advertenties

18. Overweeg AMP

AMP (versnelde mobiele pagina’s) zorgen ervoor dat uw mobiele pagina’s sneller worden geladen terwijl u een AMP-stempel krijgt in mobiele zoekresultaten. Het probleem is dat dit het ontwerp van uw mobiele pagina’s verandert. Je kunt de AMP voor WP-plug-in om ze aan te passen, maar het is gewoon niet hetzelfde. De conversies van Kinsta daalden met 58% bij het toevoegen van AMP, dus ik besloot ze op mijn eigen site uit te schakelen. Maar het is het overwegen waard. Hier is een AMP-zelfstudie voor Squarespace als je dat gebruikt.

19. Zoek langzame pagina’s in Google Analytics

Je kunt je langzaamst ladende pagina’s vinden in Google Analytics onder Gedrag → Sitesnelheid → Suggesties voor snelheid.

Meestal laden deze pagina’s traag omdat ze veel afbeeldingen, video’s of externe bronnen bevatten. Dat komt omdat de meeste snelheidsfactoren van toepassing zijn op uw hele website, niet slechts op één pagina.

Snelheid-suggesties-Google-Analytics

20. WordPress-specifieke optimalisaties

Ik heb al heel wat WordPress-specifieke optimalisaties besproken, maar hier zijn er nog een paar.

  • Gebruik een best beoordeelde cacheplug-in zoals WP Rocket
  • Gebruik een goede plug-in voor beeldoptimalisatie zoals ShortPixel
  • Gebruik de Heartbeat Control-plug-in om Heartbeat API uit te schakelen
  • Verwijder alle plug-ins die u niet gebruikt en gebruik lichtgewicht plug-ins
  • Maak uw database regelmatig schoon met WP-Optimize of WP Rocket
  • Cache Gravatars met een plug-in zoals Harrys Gravatar Cache, FV of Optimum
  • Gebruik Asset Manager om selectief uit te schakelen dat plug-ins op bepaalde pagina’s worden geladen
  • Host Google Analytics lokaal met een plug-in zoals WP Rocket of CAOS Analytics
  • Host Google Fonts lokaal met een plug-in zoals OMGF of Self-Hosted Google Fonts

21. WooCommerce-optimalisaties

Standaard voegt WooCommerce extra scripts, stijlen en winkelwagenfragmenten toe aan uw website. Ze vereisen meestal ook meer plug-ins. Dat is de reden waarom u bij het kiezen van een hostingplan waarschijnlijk naar VPS, cloud of semi-dedicated hosting wilt gaan om ervoor te zorgen dat het het extra bronnenverbruik kan verwerken. Anders kunt u bij gedeelde hosting de CPU-limieten van uw host overschrijden.

WooCommerce winkelwagenfragmenten

Schakel winkelwagenfragmenten uit – winkelwagenfragmenten werken de items en het totaal in de winkelwagen bij, maar het kan 1 tot 10 seconden duren voordat ze zijn geladen. Je kunt het beste wedden schakel winkelwagenfragmenten uit op de startpagina + berichten, daar worden ze niet gebruikt. Volg die tutorial.

Schakel WooCommerce-scripts uit – WooCommerce kan ook ongeveer 8 verschillende scripts op uw website laden. Pak deze om deze uit te schakelen code van Github en voeg het toe aan uw functions.php-bestand.

Schakel WooCommerce-stijlen uit – WooCommerce heeft ook stijlen die op elke afzonderlijke pagina worden geladen. Hier is een gids om ze uit te schakelen.

Perfmatters – deze handige plug-in van Kinsta maakt het gemakkelijk om karfragmenten, scripts en stijlen uit te schakelen. Als je een gemakkelijke manier wilt om ze uit te schakelen zonder code te bewerken, probeer dan deze premium plug-in.

Klantsessies wissen – als uw WooCommerce-site traag is, probeer dan klantsessies te wissen.

Verhoog de geheugenlimiet tot 256 MB – WooCommerce vereist dat u uw geheugenlimiet verhoogt tot 256 MB, maar u moet dit voor de meeste websites echt doen. Hier is een tutorial om dat te doen.

22. Huur iemand in die weet wat ze doen

Hulp nodig bij het repareren van uw langzaam ladende website?

Ik werk met een paar ontwikkelaars die gespecialiseerd zijn in het optimaliseren van WordPress-snelheden. Je kunt hun portfolio op die pagina bekijken en ik crediteer ze om mijn GTmetrix-scores tot 100% te krijgen. Cole beheert alle projecten voor snelheidsoptimalisatie, u kunt hem bereiken op [email protected]

23. Veelgestelde vragen

&# x1f680; Welke factoren hebben de grootste invloed op laadtijden?

Het kiezen van de juiste hosting, plug-ins en cache-plug-in kan de grootste impact hebben op uw laadtijden. Het optimaliseren van afbeeldingen en het vermijden van externe bronnen zoals Google AdSense zijn ook erg belangrijk. Het gebruik van een gratis contentleveringsnetwerk zoals Cloudflare zal ook helpen.

&# x1f680; Welke tool is het beste voor het testen van snelheid?

GTmetrix heeft de meest robuuste aanbevelingen van alle snelheidstesttools. Google PageSpeed ​​Insights is in de eerste plaats goed voor 1 ding: het meten van serverreactietijden.

&# x1f680; Hoe weet ik wat mijn website vertraagt??

GTmetrix vertelt je welke afbeeldingen moeten worden geoptimaliseerd, of je nu een CDN gebruikt, en plug-ins die meerdere keren in je rapport of in je GTmetrix Waterfall kunnen voorkomen. Het meet ook de tijd tot de eerste byte, wat een goede indicator is of uw hosting traag is.

&# x1f680; Wat zijn enkele minder bekende snelheidstips?

Veel mensen upgraden hun PHP-versie niet of optimaliseren geen externe bronnen zoals Google Fonts en YouTube-video’s. Lui laden van afbeeldingen en video’s en het lokaal hosten van Google Fonts en Google Analytics kunnen veel items in GTmetrix repareren. Je moet ook lid worden van Facebook-groepen om onpartijdige meningen te krijgen over de beste hostingproviders, om valstrikken van partners te voorkomen.

&# x1f680; Welke hosting is het beste?

SiteGround en Cloudways zijn 2 solide hostingproviders die hoog werden gewaardeerd in Facebook-peilingen. SiteGround is een van de meest populaire gedeelde hosts en Cloudways voor cloudhosting. Dit zijn meestal de top 2 in hun klasse.

&# x1f680; Welke cache-plug-in het beste is?

WP Rocket werd beoordeeld als de # 1 cacheplug-in in meerdere Facebook-peilingen, omdat het wordt geleverd met veel functies voor snelheidsoptimalisatie die de meeste cacheplug-ins niet hebben (lui laden, database opschonen, Google Fonts hosten en Google Analytics lokaal). U zou optimale resultaten moeten behalen met WP Rocket, anders is Swift Performance een goed gratis plug-in-alternatief.

Ik hoop echt dat deze tutorial nuttig was. Als je hulp nodig hebt, laat dan je GTmetrix-rapport achter in de reacties en ik zal je een paar suggesties geven. Of overweeg mijn speed optimizer in te huren.

Proost,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map