Opóźnienie pierwszego wejścia – proste wyjaśnienie
Dowiedz się, czym jest opóźnienie pierwszego wejścia (FID), co je powoduje, a także poznaj różne rozwiązania służące poprawie wskaźników podstawowych wskaźników internetowych.
Opóźnienie pierwszego wejścia (FID) to wskaźnik doświadczenia użytkownika, który Google wykorzystuje jako mały czynnik rankingowy.
Ten artykuł zawiera łatwy do zrozumienia przegląd FID, aby pomóc zrozumieć temat.
Opóźnienie pierwszego wejścia to coś więcej niż próba zadowolenia Google. Ulepszenia wydajności witryny zazwyczaj prowadzą do zwiększenia sprzedaży, przychodów z reklam i potencjalnych klientów.
Co to jest opóźnienie pierwszego wejścia?
FID to miara czasu, w jakim przeglądarka reaguje na pierwszą interakcję użytkownika witryny z witryną podczas jej ładowania. Jest to czasami nazywane opóźnieniem wejścia.
Interakcja może polegać na dotknięciu przycisku, linku lub naciśnięciu klawisza i odpowiedzi udzielonej w odpowiedzi. Obszary wprowadzania tekstu, listy rozwijane i pola wyboru to inne rodzaje punktów interakcji, które mierzy FID.
Przewijanie lub powiększanie nie liczą się jako interakcje, ponieważ nie oczekuje się odpowiedzi ze strony samej witryny.
Celem FID jest zmierzenie responsywności witryny podczas jej ładowania.
Przyczyna pierwszego opóźnienia wejścia
Opóźnienie pierwszego wejścia jest zazwyczaj powodowane przez obrazy i skrypty pobierane w sposób nieuporządkowany.
To nieuporządkowane kodowanie powoduje, że pobieranie strony internetowej jest nadmiernie wstrzymywane, a następnie uruchamiane, a następnie wstrzymywane. Powoduje to brak reakcji odwiedzających witrynę, którzy próbują wejść w interakcję ze stroną internetową.
To jak korek uliczny spowodowany przez „free-for-all”, gdzie nie ma sygnałów drogowych. Naprawienie tego polega na uporządkowaniu ruchu.
Google opisuje przyczynę opóźnienia wejścia w następujący sposób:
„Ogólnie rzecz biorąc, opóźnienie wejścia (inaczej opóźnienie wejścia) ma miejsce, ponieważ główny wątek przeglądarki jest zajęty robieniem czegoś innego, więc nie może (jeszcze) odpowiedzieć użytkownikowi.
Jedną z typowych przyczyn takiej sytuacji jest to, że przeglądarka jest zajęta analizowaniem i wykonywaniem dużego pliku JavaScript załadowanego przez Twoją aplikację.
Podczas gdy to robi, nie może uruchomić żadnych detektorów zdarzeń, ponieważ ładowany JavaScript może powiedzieć mu, aby zrobił coś innego”.
Jak naprawić opóźnienie wejścia?
Ponieważ główną przyczyną opóźnienia pierwszego wejścia jest niezorganizowane pobieranie skryptów i obrazów, sposobem na rozwiązanie tego problemu jest przemyślane uporządkowanie sposobu, w jaki te skrypty i obrazy są prezentowane przeglądarce w celu pobrania.
Rozwiązanie problemu FID zazwyczaj polega na użyciu atrybutów HTML do kontrolowania sposobu pobierania skryptów, optymalizacji obrazów (HTML i obrazy) oraz przemyślanego pomijania niepotrzebnych skryptów.
Celem jest zoptymalizowanie tego, co jest pobierane, aby wyeliminować typowe wstrzymywanie i uruchamianie pobierania niezorganizowanych stron internetowych.
Dlaczego przeglądarki przestają odpowiadać
Przeglądarki to oprogramowanie, które wykonuje zadania polegające na wyświetlaniu strony internetowej. Zadania polegają na pobraniu kodu, obrazów, czcionek, informacji o stylu i skryptach, a następnie uruchomieniu (wykonaniu) skryptów i zbudowaniu strony internetowej zgodnie z instrukcjami HTML.
Ten proces nazywa się renderowaniem. Słowo render oznacza „tworzyć” i właśnie to robi przeglądarka, łącząc kod i obrazy w celu renderowania strony internetowej.
Poszczególne zadania renderowania nazywane są wątkami, co jest skrótem od „wątku wykonania”. Oznacza to indywidualną sekwencję działań (w tym przypadku wiele pojedynczych zadań wykonanych w celu wyrenderowania strony internetowej).
W przeglądarce istnieje jeden wątek o nazwie Wątek Główny, który odpowiada za tworzenie (renderowanie) strony internetowej, którą widzi odwiedzający witrynę.
Główny wątek można zwizualizować jako autostradę, na której samochody są symbolem obrazów i skryptów pobieranych i wykonywanych, gdy osoba odwiedza stronę internetową.
Niektóre kody są duże i powolne. Powoduje to zatrzymanie innych zadań i oczekiwanie, aż duży i powolny kod zejdzie z autostrady (zakończ pobieranie i wykonywanie).
Celem jest zakodowanie strony internetowej w sposób, który optymalizuje, który kod jest pobierany jako pierwszy i kiedy kod jest wykonywany, w uporządkowany sposób, tak aby strona internetowa była pobierana w możliwie najszybszy sposób.
Nie trać snu z powodu kodu innej firmy
Jeśli chodzi o podstawowe wskaźniki internetowe, a zwłaszcza z opóźnieniem pierwszego wejścia, odkryjesz, że jest trochę kodu, na który nie możesz wiele poradzić. Jednak prawdopodobnie dotyczy to również Twojej konkurencji.
Na przykład, jeśli Twoja firma jest zależna od Google AdSense (duży skrypt blokujący renderowanie), problem będzie taki sam dla Twojej konkurencji. Pomóc mogą takie rozwiązania, jak leniwe ładowanie za pomocą Google Ad Managera .
W niektórych przypadkach może wystarczyć zrobienie wszystkiego, co w Twojej mocy, ponieważ konkurenci również mogą nie radzić sobie lepiej.
W takich przypadkach najlepiej jest zabrać swoje wygrane tam, gdzie je znajdziesz. Nie przejmuj się stratami, których nie możesz zmienić.
Wpływ JavaScriptu na opóźnienie pierwszego wejścia
JavaScript jest jak mały silnik, który sprawia, że wszystko się dzieje. Kiedy nazwisko jest wprowadzane w formularzu, JavaScript może być tam, aby upewnić się, że wpisano zarówno imię, jak i nazwisko.
Po naciśnięciu przycisku JavaScript może być dostępny, aby poinformować przeglądarkę, aby pojawiła się wiadomość z podziękowaniem w wyskakującym okienku.
Problem z JavaScriptem polega na tym, że musi on nie tylko pobierać, ale także uruchamiać (uruchamiać). To są dwie rzeczy, które przyczyniają się do opóźnienia wejścia.
Jeśli duży plik JavaScript znajduje się w górnej części strony, blokuje on renderowanie pozostałej strony znajdującej się pod nim (stając się widoczne i interaktywne) do momentu zakończenia pobierania i wykonywania tego skryptu.
Nazywa się to blokowaniem strony.
Oczywistym rozwiązaniem jest przeniesienie tego rodzaju skryptów z góry strony i umieszczenie ich na dole, aby nie kolidowały ze wszystkimi innymi elementami strony, które czekają na renderowanie.
Ale może to stanowić problem, jeśli na przykład jest umieszczony na końcu bardzo długiej strony internetowe.
Dzieje się tak dlatego, że gdy duża strona zostanie załadowana i użytkownik jest gotowy do interakcji z nią, przeglądarka nadal będzie sygnalizować, że pobiera (ponieważ duży plik JavaScript jest opóźniony na końcu). Strona może pobierać się szybciej, ale potem może się zawiesić w oczekiwaniu na wykonanie kodu JavaScript.
Jest na to rozwiązanie!
Atrybuty odroczenia i asynchronii
Atrybuty HTML Defer i Async są jak sygnały drogowe, które kontrolują rozpoczęcie i zakończenie pobierania i wykonywania kodu JavaScript.
Atrybut HTML to coś, co przekształca element HTML, coś w rodzaju rozszerzenia celu lub zachowania elementu.
To tak, jak uczysz się umiejętności; ta umiejętność staje się atrybutem tego, kim jesteś.
W takim przypadku atrybuty Defer i Async informują przeglądarkę, aby nie blokowała analizowania kodu HTML podczas pobierania. Atrybuty te informują przeglądarkę, aby główny wątek działał podczas pobierania kodu JavaScript.
Atrybut asynchroniczny
Pliki JavaScript z atrybutem Async zostaną pobrane, a następnie wykonane zaraz po pobraniu. Kiedy zaczyna się wykonywać, jest to punkt, w którym plik JavaScript blokuje główny wątek.
Normalnie plik zablokuje główny wątek, gdy zacznie się pobierać. Ale nie z atrybutem async (lub defer).
Nazywa się to pobieraniem asynchronicznym, gdzie pobiera się niezależnie od głównego wątku i równolegle z nim.
Atrybut async jest przydatny w przypadku plików JavaScript innych firm, takich jak reklamy i udostępnianie społecznościowe — pliki, w których kolejność wykonywania nie ma znaczenia.
Atrybut odroczenia
Pliki JavaScript z atrybutem „ odroczyć ” również będą pobierane asynchronicznie.
Jednak odroczony plik JavaScript nie zostanie uruchomiony, dopóki cała strona nie zostanie pobrana i wyrenderowana. Skrypty odroczone są również wykonywane w kolejności, w jakiej znajdują się na stronie internetowej.
Skrypty z atrybutem defer są przydatne w przypadku plików JavaScript, które zależą od ładowanych elementów strony i kiedy kolejność ich wykonywania ma znaczenie.
Ogólnie rzecz biorąc, atrybutu defer należy używać w przypadku skryptów, które nie są niezbędne do renderowania samej strony.
Opóźnienie wejścia jest różne dla wszystkich użytkowników
Należy pamiętać, że wyniki opóźnienia pierwszego wejścia są zmienne i niespójne. Wyniki różnią się w zależności od odwiedzającego.
Ta różnica w wynikach jest nieunikniona, ponieważ wynik zależy od interakcji, które są specyficzne dla osoby odwiedzającej witrynę.
Niektórzy odwiedzający mogą być rozkojarzeni i nie wchodzić w interakcję do momentu, w którym wszystkie zasoby zostaną załadowane i gotowe do interakcji.
Tak opisuje to Google:
„Nie wszyscy użytkownicy będą wchodzić w interakcję z Twoją witryną za każdym razem, gdy ją odwiedzają. I nie wszystkie interakcje mają znaczenie dla FID…”
Ponadto, pierwsze interakcje niektórych użytkowników będą miały miejsce w złych momentach (kiedy główny wątek jest zajęty przez dłuższy czas), a niektóre pierwsze interakcje będą miały miejsce w dobrych momentach (kiedy główny wątek jest całkowicie bezczynny).
Oznacza to, że niektórzy użytkownicy nie będą mieli wartości FID, niektórzy użytkownicy będą mieli niskie wartości FID, a niektórzy użytkownicy prawdopodobnie będą mieli wysokie wartości FID.”
Dlaczego większość witryn nie spełnia FID
Niestety, wiele systemów zarządzania treścią, motywów i wtyczek nie zostało zbudowanych z myślą o zgodności z tym stosunkowo nowym wskaźnikiem.
To jest powód, dla którego tak wielu wydawców z przerażeniem odkrywa, że ich witryny nie przechodzą testu opóźnienia pierwszego wejścia.
Ale to się zmienia, ponieważ społeczność twórców oprogramowania internetowego reaguje na wymagania dotyczące różnych standardów kodowania ze społeczności wydawców.
I nie chodzi o to, że twórcy oprogramowania tworzący systemy zarządzania treścią ponoszą winę za wytwarzanie produktów, które nie są zgodne z tymi wskaźnikami.
Na przykład WordPress rozwiązał problem w edytorze witryny Gutenberg, który powodował, że osiągał on gorsze wyniki niż mógł.
Gutenberg to wizualny sposób budowania witryn za pomocą interfejsu lub metafory bloków. Jest blok widżetów, blok formularza kontaktowego, blok stopki itp.
Tak więc proces tworzenia strony internetowej jest bardziej wizualny i odbywa się poprzez metaforę bloków konstrukcyjnych, dosłownie budowanie strony z różnych bloków.
Istnieją różne rodzaje klocków, które wyglądają i zachowują się w różny sposób. Każdy indywidualny blok ma odpowiedni kod stylu (CSS), przy czym większość z nich jest specyficzna i unikalna dla tego pojedynczego bloku.
Standardowym sposobem kodowania tych stylów jest utworzenie jednego arkusza stylów zawierającego style, które są unikalne dla każdego bloku. Ma to sens, ponieważ masz centralną lokalizację, w której znajduje się cały kod specyficzny dla bloków.
W rezultacie na stronie, która może składać się z (powiedzmy) dwudziestu bloków, WordPress załaduje style dla tych bloków oraz wszystkich innych bloków, które nie są używane.
Przed Core Web Vitals (CWV) uważano to za standardowy sposób pakowania CSS.
Od czasu wprowadzenia Core Web Vitals praktyka ta jest uważana za rozdęcie kodu.
Nie jest to lekceważenie twórców WordPressa. Wykonali fantastyczną robotę.
To tylko odzwierciedlenie tego, jak szybko zmieniające się standardy mogą napotkać wąskie gardło na etapie tworzenia oprogramowania, zanim zostaną zintegrowane z ekosystemem kodowania.
Przeszliśmy przez to samo przy przejściu na projektowanie stron z myślą o urządzeniach mobilnych.
Gutenberg 10.1 Lepsza wydajność
WordPress Gutenberg 10.1 wprowadził ulepszony sposób ładowania stylów , ładując tylko potrzebne style i nie ładując stylów bloków, które nie będą używane.
To ogromna wygrana dla WordPressa, wydawców, którzy polegają na WordPressie i oczywiście dla użytkowników, którzy odwiedzają strony stworzone za pomocą WordPressa.
Nadszedł czas, aby naprawić opóźnienie pierwszego wejścia
Idąc dalej, możemy się spodziewać, że coraz więcej programistów odpowiedzialnych za CMS, motywy i wtyczki przejdzie na praktyki kodowania przyjazne dla First Input Delay.
Ale dopóki tak się nie stanie, na wydawcy spoczywa ciężar podjęcia kroków w celu poprawy opóźnienia pierwszego wejścia. Zrozumienie tego to pierwszy krok.