Fix Google PageSpeed ​​Távolítsa el a renderelt blokkoló JavaScriptet és a CSS-t a felsőkategóriás tartalomban

A Google PageSpeed ​​[1] teszt A renderelt blokkoló JavaScript és CSS eltávolítása a fent említett tartalomban azt javasolja, hogy webhelye JS- és CSS-fájljait a HTML teljes betöltése után küldje el - és ezért ne szüneteltesse a HTML-betöltést letölteni őket.


Oldja meg a Javascript és a CSS blokkolását

Google PageSpeed   ​​[1] teszt A renderelt blokkoló JavaScript és CSS eltávolítása a fent említett tartalomban azt javasolja, hogy webhelye JS- és CSS-fájljait a HTML teljes betöltése után küldje el - és ezért ne szüneteltesse a HTML-betöltést letölteni őket.

[1] - PageSpeed ​​Insights - developers.google.com
Megjelenést blokkoló szkriptek meghatározása: A teljes HTML DOM elemzése előtt betöltött szkriptek. Például a fejlécben vagy a tartalomban található szkriptek, anélkül, hogy a böngészőknek külön utasításokat adnának a szkriptek betöltésére a HTML festés után.

Távolítsa el a megjelenítést blokkoló JavaScriptet és CSS-t a hajtás feletti tartalomból: mutassa meg, hogyan lehet javítani

  1. Kérjen egy külső rendszert, amely optimalizálja az Ön webhelyét
  2. Használjon olyan CDN-t, amely az összes lehetséges optimalizálást végrehajtja az Ön nevében, beleértve a következő három optimalizálást, amely szükséges a megjelenítést blokkoló erőforrások kiküszöböléséhez:
  3. Halasztja a Javascript fájlok betöltését
  4. A CSS betöltése a HTML betöltése után
  5. Használjon WordPress beépülő modult

Rengeteg optimalizálás szükséges a renderelés-blokkoló erőforrások kiküszöböléséhez, és unalmas lehet, hogy saját maga hajtja végre őket - ráadásul folyamatosan figyelnie kell a Chrome LightHouse és a  Google PageSpeed   ​​új tesztjeire az egyéb oldalsebesség-tesztek mellett.

Nincs olyan megoldás, amely kiküszöbölné a megjelenítést blokkoló erőforrásokat a htaccess kódban, mivel a probléma a DOM-hoz kapcsolódik, vagyis a webhely tartalmához és a mellékelt erőforrások, például a Javascript és a CSS betöltési sorrendjéhez, de nem csak. Ezeket nem lehet a Htaccess szolgáltatásban kiváltani, hanem csak a HTML DOM tartalomban.

Ha megoldja ezeket a problémákat asztali számítógépen, ezzel egyidejűleg kiküszöböli a megjelenítés blokkoló erőforrásokat a mobilok számára, mivel mindkettő pontosan ugyanaz!

Did you know that you can even have all these steps executed automatically for you by using an external Webhelysebesség-gyorsító 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!

Havas a Javascript fájlok betöltése

A JS-fájlok [2] terhelésének elhalasztása érdekében hozzáadhatja az async vagy a halasztást az Ön parancsfájljaihoz. Az Async nem garantálja, hogy ugyanabban a sorrendben töltődjenek be - ezért ha több szkriptet kell futni egymás után, a halasztás előnyösebb a szekvencia garantálásához:

[2] - Távolítsa el a megjelenítést blokkoló JavaScriptet PageSpeed ​​Insights | Jó fejlesztők - developers.google.com

Töltse be a CSS-t a HTML betöltése után

Ahhoz, hogy a CSS letöltésre kerüljön a teljes HTML átvitel után, a Google javasolja [3] ezt a kódot a HTML végén, például a lábléc záró címke után és a záró címke előtt:

[3] - A CSS kézbesítés optimalizálása PageSpeed ​​Insights | Jó fejlesztők - developers.google.com

A webhely optimalizálásához is jó ötlet, hogy eltávolítsa a fel nem használt CSS-kódot, olyan műveletet, amely unalmas lehet, ha nem ismeri a webes tervezésben. Ha még nem hozta létre webhelye témáját, akkor lehet bölcsebb használni egy külső rendszert, hogy eltávolítsa a fel nem használt CSS-kódot az Ön oldalán lévő oldalain, mint például az ezoic ugrás, például a csodálatos webhely új (és teljesen ingyenes) változata Sebességgyorsító.

Töltse le a Google webhelysebesség-tesztjét!

Ez lehetővé tette, hogy továbbítsam a  Google PageSpeed   ​​[1] tesztet A webhelyen megjelenő, 51-es pontszámmal felfelé kiiktatva a renderelt blokkoló JavaScriptet és a CSS-t a legmagasabb tartalomban (a Bővítõ böngészõ gyorsítótárazása mellett [4]) Az 1. ábra 72. ábráján (2. ábra), 59-ről (3. ábra) 79-re az asztalon (4. ábra).

[4] - Javítsa a Google PageSpeed ​​segítségével a böngésző gyorsítótárát az htaccess szolgáltatásban - Yoann Bierling, nemzetközi SAP / webes tanácsadó - www.ybierling.com

Hogyan lehet kiküszöbölni a renderelt blokkoló erőforrásokat a WordPressben

Ahhoz, hogy a WordPress-ben megszüntesse a renderelés-blokkoló erőforrásokat, telepíteni kell egy olyan plugint, mint a JetPack.

Ezután keresse meg a beállításokat, amelyekhez rendszergazdának kell lennie, és menjen a JetPack beállításaihoz> Írás> Teljesítmény és sebesség> Ellenőrizze a webhely gyorsítójának engedélyezése, a képterhelési idő gyorsítása, a statikus fájl betöltési idők felgyorsítása és a lusta betöltés betöltése képek.

Tanulja meg a SEO alapjait: Jelentkezzen ma!

Növelje webhelyének láthatóságát és forgalmát azáltal, hogy elsajátítja a SEO alapjait a könnyen követhető alapok tanfolyamunkkal.

Kezdje el tanulni a SEO -t

Növelje webhelyének láthatóságát és forgalmát azáltal, hogy elsajátítja a SEO alapjait a könnyen követhető alapok tanfolyamunkkal.

Ez kiküszöböli a renderelt blokkoló erőforrásokat a WordPress-ben, és gyorsabban tölti be az oldalakat, lehetővé téve a JetPack számára, hogy optimalizálja a képeket, és képeit és statikus fájljait (például a CSS-t és a JavaScript-et) kiszolgálja a globális szerverhálózatról.

Hogyan lehet megszüntetni a renderelt blokkoló JavaScript-et és a CSS-t a WordPress-en

Ne felejtse el elhalasztani a képek letöltését a képernyőn egy lusta terhelés funkció segítségével. Bár nehéz volt, és szükség van egy külső könyvtárra, hogy elhalassza a képek letöltését a képernyőn, mostantól a HTML5-ben lehetséges!

A képek lusta betöltése: A webhelyi képeket csak akkor kérik a szerverre, amikor a felhasználó lapozzon a weboldalon, és megjelenítheti őket

Megvalósítása lusta betöltését képeket a weboldalak, egyszerűen csak hozzá az értékeket lusta attribútumait betöltését a honlapon a képeket, és a legutóbbi böngészők számára nyilvánvaló, hogy ezek a képek csak kért, és betöltve, ha azok nem jelenik meg, ami azt jelenti, ha a felhasználó görgeti le a kép helyőrzőjei.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy betöltés - Web Performance - Mozilla Developer Network

Azon felül, lusta rakodási is működik iframe és fontos megvalósítása, hogy megszüntesse a megjelenítést gátló forrásokat a weboldalairól.

Miután a renderelő blokkoló erőforrásoknak a fő tartalom utáni betöltésre utalnak, azaz a HTML Dom, akkor már sok pontot keres a Google Lighthouse teszten, az oldalsebesség-betekintés tesztje vagy a Google Core Web Vitals.

Van egy külső rendszer, amely optimalizálja webhelyét az Ön számára

Tudja, hogy valójában minden a  Google PageSpeed   ​​kérdése megoldódhat az Ön nevében, anélkül, hogy webhelye nagy erőfeszítést igényelne - kivéve, ha regisztrál egy ingyenes próbaverzióra és módosítja a DNS-t?

Az Ezoic platform webhelysebesség-gyorsító technológiájával az összes szokásos  Google PageSpeed   ​​problémát rendszerük oldja meg, amely közvetítő lesz az Ön webhelye és a látogatók között. Optimalizálják a weboldalt az Ön számára, mielőtt megjelenítenék a látogatót.

2021 áprilisában az EZOIC Fizetett Site Speed ​​Accelerator ingyenes EZOIC ugrás lesz, és segítséget nyújt a weboldalak elérése Core Web Vitals zöld pontszámok nélkül!

Zöldvé váljon, ha egyszerűen regisztrál egy ingyenes próbaverzióra az Ezoic platformon, és próbálja ki magát - ezek néhány nap alatt elérhetik a weboldal legmagasabb szintű optimalizálási szintjét: elkészítik a következő generációs webp képeket, optimalizálják a CSS-t és a JavaScript-et a nem használt CSS eltávolításával és JS, lusta képek betöltése, a képek átméretezése, a weboldalak gyorsítótárba helyezése, a betűtípusok optimalizálása, az összes csatlakoztatott webhely előzetes csatlakozása és még sok más.

Nincs szükség hitelkártyára - csupán annyit kell tennie, hogy ingyenesen regisztrál és kipróbálhatja. Plusz, ha webhelye pénzt keres vizuális hirdetésekkel, ráadásul sokkal gyorsabbá teszi weboldalát, ezek többszer több pénzt is kereshetnek, mint a Google AdSense esetén, ha hirdetéseit gépi tanulással és fejlett mesterséges intelligenciával optimalizálják.

Gyakran Feltett Kérdéseket

Hogyan lehet kiküszöbölni a JavaScript és a CSS megjelenítését a soronkénti tartalomban?
A JavaScript és a CSS kiadásának blokkolásának kiküszöbölése érdekében ellenőrizze, hogy a webhely JS és CSS fájljait a HTML teljes betöltése után betöltötték. Ez azt jelenti, hogy nem szünetelteti a HTML betöltési folyamatot a fájlok letöltéséhez. Halaszthatja a JavaScript fájlokat az Async vagy a Halasztás attribútummal, és a CSS -hez a HTML után betöltheti azt. Egy külső optimalizálási rendszer, mint például a Ezoic, ezt automatikusan képes kezelni.
Hogyan lehet a webfejlesztők kezelni a Google Pagespeed ajánlását a JavaScript és a CSS megjelenítésének kiküszöbölésére?
A webfejlesztők optimalizálhatják webhelyüket a JavaScript és a CSS fájlok minimalizálásával, aszinkron betöltéssel a JavaScripthez, a kritikus CSS-t közvetlenül a HTML-be beillesztve, és elhalasztva a nem kritikus CSS és JavaScript fájlok betöltését. Ezeknek a stratégiáknak a végrehajtása jelentősen javíthatja a betöltési időket és az oldalsó pontszámokat.

Tökéletes króm világítótorony pontszám: Mi történik?


Yoann Bierling
A szerzőről - Yoann Bierling
A Yoann Bierling egy webes kiadói és digitális tanácsadó szakember, amely a technológiák szakértelme és innovációja révén globális hatást gyakorol. Szenvedélyesen az egyének és szervezetek felhatalmazása a digitális korban való virágzásra, arra készteti, hogy kivételes eredményeket érjen el és növelje a növekedést az oktatási tartalom létrehozása révén.

Tanulja meg a SEO alapjait: Jelentkezzen ma!

Növelje webhelyének láthatóságát és forgalmát azáltal, hogy elsajátítja a SEO alapjait a könnyen követhető alapok tanfolyamunkkal.

Kezdje el tanulni a SEO -t

Növelje webhelyének láthatóságát és forgalmát azáltal, hogy elsajátítja a SEO alapjait a könnyen követhető alapok tanfolyamunkkal.




Hozzászólások (8)

 2018-08-19 -  quranapk
Szeretem folyamatosan olvasni a tartalmát - ez segített javítani a renderelés blokkoló CSS-ét
 2018-09-23 -  Monica
Tehát így csináljuk, nagyon jó tudni, hogyan lehet megoldani a megjelenítést blokkoló erőforrások kiküszöbölését
 2018-09-25 -  Van
Remek, pontosan ezt kerestem, most már készen állok a megjelenítést blokkoló erőforrások megszüntetésére a mobilon
 2018-11-03 -  utumikaji0
Elképesztő, most itt az ideje, hogy kipróbáljam és kijavítsam a megjelenítést blokkoló erőforrások megszüntetését!
 2019-01-12 -  Leo
Nem tudom, hogyan köszönjem meg, de ez tiszta zseni, köszönöm - a WordPress-en dolgozott, hogy eltávolítsa a renderelés blokkoló erőforrásait
 2019-04-21 -  Ludanulema
Szia, láttam a cikkedet, és segített megoldani a problémát a renderelés blokkoló erőforrások kiküszöbölésében a PHP-n, köszönöm
 2019-06-12 -  animeg2Q
Most megpróbálom, köszönöm, hogy megosztotta ezt a renderelést gátló erőforrások javításának megszüntetését
 2019-07-02 -  Gasfackele
Nekem jól működött, nem kell tovább keresgélnem a HTML-weboldalon a megjelenítést blokkoló erőforrások kiküszöbölését

Szólj hozzá