Hogyan lehet javítani az alapvető webes vitális értékeket – egy végső…

WordPress-en futtatsz webhelyet? Szeretné javítani a felhasználói élményt az oldalélmény javításával? Ha igen, akkor ez a cikk neked szól.

2021 augusztusának elején a Google bejelentette ezt oldal tapasztalat a keresési rangsorolás egyik tényezőjévé válna. Ennek érdekében a Google kezdeményezte Core Web Vitals mérőszámok a webhelytulajdonosok számára, amelyek segítségével javíthatják webhelyeik felhasználói élményét és minőségét.

Tehát ha tudni szeretné, hogyan javíthatja a látogatói élményt, és javíthatja az esélyeit, hogy előrébb kerüljön a keresőmotorokban, akkor jó helyen jár. Ebből az útmutatóból megtudhatja, hogyan javíthatja és javíthatja a Google Core Web Vitals szolgáltatást WordPress webhelyén.

Mielőtt azonban mélyebbre merülnénk, nézzük meg, mi is az a Google Core Web Vitals.

Mik azok a Google Core Web Vitals?

A Google Core Web Vitals a Google kezdeményezése, amely a felhasználói élmény mérésére és javítására szolgáló webhelyteljesítmény-mutatókon alapul. Ezek az internetes létfontosságú pontszámok a webhely általános teljesítményére és arra összpontosítanak, hogy webhelye hogyan nyújt magas színvonalú felhasználói élményt, ahelyett, hogy csak a webhely teljes betöltési idejére összpontosítana.

Még ha webhelye gyorsan betöltődik is, előfordulhat, hogy nem lesz teljesen működőképes vagy nem látható a felhasználók számára, ami rossz felhasználói élményt eredményez. A felhasználókat az érdekli, hogy milyen gyorsan tudnak interakcióba lépni bármely weboldallal, és ez az, amit a Core Web Vitals mérőszámok mérnek.

Ehhez a Google három alapvető webes vitát említ:

  • Legnagyobb tartalmat tartalmazó festék (LCP).
  • Első beviteli késleltetés (FID)
  • Összesített elrendezéseltolás (CLS)

Ezek a mutatók a legfontosabbak webhelye számára a jobb felhasználói élmény biztosítása érdekében.

Lehet, hogy ezek a nevek technikainak vagy zavarónak tűnnek számodra, de ne aggódj! Meglehetősen könnyen érthetőek, és minden mérőszámot egy könnyen érthető módszerrel fogok elmagyarázni. Szeretnék jobban megérteni, mit jelentenek az egyes Core Web Vital-ok és hatásaik, hogy ezeket a Core Web Vital-okat WordPress-webhelyekhez használhassa.

Legnagyobb tartalmat tartalmazó festék (LCP)

A Legnagyobb tartalmat tartalmazó festék (LCP) azt méri, hogy a fő tartalom, általában a webhely főoldala vagy kiemelt képe milyen gyorsan látható a felhasználók számára. A fő tartalom vagy mondjuk az LCP elem minden webhelyen más. Igen, még a mobil és asztali verziókhoz is. Az LCP elemek lehetnek képek, tartalom vagy leírás.

Meglátogatott egy webhelyet, és észrevette, hogy az első és a fő kép (általában a hős szakasz) nem töltődött be. Hogyan éreznéd magad látogatóként? Természetesen elhagyja ezt a webhelyet, és egy másik webhelyre lép. Így kapcsolódik a Legnagyobb Contentful Paint mérőszám a felhasználói élményhez, és a WordPress webhelyek Core Web Vitals alapvető mutatója.

Olvasni:  Alapvető webes vitals: mik ezek? Mennyire fontosak a SEO szempontjából?

A fenti képen látható, hogy a Google küszöbértékei az LCP-időhöz:

  • – 2,5 másodpercnél rövidebb vagy egyenlő
  • Fejlesztésre szorul – 4,0 másodpercnél kisebb vagy egyenlő
  • Szegény – Több mint 4,0 másodperc.

Első beviteli késleltetés (FID)

Első beviteli késleltetés (FID) méri a felhasználói interakció és az eseményfeldolgozás közötti időt. Egyszerűen a FID azt az időpontot jelenti, amikor a felhasználó rákattint egy hivatkozásra, és ekkor a böngészője elkezdi feldolgozni az eseményt. Az interakció lehet a linkre való kattintás, egy cselekvésre ösztönző (CTA) gomb vagy egy űrlap beküldése.

Amikor egy felhasználó kitölt egy űrlapot, és rákattint a beküldés gombra, mennyi időbe telik, amíg webhelye feldolgozza az eseményt és sikeresen elküldi az űrlapot? Ezt méri az első beviteli késleltetés (FID); milyen gyorsan dolgozza fel webhelye az interakciókat.

A JavaScript erősen befolyásolja az első beviteli késleltetést. Ezért bonyolult a Core Web Vital FID-mutatójának optimalizálása WordPress-webhelyekre.

A Google szerint az első beviteli késleltetés (FID) a következő kategóriákba sorolható:

  • – 100 ms vagy annál kisebb
  • Fejlesztésre szorul – 300 ms vagy annál kisebb
  • Szegény – Több mint 300 ms.

Kumulatív elrendezéseltolás (CLS)

Tapasztalta már, hogy egy webhely megváltoztatta az elrendezést vagy a betűtípusokat olvasás közben? És amikor rákattint valahová a webhelyen, akkor megváltozik a hely? Ezek a változtatások idegesítik a felhasználót, és szörnyű felhasználói élményt nyújtanak.

A kumulatív elrendezéseltolás (CLS) a Core Web Vitals egyik fontos mérőszáma a WordPress-webhelyek számára, amely a felhasználók által a különböző webhelyeken általában tapasztalt elrendezési eltolódások gyakoriságának méréséért felelős.

A hirdetések gyakori bűnösök a CLS-probléma hátterében, mivel a hirdetések többféle méretben, meghatározatlan méretekkel jelennek meg. Gyakori példa egy híroldal, ahol a cikk tartalma megváltozik, és az oldal ismételten betölti a hirdetéseket, és olvasás közben elveszíti a helyét.

Íme a Google pontszámai a CLS-hez:

  • – Kevesebb, mint 0,1 másodperc vagy egyenlő
  • Fejlesztésre szorul – 0,25 másodperc vagy annál kisebb
  • Szegény – Több mint 0,25 másodperc.

A Google a népszerű eszközeivel érkezik, amelyeket a WordPress webhelyek alapvető webes vitaljainak mérésére használnak. Ezek az eszközök segítenek gyorsan diagnosztizálni és kijavítani a felhasználói élményekkel kapcsolatos problémákat. Ez a két eszköz az alapvető webes vital értékek mérésére: Laboratóriumi eszközök és Terepszerszámok.

Amint a fenti képen látható, a Google eszközei mindhárom mérőszámot – az LCP-t, a FID-t és a CLS-t – mérik, kivéve a Chrome DevTools és a Lighthouse.

A Chrome DevTools és a Lighthouse a Teljes blokkolási idő (TBT) az első beviteli késleltetés (FID) alternatívájaként. A teljes blokkolási idő (TBT) egy Lighthouse Performance mérőszám, amelyet 2020-ban vezettek be, és csak laboratóriumi adatokat szolgáltat, a FID pedig csak tényleges felhasználói adatokkal mérhető.

Íme az öt eszköz az alapvető webes vital értékek mérésére a WordPress webhelyen:

  1. Világítótorony
  2. PageSpeed ​​Insights
  3. Search Console
  4. Web Vitals bővítmény
  5. Web.Dev

A Google Core Web Vitals pontszámának tesztelése

PageSpeed ​​Insights a Core Web Vitals tesztelésének legegyszerűbb módja a WordPress webhelyeken. Csak a webhely URL-címére van szüksége, ezért csak írja be a URL és kattintson a Elemezze gomb.

Olvasni:  Hogyan lehet növelni a WooCommerce webhely sebességét és Kerülje a lassú lekérdezéseket

Miután a PageSpeed ​​Insights teszteszköz alaposan elemzi az URL-t, az alapvető webes létfontosságú adatok megjelennek a „Mezőadatok” részben.

Felül a mezőadatok azt mutatják, hogy ez az oldal megfelelt-e a Core Web Vital felmérésen, vagy sem. A pontszámokkal együtt megtekintheti mindhárom alapvető Web Vital-t. Javítania kell az alapvető vitális értékeket, szem előtt tartva a Google által ajánlott pontszámokat, amelyek a következők:

  • Legnagyobb tartalmat tartalmazó festék (LCP) – 2,5 másodperc
  • Első beviteli késleltetés (FID) – Kevesebb, mint 100 ezredmásodperc
  • Kumulatív elrendezéseltolás (CLS) – Kevesebb, mint 0,1

Az LCP-elem felfedezése a Pagespeed Insights segítségével

Mint említettem, a Largest Contentful Paint (LCP) azt méri, hogy a webhely fő tartalma milyen gyorsan látható a felhasználók számára. Az LCP felfedezéséhez görgessen le a PageSpeed ​​Insights eszköz diagnosztikai szakaszához, és bontsa ki a Legnagyobb tartalmat tartalmazó festékelem lapot.

Itt található a Google által készített legnagyobb tartalmas HTML-elem.

Az asztalon található HTML-elemnek nem kell lennie a mobilon. A mobil verzió HTML-eleme eltérhet az asztali verziótól, ezért webhelye mindkét verziójához optimalizálnia kell az LCP-időt.

FID és TBT felfedezése a Pagespeed Insights segítségével

Emlékezik? Az első beviteli késleltetés (FID) méri a felhasználói interakció és az eseményfeldolgozás közötti időt.

A FID-időt csak a Mezőadatok részben láthatja, mivel a FID tényleges felhasználói adatokon alapul. A PageSpeed ​​Insights teszt egy laboratóriumi teszt, ezért nem tudja megmutatni a FID pontszámot. A Laboratóriumi adatok részben látni fogja a Teljes blokkolási idő (TBT)alternatívája Első bemeneti késleltetés (FID).

A teljes blokkolási idő egyenesen arányos a FID-vel. Minél jobban javítja a TBT-t, annál jobb a FID-idő.

CLS-elemek felfedezése a Pagespeed Insights segítségével

Gyors összefoglaló: A kumulatív elrendezési eltolás (CLS) a webhely tartalmában a webhelykeresés során bekövetkező hirtelen változásokhoz kapcsolódik, és az új tartalom betöltése a webhely elrendezése körül mozog.

Lépjen a Diagnosztika területen található Nagy elrendezés eltolás elkerülése szakaszba, és keresse meg azt az elemet, amely eltolódást okoz és befolyásolja a webhely pontszámát.

Hogyan tekintheti meg a Google Core Web Vitals teljes webhelyét?

Ha webhelye gyökéroldalát ellenőrzi, akkor megtekintheti a WordPress webhely összes Core Web Vitals oldalát, ha kattintson a “Show Eredet összegzés” jelölőnégyzetet.

Ha még részletesebb jelentéseket szeretne kapni a Core Web Vitals for WordPress webhelyekről, használhatja a világítótorony sebességtesztjét a Web.dev Mérőeszköz, csak írja be az URL-címét, és kattintson az „Ellenőrzés futtatása” gombra. Részletes ellenőrzési jelentést kap a WordPress webhelyének Core Web Vitals-járól.

A világítótorony sebességtesztjének másik módja a Google Chrome böngészőben található beépített teszt használata. Futtassa webhelyét a Chrome-ban, nyissa meg a vizsgálati elemet (kattintson a jobb gombbal a képernyőn, majd válassza az ellenőrzés lehetőséget), válassza ki a Lighthouse opciót a lapokhoz. Ezt követően kattintson a ‘Jelentést készít’ gomb.

Hogyan javíthatja alapvető webes vitaljait a WordPress számára

Néhány alapvető teljesítményoptimalizálási tipp elfogadásával könnyedén javíthatja a WordPress alapvető webes vitaljait. Tehát nézzük meg egyenként a tippeket.

Olvasni:  Hogyan kezdjük el az affiliate marketinget: The Ultimate Guide (2024)

Optimalizálja WordPress tárhelyét

A WordPress tárhely a webhely teljesítményének legfontosabb része. Számos technikai és nem technikai módszert alkalmazhat webhelye teljesítményének javítására, de ha a tárhely nem megfelelő, akkor előfordulhat, hogy az optimalizálási technikák nem érik meg.

Minden erőfeszítést vállalkozása fejlesztésére kell összpontosítania, nem pedig a szerver műszaki jellemzőire. Érdemes befektetni a jó WordPress tárhelybe, mert emberi erőforrást és időt takarít meg, és jobb teljesítményt kínál. Ezenkívül a WordPress hosting számos funkcióval rendelkezik, amelyek közül a legfontosabbak a következők:

  • Gyorsabb sebesség
  • Szerver oldali gyorsítótár
  • Jobb biztonság
  • Színpadi helyszínek

A DreamHost egy előre telepített Breeze gyorsítótár-bővítményt kínál a WordPress telepítésével és a Varnish gyorsítótárral a DreamHost platformon. Mindkettő segítségével jobb Core Web Vitals pontszámokat érhet el. Tekintse meg a DreamHost WordPress tárhelyről szóló cikkét, és nézze meg, hogyan érheti el a 79 ms betöltési időt.

Tanulja meg az alapvető webes vitalokat a szakértőktől

Nézze meg, ahogy szakértők boncolgatják a Core Web Vitals-t, és optimalizálják weboldalait a Google rangsorolása érdekében!

A legnagyobb tartalommal rendelkező festék (LCP) pontszámának javítása

A felhasználó célja, hogy a hasznos tartalom a lehető leggyorsabban megjelenjen a képernyőn. Minél gyorsabb a tartalom betöltése, annál magasabb lesz az LCP pontszám. Ahogy már említettem, a legnagyobb tartalomelem a PageSpeed ​​Insights eszköz Diagnosztika részében található. Látni fogja az LCP pontszámhoz figyelembe vett elemeket.

Ha a legnagyobb elem a szöveg, akkor több bekezdésre és címre bontva javíthatja a tartalmat.

Ha a médiafájlok jelentik a legnagyobb elemet az LCP-pontszámban, megpróbálhatja a nagyobb képeket kisebbekké alakítani. Kisebb fájlméretű képek használata javasolt, mert a nagyobb méretű képek betöltése hosszabb időt vesz igénybe, és növeli az oldal méretét.

Íme azok a beépülő modulok, amelyek segítségével optimalizálhatja képeit, hogy jobb pontszámot érjen el a WordPress webhely Core Web Vitals-jában:

  1. EWWW Képoptimalizáló
  2. ShortPixel képoptimalizáló
  3. Imagify – Képek optimalizálása és WebP konvertálása
  4. WP Compress – Képoptimalizáló [All-In-One]
  5. Smush – Képek lusta betöltése, képek optimalizálása és tömörítése

Tekintse meg útmutatónkat a WordPress képek WP Compress segítségével történő optimalizálásához.

Az első beviteli késleltetés (FID) pontszámának javítása

A legfontosabb tipp a jobb FID-pontszámok eléréséhez a felügyelt WordPress tárhely használata, mivel a legtöbb felügyelt WordPress tárhely-platform rendelkezik beépített gyorsítótár-beállításokkal, amelyek felgyorsítják az eseményfolyamatot.

A FID pontszám javításának másik egyszerű módja a Deferred JavaScript technika alkalmazása WordPress webhelyén. Gyorsabbá teszi a weboldalak megjelenítését anélkül, hogy megvárná a JavaScript betöltését. Használhat olyan gyorsítótár-bővítményeket, amelyek biztosítják a Halasztott JavaScript opciót.

Ebben az útmutatóban a Breeze Cache bővítmény (ingyenes bővítmény minden WordPress felhasználó számára). Miután telepítette és aktiválta a bővítményt, lépjen a WordPress Beállítások > Breeze; a Speciális beállítások lapon látni fogja „JS-fájlok áthelyezése a láblécbe” és “JS fájlok késleltetett betöltéssel” beállításokat, írja be a JS-fájl URL-címét, és kattintson a Módosítások mentése gombra a változtatások tárolásához.

Webhelyének nem kell megvárnia a JavaScript betöltését. Ez javítja az első beviteli késleltetés (FID) pontszámát, és hasznos lehet a WordPress webhely alapvető webes vitaljainak javításában.

A kumulatív elrendezéseltolás (CLS) pontszámának javítása

A kumulatív elrendezési eltolás (CLS) a tartalom hirtelen változásaihoz és a képernyő más elemeinek mozgatásához kapcsolódik.

Olvasni:  Ügynökség reflektorfényben: Hogyan veszítette el a Media Group értékét...

Először is ellenőriznie kell a CLS-t befolyásoló elemeket. Ehhez a PageSpeed ​​Insights eszközben található egy Diagnosztika szakasz, ahol megtalálhatja azokat az elemeket, amelyeket javítani kell a WordPress Core Web Vitals-jának javításához.

A rossz CLS leggyakoribb okai a megfelelő méret nélküli képek, a beágyazott videók és a hirdetések lehetnek. Tehát a megoldás a szélesség és magasság méret attribútumok használata a képeken és a videóelemeken.

A kép méretattribútumainak azonosításának módja az, hogy a böngésző képernyőjén jobb gombbal megtekintheti a képet. Kattintson a különböző oldalelemekre a forráskódjuk megtekintéséhez, és ellenőrizze az összes képet, hogy a képek megfelelő méretattribútumokkal rendelkeznek-e vagy sem.

Távolítsa el a renderelést blokkoló elemeket

A megjelenítést blokkoló elemek statikus fájlok, például HTML, CSS, JavaScript fájlok, amelyek fontosak a weboldal megjelenítésének folyamatában. Ezek a fájlok szkriptekkel rendelkeznek, és ezek megakadályozhatják, hogy a látogatók lássák a tartalmat.

A Page Speed ​​Insights eszköz azonosítja a megjelenítést blokkoló elemeket. Ezek az elemek általában a WordPress webhelybővítmény JavaScript- és CSS-fájljaiból, valamint harmadik féltől származó eszközökből, például a Google Analyticsből jönnek létre. Ezek az elemek befolyásolják a WordPress-webhelyek általános Core Web Vitals értékét, és befolyásolják a felhasználói élményt is.

Az alábbiak a bevált módszerek a megjelenítést blokkoló szkriptek számának csökkentésére a webhelyen:

  • Csökkentse a JavaScriptet és a CSS-t – Távolítsa el az összes szóközt és a felesleges megjegyzéseket.
  • Kapcsolja össze a JavaScriptet és a CSS-t – Kombinálja a különböző JavaScript fájlokat egy fő fájlba, és tegye ugyanezt a CSS fájlokkal.
  • Halaszd el a JavaScript betöltését – Kényszerítse a JavaScript fájlokat, hogy várjanak, amíg az oldalon lévő összes többi készen áll.

Itt vannak azok a beépülő modulok, amelyek megszüntethetik a renderelést blokkoló elemeket:

  1. Breeze By DreamHost
  2. WP rakéta
  3. Automatizálás

A megjelenítést blokkoló elemek kiküszöbölésére egy Breeze beépülő modult használok. Először telepítse és aktiválja a Breeze Cache bővítményt, majd lépjen a WordPress beállításokhoz, kattintson a Breeze elemre. Az Alapbeállítások lapon megjelenik egy kicsinyítési lehetőség; engedélyezze a HTML, CSS és JavaScript kicsinyítését, és mentse a beállításokat. A változtatások elvégzése után ismét a tesztelési fázison megyek keresztül, hogy ellenőrizzem a Core Web Vitals for WordPress javulását.

A JavaScript betöltésének elhalasztásához tekintse meg a cikk fenti „Az első beviteli késleltetés (FID) pontszámának javítása” címsorát.

Használja a CDN-t a WordPress alapvető webes vitaljainak javításához

A CDN lehetővé teszi a felhasználó számára, hogy betöltse a webhely fájljait, például képeket és szkripteket a legközelebbi szerverekről. Segít csökkenteni a webhely terhelését is. A CDN egy szerverhálózat, amely szerte a világon található. Számos harmadik fél CDN-szolgáltatása érhető el a webhelyekhez.

Nézzünk néhány harmadik fél CDN-szolgáltatót:

  1. Cloudflare CDN
  2. KeyCDN
  3. Amazon CloudFront
  4. CDN77

Ha Ön a DreamHost felhasználó, kihasználhatja a DreamHost és a Cloudflare partnerség előnyeit, és aktiválhatja a Cloudflare Enterprise CDN-bővítményt, amely vállalati szintű CDN-szolgáltatásokat kínál.

Csomagolás!

Ami a weboldalak sebességét illeti, az tény, hogy senki sem szereti a lassan betöltődő weboldalakat, még a Google keresője sem. Ennek a cikknek a segítségével megértheti a WordPress alapvető webes létfontosságú elemeit, és a kapott tippek követésével javíthatja webhelye teljesítményét. Ha további tippeket szeretne megtudni a webhelyoptimalizálással kapcsolatban, tekintse meg a DreamHost cikkét, amely 23 tippet tartalmaz a WordPress-webhelyek felgyorsításához a jobb teljesítmény érdekében.

Új publikációk:

Ajánlott