Využijte moderní funkce prohlížeče, jako je předběžné načítání, předběžné načítání, předběžné připojení, aby byl web WordPress rychlejší.
Kdo jako vlastník webu nerad dělá všechny možné věci pro rychlejší načítání webové stránky?
Zajistit konzistentně rychlejší načítání stránek po celém světě je náročné. Pro rychlé načtení zdrojů webu můžete udělat několik věcí, včetně povolení následujících tipů prohlížeče. Jsou také známé jako techniky předběžného procházení.
Poznámka: Při prvním přístupu na web příliš nepomohou techniky tipů prohlížeče, ale následné požadavky jsou rychlejší.
Table of Contents
Předpětí
Pomocí značky předběžného načtení můžete prohlížeči sdělit, aby načetl některé statické zdroje brzy. Mohou to být obrázek, písmo, JavaScript, CSS, skripty, video atd. Pomáhá upřednostňovat načítání zdrojů; tím se zlepší výkon.
Předběžné načítání by bylo vhodné implementovat, pokud očekáváte, že vaši uživatelé následně navštíví více stránek. Stejně jako eCommerce obchod, kde uživatel navštíví stránku produktu a poté zkontroluje informace, porovná s jiným produktem, přidá do košíku, zaplatí atd.
K nastavení funkce Preload můžete použít následující pluginy.
Lepší tipy na zdroje – bezplatný plugin pro konfiguraci souborů CSS a JS.
WP Rocket – prémiový plugin pro zvýšení výkonu webu mnoha základními technikami, včetně předběžného načítání mezipaměti a mapy webu.
Jak poznáte, že je povoleno předběžné načítání?
Nejrychlejší způsob, jak to zjistit, je zobrazením zdroje stránky. Měli byste vidět něco jako níže.
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
Ne všechny prohlížeče podporují předběžné načítání při zápisu. Takže, podívejte se na matice kompatibility před realizací.
Předpřipojení
Načítáte zdroje z jiných domén? Možná CDN?
Pokud ne a každý zdroj se načítá z vaší jediné domény, nemusí to být užitečné.
Preconnecting hints browser pro navázání připojení k jiným doménám na pozadí, aby se ušetřil čas pro DNS vyhledávání, přesměrování, TCP handshake, TLS vyjednávání atd. Cílem je snížit latenci a zajistit rychlé načítání zdrojů z jiné domény.
Opět můžete použít výše zmíněný plugin pro lepší zdroje nebo prémiový plugin záležitosti.
Jakmile nakonfigurujete požadované zdroje, měli byste je vidět ve zdroji stránky, jak je uvedeno níže.
<link rel="preconnect" href="https://ANOTHERSITE.com">
Poznámka: Pokud načítáte zdroje z domény, která vyžaduje CORS, musíte to určit, jak má vypadat crossorigin a výstup.
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect je kompatibilní s nejnovější verzí Chrome, Edge, Firefox, Safari.
Přednačtení
Nechte prohlížeč načíst další stránku, o které si myslíte, že bude potřeba, když se uživatel bude pohybovat. Prefetch stáhne potřebné zdroje a uloží je do místní mezipaměti a v případě potřeby je rychle obslouží. Existují dva typy předběžného načtení.
Přednačtení DNS – vysvětleno níže
Prefetch odkazu – konfiguruje se pomocí
jako atribut podporuje různé zdroje, jako je zvuk, video, skript, stopa, styl, písmo, objekt, dokument atd. Předběžné načítání odkazu lze nakonfigurovat pomocí Plugin Tipy na zdroje před večírkem.
Předběžné načtení DNS
Načítáte zdroje z mnoha domén a chcete je vyřešit na pozadí?
Toto rychlé nastavení může pomoci vyřešit všechny potenciální domény dříve, takže když jsou požadovány zdroje, načte se rychleji. To pomáhá snížit celkovou latenci.
Řekněme, že načítáte zdroje ze 3 domén a každé doméně trvá asi 100 ms, než provede vyhledání DNS, ušetříte pak latenci 300 ms.
Není to v pohodě?
Můžete to implementovat buď pomocí pluginu perfmatters, nebo přidat následující do souboru functions.php vašeho motivu, pokud jste spokojeni s úpravou souborů motivu.
//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);
Více si můžete přečíst na Webové dokumenty Mozilla.
Předvykreslení
Očekáváte, že uživatelé vašeho webu budou procházet potenciální stránkou?
Prerender může pomoci načíst tyto prostředky na pozadí, a když na něj uživatel klikne, získá je velmi rychle. Můžete toho dosáhnout pomocí pluginu Pre Party Resource Hints.
Předběžné vykreslování je vhodné pro nenáročnou stránku nebo aktivum, ale buďte opatrní s celým webem nebo velkými zdroji, protože může zvýšit využití procesoru a šířku pásma a zpomalit web. Zkuste to tedy s menším zdrojem a otestujte jej, abyste se ujistili, že nemá vedlejší účinky.
Jak můžete vidět, existují čtyři hlavní pluginy, které implementují tipy prohlížeče ve WordPressu. Vyberte si ten, který se vám líbí a vyhovuje požadavkům.
Plugin Tipy na zdroje před večírkem – bezplatný plugin nabízí DNS-prefetch, link prefetch, prerender, preconnect a preload.
Lepší tipy na zdroje – alternativa k výše uvedenému.
Bezplatný plugin je dobrý, pokud je udržován a podporován. To se bohužel u mnoha pluginů nestává, a proto je někdy lepší sáhnout po placené verzi. Komerční verze pluginů jsou podporovány profesionálně a jsou aktuální se standardními a bezpečnostními opravami WordPress. Pokud jste ochotni utratit pár dolarů za optimalizaci výkonu svého webu, můžete se podívat na následující.
WP Rocket – má dobrou pověst, důvěřuje více než 800 000 webů. Stálo to 49 dolarů za jeden web.
Perfmatters – lehký a snadno sledovatelný stojí 24,95 $ za jednu stránku. Jak píšu, nabízí následující funkce.
To je hodně optimalizace.
Závěr
Jádro WordPress je lehké, ale stává se objemným v závislosti na tom, jaké téma a pluginy používáte. A je nezbytné optimalizovat výkon vašeho webu pro lepší hodnocení ve vyhledávání a konverzi. Výše uvedené techniky lze snadno sledovat, ale neměli byste u toho skončit.
Měli byste také zvážit použití CDN pro rychlejší doručování obsahu vašim uživatelům, globálně, do mezipaměti. Existuje mnoho, ale doporučil bych vyzkoušet SUCURI, který nabízí CDN a zabezpečení, obojí.