Fix Google PageSpeed Távolítsa el a renderelt blokkoló JavaScriptet és a CSS-t a felsőkategóriás tartalomban
- Oldja meg a Javascript és a CSS blokkolását
- 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
- Havas a Javascript fájlok betöltése
- Töltse be a CSS-t a HTML betöltése után
- Töltse le a Google webhelysebesség-tesztjét!
- Hogyan lehet kiküszöbölni a renderelt blokkoló erőforrásokat a WordPressben
- Van egy külső rendszer, amely optimalizálja webhelyét az Ön számára
- Gyakran Feltett Kérdéseket
- Tökéletes króm világítótorony pontszám: Mi történik? - video
- Hozzászólások (8)
Oldja meg a Javascript és a CSS blokkolását
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.
[1] - PageSpeed Insights - developers.google.comMegjelené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
- Kérjen egy külső rendszert, amely optimalizálja az Ön webhelyét
- 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:
- Halasztja a Javascript fájlok betöltését
- A CSS betöltése a HTML betöltése után
- 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.comTö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.comA 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.comHogyan 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 -tEz 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-enNe 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!
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 NetworkAzon 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.
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?
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