Core Web Vitals (Podstawowe wskaźniki internetowe)

 

techniczne seo

 


SEO techniczne — Core Web Vitals (CWV)

Jak poprawić CWV?

 

Według badań Google, internauci mobilni skupiają uwagę na ekranie tylko przez 4-8 sekund.
Właśnie masz mniej niż 8 sekund, aby zainteresować użytkownika Twoją stroną.

Przejdź do podstawowych wskaźników internetowych (CWV).

Core Web Vitals mierzy, ile czasu zajmuje wykonanie funkcji skryptu wymaganych do narysowania górnej części treści strony.
Gdy Twoja strona zostanie pozytywnie oceniona przez CWV, oznacza to, że użytkownik najprawdopodobniej nie opuści strony ze względu na długi czas ładowania.

Oczekiwana aktualizacja Page experience

CWV prawdopodobnie stanie się pozycją rankingową.

Ranking Page Experience, który prawdopodobnie będzie wprowadzany stopniowo od połowy czerwca do sierpnia 2021 r., będzie zawierał:

  1. Core Web Vitals. Large Contentful Paint (LCP). First Input Delay (FID). Stabilność wizualna.
  2. Wygoda dla urządzeń mobilnych.
  3. Bezpieczne przeglądanie.
  4. HTTPS.
  5. Brak natrętnych reklam na stronach.

 

 

Nowy raport o stronie w Search Console

 

podstawowe wskazniki internetowe

 


Search Console zawiera teraz raport jakości strony. Zawiera dane z ostatnich 90 dni.

Aby adres URL został uznany za „dobry”, musi spełniać następujące kryteria:

  • Adres URL ma status Dobry w raporcie Core Web Vitals.
  • Według raportu mobilności adres URL nie ma problemów z obsługą urządzeń mobilnych.
  • Na stronie nie ma problemów z bezpieczeństwem.
  • Adres URL jest obsługiwany przez HTTPS.
  • Strona nie zawiera problemów z reklamami lub strona nie została oceniona pod względem jakości reklam.

 

dzialania stron

 

Nowy raport oferuje widżety z linkami do raportów dla każdego z pięciu „Dobrych” kryteriów.

 

sygnaly dotyczace jakosci strony



Large Contentful Paint (LCP)

Mierzona przez punkt na osi czasu wczytywania strony, gdy w widocznym obszarze wyświetlany jest największy obraz lub blok tekstu na stronie.
Strony korzystające z tych samych szablonów stron zwykle dzielą ten sam węzeł LCP.
3/4 stron powinno dotrzeć do LCP w mniej niż 2,5 sekundy.


Czym może być LCP?


Metryka LCP mierzy, kiedy widoczny jest największy element tekstu lub obrazu w widocznym obszarze.
Możliwe elementy, które mogą być węzłem na stronie LCP, obejmują:

• Elementy ‘img’.
• Elementy ‘image’ wewnątrz taga ‘svg’.
• Obrazy elementów ‘video’.
• Obrazy tła są ładowane za pomocą funkcji CSS url ().
• Węzły tekstowe wewnątrz elementów blokowych.

W przyszłości spodziewane są dodatkowe elementy, takie jak ‘svg’ i ‘video’.

Co może być przyczyną złego LCP?

Słaby LCP powoduje cztery typowe problemy:

  1. Długi czas odpowiedzi serwera.
  2. JavaScript i CSS z blokowaniem renderowania.
  3. Wolny czas ładowania zasobów.
  4. Renderowanie po stronie klienta.

Diagnozowanie złego LCP ze względu na wolne czasy odpowiedzi serwera


Czas do pierwszego bajtu (TTFB)


Jeśli ciągle widzisz złe TTFB w swoich danych, oznacza to powolny czas odpowiedzi serwera.
Jak naprawić wolne czasy odpowiedzi serwera
Czas odpowiedzi serwera zależy od wielu czynników, w zależności od stosu technologicznego serwisu.
Oto kilka możliwych sposobów na ulepszenie TTFB:

  • Zoptymalizuj swój serwer.
  • Użyj CDN.
  • Buforowanie.

 

Diagnozowanie złego LCP z powodu blokowania renderowania JavaScript i CSS

Jak naprawić CSS blokujący renderowanie

CSS blokuje renderowanie i wpływa na wydajność krytycznej ścieżki renderowania. Domyślnie CSS jest traktowany jako zasób blokujący renderowanie.
Browser ładuje wszystkie zasoby CSS, niezależnie od ich zachowania blokującego lub nieblokującego.

Zminimalizuj CSS.

Jeśli Twoja strona korzysta z kreatora modułów lub narzędzia do budowania, znajdź wtyczkę, która będzie systematycznie minimalizować skrypty.

Odłóż niekrytyczny CSS.

Jeśli style są używane na innej stronie, utwórz osobny arkusz stylów dla tych stron, które używają go do wywoływania.

Wbudowany krytyczny CSS.

Dołącz krytyczną ścieżkę CSS używaną do treści u góry strony (jak wskazano w raporcie pokrycia kodu) bezpośrednio w nagłówku.

Używaj dynamicznych media-żądań.

Media-żądania to proste filtry, które po zastosowaniu do stylów CSS dzielą style na podstawie typów urządzeń wyświetlających treść.
Korzystanie z dynamicznych media-żądań oznacza, że zamiast obliczać style dla wszystkich widocznych obszarów, wywołujesz i obliczasz te wartości w żądanym obszarze roboczym.

 

Jak naprawić renderowanie blokujące JavaScript?

 

Zminimalizuj i skompresuj pliki JavaScript.

Minifikacja polega na usunięciu zbędnych spacji i kodu. Najlepiej robić to systematycznie za pomocą narzędzia do kompresji JavaScript.
Kompresja obejmuje zmiany algorytmiczne w formacie danych w celu wydajnej komunikacji z serwerem i klientem.

Odłóż nieużywany JavaScript.

Podział kodu dzieli duże fragmenty JS w celu dostarczenia mniejszych pakietów. Następnie możesz pobrać te, które mają znaczenie jako pierwsze, na górę strony.

Zminimalizuj nieużywane polifiły.

Polifiły to fragmenty kodu służące do zapewnienia nowoczesnych funkcji w starszych browser-ach, które ich natywnie nie obsługują.


Jak naprawić skrypty firm trzecich blokujące renderowanie

  • Odłóż wykonanie skryptów.
  • Jeśli skrypt nie wpływa na zawartość u góry strony, użyj atrybutów ‘async’ lub ‘defer’.
  • Usuń Skrypty.
  • Jeśli skrypt używa (iframe) w nagłówku, usuń go.
  • Skonsoliduj skrypty.

I przeanalizuj wartość skryptów firm trzecich – o ile ich obecność jest ważniejsza niż wydajność strony?


Diagnostyka złej jakości LCP z powodu wolnego ładowania zasobów


Oto sposoby zwalczania najczęstszych przyczyn powolnego ładowania zasobów:


1. Optymalizuj i kompresuj obrazy.
Nikt nie potrzebuje pliku .png o wielkości 10 MB.
2. Wstępnie ładuj krytyczne zasoby.
Jeśli zasób jest częścią ścieżki krytycznej, prosty atrybut rel = ‘preload’ informuje browser, aby pobrał go tak szybko, jak to możliwe.
3. Kompresuj pliki tekstowe.
4. Responsywny układ oparty na metodzie połączenia sieciowego.
Urządzenie mobilne w sieci 4G prawdopodobnie nie będzie musiało pobierać zasobów zorientowanych na wyświetlanie na monitorze Ultra 4K.
5. Zasoby cache

 

Core Web Vitals to sposób na pomiar wydajności strategii renderowania.


Wszystkie opcje renderowania tworzą strony internetowe, ale metryki CWV mierzą, jak szybko wykonywane jest to, co najważniejsze, i kiedy ma to znaczenie.

 

Jak naprawić renderowanie po stronie klienta


1. rozszczepienie wykorzystanie kodu i funkcje wbudowane w nagłówku dla funkcjonalności, znajdującej się wcześniej. Skrypty wbudowane muszą mieć mniej niż 1 KB.
2. Użyj renderowania po stronie serwera.
Jeśli na Twoich serwerach działają elementy JS, możesz zwrócić w pełni wyrenderowany kod HTML. Zauważ, że zwiększy to TTFB, ponieważ skrypty są wykonywane przed odpowiedzią serwera.
3. Użyj wstępnego renderowania.
W czasie kompilacji uruchom skrypty i przygotuj kod HTML na przychodzące żądania. Ta opcja zapewnia najlepszy czas odpowiedzi serwera, ale nie działa w przypadku stron z często zmieniającymi się produktami lub cenami.
Żeby było jasne: renderowanie dynamiczne nie jest rozwiązaniem renderowania po stronie klienta. Może to nawet stać się problemem po stronie klienta.

 

First Input Delay (FID) Opóźnienie pierwszego wejścia


Wskazuje reakcję na dane wejściowe użytkownika.

Jest mierzony przez czas od momentu pierwszej interakcji użytkownika ze stroną do momentu, w którym browser może faktycznie rozpocząć przetwarzanie w odpowiedzi na nią.

3/4 strony powinny mieć FID w <= 100 milisekund.
Do testów użyj całkowitego czasu blokowania (TBT)

Ponieważ FID jest dostępny tylko jako dane testowe, testy muszą wykorzystywać całkowity czas bloku. Osiągają ten sam efekt końcowy przy różnych progach.

TBT jest mierzony przez całkowity czas, w którym główny wątek jest zajęty zadaniami przekraczającymi 50 ms.
Musimy zmieścić się w <= 300 milisekund.

Co powoduje złe FID?
Zły FID może wystąpić, ponieważ JS przejmuje główny wątek, co oznacza, że musisz czekać na interakcję użytkownika.

Na jakie elementy strony ma wpływ FID?
FID to sposób na pomiar aktywności głównego nurtu. Zanim elementy na stronie będą mogły reagować na interakcję użytkownika, musisz ukończyć uruchomione zadania w głównym wątku.

Oto niektóre z najczęstszych elementów, na które użytkownik czeka:

1. Pola tekstowe.
2. Flagi.
3. Przyciski radiowe (obszar wprowadzania i tekst).
4. Listy rozwijane (wybierz).
5. Linki

 

Jak naprawić zły FID

 

Przestań ładować wiele skryptów innych firm.
Kod innej firmy uzależnia Twoją wydajność od kogoś innego.
Polegasz na ich skryptach i ich skuteczności.

Uwolnij główny wątek pobierania, dzieląc większe zadania.
Na przykład wysyłasz jeden ogromny pakiet JS na stronę, w tym pakiecie jest wiele funkcji, które nie wpływają na stronę.
Niezależnie od tego, każda funkcja JS musi zostać załadowana, przeanalizowana, skompilowana i wykonana.
Dzieląc ten duży pakiet na mniejsze i wysyłając tylko te, które są w użyciu, zwalniasz główny wątek.

Sprawdź swojego menedżera tagów.
Menedżery tagów mogą być długimi programami obsługi wprowadzania danych, blokującymi ładowanie.

Wykonuj pakiety JS w żądanej kolejności.


Użyj rel = "preload".


Niewystarczająco? Dodaj atrybut "asynch".


Mało? Odrocz wykonanie skryptu za pomocą atrybutu "defer".

Cumulative Layout Shift - Zbiorcze przesunięcie układu (CLS)


Odpowiedzialny za stabilność wizualną.

Pomiar opiera się na liczbie klatek, w których element (elementy) są wizualnie przesunięte oraz całkowitej odległości, w pikselach, o jaką element (elementy) są przesuwane.

CLS jest jedynym Core Web Vital, którego nie mierzono w czasie. Zamiast tego CLS jest metryką obliczeniową.
¾ strony muszą mieć wynik CLS > 0,10.

Diagnozowanie złego CLS


Co można liczyć w CLS?

Jeśli element pojawia się w oryginalnej rzutni, staje się częścią obliczenia metryki.
Jeśli wczytasz stopkę przed główną treścią i pojawi się ona w widocznym obszarze, stopka jest częścią Twojego (okropnego) wyniku CLS.

Co powoduje zły CLS?

To może być Twoja informacja o plikach cookie

Jak naprawić zły CLS

W obrazach i filmach zawsze umieszczaj atrybuty szerokości i wysokości.
Ale responsywne projektowanie stron internetowych ma mniej deklaracji wysokości i szerokości. Efektem jest transformacja stron po pojawieniu się obrazu na ekranie.
Najlepiej używać arkuszy stylów browser-a użytkownika opartych na proporcjach obrazu.

Reklamy stron trzecich w witrynie nie mają zdecydowanie pozytywnego wpływu na wydajność witryny, a w szczególności CLS.

Lepiej od razu zidentyfikować największą reklamę, która może być użyta w boksie reklamowym i zarezerwować miejsce reklamowe.

Jeśli nie ma jeszcze ogłoszenia, wstaw wtyczkę. Jest to lepsze niż zmieniający się wygląd strony póżniej.

Unikaj wklejania nowej treści na istniejącej treści.

Unikaj reklam u góry strony.

Wstępnie ładuj czcionki i ważne zasoby.

Późne ładowanie czcionki powoduje miganie i ponowne ładowanie strony.

Wstępne ładowanie informuje browser, że chcesz otrzymać czcionkę, zanim browser ją wykryje, ponieważ jest to ważne dla bieżącej strony.

Unikaj łańcuchów zasobów potrzebnych do tworzenia treści na górze strony.

Tworzenie łańcucha występuje, gdy wywołujesz zasób, który wywołuje zasób. Jeśli zasób krytyczny jest wywoływany przez skrypt, nie można go wywołać, dopóki ten skrypt nie zostanie wykonany.

Unikaj document.write()
Nowoczesne browasery obsługują parsowanie z wyprzedzeniem głównego strumienia pobierania.
Zaczynają działać z wyprzedzeniem, gdy skrypty są ładowane i wykonywane - ale pojawia się document.write() i deklaruje, że wszystko, co zostało zrobione wcześniej, było bezużyteczne.

Przyszłość metryk CWV


Google zamierza co roku aktualizować składniki Page Experience. Przyszłe metryki CWV będą tak samo otwarte do użytku, jak w momencie, gdy zostały pierwotnie wydane.
Pozwoli to specjalistom SEO ostrożniej podejść do kwestii optymalizacji strony i z wyprzedzeniem przewidzieć zmiany w algorytmie rankingu stron.

Jako specjaliści SEO możemy diagnozować i dostarczać rozwiązania poprawiające komfort użytkowania. Optymalizacja technicznego SEO — organiczna wydajność strony jest ogólnym odzwierciedleniem jej kondycji. Enjoy organic SEO & Market your website in UK

 

więcej o SEO i pozycjonowaniu stron

  • SEO dla nowej strony www   SEO dla nowych stron internetowych Pozycjonowanie to jeden z najlepszych sposobów znalezienia Twojej strony www przez potencjalnych klientów w wyszuk... 4751 views dvmagic.team
  • Czynniki rankingowe Google, które wcale ...     Czy to prawda, że wskazówki społecznościowe, dostępność, mapy stron XML, ilość treści i inne czynniki są czynniki rankingowy Google? Ale nie... 5924 views dvmagic.team