Asynchronní načítání pluginů WordPressu: ultimátní průvodce pro zvýšení rychlosti a výkonnosti webových stránek.

Co je asynchronické načítání a proč je důležité?

Při vývoji moderních webových stránek je rychlost načítání stránky klíčovým ukazatelem uživatelské zkušenosti a hodnocení v vyhledávačích (SEO). Tradiční způsob načítání skriptů je “blokující renderování”, což znamená, že prohlížeč musí pozastavit analýzu HTML, dokud nebude stažen a proveden určitý skript, a teprve poté může pokračovat v renderování stránky. Pokud váš web WordPress obsahuje několik pluginů, každý z nich může přidávat vlastní soubory JavaScript (JS) a CSS, které se načítají souběžně v hlavičce nebo těle stránky, což významně zpomaluje čas “prvního vykreslení obsahu” (FCP) a “maximálního vykreslení obsahu” (LCP) webové stránky.

Asynchronní načítání je technika načítání skriptů, která neblokuje provoz. Když prohlížeč narazí na skript s atributem async, provede jeho načtení v pozadí a pokračuje ve zpracování webové stránky.async或deferPokud je atribut označen jako skript, HTML dokument se bude nadále analyzovat a současně se budou stahovat skriptové soubory. Hlavní rozdíl mezi nimi spočívá v době jejich spuštění:
* asyncJakmile je skript stažen, spustí se okamžitě a může přerušit analýzu HTML.
* deferScénář počká, až bude celý HTML dokument zpracován (DOM bude připraven), a poté bude spuštěn v pořadí, v jakém se objeví v dokumentu.

Pokud jde o CSS, lze také snížit prioritu načítání nepodstatných stylových šablon (například těch, které se používají pro obsah nacházející se mimo první obrazovku) pomocí techniky “asynchronního načítání” nebo “odstranění zdrojů blokujících vykreslení”.

Doporučujeme k přečtení. Konečný průvodce optimalizací rychlosti webových stránek WordPress: od základní konfigurace až po pokročilé strategie cachování.。

Použitím strategie asynchronického načítání lze z klíčové cesty vykreslování odebrat nepodstatné zdroje pluginů, jako jsou tlačítka pro sdílení na sociálních médiích, komentářová pole, kódy statistické analýzy atd. To přímo přináší dvě hlavní výhody: zlepšení výkonnosti webových stránek, což umožňuje uživatelům rychleji vidět obsah stránky a interagovat s ním, a optimalizace SEO výkonnosti, protože rychlost stránky je jedním z klíčových faktorů hodnocení v vyhledávačích, jako je Google.

UltaHost – hosting služby pro weby postavené na platformě WordPress

Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.

přístupová stránka

Jak identifikovat zdroje pluginů, které je třeba načíst asynchronně?

Než začnete s optimalizací, musíte přesně identifikovat, které zdroje pluginů “blokují vykreslení”, a určit, které z nich jsou vhodné pro asynchronické nebo odložené načítání.

Použijte nástroje pro analýzu výkonnosti.

Nejprve použijte profesionální nástroje pro testování výkonnosti k vytvoření zprávy. Google PageSpeed Insights, GTmetrix a WebPageTest jsou vynikající volby. Tyto nástroje jasně vytvoří seznam “zdrojů blokujících vykreslení” a podrobně uvedou adresu URL, velikost a odhadovanou dobu úspory každého souboru JS a CSS. Obvykle pocházejí z adresářů pluginů, jako je například/wp-content/plugins/Primárním cílem optimalizace jsou zdroje, které jsou velké a nejsou nezbytně nutné pro první obrazovku.

Určení kritičnosti zdrojů.

Ne všechny zdroje jsou vhodné pro asynchronní zpracování. Musíte posoudit funkčnost zdroje:
Klíčové zdroje: zdroje, které mají přímý dopad na vzhled a funkčnost první obrazovky. Například JS používaný k interakci s navigačním menu nebo stylový list první obrazovky. Tyto zdroje by měly být obvykle načítány souběžně nebo začleněny do kódu.
Nekritické zdroje: funkce, které se nacházejí v dolní části stránky nebo jsou potřebné až po interakci uživatele. Typickými příklady jsou:
Pluginy pro sdílení na sociálních médiích (například AddToAny, ShareThis)
JS v komentářové sekci (například Disqus, výchozí vylepšení komentářů)
Kódy pro statistickou analýzu webových stránek (například Google Analytics), ačkoliv oficiálně se doporučuje používat asynchronní skripty.
Formuláře v pluginu kontaktního formuláře, které nejsou na první obrazovce.
Slidy, které nejsou na první obrazovce v pluginu pro přehrávání slideshow.

Jednoduché pravidlo zní: Pokud funkce pluginu nemusí být plně připravena v první sekundě, kdy uživatel otevře stránku, pak jsou její zdroje kandidáty k asynchronnímu načtení.

Doporučujeme k přečtení. Podrobné vysvětlení technologie CDN: od začátku až po pokročilé znalosti, jak vytvořit dvojitou ochranu výkonnosti a bezpečnosti webových stránek.。

Praktická metoda pro implementaci asynchronního načítání.

Existuje několik způsobů, jak převést zdroje pluginů WordPressu na asynchronní načítání. Můžete si vybrat vhodný způsob podle svých technických schopností.

Použijte optimalizační plugin (bez kódu).

Pro většinu uživatelů je nejbezpečnějším a nejpohodlnějším způsobem použití specializovaných optimalizačních pluginů. Tyto pluginy poskytují grafické rozhraní, které usnadňuje správu způsobu načítání zdrojů.

Doporučené pluginy: WP Rocket a Async JavaScript.

Shared hosting na hosting.com

Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.

přístupová stránka

WP Rocket je výkonný plugin pro cachování, který v kartě “Optimalizace souborů” nabízí možnost odloženého načítání JavaScriptu a také možnost vyloučit některé skripty. Plugin Async JavaScript je na toto zaměřen ještě více a umožňuje přidat tuto funkci téměř ke všem skriptům.async或deferAtributy a poskytuje podrobný seznam vyloučení.

Obecný postup při používání těchto pluginů je následující: po instalaci a aktivaci pluginu najděte v nastavení možnosti optimalizace JS/CSS, aktivujte “odložené načítání JavaScriptu” nebo podobnou funkci a poté přidejte klíčové skripty (například jádro knihovny jQuery a skripty silně spojené s událostí DOMContentLoaded) na seznam výjimek, aby nedošlo k narušení funkčnosti.

Ruční úprava tématických souborů (kódy řešení)

Pokud chcete mít větší kontrolu, můžete upravit motiv.functions.phpTo lze provést pomocí souborů. WordPress nabízí script_loader_tag 和 style_loader_tag Filtry slouží k úpravě HTML výstupu skriptů a stylových šablon.

Doporučujeme k přečtení. Kompletní průvodce pro optimalizaci rychlosti webových stránek WordPress: základní strategie pro zlepšení klíčových metrik Core Web Vitals.。

Níže je uveden příklad kódu, který přidává do cílového skriptudeferAtributy. Musíte v kódu použít <plugin-script-handleNáhrada za skriptový handle (identifikátor), který je ve skutečnosti potřeba zpracovat.

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);

Chcete-li najít skriptovací handle pluginu, můžete si prohlédnout zdrojový kód HTML výstupu pluginu nebo se podívat do zdrojového kódu pluginu.wp_enqueue_script()První parametr volání funkce.

Shared hosting od InterServeru

Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.

přístupová stránka

Zpracování asynchronického načítání CSS.

Pokud jde o CSS, můžete použít “předběžné načtení” a kombinovat ho s dalšími funkcemi.onloadTato událost ji přemění na neblokující zdroj. Níže je uveden příklad kódu pro asynchronické načtení konkrétního stylového šablonu:

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);

Tato metoda pomocírel=”preload”Řekněte prohlížeči, aby získal zdroje co nejdříve, ale neaplikoval je okamžitě. Jakmile se zdroje načtou, použijte je pomocí JavaScriptu.relZměňte atribut nastylesheetA tak použijte styl.Štítek poskytuje uživatelům, kteří mají zakázaný JavaScript, alternativní řešení.

Testování a odstraňování problémů po asynchronním načtení.

Po implementaci asynchronního načítání je nezbytné provést komplexní testy, aby bylo zajištěno, že webová stránka bude mít zvýšenou rychlost a současně zůstane funkční v plném rozsahu.

Testování funkčnosti a kompatibility

Musíte provést manuální testování na různých stránkách webu (domovská stránka, stránky článků, jednostránkové aplikace atd.) a zaměřit se zejména na funkce pluginů načítaných asynchronně. Například:
Otestujte, zda tlačítka sociálních médií načítaná asynchronně správně otevírají okno pro sdílení.
Zkontrolujte, zda se sekce komentářů s odloženým načtením správně načte, když se stránka posune na příslušné místo.
Ověřte, zda všechny interaktivní prvky (například odeslání formuláře, kliknutí na tlačítko, rozbalovací nabídka) fungují správně.

Zvláštní pozornost věnujte těm, kteří jsou závislí naDOMContentLoadedPokud se události nebo předpoklady jQuery nacházejí v skriptech připravených v hlavičce, může dojít k chybě, pokud nebude možné najít prvky DOM. Proto je tak důležité nastavit “vylučovací seznam” v optimalizačních pluginech. Pravděpodobně budete muset přidat jQuery (obvykle ).jquery-core(…) a jejich přímé závislosti jsou vyloučeny z asynchronického načítání.

Srovnání výkonnosti před a po

Přezkoumejte svou webovou stránku pomocí výše uvedených nástrojů pro analýzu výkonnosti (PageSpeed Insights, GTmetrix). Porovnejte zprávu před a po optimalizaci a zaměřte se na změny v následujících klíčových metrikách:
První kresba obsahu (FCP): Je to výrazně dříve?
Maximální vykreslení obsahu (LCP): Jsou největší prvky obsahu zobrazeny rychleji?
Index rychlosti: Zrychluje se rychlost vizuálního naplnění obsahu stránky?
Celkový čas blokování (TBT): Zmenšil se čas, kdy je hlavní vlákno zablokováno?
Doporučení “Odstraňte zdroje blokující vykreslování”: Zmenšily se nebo zmizely problémy uvedené ve zprávě?

Úspěšná optimalizace by měla vést k významnému zlepšení těchto ukazatelů a zároveň ke snížení počtu varování v části “Příležitosti” nebo “Diagnostika” týkajících se zablokování renderování.

Pokud zjistíte, že některé funkce nefungují správně, vrátěte se do nastavení optimalizačního pluginu nebo do svého kódu a vylučte konkrétní skripty způsobující problémy ze seznamu asynchronního/odloženého načítání. Odstraňování problémů je iterativní proces a může vyžadovat několik úprav, než najdete optimální rovnováhu mezi funkčností a výkonem.

Závěr

Asynchronické načítání zdrojů pluginů WordPressu je osvědčená a efektivní technika optimalizace výkonnosti frontendu. Tím, že se neklíčové JavaScriptové a CSS soubory přesunou mimo klíčovou cestu renderování, umožní prohlížeči prioritně zpracovat a vykreslit hlavní obsah stránky, což výrazně zrychlí načítání webu a zlepší uživatelskou zkušenost. Implementace je jednoduchá – lze ji rychle nastavit pomocí pluginů, jako je WP Rocket, nebo dosáhnout vysoké úrovně přizpůsobení pomocí kódu. Klíčem je přesně identifikovat neklíčové zdroje, provést pečlivou implementaci a po optimalizaci důkladně otestovat funkčnost a výkonnost. Začlenění strategie asynchronního načítání do procesu údržby WordPressu je účinným způsobem, jak čelit výzvám moderního webového výkonu a zlepšit hodnocení SEO.

Časté dotazy

Měli byste zvolit asynchronické načítání (async) nebo odložené načítání (defer)?

Pokud jde o skripty plug-inů, obvykle se doporučuje používatdeferProtožedeferJe možné zajistit, aby se skripty spouštěly v pořadí, v jakém se objevují v HTML, což je zásadní pro skripty se vzájemnými závislostmi (například skript pluginu závislý na jQuery), a pomáhá tak předcházet chybám způsobeným nesprávným pořadím spuštění.asyncJe vhodnější pro úseky kódu, které jsou zcela nezávislé a nespoléhají na žádné jiné skripty ani nejsou závislé na jiných skriptech, například některé samostatné moduly statistické analýzy.

Může asynchronní načítání zdrojů pluginu vést k selhání funkce?

To je možné. Pokud je spuštění skriptu pluginu silně závislé na dostupnosti DOM v určitém okamžiku (například v případě <DOMContentLoadedPokud se událost spustí okamžitě po manipulaci s DOMem nebo pokud na ni spoléhají jiné synchronní skripty, může k jejich spuštění dojít příliš brzy nebo příliš pozdě, což může vést k chybám. Proto je nutné po optimalizaci provést komplexní testování a být připraveni přidat problematické skripty na seznam vyloučených skriptů.

Jsou všechny pluginy vhodné k asynchronnímu načítání?

Ne. Pluginy, které mají přímý dopad na renderování první obrazovky a klíčové interakce, by neměly být načítány asynchronně. Například animační knihovna sloužící k vytváření vizuálních efektů na první obrazovce, skript pro reakci navigačního menu nebo klíčový CSS pro optimalizaci zobrazení písma na webové stránce by měly být načítány synchronně nebo jako inline kód, aby byla zajištěna plynulost a okamžitost uživatelského zážitku. Optimalizace by měla být vždy prováděna tak, aby nedošlo k narušení klíčových funkcí.

Kromě asynchronického načítání, jaké další metody lze použít k optimalizaci výkonnosti pluginů?

Asynchronické načítání je důležitou součástí, ale můžete také využít další kombinované strategie: 1. Sloučení a minimalizace souborů: Použijte pluginy k sloučení několika malých JS/CSS souborů a odstraňte prázdné komentáře. 2. Načítání podle potřeby: U komplexních pluginů (jako je Builder stránek) se ujistěte, že se jejich zdroje načtou pouze na stránkách, kde jsou potřebné. 3. Výběr lehkých pluginů: Při výběru nových pluginů upřednostněte alternativy s dobrou reputací ohledně výkonnosti a jednoduchým kódem. 4. Využití cache: Ujistěte se, že všechny statické zdroje mají delší dobu vypršení platnosti cache a jsou distribuovány prostřednictvím CDN. Tyto metody v kombinaci s asynchronním načítáním mohou vést k nejlepším kompozitním zlepšením výkonnosti.