Zasoby blokujące renderowanie mogą znacząco wpływać na prędkość witryny, a co za tym idzie, wyniki pozycjonowania. 

Czym są zasoby blokujące renderowanie?

Zasoby blokujące renderowanie to te elementy, które wstrzymują pełne wyświetlenie strony internetowej, do momentu, aż się załaduje. Mogą to być np. czcionki, pliki HTML, CSS lub JavaScript. 

Kiedy wyszukiwarka natknie się na taki element, przestaje pobierać kolejne, do momentu pełnego załadowania blokującego zasobu. Przyczynia się to do wydłużania czasu wyświetlenia całej strony.

Dlaczego warto wyeliminować zasoby blokujące renderowanie?

Długi czas ładowania strony nie wpływa korzystnie ani na doświadczenia użytkowników, ani na postrzeganie strony przez roboty wyszukiwarek. 

Identyfikacja i eliminacja zasobów blokujących renderowanie ma jednak więcej zalet.

Mniejsze zużycie budżetu robotów wyszukiwarek

Roboty wyszukiwarek mają ograniczone zasoby dla każdej strony. Jeśli chcemy, aby jak najwięcej podstron zostało zaindeksowane, powinniśmy odpowiednio zarządzać dostępnym budżetem. Ograniczenie zasobów blokujących renderowanie może w tym pomóc.

Mniejszy rozmiar pliku DOM

Niepoprawnie zakodowane wtyczki lub motywy i tworzenie tagów w DOM przy użyciu JavaScriptu to jedne z kilku przyczyn zwiększania się rozmiaru całego pliku. To z kolei wymusza wykorzystanie większej mocy do załadowania strony, co spowalnia cały proces. Utrzymanie optymalnego rozmiaru pliku DOM poprawia wydajność witryny i jest przyjazne dla użytkownika.

Mniej plików CSS i JavaScript do pobrania

Pobieranie plików CSS i JS może spowalniać ładowanie strony. Usunięcie nieużywanych fragmentów zmniejszy liczbę plików do pobrania, co przyspieszy ładowanie całej witryny.

Dobre doświadczenia użytkowników

Zasoby blokujące renderowanie spowalniają ładowanie witryny. Co więcej, mogą zmniejszyć wydajność urządzenia użytkownika. Im mniej zasobów potrzebnych do załadowania strony, tym doświadczenia użytkownika z użytkowania serwisu będą lepsze.

Lepsza wydajność strony

Eliminacja zbędnych zasobów blokujących renderowanie wpłynie pozytywnie na ogólną wydajność strony. Wydajna strona to zadowoleni użytkownicy i szansa na wysokie pozycje w wyszukiwarkach.

Jak zidentyfikować zasoby blokujące renderowanie?

Do identyfikowania zasobów blokujących renderowanie można wykorzystać darmowe narzędzia.

Google PageSpeed Insights

Jest to bardzo znane narzędzie, które wskazuje konkretne elementy wpływające na spowolnione ładowanie strony. 

Wystarczy wkleić link do strony i kliknąć “Analizuj”

Po chwili narzędzie zwróci nam raport, z którego można dowiedzieć się, jakie wyniki osiąga strona dla urządzeń mobilnych i stacjonarnych oraz jak przyspieszyć jej ładowanie. 

Fragment przykładowego raportu z PageSpeed Insights.

Chrome DevTools

Do identyfikacji zasobów blokujących renderowanie można też z Chrome DevTools. W oficjalnej dokumentacji można znaleźć poradnik, jak skorzystać z Chrome DevTools.

Prostszym rozwiązaniem może się jednak okazać użycie PageSpeed Insights.

Identyfikacja krytycznego i niekrytycznego JS i CSS przy użyciu Chrome DevTools.

Krytyczna ścieżka renderowania

Czym jest krytyczna ścieżka renderowania?

Są to wszystkie kroki, jakie wyszukiwarka musi przejść, aby wyświetlić całą stronę. Zaczyna się przy pierwszym pobraniu danych przez wyszukiwarkę i kończy na wyświetleniu strony ze wszystkimi elementami. 

Przy poprawnej optymalizacji, cały proces powinien trwać bardzo krótko – dosłownie ułamki sekundy.

Elementy krytycznej ścieżki renderowania

Wstępne ładowanie elementów strony

Ładowanie wielu podstron w tym samym czasie może przeciążać serwery i w konsekwencji prowadzić do powolnego działania strony. Aby temu zapobiec, można skorzystać z wcześniejszego ładowania niektórych elementów. 

Jak to zrobić?

CSS:

[przykładowy fragment kodu dla preload css]

JS:

[przykładowy fragment kodu dla preload js]

Czcionki:

[przykładowy fragment kodu dla preload fontów]

Obrazki:

[przykładowy fragment kodu dla preload obrazków]

Krytyczny CSS 

Jest to najpotrzebniejszy fragment kodu CSS, który pozwala poprawnie wyświetlić pierwszą widoczną część strony (above the fold). Służy pomocą przy wyświetlaniu elementów na stronie, kiedy jest wykorzystywane asynchroniczne ładowanie kodu.  

Pobieranie długich arkuszy stylowania może trwać długo, dlatego wyodrębnienie krytycznego CSS jest zalecane szczególnie dla stron z rozbudowanym stylowaniem.

Istnieją narzędzia i wtyczki, które pomagają w określeniu krytycznego CSS, np. wtyczka LiteSpeed Cache.

Opóźnienie ładowania plików JS

To rozwiązanie polega na opóźnieniu ładowania plików JS, do momentu załadowania wszystkich krytycznych elementów na stronie. Ma jednak kilka wad:

• ryzyko niepoprawnego wyświetlenia strony 
• ryzyko błędów na stronie, w przypadku opóźnienia ładowania plików niezbędnych do działania funkcjonalności interaktywnych 
• ryzyko ogólnych błędów w działaniu strony

“Early Hints”

Early Hints – kod 103 – podpowiadają, które zasoby warto pobrać, zanim jeszcze strona zacznie się ładować. Mogą przynieść znaczące korzyści, szczególnie dla rozbudowanych stron.

Wdrażanie Early Hints wymaga jednak zaawansowanych umiejętności. Konieczna jest też szczegółowa analiza, wczytywanych na stronie zasobów.

Optymalizacja krytycznej ścieżki renderowania

Zbyt długa krytyczna ścieżka renderowania oznacza frustrację użytkowników i prawdopodobnie opuszczenie strony. Aby tego uniknąć, trzeba wiedzieć, jak zoptymalizować ten proces. 

• zoptymalizować zasoby
• nadać priorytety treściom i pobierać ważne elementy jak najwcześniej
• skompresować pliki zasobów krytycznych

Sposoby na zmniejszenie liczby zasobów blokujących renderowanie

Istnieje kilka sposobów na zmniejszenie liczby zasobów blokujących renderowanie. Warto przyjrzeć się dokładniej każdemu z nich.

Rezygnacja z dodawania CSS przy użyciu reguły “import”

Mogłoby się wydawać, że “import” pozwala na utrzymanie porządku w kodzie. Istnieje jednak ryzyko pogorszenia ogólnego funkcjonowania strony. Dlaczego? Strona będzie się ładować wolniej, bo konieczne będzie pobranie wszystkich plików przed jej wyświetleniem.

Optymalizacja plików JSS i CSS

W przypadku stron opartych o WordPressa zalecane jest korzystanie z wtyczek, optymalizujących pliki JSS i CSS. 

W przypadku innych stron dobrym pomysłem będzie skorzystanie z usług doświadczonego dewelopera, który dokona optymalizacji ręcznie.

Strona ze zoptymalizowanymi plikami będzie ładować i wyświetlać się szybciej.

Korzystanie z domyślnych czcionek

Strony, na których wykorzystywane są czcionki z zewnętrznych źródeł, ładują i wyświetlają się wolniej. 

Warto więc rozważyć wykorzystanie dostępnych domyślnie czcionek, tym bardziej że często można znaleźć podobne do tych ze źródeł zewnętrznych.

Stosowanie dobrych technik kodowania i łączenie plików

Poprawnie zoptymalizowany kod również pozytywnie wpłynie na prędkość wyświetlania strony. Warto stosować się do aktualnych, dobrych praktyk przy tworzeniu kodu.

Na renderowanie strony pozytywnie wpłynie także łączenie plików. Jeśli np. strona ma kilka plików JS, które mogłyby być połączone w jeden – warto to zrobić.

Zasoby blokujące renderowanie – podsumowanie

Aby wyeliminować zasoby blokujące renderowanie, należy zacząć od identyfikacji stron, które wolno się ładują. Następnie sprawdzić, co można w nich poprawić, wykorzystując np. przedstawione wyżej elementy i wprowadzić modyfikacje.

Warto przyjrzeć się zasobom blokującym renderowanie, aby poprawić działanie strony i uzyskać lepsze wyniki w wyszukiwarkach.