Az Elementor frissítése az alapvető webes vitálok címét tartalmazza

Az Elementor népszerű WordPress oldalépítő plugin bejelentette a gyorsabb oldalbetöltések biztosítására összpontosító frissítést. A frissítés javítja a JavaScript és a CSS fájlok kézbesítésének hatékonyságát. Ezek az Elementor 3.2-es verziójának változásai ígéretet tesznek javítja a Core Web Vitals pontszámokat.

Az Elementor közleménye szerint:

„A vállalat optimalizálta fejlesztési ciklusát, és létrehozott egy öt sávos tervet, amelyet olyan teljesítményterületekre rögzítettek, mint például az optimalizált eszközbetöltés, a JavaScript / CSS könyvtárak, az optimalizált belső JavaScript és CSS, az optimalizált háttér- és megjelenítési folyamatok, valamint a vékonyabb kódkimenet.

Az Elementor terve biztosítja, hogy a teljesítmény minden szempontja jelentős javulást érjen elöl és hátul. „

Az Elementor bevezette a megjelenítők számára azt is, hogy jelezzék, hogyan lehet hatékonyabban betölteni a Google Betűtípusokat:

„Egy új Google betűtípus-betöltési funkció személyre szabja a felhasználók betöltési élményét, lehetővé téve számukra, hogy módosítsák, hogyan töltse be az Elementor a Google Betűtípusokat. Az Elementor irányítópultjának beállításai automatikus, csere, blokkolás, opcionális és tartalék lehetőséget kínálnak. „

Core Web Vitals

A Core Web Vitals az internet mérésére szolgáló mérőszámok oldalélmény a tényleges felhasználók számára a mobil eszközökön. A méréseket azok a felhasználók gyűjtötték össze a Chrome-ban, akik úgy döntöttek, hogy megadják azokat az információkat, amelyeket a Chrome felhasználói élmény (CrUX) jelentésként gyűjtenek össze.

Ezeket az adatokat használják fel a weboldalak Core Web Vitals pontszámainak összeállításához, amelyek viszont rangsoroló jellé válnak 2021 júniusában.

Webhely gyors kiszolgálón történő tárolása nem javítja az alapvető web vitals pontszámokat, mert az alapvető web vitals pontszámokat negatívan befolyásoló problémák a weboldal kódolásához kapcsolódnak.

Az optimalizálatlan kód gyorsabb kézbesítése egy gyors internetes gazdagéptől nem oldja meg azt a szűk keresztmetszetet, amelyet az az optimalizálatlan kód okoz, amelyet le kell töltenie és vissza kell adnia egy mobil eszközre.

Ezért fontos, hogy a webhelysablonok készítői és az oldalkészítők hatékonyabban használják fel a kódot, amelyre a felhasználók támaszkodnak.

Amit az Elementor bejelentett, az az új erőfeszítésük, hogy hatékonyabban juttassák el a weboldal kódját, hogy a kiadók jobb felhasználói élményt nyújthassanak a webhely látogatóinak, és a kiadók jobb helyezést érjenek el.

Miért lehet problémás a JavaScript és a CSS?

A JavaScript és a Cascading Style Sheets (CSS) olyan fájlok, amelyek funkcionalitást és vizuális stílust biztosítanak a weboldalak számára. A JavaScript-fájl működőképessé teheti a kapcsolatfelvételi űrlapot, és a lépcsőzetes stíluslap megadja a böngészőnek, hogy milyen színeket és betűtípusokat használjon (a vizuális stílushoz kapcsolódó egyéb adatok mellett).

Amikor egy személy meglátogat egy weboldalt, a böngésző letölti ezeket a fájlokat a weboldal létrehozása (renderelése) céljából. De a weboldal megjelenítése minden alkalommal leáll, amikor egy JavaScript vagy CSS fájllal találkozik. Ezért hívják őket Render blokkoló fájloknak.

Míg vannak kódolási taktikák a fájlok letöltésének késleltetésére vagy párhuzamos letöltésére (más fájlokkal egyidejűleg), ezeket a fájlokat mégis aktiválni kell (úgymond) a weboldal megjelenítésének befejezéséhez.

Az ideális megközelítés az, hogy minimalizálja a letöltendő fájlok számát. A legjobb megoldás az, ha letölti az adott weboldal létrehozásához szükséges abszolút minimális mennyiségű JavaScript-et és CSS-t.

Például, ha egy weboldal nem tartalmaz kapcsolatfelvételi űrlapot, akkor nincs szükség a kapcsolattartási űrlap létrehozásához szükséges fájlok letöltésére.

A JavaScript és a CSS letöltésének ezt a hatékonyabb megközelítését feltételes betöltésnek nevezzük. Ez azt jelenti, hogy töltse le őket, amikor szükség van rájuk, és ne töltse le, ha nincs rá szükség.

Ez pedig része annak, amit az Elementor bejelentett.

Az Elementor most hatékonyabb

Amit az Elementor megváltoztatott, az az volt, hogy sok JavaScript fájlt csak akkor töltött le, amikor szükség volt rájuk. Ezt nevezzük fájlok feltételes betöltésének. Az Elementor megerősítette nekem, hogy a közeljövőben is tervezik a CSS feltételes betöltését.

Az Elementor szerint:

„Az Átvilágítódoboz, a Képernyős, a Párbeszédablak és a Megosztás linkek könyvtárai feltételesen betöltődnek…”

Az Elementor azt is bejelentette:

„Az e-icons CSS fájlt két külön könyvtárra – frontendre és backendre – osztották fel, és akár 50 KB-ot is megtakaríthatnak az adott oldal betöltésekor.”

További javulás, hogy a CSS, amely csak a szerkesztő webhely-látogatókat érinti, nem töltődik be automatikusan minden felhasználó számára. Ez azt jelenti, hogy ha a webhely látogatója nem szerkesztő, böngészőjük kevesebb fájlt tölt le, hogy a weboldal renderelődjön, 17 kilobájt megtakarítással.

Az Elementor csapata ezt megosztotta velem:

„Mind a K + F csapat, mind a SEO csapatunk az elmúlt 6 hónapban dolgozott ezen a projekten, ügyelve arra, hogy az Elementor teljes mértékben kompatibilis legyen a közelgő Web Vitals Google algoritmus-változással. Összpontosítottunk a DOM elemek számának csökkentésére, a folyamatok optimalizálására, az eszközök dinamikus betöltésére és még sok minden másra. „

Az Elementor videókat tesz közzé az alapvető webes vitálok fejlesztése érdekében

Pillanatkép az Elementor Core Web Vitals optimalizáló videóról

A kódváltozások mellett az Elementor tett egy további lépést a YouTube-tanfolyamok biztosítása érdekében, hogy jobban megértsék a gyorsabb felhasználói élményt nyújtó webhelyek építésének legjobb gyakorlatait.

„Az embereknek a frissítés végigvezetéséhez kiváló oktatási anyagokat készítettünk, köztük egy új tanfolyamot a webhely teljesítményének javításáról. Ez egy pillantást vet az egész folyamatra, mivel a teljesítmény tényezők kombinációján alapul, nem csak az Ön által választott webhelyépítési platformon. „

Nézze meg a Elementor optimalizálási tanfolyamok a YouTube-on itt.

Az Elementor kezdeményezi

Bíztató, hogy egyre több vállalat lép fel e fontos frissítések végrehajtása érdekében. Az Elementor bejelentése izgalmas fejlesztés a plugin felhasználói számára, és nyomást gyakorol a WordPress ökoszisztéma többi részére, a beépülő moduloktól a témakészítőkig, hogy lépést tarthassanak az Elementorral.

Idézet

Bemutatjuk a Szövegút és maszk réteg funkcióit!