Első bevitel késése – Egyszerű magyarázat

Avatar admin | 2021.03.13. 11 Views 0 Likes 0 Ratings

11 Views 0 Ratings Rate it

Az Első bemenet késleltetése (FID) egy felhasználói élmény mutató, amelyet a Google vezetett be, és hamarosan kis rangsorolási tényezőként fog használni. Ez a cikk a FID könnyen áttekinthető áttekintését kínálja a téma értelmezése érdekében.

Az első beviteli késés több, mint a Google tetszése. A webhely teljesítményének javítása általában növeli az értékesítést, a hirdetési bevételeket és a leadeket.

Az első beviteli késés meghatározása

A FID annak az időnek a mérése, amely ahhoz szükséges, hogy a böngésző válaszoljon a webhely látogatójának első interakciójára a webhelykel, miközben a webhely betöltődik. Ezt néha Input Latency-nak hívják.

Egy interakció lehet egy gomb, egy link vagy egy billentyű megnyomása és a válaszként adott válasz. A szövegbeviteli területek, a legördülő listák és a jelölőnégyzetek más típusú interakciós pontok, amelyeket a FID mér.

Hirdetés

Olvassa tovább az alábbiakban

A görgetés vagy a nagyítás nem számít interakciónak, mert magától a webhelytől nem várható válasz.

A FID célja annak mérése, hogy egy webhely mennyire reagál a betöltés közben.

Az első bevitel késésének oka

Az első beviteli késleltetést általában rendezetlenül letöltött képek és szkriptek okozzák. Ez a rendezetlen kódolás miatt a weboldal letöltése túlságosan szünetel, majd elindul, majd szünetel. Ez nem reagál arra, hogy a webhely látogatói megpróbálnak interakcióba lépni a weboldallal.

Olyan ez, mint egy forgalmi dugó, amelyet mindenki számára ingyen okoznak, ahol nincsenek közlekedési jelek, ami baleseteket és lassulásokat okoz. Javítása a forgalom rendjének megteremtéséről szól.

A Google leírja a a bemeneti késés oka mint ez:

„Általában a bemeneti késleltetés (más néven bemeneti késleltetés) azért következik be, mert a böngésző fő szála valami mással van elfoglalva, ezért nem tud (még) reagálni a felhasználóra. Ennek egyik gyakori oka az lehet, hogy a böngésző az alkalmazásod által betöltött nagy JavaScript-fájl elemzésével és végrehajtásával van elfoglalva. Amíg ezt csinálja, egyetlen eseményfigyelőt sem tud futtatni, mert a betöltött JavaScript arra késztetheti, hogy mást tegyen. “

Hirdetés

Olvassa tovább az alábbiakban

A bemeneti késés javítása

Mivel az első bevitel késleltetésének kiváltó oka a szkriptek és képek rendezetlen letöltése, a probléma megoldásának módja az, hogy átgondoltan rendbe hozza, hogyan mutatják be ezeket a szkripteket és képeket a böngészőben letöltésre.

A FID problémájának megoldása általában abból áll, hogy HTML attribútumokat használnak a parancsfájlok letöltésének vezérléséhez, a képek (a HTML és a képek) optimalizálásából és a felesleges parancsfájlok átgondolt kihagyásából. A cél a letöltött fájlok optimalizálása a tipikus szünet kiküszöbölése és a nem szervezett weboldalak letöltésének megkezdése érdekében.

Miért válnak a böngészők válaszolatlanná?

A böngészők olyan szoftverek, amelyek elvégzik a feladatokat egy weboldal megjelenítéséhez. A feladatok kód, képek, betűtípusok, stílusinformációk és szkriptek letöltéséből, a parancsfájlok futtatásából (futtatásából) és a weboldal elkészítéséből állnak a HTML utasítások szerint.

Ezt a folyamatot renderelésnek nevezzük. A render szó azt jelenti, hogy készít, és ezt teszi a böngésző a kód és a képek összeállításával egy weboldal megjelenítéséhez.

Az egyes renderelési feladatokat szálaknak nevezzük. A szál rövid a „végrehajtás szála” kifejezésre utal, ami egy egyedi műveletsort jelent (ebben az esetben a weboldal megjelenítéséhez elvégzett sok egyedi feladatot).

A böngészőben van egy szál, amelyet Main Thread-nak hívnak. A fő szál felelős a weboldal látogató által látott weboldalának létrehozásáért (megjelenítéséért).

A fő szál olyan autópályaként vizualizálható, amelyben az autók szimbolizálják azokat a képeket és szkripteket, amelyek letöltődnek és végrehajtódnak, amikor egy személy meglátogat egy webhelyet.

Néhány kód nagy és lassú. Emiatt a többi feladat leáll, és megvárja, amíg a nagy és lassú kód leszáll az autópályáról (befejezze a letöltést és a végrehajtást).

A cél a weboldal kódolása olyan módon, amely optimalizálja, hogy melyik kódot töltsék le először, a kód végrehajtásakor, rendezett módon, hogy a weboldal a lehető leggyorsabban letölthető legyen.

Hirdetés

Olvassa tovább az alábbiakban

Ne veszítse el az alvást a harmadik fél kódja miatt

Ami az alapvető webes vitálokat illeti, és különösen az első beviteli késleltetéssel kapcsolatban, van olyan kód, amely felett kevés lehet tenni. Ez azonban valószínűleg a versenytársaival is így lesz.

Például, ha vállalkozása a Google AdSense-től függ (egy nagy megjelenítést blokkoló szkript), akkor a probléma ugyanaz lesz a versenytársa számára is.

Sok esetben elegendő lehet a lehető legjobban cselekedni, mert lehet, hogy a versenytársak sem tudnak jobban teljesíteni.

Tehát ezekben az esetekben a legjobb, ha a nyereményeket ott veszi, ahol megtalálja, és ne izzadja meg a veszteségeket, ahol nem tud változtatni.

A JavaScript hatása az első beviteli késésre

A JavaScript olyan, mint egy kis motor, amely a dolgokat megvalósítja. Ha egy űrlapon megad egy nevet, előfordulhat, hogy ott van egy JavaScript, hogy az első és a vezetéknév is meg legyen győződve. Ha megnyom egy gombot, előfordulhat, hogy a JavaScript ott van, hogy utasítsa a böngészőt, hogy előugró ablakban hozzon létre köszönő üzenetet.

Hirdetés

Olvassa tovább az alábbiakban

A JavaScript problémája, hogy nem csak letölteni kell, hanem futtatni (végrehajtani) is kell. Tehát ez két dolog járul hozzá a bemeneti késéshez.

Ha egy nagy JavaScript fájl található az oldal teteje közelében, akkor ez a fájl blokkolja az alatta lévő többi oldal megjelenését (láthatóvá és interaktívvá válását), amíg a szkript nem fejezi be a letöltést és a végrehajtást.

Ezt hívjuk az oldal blokkolásának.

A kézenfekvő megoldás az ilyen típusú szkriptek áthelyezése az oldal tetejéről és az oldal aljára helyezés, hogy ne zavarjanak az összes többi megjelenítésre váró oldalelemben.

De ez problémát jelenthet, ha például egy nagyon hosszú weboldal végén helyezzük el. Ennek oka az, hogy amint a nagy oldal betöltődik, és a felhasználó készen áll arra, hogy interakcióba lépjen vele, a böngésző továbbra is jelezni fogja, hogy letölt (mert a nagy JavaScript fájl késik a végén). Lehet, hogy az oldal gyorsabban letöltődik, de aztán leáll, miközben várja a JavaScript futtatását.

Hirdetés

Olvassa tovább az alábbiakban

Van erre megoldás!

Halasztó és Async attribútumok

A Defer és az Async HTML attribútumok olyanok, mint a forgalmi jelek, amelyek vezérlik a JavaScript letöltésének és végrehajtásának kezdetét és leállítását.

A HTML attribútum olyasmi, amely átalakít egy HTML elemet, mintegy kiterjesztve az elem célját vagy viselkedését.

Olyan, mintha megtanulna egy készséget, ez a készség annak a tulajdonságának a tulajdonságává válik, aki vagy.

Ebben az esetben a Halasztás és az Async attribútumok megváltoztatják a JavaScript fájl viselkedését.

Az egyik fontos változás az, hogy megmondják a böngészőnek, hogy ne álljon le a JavaScript használatával. Ezek az attribútumok arra szólítják a böngészőt, hogy tartsa fenn a fő szálat.

A JavaScript fájlok a fő szálaktól függetlenül töltődnek le és dolgoznak fel, lehetővé téve a böngésző számára a weboldal gyorsabb megjelenítését.

Async Attribútum

Az Async attribútummal ellátott JavaScript fájlok letöltésre kerülnek, majd a letöltés után azonnal végrehajtódnak. Amikor elindul, akkor az a pont, amikor a JavaScript fájl blokkolja a fő szálat.

Hirdetés

Olvassa tovább az alábbiakban

Normál esetben a fájl blokkolja a fő szálat, amikor elindul a letöltés. De nem az aszinkron attribútummal.

Ezt aszinkron letöltésnek nevezzük, ahol a fő szálaktól függetlenül és azzal párhuzamosan tölt le.

Az async attribútum hasznos harmadik féltől származó JavaScript fájlokhoz, például reklámozáshoz és közösségi megosztáshoz, olyan fájlokhoz, amelyekben nem mindegy, hogy milyen sorrendben hajtják végre őket.

Attribútum elhalasztása

JavaScript fájlok a „elhalasztja”Attribútum szintén aszinkron módon lesz letöltve.

De a halasztott JavaScript fájl csak akkor hajt végre, ha a teljes oldalt letöltötte és megjelenítette. A halasztott parancsfájlok abban a sorrendben is végrehajtódnak, amelyben a weboldalon találhatók.

A defer attribútummal ellátott szkriptek hasznosak azokhoz a JavaScript-fájlokhoz, amelyek függenek az oldalelemek betöltésétől és a végrehajtásuk sorrendjétől.

Általánosságban a defer attribútumot használja olyan szkriptekhez, amelyek nem elengedhetetlenek az oldal megjelenítéséhez.

A bemeneti késés minden felhasználó számára eltérő

Fontos tisztában lenni azzal, hogy az első beviteli késés pontszámai változóak és következetlenek. A pontszámok látogatónként változnak.

Hirdetés

Olvassa tovább az alábbiakban

A pontszámok eltérése elkerülhetetlen, mert a pontszám olyan interakcióktól függ, amelyek a webhelyet felkereső egyénre jellemzőek.

Egyes látogatók zavaróak lehetnek, és csak akkor lépnek kapcsolatba, amikor az összes eszköz be van töltve és készen áll az interakcióra.

A Google így írja le:

„Nem minden felhasználó fog interakcióba lépni az Ön webhelyével minden látogatás alkalmával. És nem minden interakció releváns a FID szempontjából…

Ezenkívül egyes felhasználók első interakciói rossz időben (amikor a fő szál hosszabb ideig elfoglalt), és néhány felhasználó első interakciója jó időben (amikor a fő szál teljesen tétlen).

Ez azt jelenti, hogy egyes felhasználóknak nem lesznek FID-értékeik, másoknak alacsony FID-értékeik vannak, és néhányuknak valószínűleg magas FID-értékeik lesznek. “

Miért sikertelen a legtöbb webhely a FID-ben?

Sajnos sok tartalomkezelő rendszert, témát és bővítményt nem azért készítettek, hogy megfeleljenek ennek a viszonylag új mutatónak.
Ez az oka annak, hogy sok kiadó rémülten veszi észre, hogy webhelyeik nem teljesítik az első beviteli késés tesztet.

Hirdetés

Olvassa tovább az alábbiakban

De ez valami megváltozik, mivel a webszoftver-fejlesztő közösség reagál a kiadói közösség különböző kódolási szabványokra vonatkozó igényeire.

És nem arról van szó, hogy a tartalomkezelő rendszereket gyártó szoftverfejlesztők hibásak abban, hogy olyan termékeket állítsanak elő, amelyek nem mérik össze ezeket a mutatókat.

Például a WordPress megoldott egy hiányosságot a Gutenberg webhelyszerkesztőben, amely miatt a pontszáma rosszabb volt, mint amennyit tudott.

A Gutenberg vizuális módszer a webhelyek felépítésére a blokkok felületén vagy metaforáján keresztül. Van egy widget blokk, egy kapcsolattartó űrlap blokk és egy lábléc blokk stb.

Tehát a weboldal létrehozásának folyamata vizuálisabb és az építőelemek metaforáján keresztül valósul meg, szó szerint különböző blokkokkal rendelkező oldalt építve.

Különböző blokkok léteznek, amelyek különböző módon néznek ki és viselkednek. Minden egyes blokknak megvan a megfelelő stíluskódja (CSS), amelynek nagy része egyedi és egyedi az adott blokkhoz.

Hirdetés

Olvassa tovább az alábbiakban

E stílusok kódolásának szokásos módja egy stíluslap létrehozása, amely tartalmazza az egyes blokkokhoz tartozó stílusokat. Célszerű így csinálni, mert van egy központi helye, ahol a blokkokra jellemző összes kód létezik.

Ennek az az eredménye, hogy egy olyan oldalon, amely (mondjuk) húsz blokkból állhat, a WordPress betölti az adott blokkok stílusait, valamint az összes többi blokkot, amelyet nem használnak.

A Core Web Vitals (CWV) előtt, amelyet a CSS csomagolásának szokásos módjának tekintettek.

A Core Web Vitals bevezetése után ezt a gyakorlatot a kód felfújásának tekintik.

Ez nem enyhe jelentésű a WordPress fejlesztőkkel szemben. Fantasztikus munkát végeztek.

Ez csak arra utal, hogy a változó szabványok milyen gyorsan ütközhetnek szűk keresztmetszetbe a szoftverfejlesztés szakaszában, mielőtt integrálódnának a kódoló ökoszisztémába.

Ugyanezt éltük meg a mobil első webdesignra való áttéréssel.

Hirdetés

Olvassa tovább az alábbiakban

Gutenberg 10.1 Javított teljesítmény

WordPress A Gutenberg 10.1 továbbfejlesztett módszert vezetett be a stílusok betöltésére csak a szükséges stílusok betöltésével és nem a nem használt blokkstílusok betöltésével.

Ez hatalmas győzelmet jelent a WordPress, a WordPressre támaszkodó kiadók és természetesen a felhasználók számára, akik a WordPress segítségével létrehozott webhelyeket látogatják.

Itt az ideje az első beviteli késés kijavításának

Úgy gondolom, hogy a CMS-ekért, a témákért és a beépülő modulokért felelős egyre több szoftverfejlesztő előrelépése áttér az első bevitel késleltetés-barát kódolási gyakorlatára.

De amíg ez nem történik meg, a megjelenítőt terheli a lépések megtétele az első beviteli késés javítása érdekében. Ennek megértése az első lépés.

Idézetek

Chrome felhasználói élmény jelentés

PageSpeed ​​Insights

Chrome Dev Tools világítótorony

Google Search Console (Core Web Vitals jelentés)

Optimalizálja az első bevitel késését

Első bemenet késleltetése

Felhasználóközpontú teljesítménymutatók

GitHub szkript az alapvető webes életerők mérésére




Source link


11 Views 0 Ratings Rate it

  • Minden jog fenntartva 2019-2020. Hogyankészítsek.Hu Impresszum Adatkezelési szabályok