Napjaink versenyképes digitális környezetben a webhelyek sebessége nagyon sokat számít egy online vállalkozás sikere szempontjából. Az olyan keresőóriások, mint a Google, előnyben részesítik a gyorsan betöltődő webhelyeket, felismerve a zökkenőmentes felhasználói élmény biztosításának szükségességét.
Tanulmányok szerint a gyorsabb oldalbetöltés növeli a felhasználói elköteleződést és a konverziós arányt. Valójában az oldal betöltéséhez szükséges idő egy másodperces késése az ügyfelek konverzióinak 7%-os csökkenését okozhatja. Ennek fényében nyilvánvaló, hogy a webhelytulajdonosoknak nagy figyelmet kell fordítaniuk a webhely teljesítményére.
A Google komolyan veszi a webhely teljesítményét, és figyelembe veszi a keresési eredmények meghatározásakor. Következésképpen a gyorsan betöltődő webhelyek nagyobb valószínűséggel jelennek meg elsőként a keresési eredmények között, több látogatót vonzanak, és végül több bevételt generálnak. De hogyan teljesítheti a Google követelményeit, és hogyan töltheti be gyorsan webhelyét?
Megszabadul azoktól az erőforrásoktól, amelyek leállíthatják a webhely betöltési idejét, például a CSS- és JavaScript-fájlokat.
Ezeknek az erőforrásoknak az eltávolítása azonban kihívást és időigényes lehet, különösen a technikai készségekkel nem rendelkező személyek számára.
Ebben a cikkben elmagyarázzuk a megjelenítést blokkoló erőforrásokat, és azt, hogy ezek hogyan befolyásolják a webhely teljesítményét, valamint lépésről lépésre ismertetjük őket a WordPress-webhelyről való eltávolításukkal. Tehát kezdjük el optimalizálni webhelyét a gyorsaság és a siker érdekében!
Tartalomjegyzék
Renderelés blokkoló erőforrások
Minden olyan erőforrás, amelyet be kell tölteni egy weboldal megjelenítéséhez, megjelenítést blokkoló erőforrásnak minősül. Ezek az erőforrások befolyásolják a webhely teljesítményét és hatékonyságát, és meghosszabbítják az oldal betöltéséhez szükséges időt.
A CSS- vagy JavaScript-fájl megjelenítést blokkoló erőforrásnak tekinthető, ha a fájl blokkolja egy weboldal megjelenítését. Az oldal betöltésének jelentősége azonban az azonnali szükségességtől függően változhat.
Amikor a felhasználó megnyit egy oldalt, a böngésző először feldolgozza a HTML-kódot, hogy a hajtás felett megjelenítse annak tartalmát. Amikor a böngésző találkozik CSS és JavaScript fájlokkal, azokat is letölti és feldolgozza. Ha az erőforrásfájlok további kódokat vagy fel nem használt részeket tartalmaznak, hosszabb ideig tart a weboldal betöltése.
A megjelenítést blokkoló erőforrások típusai
Általában az olyan erőforrásfájlok, mint a CSS és a JavaScript, megjelenítést blokkoló erőforrásoknak számítanak a WordPressben. A böngésző ezeket az erőforrásokat kritikusnak tekinti, és be kell tölteni az oldal megjelenítéséhez. De ez nem az; több erőforrásfájl is blokkolja a weboldal megjelenítését.
Íme a megjelenítést blokkoló erőforrások listája:
CSS-stíluslapok
A weboldal tervezését és megjelenítését a CSS stíluslapok határozzák meg. A CSS-fájl megjelenítést blokkoló erőforrásnak minősül, ha egy HTML-oldal
részébe kerül.JavaScript fájlok a
szakaszbanA JavaScript egy szkriptnyelv, amely dinamikus viselkedésű és interakciós weboldal biztosítására használható. A JavaScript-fájl megjelenítést blokkoló erőforrásnak minősül, ha egy HTML-oldal
szakaszába helyezi.Betűtípusok
A weboldalon lévő szövegek különböző betűtípusokkal jelennek meg. A betűtípusok szintén megjelenítést blokkoló erőforrásnak számítanak, ha szerepelnek egy HTML-oldal
szakaszában, és egy helyi szerverről vagy CDN-ről töltik be.HTML importálás
Ezek a régebbi HTML-funkciók, amelyek lehetővé teszik, hogy a weboldalak más HTML-dokumentumokból származó elemeket is tartalmazzanak. Annak ellenére, hogy a HTML-importálást már nem használják olyan gyakran, bizonyos régebbi webhelyeken továbbra is megjelenhetnek. A HMTL-importálások is renderelést blokkoló erőforrásoknak számítanak.
Miért szörnyűek a megjelenítést blokkoló erőforrások a weboldalakon?
Ha WordPress-webhelye megjelenítést blokkoló erőforrásokat tartalmaz, akkor lemarad a keresési eredmények között. Még ha jelenleg is az élvonalban van, a jobban teljesítő webhelyek végül felülkerekednek rajtad.
A megjelenítést blokkoló erőforrásokkal rendelkező webhelyek további fájlokat töltenek be a webhely megjelenítése közben. A webhely megtekintése előtt a felhasználóknak meg kell várniuk, amíg a fájlok feldolgozása megtörténik. A webhelyek alábbi teljesítménymutatóit érintik ezek az erőforrások:
- Legnagyobb tartalomtartalom: Ez határozza meg, hogy mennyi ideig tart az oldal elsődleges tartalmának betöltése.
- First Contentful Paint: Az az idő, amely alatt a böngésző elkészíti az első dokumentum objektummodell (DOM) tartalmat a webhelyén.
- Teljes blokkolási idő: Ez azt értékeli, hogy mennyi idő telik el a Frist Contentful Piantotól addig, amíg egy oldal teljesen interaktívvá válik.
Bár a megjelenítést blokkoló erőforrások nem szükségesek a betöltéshez, akadályozhatják egy webhely vagy weboldal megjelenítését. Ezért elengedhetetlen az ilyen források eltávolítása, hogy ne nehezítsék meg a felhasználók számára a webhelyen való navigálást.
Nézzük meg közelebbről, miért jelent komoly problémát a weboldalak számára a megjelenítés-blokkolás:
Lassú oldalbetöltési idő
A megjelenítést blokkoló erőforrások lassabban töltik be a webhelyet, ami az egyik fő hátránya. Egy weboldal lassan töltődik be, ha szükségtelen elemeket tartalmazó erőforrásfájlokat tartalmaz. Ezért ez hatással lesz a keresési eredmények megjelenésére, alacsonyabb felhasználói elköteleződésre és magasabb visszafordulási arányra.
Blokkolt renderelés
A böngésző gyakran leállítja a weboldal megjelenítését, amikor a megjelenítést blokkoló erőforrásokkal találkozik, mert azt akarja, hogy a megjelenítést blokkoló erőforrásokat lekérjék és feldolgozzák.
Végül a felhasználók bosszankodnak, és elhagyják a webhelyet az oldal nem reagálása vagy lassú megjelenítése miatt.
Továbbá, ha egy erőforrás lassan töltődik be, a böngésző is feladhatja, és leállíthatja a betöltési kísérletet. Ez hibás oldalakhoz vagy hiányzó információkhoz vezethet.
Csökkent felhasználói elköteleződés
A renderelési késések esetén a felhasználói élmény is csökken. A felhasználók mindig gyors betöltési időt várnak el, és általában kilépnek egy lassan betöltő webhelyről. Így egy gyorsabban betöltődő webhelyre kerülnek.
A lassan betöltődő oldalak káros hatással vannak a fogyasztói elégedettségre és a márka hírnevére. Ezzel a weboldal látogatottsága és a konverziós ráta is drasztikusan csökken.
Különféle megközelítések léteznek a megjelenítést blokkoló erőforrások WordPressből való eltávolítására. Bemutatjuk azonban a kézi módszereket a renderelést blokkoló erőforrások kiküszöbölésére. Ezután megmutatjuk, hogyan teheti ezt meg a WordPress néhány híres beépülő moduljával.
Szüntesse meg a megjelenítést blokkoló erőforrásokat manuálisan
Elkerülheti, hogy manuálisan csinálja, így nem kell csalódnia. Ennek a szakasznak a végighaladása azonban biztosan segít néhány WordPress teljesítményoptimalizálási technikának elsajátításában. De először nézze meg ezt a videót, hogy megismerje a tárgyalt kifejezéseket.
#1. Azonosítsa a megjelenítést blokkoló erőforrásokat
Először meg kell találnia a megjelenítést blokkoló erőforrásokat, mielőtt eltávolítaná azokat a webhelyéről. Egyszerűen kövesse az alábbi lépéseket, hogy megtudja a WordPress webhelyén található megjelenítést blokkoló erőforrásokat:
- Lépjen a Google PageSpeed Insights oldalra.
- Írja be webhelye URL-jét a keresősávba.
- Kattintson az „Elemzés” gombra, hogy betekintést nyerjen webhelyére.
- Görgessen le, és ellenőrizze a Lehetőségek részt.
- Ha oldala rendelkezik megjelenítést blokkoló erőforrásokkal, akkor azok megjelennek a listán.
#2. „Defer” és „Async” attribútumok használata a JS-hez
A megjelenítést blokkoló erőforrások azonosítása után ideje megszüntetni őket a webhely jobb teljesítménye érdekében. A különféle módszerek közül a „halasztás” vagy az „aszinkron” módszer használata a JavaScript-fájlokhoz az egyik megközelítés erre.
Amikor a „defer” attribútumról van szó, lehetővé teszi, hogy a böngésző letöltse a JS-fájlt, majd végrehajtsa azt. De ez akkor történik meg, amikor az oldal befejeződött a betöltődéssel, és készen áll a tartalmának megjelenítésére.
Így az oldal többi eleme a JavaScript-fájllal párhuzamosan tölthető be. Ennek eredményeként csökken az oldal betöltéséhez szükséges idő.
Egy másik megközelítés az „async” attribútum, amely lehetővé teszi a böngésző számára a JS-fájl letöltését, amikor csak elérhető. Ez az oldal bármely más elemének blokkolása nélkül történik. Következésképpen a JS fájl más elemekkel párhuzamosan töltődhet be, ami felgyorsítja a betöltési folyamatot.
Megszabadulhat a megjelenítést blokkoló erőforrásoktól, és növelheti webhelye sebességét a „defer” vagy az „async” attribútum használatával.
#3. „Média” attribútum használata feltételes CSS-hez
A „média” attribútumok használata a feltételes CSS-hez egy másik megközelítés a megjelenítést blokkoló erőforrások kiküszöbölésére. Ezzel az attribútummal egyedi CSS-fájlokat határozhat meg asztali és mobil böngészőkhöz.
Például tartalmazhat egy CSS-fájlt, amely asztali eszközökhöz van dedikálva, és egy másik CSS-fájlt, amely mobileszközökhöz van szabva. Jelezheti a böngészőnek, hogy az asztali CSS-fájl betöltődik, ha asztali eszközről éri el.
Hasonlóképpen, a mobil CSS-t csak akkor szabad betölteni, ha mobileszközökön keresztül érhető el. Ha betölti az eszközspecifikus CSS-t a kijelölt eszközökhöz, csökkentheti a megjelenítést blokkoló erőforrásokat, és megnövelheti webhelye betöltési idejét.
#4. A nem kritikus CSS elhalasztása
Amellett, hogy a „media” attribútumot használja a feltételes CSS-hez, próbálja meg elhalasztani a nem kritikus CSS-t. Ehhez a megközelítéshez elsősorban az alapvető CSS-t kell betöltenie. Ezután töltse be a CSS többi részét az oldal betöltésekor.
Például előfordulhat, hogy van egy hatalmas CSS-fájlja, amely tartalmazza webhelyének összes stílusát. A CSS-fájlnak azonban csak egy kis része szükséges a tartalom megjelenítéséhez webhelye hajtás feletti régiójában. A hajtás feletti tartalom a nem kritikus CSS késleltetésével gyorsan megjeleníthető, a fennmaradó CSS pedig az oldal betöltésekor tölthető be.
#5. A nem használt CSS és JS eltávolítása
A felesleges CSS- és JavaScript-fájlok eltávolítása egy másik módszer a megjelenítést blokkoló erőforrások eltávolítására. Ezek a fájlok nehezebbé tehetik az oldalt, és megnövelhetik a betöltési időt.
A fel nem használt CSS- és JS-fájlok eltávolításával csökkentheti a megjelenítést blokkoló erőforrások számát. Könnyedén használhat olyan eszközöket, mint a PurifyCSS vagy az UnusedCSS, hogy eltávolítson minden nem használt CSS-fájlt webhelyéről.
#6. Egyéni betűtípusok helyi betöltése
Az egyéni betűtípusok olyan erőforrásokat is tartalmazhatnak, amelyek korlátozzák a megjelenítést. Ahelyett, hogy külső forrásoktól, például a Google Fontstól függne, helyileg kell betöltenie saját egyéni betűtípusait, hogy elkerülje ezekre az erőforrásokra szükségét.
Garantálja, hogy egyéni betűtípusai gyorsan és hatékonyan töltődnek be anélkül, hogy lelassítanák webhelye teljesítményét a helyi betöltéssel. Ez gyorsabb, reszponzívabb webhelyet eredményezhet, és javíthatja a felhasználói élményt.
#7. A JS és CSS kicsinyítése
Végül a CSS- és JavaScript-fájlok minimalizálása elősegítheti webhelye jobb működését. A kicsinyítés eltávolítja a kódból a felesleges karaktereket, például a szóközöket és a megjegyzéseket. Így a fájlok mérete csökken, ami felgyorsítja a betöltést.
A fájlok kicsinyítéséhez olyan eszközöket használhat, mint a MinifyJS vagy a CSSNano. Őrizzen meg egy másolatot az eredeti fájljairól arra az esetre, ha valaha is módosítania kellene őket.
Távolítsa el a megjelenítést blokkoló erőforrásokat a beépülő modullal
Ebben a részben megmutatjuk, hogyan szüntetheti meg a renderelést blokkoló erőforrásokat a WordPress beépülő moduljaival. Ezek a bővítmények híresek a WordPressben, és gyorsan eltávolíthatják a megjelenítést blokkoló erőforrásokat. A legjobb az egészben az, hogy akár speciális szakértelem nélkül is javíthatja webhelye teljesítményét.
#1. W3 Teljes gyorsítótár
A W3 Total Cache (W3TC) javítja a WordPress webhelyek teljes felhasználói élményét. Megszünteti a renderelést blokkoló erőforrásokat, és javítja a SEO-t, az alapvető webes vitalokat és még sok mást. A beépülő modul olyan funkciókat használ, mint a tartalomszolgáltató hálózat integrációja a legjobb gyakorlatok megvalósításához.
A megjelenítést blokkoló erőforrások kiküszöböléséhez telepítse és aktiválja a W3 Total Cache bővítményt, és kövesse az alábbi lépéseket:
- Lépjen a WordPress irányítópultjának Teljesítmény szakaszába, és kattintson az Általános beállítások elemre.
- A Lekicsinyítés fejléc alatt kapcsolja be a Kicsinyítést, és válassza ki a Kézi kicsinyítési módot.
- Most kattintson az Összes beállítás mentése gombra.
- Ezután gyűjtse össze az összes megjelenítést blokkoló Javascript- és CSS-fájlt a Google PageSpeed Insights segítségével.
- Ezt követően térjen vissza a Teljesítmény > Kicsinyítéshez.
- Most a js részben először kattintson az Engedélyezés lehetőségre a JS Minify beállításainál. Ezután a Műveletek a területeken részben válassza a Nem blokkolás lehetőséget a „halasztás” típussal a Before címke számára.
- Most lépjen a JS fájlkezelésbe, válassza ki az aktivált témát, és kattintson a Szkript hozzáadása gombra. Most gyűjtse össze a problémákkal küzdő Javascript URL-eket a Google PageSpeed Insights által. Illessze be az URL-címeket a kijelölt mezőbe a képen látható módon.
- Most görgessen le egy kicsit a CSS részhez. Válassza ki a témát a CSS-fájlkezelés szakasz legördülő menüjéből, majd kattintson a Stíluslap hozzáadása lehetőségre. Most egyszerűen kövesse az előző lépést, és másolja be a PageSpeed Insightból összegyűjtött, problémákkal küzdő URL-eket.
- Mivel az összes beállítás konfigurálva van, kattintson a Beállítások mentése és törlése gombra a végrehajtáshoz.
#2. JCH Optimize
A JCH Optimize javítja a WordPress webhely teljesítményét a Google PageSpeed Insight segítségével. A beépülő modul javítja a First Contentful paint (FCP), a Largest Contentful paint (LCP), a Speed Index (SI), a kumulatív elrendezés eltolás (CLS), az interaktív idő (TTI) és még sok mást.
Így az általános felhasználói élmény és a webhely teljesítménye jelentősen javul.
A JCH Optimize telepítése és aktiválása után kövesse az alábbi folyamatokat a megjelenítést blokkoló erőforrások kiküszöböléséhez:
- Lépjen a Beállítások>JCH optimalizálása menüpontra, görgessen egy kicsit lefelé, és lépjen az Alapfunkciók beállításaihoz.
- A CSS-megjelenítés blokkolásának megszüntetéséhez engedélyezze a CSS-kézbesítés optimalizálása funkciót. Ez a funkció automatikusan meghatározza azt az alapvető CSS-t, amely szükséges a tartalom hajtás feletti megjelenítéséhez az egyes weboldalakon. Ezenkívül beilleszti az egyes oldalak HTML-tartalmának szakaszába.
- Az előbetöltési hivatkozás ezután az összefűzött CSS-fájlok aszinkron betöltésére szolgál.
- A Javascript megjelenítést blokkoló erőforrások eltávolításához fel kell vennie az async vagy defer attribútumokat a