More

    Hogyan lehet optimalizálni egy webhely CSS-jét az alapvető webes életjelek javítása érdekében

    Elemezzük a webhely sebességének optimalizálásának módszereit, valamint annak betöltését a Core Web Vitals paraméterei szerint. Mindent a stílusokról.

    2021-ben a Google webes életjeleket alakított ki-a webhelyminőségi jelek ötlete, amely tükrözi, hogy a felhasználók mennyire kényelmesek a vele való interakcióhoz. Alapvető Webes Életjelek ez a kényelem számszerűsítésére szolgáló mutatók halmaza.

    Röviden A legfontosabb dolog a Core Web Vital

    Az Alapvető webes életjelek mutatók magában foglalja az oldalelemek betöltési idejének mérését, a tartalom reagálását a felhasználói műveletekre, valamint a tartalom stabilitását a betöltés során.

    • LCP (legnagyobb Contentful Paint) – a legnagyobb látható objektum betöltése a felhasználó számára látható képernyőterületen. A jó mutató az oldal betöltésének kezdetétől számított 2,5 másodperc.

    • CLS (kumulatív elrendezés eltolás) – vizuális stabilitás, az Oldalelrendezés eltolása az elemek betöltése során. Az elfogadható CLS mutató 0,1 vagy annál kevesebb.

    • FID (első bemeneti késleltetés) — interaktivitás, az oldal reakcióideje az első felhasználói művelethez. A jó FID szint akár 100 milliszekundum is lehet.

    Elemeztük az anyag alapvető webes Életfunkcióival kapcsolatos további részleteket.

    A CSS hatással lehet az alapvető webes Életjelekre is, különösen az LCP indikátorok tekintetében-a legnagyobb látható elem megjelenítésére, a CLS pedig az elrendezés eltolására.

    Hogyan lehet optimalizálni a CSS-t az oldal gyors betöltéséhez

    A kényelem érdekében a módszerek olyan elemekre vannak felosztva, amelyekkel együtt kell működnie: elrendezés, képek, betűtípusok, animáció — minden a stílusokkal való együttműködésre vonatkozik. Katie Hempenius és Una Kravets” CSS for Web Vitals ” című cikkét vették alapul, lefordították és kiegészítették.

    Kritikus és nem kritikus CSS

    A CSS feldolgozásakor alapértelmezés szerint blokkolja az oldal megjelenítését. Amíg a böngésző betölti és elemzi a stíluslapot, nem tölt be más erőforrásokat. Ha a CSS fájlok nagyok vagy problémák vannak a hálózattal, az LCP jelző romolhat, mert a legnagyobb látható objektum betöltése késik.

    Hogyan lehet optimalizálni a CSS-t

    A teljesítmény javítható, ha a CSS-t az első képernyő betöltéséhez szükséges kritikus értékekre osztja, a többi pedig elhalasztható.

    A felső sor az oldal betöltését mutatja CSS blokkoló megjelenítéssel. Alsó betöltése ugyanazon az oldalon a beépített kritikus CSS:

    Как оптимизировать CSS сайта для улучшения Core Web Vitals

    Az oldal betöltésének összehasonlítása

    Hogyan kell dolgozni a CSS oldalakkal

    1. A kritikus CSS-t a fejbe kell helyezniCSS, amely az első képernyő felső részének betöltéséhez szükséges, a lehető leggyorsabban meg kell jelenítenie a felhasználóknak. Beágyazza őket a fejbe, hogy ne legyen szüksége további kérésre ezeknek a stílusoknak a megszerzéséhez.

      Как оптимизировать CSS сайта для улучшения Core Web Vitals

      Beépített kritikus CSS

    2. Töltse be a nem kritikus CSS-t aszinkron módonA CSS többi része, amely nem szükséges az oldal kezdeti megjelenítéséhez, aszinkron módon tölthető be a loadCSS használatával, vagy elhalasztható a láblécre.

    3. Fel nem használt CSSTávolítsa el a felesleges CSS-t, vagy helyezze át egy másik stíluslapra, ha még mindig szükség van a webhely más oldalaira. Jobb, ha nem kézzel csinálod, törölhetsz valamit, amire szükséged van.

    Az LCP optimalizálásról szóló cikkben elemeztük, hogyan lehet automatizálni ezt a módszert a stílusok optimalizálására. Lásd a ” JavaScript és CSS renderelés blokkolása”

    Ennek a módszernek hátrányai is vannak: a böngésző nem gyorsítótárazza a fejbe épített CSS-t, így minden alkalommal újra betöltődik. Ellenőrizze, talán nincs probléma a megjelenítéssel, így nem kell elválasztania a CSS-t.

    A CSS-t is kicsinyítheti, vagyis csökkentheti, ezáltal csökkentve a fájl méretét. A minification után nem lesznek extra szóközök és felesleges karakterek a fájlban. Ehhez ingyenes eszközöket gyűjtöttünk a letöltések felgyorsításáról szóló cikkben.

    Képek

    A kép optimalizálását általában nem vesszük figyelembe,csak a CSS-hez és a képekhez kapcsolódó problémákat.

    Képek és LCP

    Az LCP a látható képernyő legnagyobb elemének betöltési mutatója. Leggyakrabban ez egy kép, bár a legnagyobb elem lehet mind szöveges, mind videoklip.

    Ezenkívül az oldal legnagyobb eleme megváltozhat, amikor új objektumok betöltődnek és megjelennek. Vagy a megtekintő eszköztől függően, mint ebben a példában. Itt a fő objektumok a cikk borítója, a cookie-k értesítésének háttere, valamint a cikk szövege:

    Как оптимизировать CSS сайта для улучшения Core Web Vitals

    A legnagyobb objektum változatai az eszköztől függően

    Hogyan lehet optimalizálni

    A táblagépen található példában a legnagyobb elem a cookie-értesítés háttérképe. Ehelyett rajzolhat egy színátmenetet a CSS-ben, hogy ne pazarolja az időt egy kép betöltésére a háttérhez. Ez javítja az LCP-t.

    Változtasd meg .banner CSS A CSS gradiens használatához,nem Kép.

    Ez volt:

    háttér: url(“https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701_960_720.jpg”)

    Legyen:

    háttér: lineáris-gradiens(135deg, #fbc6ff 20%, #bdfff9 90%);

    CLS elrendezés eltolódik

    Ha a kép az oldal renderelése után kerül betöltésre, és nincs hely a paraméterei számára, az elrendezés eltolódik. Ez akkor lesz észrevehető, ha az Internet lassú, vagy ha a fájl mérete nagy.

    Hogyan lehet megjavítani

    Helyet kell foglalnia a DOM-ban egy olyan elem számára, amelynek megjelenése eltolja az elrendezést.

    A CSS képarány mezők segítségével fenntarthatja a képhez szükséges helyet. Ha a szélesség megváltozik, a magasság is megváltozik, megtartva az arányokat.

    Ha ismeri a kép egyik dimenzióját,akkor a második arányait meghatározhatja. Ha egy 640 képpontos kép szélessége 16:9, akkor magassága 640 x (9/16) = 360 képpont. Annak érdekében, hogy ne Számolja magát, van egy számológép.

    Az elrendezés eltolódásának megakadályozása érdekében csak olyan módszert kell használni, amely figyelembe veszi a képarányt. Van egy anyag erről a módszerről Angolul.

    A Modern böngészők a CSS-nek köszönhetően beállítják a képek alapértelmezett képarányát a szélesség és magasság attribútumok alapján. A fejlesztőknek a szokásos módon kell beállítaniuk a szélességet és a magasságot:

    OLVASS TOVÁBB:  Egy új lehetőség jelent meg a Yandexben. Közvetlen retargeting beállítások

    Friss cikkek

    Hogyan lehet felismerni egy kattintást a Yandexben.Közvetlen és védje meg magát tőle

    A "Video Cheat Sheet on Internet Marketing" egy speciális projekt, amelyet a SEOnews és az eLama service indított el. A projekt részeként megosztjuk a...

    Hogyan lehet pénzt kivonatok: áttekintést a partner program a projekt”mindent át!”

    Partner anyaga Természetesen annak érdekében, hogy pénzt keressenek az esszékre, nem szükséges saját maga írni őket. A cikk a partnerprogramokból származó...

    Kapcsolódó történetek

    HOZZÁSZÓLOK A CIKKHEZ

    Kérjük, írja be véleményét!
    írja be ide nevét

    Maradjon op - Ge a napi híreket a postaládájában

    OLVASS TOVÁBB:  A WordPress új verziója komoly sebezhetőséget rögzített