More

    Minden a Core Web Vitals-ról: teljes útmutató a weboldal felgyorsításához 2021-ben

    Hogyan lehet optimalizálni egy webhelyet a Google Core Vitals számára?

    A cikkben:

    1. Mi a Google alapvető webes életfunkciói
    2. Hogyan lehet ellenőrizni az oldal betöltési sebességét egy online eszközben
    3. Hogyan lehet optimalizálni a Core Web Vitals metrikákat
    4. Hogyan lehet csökkenteni a webhely oldalainak súlyát, valamint felgyorsítani a betöltést
    5. A képek optimalizálása és tömörítése

    Elemeztük az alapvető webes életjelek összes összetevőjét, valamint a webhely betöltésének minden szakaszát. Itt a munka kód, elrendezés, betűtípusok, képek.

    Mi a Google alapvető webes életfunkciói

    A keresőmotor elemzi az oldal kényelmét a felhasználók számára. Ehhez van egy oldal tapasztalat– egy sor helyszíni követelmények értékelésére a felhasználói élmény és az oldal minősége. Ez magában foglalja a mobil használhatóságot, a HTTPS jelenlétét, a tolakodó felbukkanó ablakok hiányát, a gyors betöltést. 

    2021-ben a Google nem csak méri a sebességet, hanem külön értékeli a betöltési szakaszokat. A méréshez egy sor mutatót használ — A Google Alapvető Életjelei. 2021. június közepe óta rangsoroló tényezővé vált a Google számára.

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    A Google Core Vitals három fő paramétert tartalmaz:

    • A megjelenés mértékeaz LCP tartalom, a legnagyobb elégedett festék-az idő, amíg a böngésző a legnagyobb látható objektumot rajzolja a nézetablakban.

    • VálaszkészségFID, első bemeneti késleltetés — a felhasználó első interakciója az oldallal és a böngésző válasza között eltelt idő.

    • Vizuális stabilitása CLS, kumulatív elrendezés Shift-értékelése elrendezés eltolódások során oldal betöltése.

    A Google e három paraméter küszöbértékeinek használatát javasolja a felhasználói kényelem értékelésére. Ha az oldalak az LCP, a FID és a CLS küszöbértékek feletti értékeléseket kapnak,azokat a Core Web Vitals értékeli.

    Hogyan ellenőrizhető az oldal betöltésének sebessége és szakaszai

    Vannak online eszközök az ellenőrzéshez. Futtassa a webhelyet pr-cy.ru/speed_test a PR-CY-től: a webhely betöltését szakaszokban ingyenesen elemzi, a Google Core Vitals paramétereinek megfelelően. A Google API-n működik.

    Minden egyes tételhez vannak magyarázatok és tippek, amelyek javíthatók, a végrehajtás során a sebességmegtakarítás hozzávetőleges kiszámításával.

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    Ellenőrző töredék

    Hogyan lehet optimalizálni a Core Web Vitals metrikákat

    Elemezzük az egyes paramétereket külön-külön.

    LCP: hogyan lehet felgyorsítani a tartalom megjelenítését

    Az LCP jelző határozza meg, hogy az oldal fő tartalma, a legnagyobb eleme mikor fejezte be a betöltést. Minél alacsonyabb az LCP, annál jobb, annál gyorsabban tudják a felhasználók felfedezni a tartalmat.

    A legnagyobb elem lehet az oldal különböző részei, amelyek betöltéskor jelennek meg. Ebben a példában egy ilyen elem először cím volt, majd kép lett.

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    Rajz szakaszok

    Arra kell törekednünk, hogy az oldal legnagyobb elemének rajzolása ne haladja meg a 2,5 másodpercet a betöltés kezdetétől. Ez a webhely optimális mutatója, amelyen kényelmesen dolgozhat.

    OLVASS TOVÁBB:  Befejeződött a Google Oldalélmény-frissítése

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    Az LCP-t négy tényező befolyásolja, optimalizálhatók:

    • gyorsítsa fel a szerver válaszidejét;

    • oldja meg a JavaScript és CSS renderelés blokkolását;

    • gyorsítsa fel az erőforrás betöltését;

    • optimalizálja a megjelenítést az ügyfél oldalán.

    Hogyan kell dolgozni az egyes pontokon, részletesen tárgyaltuk az LCP-ről szóló cikkben.

    FID: hogyan lehet felgyorsítani az oldal reakcióidejét

    A mutató értékeli, hogy mennyi ideig késik az oldal a felhasználó első műveletének megválaszolásakor. Például egy kép jelent meg az oldalon, amelyre a felhasználó rákattintott a teljes kép megnyitásához. A képnek a kattintás után azonnal meg kell nyitnia. A FID méri, hogy mennyi ideig késik.

    OLVASS TOVÁBB:  Új jelölési ellenőrzés jelent meg a Google Search Central alkalmazásban

    Minél kevesebb időt töltenek, annál jobb. Az optimális FID mutató legfeljebb 100 milliszekundum.

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    Számos megoldás van az oldal reakcióinak felgyorsítására:

    • csökkentse a JavaScript végrehajtási idejét;

    • szüntesse meg a hosszú feladatokat részekre;

    • elhalasztja a fel nem használt Javascriptet;

    • ellenőrizze a betöltött JavaScript könyvtárak méretét;

    • optimalizálja a harmadik féltől származó szkriptek végrehajtását;

    • web-dolgozók használata

    Hogyan kell végrehajtani az egyes pontokat, írtunk egy részletes cikket a FID-ről.

    CLS: hogyan lehet eltávolítani az Oldalelrendezés eltolódását

    Az oldal tartalma eltolódhat, ha egyes elemek aszinkron módon vannak betöltve: ez akkor történik, ha a webmester nem osztott ki elegendő helyet az oldal tetején lévő betöltött elemhez. Ebben az esetben a betöltés az összes tartalmat lefelé mozgatja.

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    Az eltolt gombok miatt a felhasználó hiányzott

    A váltások normálisak lehetnek, ha a felhasználó számára elvárják őket, és fellépésére válaszul jelennek meg. Például, ha rákattintott egy blokkra a listában, majd a dekódolás kibontásra került.

    A CLS az elemek lassú betöltése miatt bekövetkező váratlan eltolódások miatt méri a kumulatív elrendezéseltolódást.

    A számításhoz két komponensre van szükség:

    • a képernyő teljes területe, amelyet az elem a műszak előtt vagy után foglal el;

    • a távolság, amellyel költözött.

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    Shift terület és távolság

    Az optimális CLS mutató az ülések 75% – ánál nem haladja meg a 0,1-et.

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    A CLS-ről szóló cikkben részletesebben elemezzük, hogyan működik, mit kell tenni az optimalizáláshoz.

    Mi más befolyásolja az oldal betöltését: a CSS optimalizálása

    Az oldalstílusok befolyásolják a legnagyobb látható elem megjelenítési sebességét és az elrendezés vizuális eltolódását.

    Például a renderelés blokkolása a CSS feldolgozás során lelassítja az egyéb erőforrások betöltését az oldalon. Ennek megakadályozása érdekében felgyorsíthatja a folyamatot, a CSS-t pedig kritikus, nem kritikus elemekre oszthatja a végrehajtáshoz.

    Összehasonlításképpen, a felső sorban az oldal CSS blokkoló megjelenítéssel töltődik be, alul CSS elválasztással:

    OLVASS TOVÁBB:  [Esettanulmány] lépésről lépésre: hogyan lehet hatékony cikket létrehozni egy online áruház blogjában

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    Az oldalterhelések összehasonlítása

    A kritikus és nem kritikus CSS mellett képstílusokkal, hirdetésekkel, szkriptekkel, keretekkel és betűtípusokkal is dolgozhat.

    Mindezeket a tulajdonságokat külön anyagban elemeztük.

    Hogyan lehet csökkenteni a webhely oldalainak súlyát, valamint felgyorsítani a betöltést

    Más lehetőségek befolyásolják a sebességet.

    Hogyan lehet optimalizálni az oldal felső részének kódját

    Van egy másik módja annak, hogy a letöltés gyorsabb legyen — az oldal felső részének kódjával dolgozni, amelyet a felhasználó először lát, amikor meglátogatja a webhelyet. Ha az oldal felső része gyorsan betöltődik, a felhasználó a lehető leghamarabb látni fogja a betöltő tartalmat. A többit később lehet feltölteni.

    Számos módszer létezik:

    • távolítsa el a felesleges karaktereket és parancsfájlokat a kód tetejéről;

    • konfigurálja az aszinkron betöltést a jQuery segítségével;

    • gyorsítsa fel az első bájt (TTFB)átvételét;

    • a JavaScript és a CSS kombinálása és rövidítése;

    • konfigurálja a betöltést a gyorsítótárból a felhasználó oldalán;

    • használjon CDN-t.

    Van egy cikk az egyes módszerekről példákkal.

    Hogyan kell végrehajtani a gzip, brotli, caching, minification, valamint egyéb tömörítési módszerek

    A képek, videók és különböző interaktív elemek sokat nyomnak a latban és lassítják az oldalt. Tömörítheti a nehéz elemeket, vannak algoritmusok erre, a legnépszerűbb most a gzip és a brotli. A Brotli többet tömörít, mint a gzip, több szintje van. De magas szinten a sebessége kisebb.

    OLVASS TOVÁBB:  A Google részleteket tesztel

    A letöltés felgyorsításának módjai:

    • csökkentse a HTML méretét;
    • használjon gzip vagy brotli tömörítést;
    • használja minification, azaz csökkenti a HTML, CSS, JS;
    • használja a böngésző gyorsítótárát a gyorsításhoz;
    • képek, illusztrációk és egyéb grafikák tömörítése: válassza ki a felbontást, csökkentse a színek számát, adja meg a paramétereket a CSS-ben, majd tömörítse a fájlokat.

    Például, ha a Színek száma csökken, a kép minősége szinte nem szenved, de a súly jelentősen csökken. Balról jobbra: 32 bit (16M színek), 7 bit (128 színek), 5 bit (32 színek).

    Всё о Core Web Vitals: полное руководство как ускорить сайт в 2021

    Három tömörítési lehetőség

    A módszerek az archiválási műveletek miatt betöltik a kiszolgálót, de általában gyorsabbak a letöltött adatok méretének csökkenése miatt.

    Elemezzük az összes módszert egy részletes cikkben.

    Amit a leggyorsabb internetes oldalak használnak: 5, 2 millió oldalas tanulmány

    A Brian Dean által vezetett Backlinko blog csapata tanulmányt készített a Google keresési eredményeiből származó oldalakról, és ellenőrizte, hogy a leggyorsabb oldalak milyen gyorsítási módszereket használnak. A minta 5,2 millió oldalt tartalmazott az asztali és mobil keresési eredményekből, így az eredményt érdemes megnézni.

    Mit vizsgáltak:

    • Teljes letöltési sebesség
    • Hogyan befolyásolja a CDN a letöltési sebességet
    • Mely keretek a leggyorsabbak
    • Hogyan befolyásolja a Fájltömörítés a sebességet

    Friss cikkek

    A történet arról, hogy milyen nehéz volt weboldalt készíteni a Prostobank számára

    Miután meghallotta a "bank weboldalát", a legtöbb fehér hátteret fog elképzelni, amelynek különböző oldalain nyereséges hitelek kamatikonokkal másznak az arcodba. De nem minden bank...

    5 ok arra, hogy inspirálja a gyermeket a programozással

    A programozás olyan hobbivá válhat, amely a jövőben hasznos lesz, és a felnőtt élet készségeinek fejlesztése20213. szeptember 22. perc38A cikk szerzője Lisa TurlychkinaA cikk...

    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