Hoe een trage Elementor-website te repareren: 16 optimalisatie die me hielp 100% paginasnelheidsniveaus en directe laadtijden op mijn site te krijgen

Elementor zegt dat ze de snelste paginabuilder zijn voor WordPress.


Dus wat veroorzaakt uw langzaam ladende website?

Er zijn meestal een paar eenvoudige aanpassingen die uw laadtijden en GTmetrix-scores aanzienlijk kunnen verbeteren. Elementor zegt de meest voorkomende redenen voor een trage WordPress-site zijn servers, media, externe scripts (bijv. Google Fonts), plug-ins, geen CDN en het gebruik van een middelmatige cache-plug-in. Ze gaan echter niet in detail in op het weergeven van stapsgewijze instructies.

Daarom heb ik deze tutorial geschreven.

U leert hoe u uw langzame Elementor-site kunt repareren door de belangrijkste aanbevelingen uit de WordPress-optimalisatiegids en de aanbevelingen van Elementor te volgen. Ik zal schermafbeeldingen, gedetailleerde instructies geven en alle opmerkingen beantwoorden als je nog steeds hulp nodig hebt. Ik heb 100% GTmetrix-scores op mijn startpagina gehaald. Zelfs berichten met meer dan 100 afbeeldingen en meer dan 400 opmerkingen (5 MB paginaformaat en 170 verzoeken) worden nog steeds geladen <2s. Ja, ik ben een WordPress speed nerd :)

Optimalisatie van Elementorsnelheid

1. Upgrade naar PHP 7.4

Veel hostingbedrijven hebben PHP 7.4 al uitgebracht.

Het upgraden van PHP-versies is een van de gemakkelijkste manieren om uw Elementor-site te versnellen. Kinsta’s PHP benchmarks laat zien hoe hogere PHP-versies 2-3x sneller kunnen werken. Elementor ook beveelt aan hogere PHP-versies en om de geheugenlimiet te verhogen tot 256 MB (zie volgende stap).

Controleer eerst uw huidige PHP-versie onder Elementor > Systeeminformatie.

Elementor PHP-versie

Log vervolgens in op uw hostingaccount, zoek de PHP-versiebeheerder (of vergelijkbaar) en selecteer een hogere PHP-versie. Het is ook een goed idee om van tevoren een back-up te maken. Anders is dat het!

Kinsta PHP 7.4

Belangrijk: zorg ervoor dat uw plug-ins compatibel zijn met hogere PHP-versies. Ik gebruikte WP Rich Snippets (die niet meer wordt onderhouden) maar het was niet compatibel met PHP 7.2+, dus ik heb de plug-in verwijderd en een vervanging gevonden. Het is niet de moeite waard om niet-onderhouden plug-ins te bewaren.

2. Verhoog de geheugenlimiet tot 256 MB

Nogmaals, controleer je geheugenlimiet onder Elementor > Systeeminformatie.

Zowel Elementor, WordPress als WooCommerce adviseer een geheugenlimiet van 256 MB.

Geheugenlimiet Elementor

U kunt uw geheugenlimiet meestal wijzigen in uw hostingaccount:

Geheugenlimiet

Anders voegt u deze code toe aan functies.php.

definiëren (‘WP_MEMORY_LIMIT’, ‘256 M’);

3. Gebruik zelf-gehoste lettertypen

Als Google Fonts je GTmetrix-rapport opblaast, probeer dan lokaal fonts te hosten.

Als je hebt Elementor Pro, je wilt aangepaste lettertypen gebruiken (te vinden in de instellingen).

Hier is een YouTube-zelfstudie.

Elementor Custom Fonts

Ik heb geen Elementor Pro?

Veel plug-ins kunnen helpen bij het optimaliseren van Google-lettertypen: WP Rocket, Autoptimize, Self-Hosted Google Fonts, OMGF en Asset Clean Up. als jij niet als u een plug-in wilt gebruiken, volgt u deze instructies.

Stap 1: Controleer of lettertypen uw Elementor-site in GTmetrix vertragen.

Google Fonts GTmetrix

Stap 2: Download uw lettertypen rechtstreeks van de Google Fonts-website. Download alleen de lettertypen en lettergewichten die u absoluut nodig heeft (meer lettertypen en gewichten kunnen ook meer verzoeken betekenen).

Stap 3: Gebruik een tool zoals Transfonter om ze te converteren naar weblettertypebestanden.

Transfonter-Google-Font-Conversion

Stap 4: Upload de nieuwe weblettertypebestanden naar WordPress en voeg ze toe aan uw CSS.

Stap 5: Test de lettertypen, voeg een standaardfout toe en gebruik altijd reservefonts.

4. Optimaliseer verzoeken van derden

Net zoals Google-lettertypen een verzoek van derden zijn, kunnen AdSense, Analytics, Maps, Tag Manager, ingesloten video’s en zelfs Gravatars of plug-ins voor sociaal delen verzoeken van derden veroorzaken.

U moet deze ook optimaliseren.

Externe scripts

Sommige verzoeken van derden zijn eenvoudig te optimaliseren:

WP Rocket heeft een tabblad Add-ons dat kan helpen host analytics lokaal en voeg browsercaching toe aan Facebook Pixel. Met de Media-instellingen van WP Rocket kun je lui video’s laden terwijl je het iframe vervangt door een voorbeeldafbeelding. Als je berichten van sociale media insluit, probeer dan een screenshot te maken en in plaats daarvan een afbeelding te gebruiken. Disqus voorwaardelijk laden, het parseren van JavaScript in de instellingen van uw cacheplug-in uitstellen en het selectief uitschakelen van scripts / plug-ins in Asset Clean Up kan helpen bij het optimaliseren van scripts.

WP Rocket Local Analytics

Andere verzoeken van derden zijn niet zo eenvoudig te optimaliseren:

Google AdSense kan een GTmetrix-moordenaar zijn. Behalve dat u het asynchroon laadt, kunt u weinig doen. Ik heb ook geen oplossing gevonden om Gravatars sneller te laten laden en ik heb alle Gravatar-cacheplug-ins geprobeerd (dus ik heb ze uitgeschakeld). Google Tag Manager mag meestal alleen worden gebruikt voor grote, niet-geoptimaliseerde Elementor-sites, anders doet het meestal meer kwaad dan goed.

5. Vermijd hoge CPU-plug-ins

Sommige plug-ins moet u gewoon wegblijven.

Hoge CPU-plug-ins die Elementor-sites vertragen, hebben meestal te maken met statistieken, back-ups, sociaal delen, portfolio’s, livechat, contactformulieren, schuifregelaars, JetPack en elke plug-in die constant nodig is om op uw website te “werken” (denk aan Broken Link Doorlopende scans van Checker).

  1. Voeg dit toe
  2. AdSense Click Fraud Monitoring
  3. Alles-in-één evenementenkalender
  4. Backup Buddy
  5. Beaver Builder
  6. Betere WordPress Google XML Sitemaps
  7. Broken Link checker (gebruik Dr. Link Check)
  8. Constant contact voor WordPress
  9. Contactformulier 7
  10. Contextueel gerelateerde berichten
  11. Digi Auto Links
  12. Disqus Comment System
  13. Divi Builder
  14. Essentieel raster
  15. Bekijk de volledige lijst van 65 langzame plug-ins

Als u een langzame plug-in heeft, kunt u deze verwijderen en een vervanging zoeken, de plug-in op bepaalde pagina’s selectief uitschakelen (volgende stap) of deze blijven gebruiken en een langzame Elementor-site hebben.

6. Schakel selectief ongebruikte plug-ins uit

Asset CleanUp en Perfmatters zijn geweldig voor selectief uitschakelen van plug-ins, scripts en stijlen.

Het meest voorkomende voorbeeld is het alleen laden van uw contactformulier plug-in op de contactpagina en deze elders uit te schakelen. Maar heb je erover nagedacht om je plug-in voor sociaal delen op je pagina’s uit te schakelen (aangezien de meeste mensen deze alleen voor berichten gebruiken)? Of je slider uitschakelen op pagina’s die geen sliders hebben? Door selectief uit te schakelen, kunt u minder HTTP-verzoeken op pagina’s indienen.

Stap 1: Installeer Asset CleanUp of Perfmatters.

Asset CleanUp-plug-in

Stap 2: Bewerk een pagina of bericht en scrol omlaag om te zien of alles op de pagina wordt geladen.

Stap 3: Schakel plug-ins, scripts en stijlen uit die niet op de pagina worden gebruikt (uitladen). Je kunt het ook uitschakelen per berichttype, of met Asset CleanUp Premium (evenals Perfmatters) kun je RegEx gebruiken.

Asset CleanUp Controleer alles

7. Schakel WooCommerce Scripts, Styles, Cart Fragments uit

Net zoals u selectief plug-ins uitschakelde in de vorige stap, kunt u Perfmatters en Asset CleanUp gebruiken om hetzelfde te doen met WooCommerce-scripts, stijlen en winkelwagenfragmenten.

Asset CleanUp WooCommerce

Perfmatters laat je dit eigenlijk doen 1-klik:

prestmatie optimalisatie van woocommerce

8. Schakel Editor Loader-methode in Elementor

Elementor zegt:

“Als u hosting- of serverproblemen heeft bij het gebruik van Elementor, hebben we een eenvoudige schakelaar toegevoegd die uw probleem mogelijk oplost.”

Deze vind je onder Elementor > Instellingen > Geavanceerd > Editor Loader.

Elementor Switch Editor Loader-methode

9. Formaat van afbeeldingen wijzigen om afmetingen te corrigeren

Bij het gebruik van Elementor is het belangrijk om afbeeldingen te schalen (vergroten / verkleinen) zodat ze op de juiste afmetingen passen.

Serveer geschaalde afbeeldingen

Anders ziet u fouten in geschaalde afbeeldingen weergeven in GTmetrix. Als je er een ziet, pak dan de door GTmetrix verstrekte aanbevolen afmetingen en verklein de afbeelding naar die afmetingen en vervang de afbeelding. Ik raad aan om een ​​”spiekbriefje voor afbeeldingsafmetingen” te maken met de afmetingen van alle delen van uw website (schuifregelaars, aanbevolen afbeeldingen, blogafbeeldingen op volledige breedte, logo). Op die manier kunt u het formaat van uw afbeelding aanpassen aan de juiste afmetingen voordat u ze uploadt.

10. Sloot Shared Hosting en upgrade naar Cloud

Heb een trage reactietijd van de server?

Voer uw site uit via Google PageSpeed ​​Insights en zorg ervoor dat dit het geval is <200ms zoals Google aanbeveelt. Uw server (hosting) is de # 1 factor in de WordPress-optimalisatiegids.

Ik raad SiteGround (shared hosting) meestal aan, wat prima is als je weinig verkeer en plug-ins hebt. Maar als je eenmaal cloud hosting gaat (bijv. Cloudways DigitalOcean), het verschil is dag en nacht. Ik migreerde van SiteGround naar Cloudways en mijn laadtijd halveerde. Zelfs berichten met meer dan 100 afbeeldingen en meer dan 400 opmerkingen (5 MB paginaformaat, 170 verzoeken) worden nog steeds in minder dan 2 seconden geladen.

Elementor Hosting

SiteGround-vs-Cloudways-Cloud-Hosting

GTmetrix-rapport-voor-lange-post

Ervaringen van anderen met Cloudways:

Reactietijden van Cloudways

WP Engine naar Cloudways

DigitalOcean Pingdom-rapport

Reactietijden van Cloudways-server

Cloudways laadtijdverbetering

Cloudways versus WP Engine

Ongetiteld

Cloudways Pingdom laadtijden

Cloudways Pingdom-rapport

Namecheap To Cloudways Migration

Cloudways WooCommerce Migration

Cloudways AWS-migratie

Ze waren ook # 1 in veel Facebook-peilingen en hebben het geweldig TrustPilot beoordelingen:

Hosting Aanbevelingen Facebook

VPS Cloud Hosting WooCommerce Poll

VPS Cloud Hosting Poll

Suggesties voor WordPress-hosting

Cloudways-Facebook-recensie

Cloudways Facebook-beoordeling

Cloudways versus SiteGround

Onderste regel: shared hosting is prima als je geen WooCommcerce, AdSense, plug-ins met een hoog CPU-gehalte hebt of behoorlijk verkeer hebt. Maar als je er eenmaal een hebt, kijk dan naar cloudhosting. Ja, ik ben een partner voor Cloudways), maar er zijn tal van andere mensen die zijn gemigreerd en hun resultaten hebben gepost. De code OMM25 geeft u 25% korting op de eerste twee maanden hosting bij Cloudways.

11. Sloot gratis cache-plug-ins en gebruik WP Rocket

Waarom is WP Rocket meestal # 1 in Facebook-peilingen?

Omdat het meer snelheidsfuncties heeft dan de meeste andere cacheplug-ins (database opschonen, lokale analyse, combinatie van Google Fonts, lui laden van afbeeldingen + video’s, CDN + Cloudflare-integratie, hartslagcontrole, WebP caching, prefetching, Facebook Pixel browser caching).

Daarom levert WP Rocket betere scores + laadtijden op in GTmetrix en betekent dit minder plug-ins op uw Elementor-site. Het wordt altijd bijgewerkt met nieuwe functies en wordt onderhouden door een betrouwbaar team.

Dus als je nog steeds WP Fastest Cache of W3 Total Cache gebruikt, moet je het echt een werveling geven.

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

Je zult het verschil zien:

WP Rocket Before After

12. Maak uw database schoon

Plan je lopende databaseopschoning?

Terwijl u doorgaat met het bouwen van uw Elementor-site, verzamelt u postrevisies, oude databasetabellen van plug-ins / thema’s die u niet meer gebruikt, verwoeste opmerkingen en andere ongewenste bestanden.

Je kunt plug-ins gebruiken zoals WP Rocket en WP-Optimize maak uw WordPress-database schoon. Zorg ervoor dat u alles wat wordt verwijderd, bekijkt en van tevoren een back-up maakt.

WP-Optimize Schone database

13. Gebruik het CDN van Cloudflare

Het gebruik van Cloudflare is een goed idee.

Het is gratis, heeft meer dan 200 datacenters en CDN’s zijn dat aanbevolen door WordPress.

Cloudflare-logo

Sommige hosts zoals SiteGround laten je Cloudflare activeren in hun dashboard. Meld u anders aan voor het gratis abonnement van Cloudflare, log in bij de domeinregistreerder en verander naar Cloudflare-naamservers.

In het dashboard zijn er een paar aanpassingen die u moet overwegen:

  • Snelheid: schakel Brotli en Rocket Loader in
  • Schraap het schild: schakel hotlink-beveiliging in
  • Firewall: blokkeer slechte bots in het live verkeersrapport van Wordfence
  • Paginaregels: Cloudflare heeft er veel pagina regels voor snelheid, veiligheid, compatibiliteit

14. Gebruik een lichtgewicht thema

Verhaal tijd.

Ik gebruikte een ThemeForest-thema dat door de ontwikkelaar in de steek werd gelaten (een risico dat je neemt wanneer je een thema van een onafhankelijke ontwikkelaar koopt, ook al heeft het goede recensies). Ik had ook nachtmerries bij het kopen van opgeblazen thema’s voor klanten die hun WordPress-site traag maakten.

Ik bedoel, als alles ingebouwd is, wordt het zoveel gemakkelijker, toch?

Nee! U wilt een lichtgewicht thema kiezen dat minimaal is en goed is gecodeerd, en vervolgens op plug-ins vertrouwt om alleen functies toe te voegen die u nodig hebt. Thema-optimalisatie is moeilijker dan het verwijderen van een plug-in.

De meesten van jullie gebruiken hopelijk Astra-, Flatsome- of StudioPress-thema’s, de belangrijkste die ik aanbeveel.

15. Vind knelpunten in GTmetrix

Afgezien van het meten van scores + laadtijden, kunt u nogal wat dingen ontdekken in GTmetrix. Omdat elke Elementor-site anders is, wil je precies weten wat de jouwe vertraagt.

Tijd tot eerste byte

Tijd tot eerste byte

Niet-geoptimaliseerde afbeeldingen

Beeldoptimalisaties in GTmetrix

Langzame plug-ins

Langzame WordPress-plug-in

16. Beëindig de laatste 10% van de snelheid met prestaties

Perfmatters (door Kinsta) zorgt voor wat ik graag noem diverse snelheidsoptimalisaties:

perfmatters functies

Sommige hiervan zijn buitengewoon nuttig; de scriptmanager waarmee u selectief plug-ins / scripts van bepaalde pagina’s kunt uitschakelen, het interval voor automatisch opslaan kunt wijzigen, postrevisies kunt beperken, vooraf verbinding kunt maken en WooCommerce-scripts, stijlen en winkelwagenfragmenten kunt uitschakelen. Als het gaat om deze optimalisaties, ken ik geen enkele plug-in die het beter doet dan Perfmatters.

Wat verwacht je, het is Kinsta. Het is natuurlijk een geweldige plug-in.

Veel Gestelde Vragen

&# x1f680; Wat zijn de meest voorkomende redenen voor een trage Elementor-site?

Het gebruik van een goede cacheplug-in, het niet optimaal configureren van de instelling van uw cacheplug-in, trage hosting, niet-geoptimaliseerde afbeeldingen, het gebruik van Google Fonts en externe scripts, hoge CPU-plug-ins en het niet gebruiken van een CDN zijn enkele van de meest voorkomende redenen voor een trage Elementor-site.

&# x1f680; Wat kan ik doen om Elementor te versnellen??

Gebruik de aangepaste lettertypenoptie van Elementor om het aantal verzoeken van Google Fonts of Font Awesome te verminderen. Je kunt ook ongebruikte Elementor-functies op pagina’s / berichten selectief uitschakelen met een plug-in zoals Asset CleanUp of Perfmatters van Kinsta. De rest zijn generieke snelheidsoptimalisaties die niets met Elementor te maken hebben.

&# x1f680; Hoe gebruikt u aangepaste lettertypen om ze sneller te laten laden?

Hiervoor heeft u een Elementor Pro-account nodig. Download uw lettertypebestanden (bijv. Van Google Fonts) en upload ze in het gedeelte met aangepaste lettertypen van Elementor.

&# x1f680; Vertraagt ​​Elementor mijn site?

Elementor veroorzaakte geen fouten in mijn GTmetrix-rapport en wordt verondersteld de snelste WordPress-paginabuilder te zijn. Het zou uw website niet veel of helemaal niet moeten vertragen. Maar als u denkt dat dit zo is, kijk dan op uw GTmetrix Waterfall-tabblad om te zien wat het probleem echt veroorzaakt.

&# x1f680; Welke hosting wordt aanbevolen voor Elementor-sites?

In de populaire Elementor Facebook Group zijn SiteGround en Cloudways meestal de top 2 gewaardeerde hosts die zijn meegenomen in Facebook-peilingen.

Heb nog steeds een trage Elementor-site?

Ik zeg dit: Cloudways en WP Rocket zouden 80% van je problemen moeten oplossen. Hosting en uw cacheplug-in zijn de belangrijkste factoren in de WordPress-optimalisatiegids. Maar als je Elementor-site nog steeds traag is, stuur me dan een reactie met je GTmetrix-rapport en ik neem graag een kijkje. Ons team biedt ook WordPress-snelheidsdiensten met vóór + na GTmetrix-rapporten.

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