Ako odstrániť zdroje blokujúce vykreslenie vo WordPress

V súčasnosti existuje 810 miliónov webových stránok, ktoré používajú WordPress nedávna štúdia spoločnosti Colorlib. Aj keď je toto číslo pôsobivé, nevykazuje žiadne známky spomalenia.

Tá istá štúdia ukazuje, že na WordPress sa denne vytvorí 500 nových stránok. Pre predstavu, toto číslo je v porovnaní s iba 60 – 80 novými webmi za deň pre platformy ako Squarespace a Shopify.

WordPress je populárny z nejakého dôvodu. Je to ľahko použiteľná platforma, ktorú môže ktokoľvek využiť na založenie blogu alebo podnikania. Jeho knižnica doplnkov tiež poskytuje používateľom takmer neobmedzené funkcie na ich stránkach. Ale aj táto knižnica pluginov môže spôsobiť problém.

Google otvorene hovorí o tom, že rýchlosť stránky je kritickým signálom hodnotenia pre SEO. Je to preto, že rýchlosť načítania stránky priamo súvisí s celkovou skúsenosťou používateľa.

Dosiahnutie úrovní rýchlosti stránky prijateľných pre Google môže vyžadovať určité úpravy stránky. Jednou z týchto úprav, ktoré spoločnosť Google zvyčajne požaduje, je odstránenie blokovania vykresľovania pre JavaScript vo WordPress.

Získajte plne spravovaný hosting WordPress

Posilnite svoje stránky pomocou najlepšie optimalizovaného hostingu WordPress v tomto odvetví

Identifikácia zdrojov blokujúcich vykresľovanie

Prvým krokom pri učení sa, ako odstrániť zdroje blokujúce vykresľovanie vo WordPress, je identifikácia, čo tieto zdroje sú. Tento proces nie je náročný, ale vyžaduje použitie niektorých nástrojov na analýzu webových stránok.

Čítať:  Ako sa stať osobným štylistom

Nástroje pre vývojárov prehliadača Google Chrome poskytujú tri možnosti na identifikáciu zdrojov blokujúcich vykresľovanie. Tieto tri nástroje sú:

V Lighthouse sa vaše zdroje blokujúce vykreslenie zobrazia na karte Možnosti, ale iba v prípade, že tieto zdroje spôsobujú problémy na vašom webe. Keď vyberiete kartu Možnosti, uvidíte označené zdroje blokujúce vykresľovanie, krátky popis problému, ktorý spôsobili, a návrh, ako ho opraviť.

PageSpeed ​​Insights a GTmetrix sú platformy, ktoré používajú knižnicu Lighthouse na meranie niekoľkých hodnotiacich faktorov Google, ako je rýchlosť stránky, Core Web Vitals atď. Ako jedno z riešení pre vašu stránku uvedú „eliminovať zdroje blokujúce vykresľovanie“, ale môžu byť uvedené ako s nízkou prioritou.

Hoci platforma môže tvrdiť, že priorita je nízka, stále bude uvádzať jednotlivé súbory spôsobujúce problém a poskytne vám podrobné riešenie.

Bežné zdroje blokujúce vykresľovanie

Vo svete WordPress sa zvyčajne výraz „zdroje blokujúce vykresľovanie“ sa vzťahuje na JavaScript alebo CSS.

Nie všetky súbory CSS alebo JavaScript blokujú vykresľovanie, ale oba zdroje sú zodpovedné za väčšinu problémov s rýchlosťou stránok. Ďalšie zdroje blokujúce vykreslenie môžu byť:

  • HTML importy
  • CSS štýly

Importy HTML už nie sú také populárne, ale stále je dôležité vedieť o nich. Môžu stále existovať na mnohých starších webových stránkach, aj keď ide o starú technológiu.

Ako odstrániť zdroje blokujúce vykreslenie vo WordPress

Teraz, keď už máme základné informácie o tom, prečo je odstránenie JavaScriptu blokujúceho vykresľovanie vo WordPresse dôležité, poďme sa ponoriť do procesu krok za krokom na zrýchlenie stránky WordPress.

Krok 1: „Minifikujte“ súbory CSS a JavaScript

Prvým krokom je zníženie množstva súborov CSS a JavaScript spustených na vašom webe. Môžete to urobiť znížením množstva nepotrebných prázdnych miest a komentárov v kóde vašej webovej lokality.

Čítať:  Ako pridať meno v WhatsApp

Krok 2: Zreťazte CSS a JavaScript

Tento proces môže znieť zložitejšie, než v skutočnosti je. Všetky zreťazenia znamenajú kombinovanie vhodných súborov .css a .js, aby sa zúžil priestor, ktorý spotrebúvajú. V kóde vašej webovej lokality by malo byť len niekoľko súborov na zreťazenie, takže by to nemalo byť príliš náročné na spracovanie.

Krok 3: Odložte načítanie JavaScriptu

Súbory JavaScript môžete nakonfigurovať tak, aby sa spúšťali po všetkých ostatných prvkoch na vašich webových stránkach. Jedným z populárnych spôsobov, ako to urobiť, je pokročilejšia téma, ktorej sa budeme venovať neskôr, s názvom Asynchrónne načítanie.

Tieto tri kroky dopĺňajú proces odstránenia JavaScriptu blokujúceho vykreslenie vo WordPress bez doplnku. Rovnaké kroky platia aj pre súbory CSS.

Aj keď sú tieto kroky dostatočne jednoduché, môže byť náročné ich vykonať manuálne vo WordPress. Je to z veľkej časti spôsobené povahou doplnkov WordPress. Každý front-end doplnok na vašej lokalite môže mať spustených niekoľko vlastných súborov CSS a JavaScript.

WordPress poskytuje zoznam, ktorý kombinuje všetky vaše súbory JavaScript a CSS v rámci doplnkov na jednom mieste. Aj keď to uľahčuje prácu, najjednoduchší spôsob, ako odstrániť zdroje blokujúce vykreslenie, je pomocou doplnku.

Eliminácia zdrojov CSS a JavaScriptu blokujúcich vykresľovanie pomocou doplnkov WordPress

Doplnky WordPress sú vynikajúce nástroje na poskytovanie najrôznejších funkcií vašej stránke – najmä vo svete elektronického obchodu. Mnohé z týchto doplnkov však ponúkajú aj riešenia technických problémov s webovými stránkami, ako je rýchlosť stránky a odstránenie zdrojov blokujúcich vykresľovanie.

Tu je zoznam niektorých populárnych doplnkov a nástrojov, ktoré môžete použiť na odstránenie zdrojov blokujúcich vykresľovanie a na bleskovú rýchlosť vašich stránok.

1. JetPack

Inštalácia JetPack Boost na vašom webe vám poskytne všetky nástroje, ktoré potrebujete na odstránenie zdrojov blokujúcich vykresľovanie a optimalizáciu rýchlosti vašej stránky. JetPack Boost obsahuje prepínače, ktoré vám umožňujú jednoducho zapnúť optimalizáciu CSS a odložiť nepodstatný JavaScript priamo z nastavení pluginu.

Čítať:  Našiel sa WooCommerce Exploit – vyžaduje sa aktualizácia

Budete tiež môcť odložiť nepodstatné obrázky, ktoré, hoci nejde o zdroje blokujúce vykresľovanie, môžu pomôcť s celkovou rýchlosťou webu. JetPack Boost navyše dáva vašej webovej stránke celkové skóre, ktoré môžete sledovať, aby ste videli, ako zmeny ovplyvňujú vašu stránku.

2. Optimalizácia JCH

Používatelia WordPress budú musieť byť pre tento doplnok trochu technicky zdatnejší ako väčšina ostatných, ale je užitočný na zvýšenie rýchlosti stránky. JCH Optimize zvýši rýchlosť znížením počtu HTTP požiadaviek potrebných na načítanie vašich webových stránok.

Doplnok tiež pomáha s optimalizáciou obrázkov pre web WordPress prostredníctvom jeho generátora Sprite. Táto funkcia spája väčšie obrázky stránok do malých „škriatkov“, čím uľahčuje ich načítanie pre váš prehliadač.

Bohužiaľ, JHC Optimize vyžaduje platené predplatné, ale za 29 dolárov mesačne má viac ako 10 000 používateľov WordPress pocit, že to stojí za to.

3. Speed ​​Booster Pack

Funkcie tohto pluginu vám pomôžu odstrániť neporiadok, optimalizovať CSS a umožňujú „lenivé načítanie“ prvkov webovej stránky. Vývojový tím udržiava doplnok aktuálny a dokonca sa integruje s WooCommerce, aby pomohol používateľom elektronického obchodu.

Na správne nastavenie bezplatného doplnku môže byť potrebné trochu „pokusu a omylu“, ale nemusíte sa cítiť sami. Jednou z najväčších výhod Speed ​​Booster Pack je jeho podpora. Vývojový tím poskytuje tri praktické balíky podpory na profesionálnej úrovni, ktoré vám pomôžu nakonfigurovať balík Speed ​​Booster Pack tak, aby vyhovoval jedinečným potrebám vášho webu.

4. WP Rocket

WP Rocket poskytuje niekoľko funkcií, ktoré vám pomôžu odstrániť zdroje blokujúce vykresľovanie a optimalizovať rýchlosť webu WordPress. Plugin vám môže pomôcť:

  • Odložiť vzdialené dotazy JavaScriptu
  • Vykonajte minifikáciu CSS a JavaScriptu
  • Implementujte „lenivé načítanie“ obrázkov

Doplnok ponúka jednoduchý proces nastavenia pre WordPress, ale niektorým používateľom sa nemusia páčiť zmeny, ktoré robí na vašom informačnom paneli WP. Ak vám vyhovuje tradičné nastavenie WordPress, môže chvíľu trvať, kým si naň zvyknete. Bez ohľadu na zmenu rozhrania doplnok stále ponúka množstvo funkcií a nástrojov na odstránenie zdrojov blokujúcich vykresľovanie.

Čítať:  Tapeta Streda: Ďalšie skvelé tapety na telefón pre všetkých na zdieľanie (28. februára)

Spustenie WP Rocket stojí 49 dolárov ročne za primárny doplnok. Môžete tiež pridať niekoľko bezplatných doplnkov z knižnice doplnkov WordPress.

4. Autooptimalizácia

Autoptimize má jedinečný spôsob kondenzácie obrázkov na zvýšenie rýchlosti vášho webu. Doplnok to robí konverziou všetkých obrázkov do formátu WebP. Autoptimize navyše poskytuje všetky základné nástroje na blokovanie vykresľovania, aké si dokážete predstaviť, ako je miniifikácia CSS a JavaScript, ako aj možnosti ukladania skriptov do vyrovnávacej pamäte. Doplnok Autoptimize funguje aj s Async JavaScript plugin.

Doplnok spolupracuje s PageSpeed ​​Insights a pracuje špecificky na optimalizácii problémov identifikovaných touto platformou. Nastavenie Autoptimize môže byť trochu zložité, ale keď si používatelia zvyknú na rozhranie, ocenia funkcie, ktoré poskytuje.

Môžete si zakúpiť dve verzie tohto doplnku – vlastnú konfiguračnú verziu za 165 USD alebo odbornú konfiguráciu, ktorá prichádza s profesionálnou kontrolou vášho webu za 667 USD.

Pokročilé techniky na elimináciu zdrojov blokujúcich vykresľovanie

Pre ľudí, ktorí chcú ísť ešte ďalej a mať väčšiu kontrolu nad odstránením zdrojov blokujúcich vykresľovanie na svojom webe WordPress, existuje niekoľko manuálnych metód, ktoré môžete implementovať.

Asynchrónne a odložené načítanie pre súbory JavaScript a CSS

Keď do WordPressu (alebo CSS) pridávate JavaScript, môžete do kódu svojej webovej stránky pridať atribút „asynchronizácia“ alebo „odložiť“. Priradenie tejto značky k určitým súborom spôsobí, že vaša webová lokalita s nimi bude zaobchádzať ako s nepodstatnými a signalizuje vášmu prehliadaču, aby ich vykreslil oddelene od ostatných dôležitých súborov v rámci lokality.

Ak chcete priradiť asynchrónne načítanie konkrétnemu skriptu, pridajte „

Nové Publikácie:

ODPORÚČANIE