Maj Czerwiec 2020 to data, do której od miesięcy przygotowują się specjaliści SEO, webmasterzy i właściciele serwisów internetowych, którym zależy na jak najlepszej widoczności w organicznych wynikach wyszukiwania.

Core Web Vitals – czyli zbiór metryk i wskaźników związanych z szybkością ładowania strony i dobrym UX, o którym pisałem w poprzedniej publikacji CORE WEB VITALS – Co to takiego? Jak się przygotować? to niewątpliwie temat, obok którego nie można przejść obojętnie. Właśnie dlatego w tej publikacji zebrałem moim zdaniem jedne z najistotniejszych porad odnoszących się do prawidłowej optymalizacji zasobów strony mających ogromny wpływ na Core Web Vitals, czyli: LCP, CLS i FID.

Core Web Vitals – optymalizacja zasobów strony

Optymalizacja Obrazów

Obrazy zamieszczane na stronie internetowej to elementy, które mogą mocno wpływać na na wyniki Core Web Vitals. Każda z metryk mierzy bowiem czas renderowania i wczytywania obrazów na stronie, przez co “ciężkie” i długo wczytujące się obrazy mogą negatywnie odbić się na ogólnej ocenie jakości strony. Dlatego ich optymalizacja jest niezbędna.

  1. Redukcja wymiarów obrazów tła

Obrazy ładowane w tle mogą zajmować długi czas ładowania, zwłaszcza przy pierwszym odwiedzeniu strony. Jeżeli na stronie używane są obrazy jako tło, warto zredukować ich wielkość i odpowiednio je skompresować, by wczytywały się jak najszybciej jest to możliwe.

Jeżeli kompresja czy redukcja rozmiaru nie pomagają, warto również rozważyć usunięcie obrazu z tła, lub zastąpienie go jednolitym  kolorem, gradientem lub prostym wzorem, który nie wpływa negatywnie na szybkość ładowania strony.

  1. Usunięcie lub redukcja obrazów na urządzeniach mobilnych Above The Fold

Używanie dużych i nie zoptymalizowanych obrazów, karuzeli, pokazu slajdów ATF na urządzeniach mobilnych nie jest zalecane przez wzgląd na często słabszą jakość połączenia oraz możliwości różnych urządzeń. Użycie mało ważących obrazów lub tekstu może mieć znaczący wpływ na parametry CWV.

Warto również rozważyć usunięcie takich elementów ze strony lub przesunięcie ich Below The Fold.

  1. Wdrożenie Lazy Loading

Wykorzystanie natywnej funkcjonalności lazy loading, np. w Chrome (loading=”lazy”) do odłożenia ładowania elementów (głównie obrazów) poza początkowym widokiem strony może mieć spory wpływ na szybkość wczytywania i renderowania contentu ATL.

  1. Wykorzystanie nowych formatów obrazów

Nowe formaty plików polecane przez Google (JPEG 2000, JPEG XR i WebP) często zapewniają lepszą kompresję niż PNG czy JPG, co przekłada się na szybsze pobieranie i mniejsze wykorzystanie danych na urządzeniach mobilnych.

  1. Optymalizacja rozmiarów obrazów (kompresja)

Kompresja obrazów powinna odbywać się na bieżąco by zapobiegać konieczności wczytywania dużych plików na urządzeniach mobilnych.

  1. Wykorzystanie parametrów szerokości i wysokości w obrazach

Sztywne określenie parametrów rozmiarów zdjęć width i height, które będą wczytywane na stronie pomogą w uniknięciu niepotrzebnego Layout Shift (!)

Optymalizacja kodu CSS

Wraz rozwojem stron internetowych, pliki CSS stają się coraz większe i bardziej rozbudowane, co czyni je jednym z najistotniejszych zasobów stron www. Optymalizacja kodu CSS jest ważnym elementem Core Web Vitals.

  1. Umieść krytyczny kod CSS inline

Wstawienie inline istotnego kodu CSS, odpowiedzialnego za layout i design strony może skrócić czas ładowania strony, poprzez zmniejszenie ilości plików koniecznych do pobrania z serwera aby prawidłowo wygenerować stronę internetową.

  1. Minifikacja plików CSS

Minifikacja, czyli usunięcie wszelkich ozdobników, niepotrzebnych spacji, enterów, wcięć, komentarzy z kodu może go “odchudzić” i mieć wpływ na szybkość pobierania i ładowania przez przeglądarki internetowe, zwłaszcza podczas ładowania zewnętrznych plików CSS.

  1. Konsolidacja plików CSS z kodem strony

Należy unikać przechowywania plików CSS w różnych plikach rozproszonych w całej strukturze kodu strony. Skonsolidowanie kodu CSS zarówno inline, jak i plików zewnętrznych oraz wykonywanie ich dla określonych elementów, gdy jest to konieczne, może zaoszczędzić czas ładowania i zasoby serwerowe.

  1. Optymalizacja wczytywania plików CSS

Bardzo często w modelu ładowania strony, kod CSS jest elementem, który wczytywany jest na samym końcu, po strukturze i zawartości strony, aby całość odpowiednio sformatować. Dodatkowo konieczność wczytania kodu CSS z zewnętrznego pliku może również opóźniać ostateczne załadowanie witryny.

Google zaleca strategię wstępnego ładowania plików CSS, zmuszając przeglądarkę do szybkiego załadowania kodu CSS i trzymając go w gotowości, kiedy będzie potrzebny.

Optymalizacja kodu JavaScript

JavaScript jest często jednym z największych źródeł kodu i opóźnień w ładowaniu stron internetowych. Optymalizacja kodu JS na stronie może znacząco wpłynąć na przyspieszenie jej ładowania oraz poprawić wartości Core Web Vitals.

  1. Minifikacja kodu JS

Podobnie jak w przypadku kodu CSS, tak i JS nie wymaga do prawidłowego działania dodatkowych spacji, przerw czy komentarzy. Usunięcie zbędnych znaków może wpłynąć na rozmiar skryptu i szybkość jego wykonywania na stronie.

  1. Konsolidacja skryptów i ograniczenie ich użycia

Jeżeli strona nie była od dawna aktualizowana, może się okazać, że dzięki funkcjonalności HTML5 i CSS3 można zastąpić niektóre skrypty i wykonywać te same działania dużo szybciej. Przegląd i reorganizacja skryptów w celu znalezienia szybszej i bardziej wydajnej alternatywy, przy jednoczesnym usunięciu zbędnych skryptów może znacząco przyspieszyć stronę.

  1. Odroczenie lub asynchroniczne ładowanie skryptów

Ilość i rozmiar skryptów to główne przyczyny wolnego renderowania stron internetowych. Dzieje się tak dlatego, że przeglądarka musi wyrenderować a później przetworzyć skrypt JS, zanim będzie mogła w pełni dokończyć ładowanie strony.

  • Odroczenie ładowania skryptów daje możliwość przeglądarce na szybsze załadowania strony www, przed wykonaniem skryptów.
  • Asynchroniczność pozwala na jednoczesne ładowanie strony i wykonywanie skryptów.

Korzystanie z tych dwóch funkcji pozwala zrównoważyć opóźnienie związane z używaniem skryptów i przyspieszyć początkowe ładowanie strony.

  1. Usunięcie jQuery Migrate

Aktualizacja jQuery powoduje, że wiele starych wtyczek i skryptów przestało działać. By zyskać na czasie i umożliwić właścicielom stron aktualizację swoich witryn, został wprowadzony moduł Migrate, który umożliwia starszym bibliotekom jQuery działać na stronach korzystających z nowszej wersji.

Warto sprawdzić wtyczki i aplikacje funkcjonujące na stronie, czy któraś z nich używa do funkcjonowania jQuery Migrate. Jeżeli tak jest, warto dane wtyczki zaktualizować lub wymienić. Moduł Migrate może spowalniać działanie strony.

  1. Jeżeli jest to możliwe używaj Google Hosted JS

By zapewnić jak najszybsze ładowanie witryny, warto rozważyć skorzystanie z szeregu standardowych bibliotek JS oferowanych przez Google, zamiast opierać się na niepewnych zewnętrznych dostawcach lub własnym hostingu.

Optymalizacja plików Video

Wraz z rosnącą popularnością plików video, jako stałych elementów contentu strony czy reklam, ich optymalizacja nabiera coraz większego znaczenia dla wskaźników Core Web Vitals.

  1. Używaj obrazów zastępczych dla miniatur video

By ograniczyć ładowanie plików video w tle i generowanie ich miniaturek dla użytkownika, którego intencją wcale nie musi być chęć odtworzenia filmu, warto wykorzystać obraz jako zastępstwo (placeholder) miniatury. Obrazy ładują się dużo szybciej i mogą wyglądać jak odtwarzacz video. Dopiero po kliknięciu, czyli akcji użytkownika, film powinien się załadować i odtworzyć.

  1. Zminimalizuj lub przesuń video Below The Fold

Pliki video mogą być bardzo ciężkie i powodować spore opóźnienia w ładowaniu strony, dlatego zaleca się nie wstawiana ich jako głównych elementów na stronie. Przesunięcie ich na stronie by zdążyły się odpowiednio załadować, może mocno wpłynąć na wartości Core Web Vitals.

Optymalizacja Fontów

Optymalizacja ładowania czcionek może wydawać się drobiazgiem, przez co jest bardzo często pomijana, jednak może ona mieć spory wpływ na jakość i szybkość ładowania strony.

  1. Wstępne wczytywanie czcionek

Warto mieć na uwadze, że przeglądarki podczas ładowania czcionek zachowują się identycznie jak w przypadku skryptów. Jeżeli trzeba załadować konkretną czcionkę to renderowanie strony jest wstrzymywane do czasu uzyskania żądanej czcionki. Wykorzystanie wstępnego wczytywania czcionek, pomaga przyspieszyć ładowanie strony.

  1. Używaj tylko czcionek, których potrzebujesz

Wiele różnych czcionek internetowych po ich wywołaniu wczytuje sporo niepotrzebnych i nieużywanych zasobów, takich jak dodatkowe arkusze znaków czy stylów. Warto przejrzeć ile i jakie zasoby są faktycznie potrzebne do prawidłowego funkcjonowania strony i ograniczyć ilość wczytywanych zasobów.

  1. Gdy jest to możliwe używaj formatu SVG

Tam gdzie to możliwe i uzasadnione, warto wykorzystać pliki SVG zamiast tradycyjnych czcionek. Można je wykorzystać do tworzenia małych, ale skalowalnych elementów.

Optymalizacja Serwera

Jeżeli serwer, na którym postawiona została strona internetowa jest wolny, to nawet najlepsza optymalizacja kodu, skryptów, czy obrazów nie pomogą w poprawie Core Web Vitals. Jest to zatem kluczowy i krytyczny element optymalizacji, na który trzeba zwrócić uwagę.

  1. Przejście na szybszy i bardziej wydajny serwer

Aktualizacja wolnego pakietu serwera może być kluczem do rozwiązania wielu problemów z szybkością ładowania witryny. Warto rozejrzeć się za dostępnymi opcjami i technologiami, jakie oferują firmy hostingowe, bowiem może okazać się, że inna firma zapewni nam znacznie lepsze parametry nawet na hostingu współdzielonym. 

Dla bardziej zaawansowanych rozwiązań internetowych i sporej ilości zasobów, warto także rozważyć hosting dedykowany.

  1. Skorzystanie z Content Delivery Network

Nowoczesne sieci CDN są w stanie obsłużyć większość elementów strony szybciej niż zwykły usługodawca hostingowy w prawie każdych okolicznościach. 

Jako minimum warto rozważyć użycie CDN dla obrazów, filmów i innych multimediów.

  1. Wstępne ładowanie zapytań DNS

Wstępne ładowanie oraz pobieranie zapytań DNS pomaga w zminimalizowaniu opóźnień pomiędzy żądaniem a wyświetleniem konkretnego zasobu.

  1. Wstępne ładowanie pamięci podręcznej cache

Warto mieć na uwadze, że skrypty i wtyczki na stronie uruchamiają się wolniej podczas pierwszych odwiedzin, zanim zawartość strony nie zbuforuje się w pamięci podręcznej. Niestety bardzo często pierwszą wizytę na stronie wykonuje robot Google próbujący zaindeksować stronę i to właśnie jemu serwowana jest wolno działająca strona, a to z kolei ma swoje odzwierciedlenie w wartościach Core Web Vitals.

Dzięki wstępnemu ładowaniu pamięci podręcznej, można obejść lub zminimalizować ten problem i serwować robotom indeksującym szybko ładującą się stronę.

  1. Server-Side Cache

Aby jeszcze bardziej przyspieszyć generowanie i udostępnianie buforowanej wersji strony można skorzystać z oprogramowania Varnish Cache, który działa jako pamięć podręczna po stronie serwera. 

Dzięki temu strona może się szybciej wczytywać przy jak najmniejszej liczbie wywołań serwera.

Dodatkowa optymalizacja

  1. Zminimalizuj użycie zewnętrznych skryptów

Znalezienie złotego środka między optymalizacją szybkości ładowania i działania strony a narzędziami angażującymi użytkownika zdaje się być kluczem do wymagań, jakie stawia obecnie Google.

Warto pamiętać, że wiele wtyczek społecznościowych, takich jak: moduły komentarzy, przyciski do udostępniania czy oceny, najczęściej uruchamiają zewnętrzne skrypty innych firm, które mogą skutecznie spowolnić ładowanie strony. 

Zminimalizowanie wykorzystania takich skryptów, lub zastąpienie ich szybszymi odpowiednikami, może być dobrym rozwiązaniem.

  1. Unikaj wypełniaczy / buforów przed załadowaniem strony

Często zdarza się, że strony, które wolno się ładują, wykorzystują animacje, czy ikony ładowania, których jedynym celem jest wskazanie użytkownikowi, że odbywa się proces ładowania treści na stronie. Tego typu rozwiązania mają negatywny wpływ na wskaźniki Core Web Vitals obciążając wstępny pomiar ładowania.