Oprava služby Google PageSpeed ​​Odstráňte JavaScript a CSS blokovanie renderovania v nadštandardnom obsahu

Test Google PageSpeed ​​[1] Odstráňte JavaScript a CSS blokovanie renderovania v nadštandardnom obsahu navrhuje, aby ste dodali súbory JS a CSS vašich stránok po úplnom načítaní kódu HTML, a preto nepozerajte svoje HTML načítanie stiahnuť ich.


Riešenie blokovania vykreslenia Javascript a CSS

Test  Google PageSpeed   ​​[1] Odstráňte JavaScript a CSS blokovanie renderovania v nadštandardnom obsahu navrhuje, aby ste dodali súbory JS a CSS vašich stránok po úplnom načítaní kódu HTML, a preto nepozerajte svoje HTML načítanie stiahnuť ich.

[1] - PageSpeed ​​Insights - developers.google.com
Definícia skriptu blokujúceho vykreslenie: Skripty, ktoré sa načítajú pred analýzou celého DOM DOM v HTML. Napríklad skripty zahrnuté v hlavičke alebo v obsahu bez akýchkoľvek konkrétnych pokynov pre prehliadače, aby odložili načítanie skriptu až po vymaľovaní HTML.

Odstráňte JavaScript a CSS blokujúce vykreslenie v obsahu nad záhybom stránky: ukážte, ako to opraviť

  1. Nechajte externý systém optimalizovať vaše webové stránky za vás
  2. Použite sieť CDN, ktorá vo vašom mene vykoná všetky možné optimalizácie, vrátane troch nasledujúcich optimalizácií potrebných na odstránenie zdrojov blokujúcich vykreslenie:
  3. Odložiť načítanie súborov Javascript
  4. Načítajte CSS po načítaní HTML
  5. Použite doplnok WordPress

Existuje veľa optimalizácií potrebných na odstránenie eliminácie zdrojov blokujúcich vykreslenie a môže byť zdĺhavé ich implementovať sami - navyše budete musieť neustále hľadať nové testy zahrnuté v Chrome LightHouse a  Google PageSpeed   ​​okrem iných testov rýchlosti stránky.

Neexistuje žiadne riešenie, ktoré by eliminovalo zdroje blokujúce vykreslenie v kóde htaccess, pretože problém súvisí s DOM, čo znamená obsah webových stránok a poradie načítania zahrnutých zdrojov, napríklad Javascript a CSS, nielenže. Nemôžu byť spustené v Htaccess, ale iba v obsahu HTML DOM.

Ak vyriešite tieto problémy pre stolné počítače, zároveň vylúčite zdroje blokujúce vykreslenie pre mobilné zariadenia, pretože obe sú úplne rovnaké!

Did you know that you can even have all these steps executed automatically for you by using an external Akcelerátor rýchlosti stránok technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Odložiť načítavanie súborov Javascript

Ak chcete odložiť zaťaženie vašich súborov JS [2], môžete buď pridať inštrukcie async alebo odložiť odkazy na skripty. Async nezaručuje, že sú načítané v rovnakom poradí - a preto ak máte niekoľko skriptov, ktoré by mali bežať jeden po druhom, odložte, je lepšie zaručiť postupnosť:

[2] - Odstrániť JavaScript blokujúci vykreslenie | PageSpeed ​​Insights Dobrí vývojári - developers.google.com

Načítať CSS po načítaní HTML

Ak sa CSS načíta po úplnom prenose HTML, spoločnosť Google navrhne [3] tento kód, ktorý sa má pridať na konci kódu HTML, napríklad po zápise štítku a pred značkou na zavretie telo:

[3] - Optimalizácia doručovania CSS PageSpeed ​​Insights Dobrí vývojári - developers.google.com

S cieľom optimalizovať vaše webové stránky je tiež dobrý nápad odstrániť nepoužitý kód CSS, operáciu, ktorá môže byť únavná, ak nemáte vedomosti v oblasti webového dizajnu. Ak ste nevytvorili svoje webové stránky tému sami, môže byť múdrejší na použitie externého systému na odstránenie nepoužívaného CSS kód na vašich stránkach vo vašom mene, ako je napríklad ezoic skok, napríklad nová (a úplne zadarmo) verzia ich úžasnej stránky Urýchľovač rýchlosti.

Zložte test rýchlosti stránok Google!

Umožnil som to prejsť testom  Google PageSpeed   ​​[1] Odstrániť blokovanie renderovania jazyka JavaScript a CSS v nadštandardnom obsahu (spolu s ukladaním do vyrovnávacej pamäte prehliadača [4]) na webovej lokalite, ktorá sa pohybuje od skóre 51 v mobile ( Obr. 1) až 72 (obr. 2) a od 59 (obrázok 3) do 79 na pracovnej ploche (obr. 4).

[4] - Oprava Google PageSpeed ​​využíva medzipamäť prehliadača v htaccess - Yoann Bierling, medzinárodný SAP / webový konzultant - www.ybierling.com

Ako odstrániť render-blokovanie zdrojov vo WordPress

Ak chcete odstrániť prostriedky na blokovanie renderovania v programe WordPress, je potrebné nainštalovať doplnok, napríklad JetPack.

Potom prejdite na možnosti, pre ktoré musíte byť správcom, a prejdite na možnosti JetPack> Písanie> Výkon a rýchlosť> zaškrtnúť Povoliť akcelerátor stránok, urýchliť načítanie obrázkov, urýchliť načítanie statických súborov a povoliť lenivé načítanie snímky.

Creation Web Creation: Zaregistrujte sa teraz!

Transformujte svoju digitálnu prítomnosť pomocou nášho komplexného kurzu vytvárania webových stránok - začnite svoju cestu, aby ste sa stali dnes webovým odborníkom!

Zaregistrovať sa tu

Transformujte svoju digitálnu prítomnosť pomocou nášho komplexného kurzu vytvárania webových stránok - začnite svoju cestu, aby ste sa stali dnes webovým odborníkom!

Tým sa eliminujú prostriedky na blokovanie renderovania v programe WordPress a načítavajú sa stránky rýchlejšie tým, že umožní JetPacku optimalizovať vaše obrázky a slúžiť vašim obrazom a statickým súborom (ako napríklad CSS a JavaScript) z ich globálnej siete serverov.

Ako odstrániť renderovanie-JavaScript JavaScript a CSS na WordPress

Tiež nezabudnite odložiť načítanie obrázkov off-screen pomocou lenivého zaťaženia funkcie. Aj keď to bolo ťažké a vyžadujú externú knižnicu na odloženie načítania obrázkov Off-screen, je teraz možné natívne v HTML5!

Lazy Nakladanie obrázkov: Obrázky webových stránok sa vyžadujú len na server, keď sa používateľ posúva na webovú stránku a môže sa zobraziť

Ak chcete implementovať lenivé načítanie obrázkov na vašich webových stránkach, jednoducho pridajte hodnoty lenivé do atribútov načítavaním obrázkov webových stránok a posledné prehliadače pochopia, že tieto obrázky by mali byť vyžiadané len a načítané, ak sa zobrazujú, čo znamená, že používateľ sa zobrazí, čo znamená Podperače obrazu.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy Loading - webový výkon - Mozilla Developer Network

Na vrchole toho, lenivé načítanie aj s Iframesom a je dôležitou implementáciou na odstránenie zdrojov blokovania z vašich webových stránok.

Akonáhle budú mať zdroje blokovania vykresľovania pokyny na načítanie po hlavnom obsahu, čo znamená, že HTML DOM, budete už zarobiť veľa bodov na Maják Google Lighthouse, na stránke Speed ​​Speed ​​Insights Test, alebo Webové vitalik Google Core.

Majte externý systém, ktorý optimalizuje vaše webové stránky za vás

Viete, že by ste mohli skutočne vyriešiť všetky problémy služby  Google PageSpeed   ​​vo vašom mene bez veľkého úsilia z vašej stránky - s výnimkou registrácie na bezplatnú skúšobnú verziu a zmeny DNS?

Použitím technológie Ezoic Site Speed ​​Accelerator sa všetky obvyklé problémy služby  Google PageSpeed   ​​vyriešia ich systémom, ktorý bude sprostredkovateľom medzi vašimi webovými stránkami a návštevníkmi. Pred zobrazením vášmu návštevníkovi optimalizujú webovú stránku.

V apríli 2021 sa ezoic platený urýchľovač rýchlosti lokality sa stane slobodným ezoickým skokom a pomáhajú webovým stránkam, ktorým sa siahajú vitalové vitalové vitalové skóre bezplatne!

Získajte zelenú jednoduchou registráciou na bezplatnú skúšobnú verziu na platforme Ezoic a vyskúšajte si to sami - vďaka svojej webovej stránke dosiahnete v priebehu niekoľkých dní najvyššie štandardy optimalizácie rýchlosti stránky: vykreslite webové obrázky novej generácie, optimalizujte CSS a JavaScript odstránením nepoužitých CSS a JS, lenivé načítanie obrázkov, zmena veľkosti obrázkov, ukladanie stránok do vyrovnávacej pamäte, optimalizácia písiem, predbežné pripojenie ku všetkým vašim zahrnutým webom a oveľa viac.

Nevyžaduje sa žiadna kreditná karta - stačí sa zaregistrovať zadarmo a vyskúšať. Navyše, ak váš web zarába peniaze z grafických reklám, okrem toho, že vaše webové stránky zaraďujú oveľa rýchlejšie, môžu tiež zarobiť niekoľkonásobne viac peňazí ako v službe Google AdSense optimalizáciou reklám pomocou strojového učenia a pokročilej umelej intelencie.

Často Kladené Otázky

Ako eliminovať JavaScript a CSS blokujúce vykreslenie v obsahu nadradeného obsahu?
Aby ste odstránili JavaScript a CSS blokujúci vykreslenie pre nadčasový obsah, mali by ste sa ubezpečiť, že súbory JS a CSS vášho webu sú po úplnom načítaní HTML načítané. To znamená, že na stiahnutie týchto súborov nezastaví proces načítania HTML. Môžete odložiť súbory JavaScript pomocou atribútu async alebo odložiť a pre CSS môžete použiť konkrétny kód na jeho načítanie po HTML. Systém externej optimalizácie, ako je Ezoic, to môže tiež automaticky spracovať.
Ako môžu vývojári webových stránok riešiť odporúčanie Google Pagespeed na odstránenie JavaScript a CSS v vykreslení?
Vývojári webových stránok môžu optimalizovať svoje stránky tým, že sa rozvíjajú súbory JavaScript a CSS, pomocou asynchrónneho načítania pre JavaScript, inlinizáciou kritického CSS priamo do HTML a odložením načítania nekritických súborov CSS a JavaScript. Implementácia týchto stratégií môže výrazne zlepšiť časy načítania a skóre PAGSPEED.

Perfektné skóre Chrome Lighthouse: Čo sa stane?


Yoann Bierling
O autorovi - Yoann Bierling
Yoann Bierling je profesionál z vydavateľstva a digitálneho poradenstva na webe, ktorý má globálny vplyv prostredníctvom odborných znalostí a inovácií v technológiách. Je vášnivý z posilnenia postavenia jednotlivcov a organizácií, aby prosperovali v digitálnom veku, je nútený prinášať výnimočné výsledky a zvyšovať rast prostredníctvom tvorby vzdelávacieho obsahu.

Creation Web Creation: Zaregistrujte sa teraz!

Transformujte svoju digitálnu prítomnosť pomocou nášho komplexného kurzu vytvárania webových stránok - začnite svoju cestu, aby ste sa stali dnes webovým odborníkom!

Zaregistrovať sa tu

Transformujte svoju digitálnu prítomnosť pomocou nášho komplexného kurzu vytvárania webových stránok - začnite svoju cestu, aby ste sa stali dnes webovým odborníkom!




Komentáre (8)

 2018-08-19 -  quranapk
Radi čítam váš obsah a stále uverejňujte príspevky - pomohlo mi to opraviť opravu CSS blokujúcich vykreslenie
 2018-09-23 -  Monica
Takto to robíme, je skvelé vedieť, ako vyriešiť elimináciu zdrojov blokujúcich vykreslenie
 2018-09-25 -  Van
Skvelé, to je presne to, čo som hľadal. Teraz som pripravený eliminovať zdroje blokujúce vykreslenie v mobilných zariadeniach
 2018-11-03 -  utumikaji0
Úžasné, teraz je čas, aby som to vyskúšal a odstránil zdroje blokujúce vykreslenie!
 2019-01-12 -  Leo
Neviem, ako vám poďakovať, ale je to číry génius, vďaka - fungovalo to na WordPress na odstránenie zdrojov blokujúcich vykreslenie
 2019-04-21 -  Ludanulema
Ahoj, videl som tvoj článok a pomohol mi vyriešiť problém s elimináciou zdrojov blokujúcich renderovanie v PHP, ďakujem
 2019-06-12 -  animeg2Q
Skúsim to teraz, ďakujem za zdieľanie tohto odstránenia opravy zdrojov blokujúcich vykreslenie
 2019-07-02 -  Gasfackele
Fungovalo mi to dobre, nemusím ďalej hľadať, aby som vylúčil zdroje blokujúce vykreslenie na webových stránkach HTML

Zanechať komentár