O co tyle szumu z tymi Core Web Vitals?
Google planuje w niedalekiej przyszłości uruchomić indeksowanie skupione na wersjach mobilnych stron tzw. Mobile First Index. Co jakiś czas słychać, że pojawiają się kolejne aktualizacje sprawiające, że strony mobilne radzą sobie w wynikach wyszukiwania lepiej i lepiej.
Pełne skupienie się Google na wersjach mobilnych stron, niejako poprzedzone zostało wprowadzeniem nowych metryk w teście PageSpeed Insights czy raporcie Lighthouse. Chodzi o Podstawowe Wskaźniki Internetowe czyli Core Web Vitals.
Core Web Vitals (CWV) to wskaźniki które określają – w dużym skrócie – jak szybko strona renderuje się oraz jak reaguje na akcje użytkownika. Szczegółowe informacje o CWV w tym jak dokładnie są wyliczane wskaźniki oraz jaki jest zamysł tego rozwiązania, znaleźć można pod adresem: https://web.dev/vitals. Tutaj pozwolę sobie opisać najistotniejsze elementy związane ze wskaźnikami. Mam nadzieję, że pomoże to także tym mniej technicznym osobom „wejść w temat”.
Core Web Vitals – podstawowe informacje
Niezależnie czy nasza strona obecnie wczytuje się szybko czy nie też nie, analiza wskaźników CWV jest zawsze ciekawą lekturą i pcha webmasterów oraz SEO do ciągłego ulepszania ich witryn.
Każdy z 4 parametrów widocznych w teście PageSpeed Insight będący na czerwono lub pomarańczowo, jest potencjalnie problemem dla budowania lepszej widoczności w Google. Poprawa tych wskaźników może sprawić, że widoczność strony, poprawi się w dosyć znaczny sposób. Osobiście wiele razy widziałem, jak strony po poprawieniu wskaźników notowały dosyć spore wzrosty w widoczności!
Ogólnie warto zadbać o to aby w części <head> strony, ładowane do przeglądarki użytkownika były przede wszystkim ważne, potrzebne skrypty i style. Pozostałe, dodatkowe style i skrypty mogą być ładowane w okolicach znacznika </body>.Warte podkreślenia jest to, że sporo zasobów ładowanych jest poprzez cloudflare co także wpływa pozytywnie na prędkość ładowania się strony. Warto zadbać aby te zasoby był możliwie odchudzone z niepotrzebnego kodu. Wskazana jest minifikacja oraz połączenie wielu małych plików w jeden większy.
Jak zadbać o poprawę wskaźników Core Web Vitals?
Largest Contentful Paint – Największe wyrenderowanie treści
LCP (Largest Contentful Paint) to w dużym skrócie, wartość wskazująca czas wymagany do wyrenderowania największego obrazka na podstronie lub największego bloku widocznego tekstu w obszarze roboczym (viewport). Największy wpływ na wartość LCP mają takie elementy jak:
- Znaczniki <img> bez określonej wysokości i szerokości (“na sztywno”)
- Znaczniki <image> wewnątrz znaczników <svg>
- Znaczniki <video>
- Elementy ładowane z obrazkiem tła poprzez selektor CSS url().
- Znaczniki blokowe (np. div) które zawierają węzły treści lub inne powiązane z wyświetlaniem treści znaczniki (np. listy). Generalnie treść powinna być wyświetlana przede wszystkim w znaczniku <p> lub podobnych.
Najprawdopodobniej nałożenie na obrazki w listingu sztywnych wysokości i szerokości, pozwoli znacząco obniżyć wartości LCP.Więcej o LCP: https://web.dev/lcp/.
First Input Delay – Pierwsze wyrenderowanie treści
Kolejny wskaźnik warty uwagi to FID (First Input Delay). FID mierzy czas jaki potrzebny jest od interakcji użytkownika ze stroną do momentu gdy przeglądarka będzie w stanie obsłużyć poprawnie żądanie. Takim działaniem może być np. wywołanie menu poprzez akcję JavaScript lub czas potrzebny do nawiązania połączenia z kolejną podstroną wywołaną poprzez kliknięcie w link.Najczęściej FID jest wysoki w sytuacji gdy zamiast obsługiwać zapytanie/akcję użytkownika, strona zajęta jest pracą nad np. jakimś skryptem JS. Może to być też kwestia tego, jak szybko działa połączenie strony z bazą danych czyli wprost – jak dobrze zoptymalizowane są zapytania do bazy.Więcej o FID: https://web.dev/fid/.
Cumulative Layout Shift – Skumulowane przesunięcie układu
Ostatnim ale równie istotnym wskaźnikiem jest CLS (Cumulative Layout Shift). W dużym skrócie, chodzi o to, jak zmienia się wygląd/szablon/widok przeglądanej strony. Chodzi o to, że po włączeniu jakiejś podstrony, nie powinna ona zanadto zmieniać swojego ustawienia czy wyglądu. Jeżeli jakaś treść pojawiła się w miejscu X to nie powinna z powodu doładowania jakiegoś nowego elementu przesunąć się do miejsca Y. Taka sytuacja może mieć bowiem negatywny wpływ na odczucia użytkowników oraz wprost wpływa na wartość CLS. Można powiedzieć, że CLS jest karą naliczaną przez Google za każde niespodziewane przemieszczenie się treści na stronie.Więcej o CLS: https://web.dev/cls/.
Jak analizować Core Web Vitals?
Do analizy CWV (Podstawowych wskaźników internetowych) warto korzystać z raportu Lighthouse dostępnego w każdej przeglądarce opartej o Chromium (np. Egde, Chrome) lub poprzez link: Lighthouse | Tools for Web Developers | Google Developers. Istnieją także wtyczki do przeglądarki które mogą być pomocne, tak samo jak zewnętrzne raporty.
Przeglądając wpis Ogli Zarzecznej natrafiłem na kilka naprawdę fajnych i pomocnych rozwiązań które pomagają audytoć CWV ale także – raportować uwagi do klientów. Zachęcam do odwiedzenia wpisu Olgi tu: Tools To Measure Core Web Vitals | SEOSLY
Ze swojej strony mogę powiedzieć, że warto skorzystać z
Wtyczki do chromium
- CLS Visualizer – Chrome Web Store (google.com)
- Core Web Vitals Annotations – Chrome Web Store (google.com)
Oraz narzędzia raportujące wskaźniki Core Web Vitals:
- https://webpagetest.org/
- https://web.dev/measure/
- https://gtmetrix.com/
A tu narzędzie które pozwoli Wam stworzyć GIF pokazujący zmiany we wskaźnikach Core Web Vitals:
- https://defaced.dev/tools/layout-shift-gif-generator/
Gorąco polecam sprawdzić te narzędzia i raporty – potrafią dostarczyć wiele cennych informacji!
Dodaj komentarz