Asynchrone loading van WordPress plugins: De ultimate gids voor het verbeteren van de snelheid en prestaties van je website

Wat is asynchrone laadning en waarom is dit belangrijk?

In het ontwikkelen van moderne websites is de snelheid van pagina-laaden een belangrijke indicator voor de gebruikerservaring en de positie in zoekmachines (SEO). De traditionele manier van script-laden is “render-blocking”, waardoor de browser de verwerking van HTML moet stoppen tot de scriptbestand is gedownload en uitgevoerd, voordat de pagina verder kan worden weergegeven. Als je WordPress-site is geïntegreerd met meerdere plugins, kan elke plugin zijn eigen JavaScript- en CSS-bestanden invoeren. Deze bestanden worden synchroon geladen in de bovenste of onderste delen van de pagina, waardoor de tijd voor het “First Content Paint” (FCP) en “Last Content Paint” (LCP) aanzienlijk kan verlengen.

Asynchrone loading (of scripts) is een techniek voor het laden van scripts zonder dat de browser hierbij wordt geblokkeerd. Wanneer de browser op een webpagina stoot op scripts die asynchroon worden geladen, kan de browser verder met het afspelen van de inhoud van de pagina.async或deferWanneer de script-tag van een attribuut wordt gebruikt, wordt de HTML-documentverwerking doorgezet, terwijl de script-bestand gelijktijdig wordt gedownload. De belangrijkste verschil tussen de twee methoden zit in het moment van uitvoering:
* asyncZodra het script is gedownload, wordt het onmiddellijk uitgevoerd, waardoor de HTML-verwerking kan worden onderbroken.
* deferHet script wacht tot het hele HTML-document is verwerkt (de DOM-structuur is klaar) en wordt daarna uitgevoerd in de volgorde waarin de elementen in het document voorkomen.

Voor CSS is het ook mogelijk om, door middel van technieken als “asynchrone laadning” of het verwijderen van resources die de renderingsproces belemmeren, de prioriteit van het laden van niet-kritieke stijlbestanden (bijvoorbeeld stijlbestanden voor inhoud die niet wordt weergegeven op de eerste pagina) te verlagen.

Aanbevolen leesmateriaal Ultimatumgids voor het versnellen van de snelheid van WordPress-sites: van basisinstellingen tot geavanceerde caching-strategieën。

Door een asynchrone laadstrategie te gebruiken, kunnen niet-kritieke plugin-resources (zoals sociale media-share-buttons, commentaarvelden, statistieke analysecode, etc.) worden verwijderd uit de belangrijkste renderingspaden. Dit leidt tot twee belangrijke voordelen: een verbeterde website-prestatie, waardoor gebruikers de inhoud van de pagina sneller kunnen zien en met deze kunnen interageren; en een optimale SEO-prestatie, omdat de snelheid van de pagina een belangrijke factor is voor de rangschikking door zoekmachines zoals Google.

UltaHost WordPress-hosting

30-daagse garantie voor het terugbetalen van het geld, onbeperkt bandbreedte- en databestand, gratis DDoS-beveiliging, en een prijsvoordeel van 50% bij een aankoop van 3 jaar.

toegangspagina

Hoe herken je dat bepaalde plugin-resources asynchrone moeten worden geladen?

Voordat u met het optimaliseren begint, moet u eerst precies bepalen welke plugin-resources de renderingsproces belemmeren, en u moet beoordelen welke resources geschikt zijn voor asynchrone of vertraagde laadprocessen.

Het gebruik van performance-analyse-tools

Allereerst moet je gebruikmaken van professionele prestatietesttools om een rapport op te maken. Google PageSpeed Insights, GTmetrix en WebPageTest zijn allemaal uitstekende keuzes. Deze tools geven een duidelijk overzicht van de “bronnen die de weergave van de pagina belemmeren”, en specificeren de URL, de grootte van ieder JS- en CSS-bestand, evenals de verwachte tijdsbesparing. Meestal vind je deze tools in de map met plugins (bijvoorbeeld…)./wp-content/plugins/De resources die van grotere omvang zijn en niet essentieel zijn voor de eerste schermweergave, zijn de belangrijkste doelgroep voor optimalisatie.

Beoordelen van de belangrijkheid van een resource

Niet alle resources zijn geschikt voor asynchrone verwerking. Je moet bepalen of een resource geschikt is voor asynchrone verwerking op basis van de functionaliteit ervan.
* 关键资源：直接影响首屏视觉和功能的资源。例如，用于导航菜单交互的JS、首屏内容的样式表。这些通常应保持同步加载或内联。
* 非关键资源：位于页面底部或用户交互后才需要的功能。典型的例子包括：
* 社交媒体分享插件（如AddToAny, ShareThis）
* 评论区JS（如Disqus, 默认评论增强）
* 网站统计分析代码（如Google Analytics， 尽管其官方已推荐异步脚本）
* 联系表单插件中非首屏的表单
* 轮播图插件中非首屏的幻灯片

Een eenvoudige regel van hand is: als een functie van een plugin niet meteen klaar is op de eerste seconde dat de gebruiker de pagina opent, dan zijn de betreffende resources waarschijnlijk bedoeld voor asynchrone laadning.

Aanbevolen leesmateriaal Een diepgaande analyse van CDN-technologie: van beginners tot experts, het opbouwen van een dubbele beschermingslaag voor de prestaties en de beveiliging van websites.。

Praktische methoden voor het realiseren van asynchrone laadprocessen

Er zijn verschillende manieren om WordPress-pluginbronnen om te toveren in bronnen die asynchroon kunnen worden geladen. U kunt de methode kiezen die het beste past bij uw technische mogelijkheden.

Optimizeerende plugins gebruiken (een codevrije oplossing)

Voor de meeste gebruikers is het veiligst en handigst om speciale optimalisatieplugins te gebruiken. Deze plugins bieden een grafische omgeving waarmee de manier van laden van resources eenvoudig kan worden beheerd.

Recomendeerde plugins: WP Rocket en Async JavaScript

hosting.com gedeelde hosting

Hoge prestaties met AMD EPYC CPU's, NVMe SSD opslag en LiteSpeed, 24/7 deskundige interne ondersteuning, geavanceerde beveiligingsmaatregelen waaronder SSL, bescherming tegen brute kracht, malware en DDoS, besparingen tot 73%

toegangspagina

WP Rocket is een krachtige caching-plugin. In het tabblad “Besturing van bestanden” vindt u direct de mogelijkheid om JavaScript op te slaan tot het wordt gebruikt (latent laden), en u kunt bepaalde scripts uitsluiten. De Async JavaScript-plugin richt zich helemaal op dit onderdeel; het biedt u de mogelijkheid om bijna alle scripts op deze manier te bepalen.async或deferDeze functie bevat attributen en biedt een gedetailleerde lijst met uitsluitingen (wat niet mag worden gebruikt).

De algemene stappen om deze soort plugins te gebruiken zijn als volgt: Na het installeren en activeren van de plugin, vind je in de instellingen de opties voor JS/CSS-optimalisatie. Activeer hierbij functies als “vertraging van het laden van JavaScript”. Vervolgens voeg je, op basis van de eerdere rapporten van het tool, belangrijke scripts (zoals de kernbibliotheek van jQuery of scripts die sterk gerelateerd zijn aan hetDOMContentLoaded-evenement) toe aan de uitsluitingslijst, om te voorkomen dat de functionaliteit wordt beschadigd.

Manueel bewerken van themaposten (codeoplossing)

Als u meer detailrijke controle wilt hebben, kunt u het thema bewerken.functions.phpDeze functionaliteit wordt gerealiseerd door bestanden. WordPress biedt hiervoor verschillende mogelijkheden. script_loader_tag 和 style_loader_tag Filteren worden gebruikt om de HTML-output van scripts en style sheets te bewerken.

Aanbevolen leesmateriaal Alles over het optimaliseren van de snelheid van WordPress-sites: de belangrijkste strategieën om de Core Web Vitals te verbeteren。

Hieronder staat een voorbeeld van code die wordt toegevoegd aan het doelscript:deferAttributen. U moet de attributen in de code vervangen…plugin-script-handleVervang dit door de daadwerkelijke handle van het script dat moet worden verwerkt (Handle).

function add_async_defer_attribute($tag, $handle) {
    // 将要延迟加载的脚本句柄添加到这个数组
    $scripts_to_defer = array('plugin-script-handle', 'another-plugin-script');

foreach($scripts_to_defer as $defer_script) {
        if ($defer_script === $handle) {
            // 使用 defer， 如需 async 则替换为 async='async'
            return str_replace(' src', ' defer="defer" src', $tag);
        }
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_async_defer_attribute', 10, 2);

Om de script-hantering van een plugin te vinden, kun je de HTML-broncode die door de plugin wordt uitgegeven bekijken, of de broncode van de plugin zelf.wp_enqueue_script()De eerste parameter van de functionaal oproep.

InterServer gedeelde hosting

Shared hosting $2.50 USD per maand, eerste maand $0.1 USD promo code tryinterserver, 461 cloud apps scripts, een klik te installeren.

toegangspagina

Asynchrone laad van CSS-bestanden verwerken

Voor CSS kan je gebruikmaken van “preloading” in combinatie met...onloadHet evenement converteert de ressource in een niet-blokkerende (non-blocking) resource. Hieronder staat een voorbeeldcode voor het asynchrone laden van een specifieke stylesheet:

function async_load_stylesheets() {
    ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css"></noscript>
    <?php
}
// 根据需求，将其挂载到 wp_head 或其它钩子上
add_action('wp_head', 'async_load_stylesheets', 1);

Deze methode werkt door…rel=”preload”Zeg de browser dat de bronnen zo snel mogelijk moeten worden gehaald, maar dat ze niet meteen worden gebruikt. Nadat de bronnen zijn geladen, worden ze met behulp van JavaScript geïmplementeerd.relDe eigenschappen worden gewijzigd in…stylesheetDit wordt gebruikt om stijlen toe te passen.Gebruikers voor wie JS is uitgeschakeld worden voorzien van een alternatieve oplossing.

Testen en foutopsporing na asynchrone laadprocedure

Nadat asynchrone laadtechnieken zijn geïmplementeerd, is een grondige test van het hele systeem van belang om te garanderen dat de website niet alleen sneller werkt, maar ook nog alle functies beschikbaar blijven.

Functionality en compatibiliteitstesten

U moet op verschillende pagina's van de website (het startpagina, artikelpagina's, individuele pagina's, etc.) handmatig testen, met een focus op de functies van plugins die asynchroon worden geladen. Voorbeeld:
* 测试异步加载的社交媒体按钮是否能正常弹出分享窗口。
* 检查延迟加载的评论区是否能在页面滚动到相应位置时正确渲染。
* 验证所有交互元素（如表单提交、按钮点击、下拉菜单）是否正常工作。

Voorzie de mensen die afhankelijk zijn van deze dingen van extra aandacht.DOMContentLoadedScripten die ervan uitgaan dat jQuery al klaar is in het hoofddeel van de webpagina worden uitgevoerd. Als deze scripts worden uitgesteld, kan dit leiden tot fouten omdat de nodige DOM-elementen niet worden gevonden. Daarom is het zo belangrijk om een “uitsluitingslijst” (exclusion list) in te stellen wanneer je plugins optimaliseert; soms moet je zelfs jQuery uit de uitvoering uitsluiten.jquery-coreDeze componenten en hun directe afhankelijke onderdelen worden uitgesloten van het asynchrone laden.

Voor- en nadatelling van de prestaties

Test uw website opnieuw met de eerder genoemde prestatieanalyse-tools (PageSpeed Insights en GTmetrix). Vergelijk de rapporten van voor en na de optimalisatie, en let op de veranderingen in de volgende belangrijke metingen:
* 首次内容绘制（FCP）：是否明显提前？
* 最大内容绘制（LCP）：最大的内容元素是否更快呈现？
* 速度指数（Speed Index）：页面内容视觉填充的速度是否加快？
* 总阻塞时间（TBT）：主线程被阻塞的时间是否减少？
* “移除渲染阻塞资源”建议：报告中列出的问题是否减少或消失？

Een succesvolle optimalisatie moet leiden tot een significante verbetering van deze indicatoren, tezamen met een vermindering van waarschuwingen in de “kansen”-of “diagnose”-sectie met betrekking tot rendering-blocking-problemen.

Als je ontdekt dat bepaalde functies niet meer werken, ga dan terug naar de instellingen van het optimalisatie-plugin of naar je eigen code, en verwijder de specifieke script-opdrachten die het probleem veroorzaken uit de lijst met asynchrone/delayerde laden. Foutopsporing is een iteratief proces; het kan vaak nodig zijn om meerdere keer aanpassingen te maken om het beste evenwicht tussen functionaliteit en prestaties te vinden.

Samenvatting

Asynchrone laadning van WordPress-pluginbronnen is een gevestigde en effectieve techniek voor het verbeteren van de front-end-prestaties. Door niet-kritieke JavaScript- en CSS-bestanden te verplaatsen van de belangrijkste renderingsroute, kan de browser de kerninhoud van de pagina eerst verwerken en weergeven. Dit zorgt voor een aanzienlijke verbetering van de laadsnelheid en de gebruikerservaring van de website. De implementatie is eenvoudig; dit kan met plugins als WP Rocket worden gedaan of door zelf code te schrijven voor meer geavanceerde aanpassingen. Het is belangrijk om niet-kritieke bronnen nauwkeurig te identificeren, deze met zorg te laden en na de optimalisatie grondige functionaliteiten- en prestatietesten uit te voeren. Het opnemen van deze asynchrone laadstrategie in uw WordPress-beheerproces is een effectieve manier om te voldoen aan de uitdagingen van moderne internetprestaties en de SEO-ranking te verbeteren.

Veelgestelde vragen (FAQ)

Welke optie moet je kiezen: async of defer?

Voor plugin-scripts wordt het meestal aanbevolen om…deferOmdat...deferHet is belangrijk om te kunnen garanderen dat scripts worden uitgevoerd in de volgorde waarin ze in het HTML voorkomen. Dit is vooral van belang voor scripts met afhankelijkheden; bijvoorbeeld als een plugin-script afhankelijk is van jQuery. Op deze manier kunnen fouten die worden veroorzaakt door een verkeerde uitvoeringsvolgorde worden voorkomen.asyncMensen die dit type code schrijven, zijn vaak gespecialiseerd in het maken van volledig onafhankelijke onderdelen van software die geen afhankelijkheid hebben van andere scripts. Dit past bijvoorbeeld bij bepaalde, onafhankelijke statistische analysemodulen.

Zorgt het asynchrone laden van plugin-resources voor dat bepaalde functies niet meer werken?

Dat is mogelijk. Als de uitvoering van het plugin-script sterk afhankelijk is van de beschikbare toestand van het DOM op een bepaald moment (bijvoorbeeld, wanneer...),DOMContentLoadedAls een actie onmiddellijk wordt uitgevoerd in het DOM wanneer een evenement wordt geactiveerd, of als de script afhankelijk is van andere synchrone scripts, kan het asynchrone laden ervoor zorgen dat de actie te vroeg of te laat wordt uitgevoerd, waardoor fouten kunnen optreden. Daarom is het belangrijk om na de optimalisatie een grondige test uit te voeren en de problematische scripts op te nemen in een uitsluitingslijst.

Is het mogelijk dat alle plugins asynchrone geladen kunnen worden?

Nee. Plug-in-resources die rechtstreeks invloed hebben op het renderen van de homepagina en de kerninteracties mogen niet asynchroon worden geladen. Denk hierbij aan animatiebibliotheken die worden gebruikt om visuele effecten op de homepagina te creëren, scripts die de navigatiemenu’s beheersen, of belangrijke CSS-regels die de weergave van fonts op de webpagina optimaliseren. Deze moeten altijd synchroon worden geladen of worden opgenomen in het HTML, om een consistente en immediate gebruikerservaring te garanderen. Optimisaties mogen nooit ten koste van de kernfuncties van de website gaan.

Naast asynchrone laadprocessen, zijn er nog andere methoden om de prestaties van plugins te verbeteren:

Asynchrone laadtijden zijn belangrijk, maar er zijn ook andere combinatiestrategieën mogelijk: 1. Bestanden samenvoegen en minimaliseren: gebruik plug-ins om meerdere kleine JS/CSS-bestanden samen te voegen en spaties en opmerkingen te verwijderen. 2. Op aanvraag laden: voor complexe plug-ins (zoals pagina-builders) moet je ervoor zorgen dat de bronnen alleen op de pagina's worden geladen die ze nodig hebben. 3. Lichtgewicht plug-ins kiezen: geef bij het selecteren van nieuwe plug-ins de voorkeur aan alternatieven met een goede prestatie-reputatie en eenvoudige code. 4. Caching gebruiken: zorg ervoor dat alle statische bronnen een lange vervaldatum hebben en worden gedistribueerd via een CDN. Deze methoden in combinatie met asynchrone laadtijden zorgen voor een optimale verbetering van de algehele prestaties.