INP (Interakce k další barvě): In -Depth Core Web Vitals

Už jste někdy ... při zadávání webové stránky a najdete tlačítko „Přidat koš“, které je stisknuto, stále, rozbalovací nabídku, která je kliknutí, nebo vyhledávací pole, které bylo vytištěno, ale nic se nestalo? Pocit „zpoždění“ je tak frustrován, jako je tento, to, co se Google chystá přijít „revolucí“ s nejnovějšími jádrovými webovými vitály s názvem „INP“ nebo interaktivní k další barvě!

Pokud jste vlastníkem webových stránek, obchodníky nebo vývojáři webových stránek, kteří si mysleli, že náš web je dostatečně rychlý, protože stahování ... dnes možná bude muset znovu myslet, protože INP není měřena pouze „rychlost načítání“, ale míra „rychlosti odezvy“ pro akce každého uživatele. Který se chystá stát se důležitým faktorem, který ovlivňuje přímo uživatelskou zkušenost (UX) i vaše SEO! Tento článek vás vezme na -Depth InP v snadném -to -understandu. S průvodcem, metodou Optimalize, ručně provedená pro změnu webu, který se „zpozdil“ na „hladké“, dokud zákazník nemusí být ohromen.

Skutečný problém v životě: „Still“ web je jako zaměstnanci.

Představte si, že najdete velmi zajímavou reklamu na produkt. Rychle klikněte na web. Webová stránka se krásně naložila do mrknutí oka. Najdete produkt, který chcete stisknout tlačítko „Vyberte barvu“ ... a ... Ticho ... nic se nestalo, pokusíte se znovu stisknout ... stále. Začnete být frustrovaní a nejste si jisti, zda je web rozbitý nebo internet. Máte problém. Nakonec jste právě zavřeli okno. Pak místo toho přejděte na nákup z jiných webových stránek

Toto je „noční můra“ webových stránek elektronického obchodování a všech webových stránek, které vyžadují přeměnu. Problém „klikněte a držíte a„ stiskněte a poté zpožďujte “Vytvořte obrovský špatný zážitek. Zničuje spolehlivost a způsobuje, že bohužel ztratíme naše zákazníky, i když používáme spoustu peněz na střílení nebo dělá SEO, malý problém nazývaný„ pomalá reakce “. Toto je důležitý faktor, který vyrábí vaše peníze“, a INP je nástroj, který Google vytvořil konkrétně.

‍

Výzva pro ilustrace: Grafika ukazuje uživatele. Zatímco prsty jsou namočeny na tlačítku na mobilní obrazovce bez jakékoli odezvy se symbolem přesýpacích hodin nebo otočením ikony

Proč k tomuto problému došlo: „jeden zaměstnanec“ s názvem Hlavní vlákno

Hlavním důvodem, proč naše webová stránka „pomalá reakce“ nebo vysoká INP pochází z prohlížeče. „Důležité zaměstnanci“ jsou jediné jmenované „hlavní vlákno“. Tento zaměstnanec je zodpovědný za téměř za všechno. Od zobrazení webové stránky (rozvržení vykreslování), správa kódu CSS, až po komplexní běh JavaScriptu

Nyní přemýšlejte o tom, zda nařídíme hlavní vlákno, aby tvrdě pracovalo po dlouhou dobu, jako je velké zpracování JavaScriptu, aby se vytvořilo krásnou animaci nebo velké množství správy dat od třetích stran, zatímco hlavní vlákno je s těmito prací „točící hlava“. Poté uživatel tlačil na tlačítko „kliknout“ nebo „zadat“. Zpráva přichází. Hlavní vlákno nebude mít prázdnou ruku, aby „přijala hosty“ nebo na tuto objednávku okamžitě reagovaly. Musí proto čekat na dokončení práce jako první. Obrátit se na to, co uživatel dělá, je „zpoždění“ nebo „vynikající“, které cítíme. Tento problém je obvykle způsoben:

• JavaScript, který pracuje příliš dlouho (dlouhé úkoly): skripty, které trvají více než 50 milisekund, aby okamžitě blokovaly hlavní vlákno.
• DOM je velký a složitý: Čím více prvku má mnoho výpočtů pro zobrazení každého nového výsledků, tím déle to trvá.
• Zpětné volání na Intual Event: Psaní kódu, který se zabývá různými událostmi (jako je Click, Scroll, Keypress), není dostatečně dobrý.
• Skripty třetích stran, které jsou těžké: externí skripty, jako jsou chatovací systémy, analytiky nebo reklamy, mohou také soutěžit o zdroje hlavních vláken.

Pochopení základních webových vitálních je důležitým základem pro řešení těchto problémů.

‍

Výzva pro ilustrace: Easy Infographic Images. Zobrazení „hlavního vlákna“ je jako jediný zaměstnanec, který vyrábí velký dokument (JavaScript), dokud není čas odpovědět na telefon (interakce uživatele), který je vedle.

Pokud to odejde, jak to ovlivní: nejen „nepříjemný“, ale „katastrofa“ podnikání.

Mít vysokou hodnotu INP nebo na web reaguje pomalu neovlivňuje pouze „frustrovaného“ uživatele, ale má v dlouhodobém horizontu přímý dopad na podnikání a SEO.

• Míra převodu. Dang: Když se uživatelé setkávají s problémy s používáním od začátku, jako je stisknutí tlačítka výběru produktu. Nebo vyplňte formulář příležitost k dosažení posledního kroku k „zaplacení“ téměř nuly.
• Míra hranice je vysoká: první dojem je důležitý. Pokud váš web vytvoří špatný zážitek, uživatel okamžitě vytiskne. A nemyslel na to, že se znovu vrátí
• Rozbijte image značky: pomalé a obtížné webové stránky. Odrážející nevědomost a neprofesionální zničení spolehlivosti, která se nahromadí
• SEO hodnocení: Od března 2024 společnost Google přinesla INP jako jednu z oficiálních základních webových vital. Chcete -li vyměnit FID (první zpoždění vstupu). To znamená, že web, který má špatnou INP, bude přímo redukován na stránce vyhledávání, zejména na webu pro firmu B2B , který je spolehlivý, je nejvyšší důležitý.

Jinými slovy, nechat web mít vysokou hodnotu INP, jako je otevření krásného obchodu. Ale zamkli dveře z toho, že zákazníkům vstoupili do nich, je zničit obchodní příležitosti a snížit efektivitu veškerého marketingu, který jste provedli.

‍

Výzva pro ilustrace: Graf zobrazující linii rychlosti převodu je propadnut, zatímco linka míry BondCE stoupá s ikonou INP, která je v pozadí červená.

Existuje nějaké řešení? A kde začít: Otevřete kompletní optimalizaci učebnice INP

Dobrou zprávou je, že vysoké problémy INP lze vyřešit a vylepšit. Klíč k „Nezávislému návratu“ do hlavního vlákna, takže je připraven kdykoli reagovat na uživatele. Měli bychom začít „měřit výsledky“, abychom nejprve našli zdroj problému. A poté tyto pokyny opravte

1. Změřte a najděte interakci, která má problém:

• Použijte laboratorní datové nástroje: Například Google PageSpeed Insights nebo pomocí Chrome Devtools (Performance) simuluje a najdete „dlouhé úkoly“, které se vyskytují.
• Používejte nástroje pro pole Field Data: Viz informace od skutečných uživatelů prostřednictvím zprávy pro uživatelské zkušenosti Chrome (CRUX) nebo nainstalujte knihovnu Google pro ukládání dat INP přímo od vašeho uživatele.

2. Optimalizovat techniky kódu (srdce redukce INP):

• Rozdělte velkou práci na sub -task: nejdůležitější technikou je „kapitulace“, uvolnění hlavního vlákna, které bude čas od času volné. Místo toho, abychom si objednali, aby dlouho fungoval, můžeme použít „SetTimeout“ ke zpoždění funkce některých funkcí, aby se hlavní rytmus vlákna „dech“ a reagoval na uživatele. Přečtěte si více z oficiálního zdroje dat na webu.dev od společnosti Google.
• Vyvarujte se rozvržení mlácení: Nepište skript, který si objednáte, abyste si přečetli velikost prvku a napsali novou hodnotu střídavou ve stejné smyčce. Protože to přinutilo prohlížeč zbytečně vypočítat rozložení
• Snižte složitost DOM: Čím menší prvek má více prvku. Prohlížeč je snazší a rychlejší. Zkuste učinit strukturu HTML co nejjednodušší.
• Použití `obsahu-viditelnosti SP a`` obsahuje v CSS: Řekněte prohlížeči, že jakákoli část, která nemusí být vykreslena nebo může být vypočtena odděleně od ostatních částí. Což hodně pomáhá snižovat zátěž displeje
• Správa skriptu třetích stran: načtěte skript podle potřeby a použijte atribut 'async' nebo defer`, abyste nezablokovali hlavní stránku webové stránky. Naučit se, jak opravit zdroje blokování vykreslování, v této části hodně pomůže.

Informace o tom, že informace od týmu Google Search, lze přímo studovat od úvodu Ins INP až do základních webových vitalů.

‍

Výzva pro ilustrace: Infographic, který ukazuje optimalizaci INP jako 3 kroky: 1. Měření (zvětšená ikona brýlí) 2. Identifikujte (cílové letectví) 3.

Příklady ze skutečné věci, která bývala úspěšná: Web elektronického obchodování, který se vrátil „Kliknutím na prst“

Abych jasně viděl obrázek, chtěl bych zvednout případ webové stránky elektronického obchodování. Prodejte módní oblečení, které se setkalo s vysokými problémy s INP. Jejich webové stránky mají funkce. „Filtr“ (velmi složitý) Uživatelé si mohou vybrat oděvy, barvu, velikost a cenové rozpětí.

Původní problém: Pokaždé, když si uživatel vybere filtr, například výběr „červené“, celá stránka bude držet po dobu 1-2 sekund, aby čekala, až JavaScript zpracovává a zobrazí všechny nové produkty. Což vytváří hodně nepříjemnosti Mnoho zákazníků kliknutím a vybrat filtr vedle sebe a web je příliš dlouhý, takže míra konverze z povinnosti je nejdůležitější.

Optimalize INP Mission: Vývojový tým se upravil pomocí techniky „Break Up Long Tasks“. Změnili se z spuštění veškerého kódu najednou. Je rozdělen na části pomocí „SetTimeout“. Po uživateli klikněte na filtr, systém okamžitě zobrazí nakládací spinner (okamžitě reagovat) a poté postupně nechte JavaScript vytáhnout informace a vykreslit nový produkt na pozadí.

Úžasné výsledky: INP stránky produktu je snížena z ~ 800 ms na pouze ~ 150 ms (z „špatného“ se stává „dobrým“). Zkušenost s hladkým využitím je jako mobilní aplikace. Uživatel může stisknout a vybrat mnoho filtrů nepřetržitě bez pocitu. ** Relace, která používá filtr, má konverzní rychlost až do 25%** a ** Míra okamžitého opuštění stránky klesá o 15%** Toto je síla optimalizace INP, která může skutečně změnit zkušenost uživatelů a vytvořit obchodní výsledky. Stejné jako zvýšení rychlosti pro obchody na Shopify , které přímo ovlivňují prodej.

‍

Výzva pro ilustrace: před a po stránce stránky elektronického obchodování. První strana ukazuje uživatele. Podrážděný filtrem na straně po zobrazení uživatele.

Pokud chcete následovat, co dělat? (Lze použít okamžitě): Kontrolní seznam. Zdravotní kontrola na vašem webu.

Jste připraveni změnit svůj web „Klikněte na prst“? Není třeba čekat, až se problém hromadí. Pokuste se postupovat podle tohoto kontrolního seznamu Snadno a okamžitě spustit Optimalize INP.

1. Přejděte na Google PagesPeed Insights: Zadejte svůj web. A podívejte se na téma „Diagnostické problémy s výkonem“, přejděte dolů a uvidíte metriku pojmenovanou Interactive na Next Paint (INP). Kolik stojí vaše hodnota? (Dobré = pod 200 ms, musí být vylepšena = 200-500 ms, špatné = vyšší než 500 ms)
2. Najděte pomalu interakci: PageSpeed Insights často vyprávějí, která interakce (například kliknutím na tlačítko, otevření nabídky), která trvá nejdelší dobu. To je váš první cíl.
3. Promluvte si se svým vývojářem (nebo otevřete samotné Devtools): Pošlete tuto zprávu vývojářům. Nebo pokud to dokážete sami, otevřete Chrome Devtools na kartu Performance a zkuste provést interakci, která má problém hledat dlouhou červenou pásmo. Což má znamení, že „dlouhý úkol“ je
4. Začněte s nejjednodušší věcí: Zkuste hledat JavaScript, který zbytečně funguje okamžitě. Webová stránka je dokončena. Zkuste použít „SetTimeout“, abyste odložili jeho provoz na 1-2 sekundy.
5. Zkontrolujte skripty třetích stran: Máte plug-in nebo skript? Například chatovací systém, který nemá žádného uživatele ani tepelné mapy, který nebyl otevřen. Zkuste dočasně zavřít a znovu měřit výsledky.
6. Poraďte se se specialistou: Pokud je problém komplikovaný, může být investování s pokročilými odborníky na vývoj webových stránek, aby se přišli zkontrolovat a upravit strukturu kódu, nejvíce nejvýhodnější investicí v dlouhodobém horizontu.

‍

Výzva pro ilustrace: Obrázky kontrolního seznamu s inspekčními položkami INP, s každou ikonou komponenty, jako je ikona PagesPeed Insights, ikona kódu, ikonu plug -in a expertní ikony.

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Takže můžete porozumět inp důkladně, že jsem sestavil běžnou otázku s jasnou odpovědí.

Jak se liší INP od FID (první vstupní zpoždění), jak je staré webové vitality?
FID pouze „první vstup“ (první vstup), ale INP „každé interaktivní“ měření, ke kterému dochází během používání uživatele. Od prvního kliknutí na závěrečné kliknutí je INP mnohem lepší reprezentativní pro celkový uživatelský zážitek.

Kolik by měla být hodnota „dobrá“ INP?
Podle kritérií Google by dobré hodnoty INP měly být menší než 200 milisů (MS), pokud mezi 200-500 ms, považuje se za renovované a pokud je vyšší než 500 ms považována za špatné.

Nejsem programátor, bude schopen zlepšit INP sám?
Některá vylepšení mohou být obtížná, pokud neexistují žádné znalosti kódu. To, co můžete udělat, je 1. Používejte nástroje, jako jsou Insights PageSpeed Insights k „diagnostice“ problémů. 2. Snižte počet plug -in nebo zbytečných externích skriptů. 3. Vyberte téma nebo tempo, které dobře zapíše kód a zdůrazňuje výkon a 4.

Můj web je jen obyčejná informace. Nemusí to mít zájem o INP?
Je to naprosto nutné! Bez ohledu na typ webu, mít hladkou interakci, jako je stisknutí nabídky, kliknutím na přehrávání videa nebo dokonce stisknutím tlačítka přijímání souborů cookie, to vše ovlivňuje spolehlivost a zkušenosti uživatele. A co je nejdůležitější, přímo to ovlivňuje vaše hodnocení SEO.

‍

Výzva pro ilustrace: Libra -tvarovaná ikona s otazníkem (FAQ) s charakterem, programátoři a obchodníci stojí a mluví.

Shrnutí, které má být snadno pochopitelné + chtějí to zkusit udělat

Stručně řečeno, interakce k další barvě (INP) není jen „technická“ bolest hlavy “, což je„ odraz uživatelů “, kterou Google používá jako nový standard k měření kvality webu. Jeho srdce je snadné: když uživatel něco na našem webu udělá. Měl by okamžitě vidět odpověď.

Opustit web s vysokou INP je jako ignorování hlasu zákazníka. Zničuje celou zkušenost, spolehlivost, prodej a hodnocení SEO. Investice je dnes účinná pro optimalizaci INP, nejen dělat domácí úkoly, odesílání Google, ale z dlouhodobého hlediska je silným základem pro vaše podnikání. Ukazuje úctu ke všem uživatelům a pocitům.

Nečekejte na svůj web „zpoždění“, dokud neztratíte více zákazníků. Zkuste použít kontrolní seznam, který jsem dnes zkontroloval váš web. Nebo pokud chce, aby pomocník provedl audit optimalizace elektronického obchodování, je to skvělý výchozí bod pro vyhledávání a řešení všech problémů s dotazem. Je čas změnit každé kliknutí uživatele na dojem!

‍

Výzva pro ilustrace: Inspirující obrázky ukazují šipku, která stoupá z ikony myši, která klikne. Se stal rostoucím prodejním grafem s pozadím webu, který vypadá čistě a rychle

‍