Jak wyeliminować zasoby blokujące renderowanie

O jakie zasoby chodzi?

Na początek wyjaśnijmy czym są w ogóle wspomniane zasoby. Tego pojęcia bardzo często używany także na naszym blogu i odnosi się ono głównie do wszelkiego rodzaju treści, które znajdują się na stronie.

Takimi zasobami mogą być np.:

• audio: pliki audio osadzane jako <audio>;
• document: dokumenty HTML osadzane w ramce <frame> lub <iframe>;
• embed: osadzone treści wewnątrz tagu <embed>;
• fetch: zasoby pobierane za pomocą metody fetch lub żadania XHR takie jak ArrayBuffer lub JSON file;
• font: pliki czcionek takie jak .woff, .woff2, .eot, czy .ttf;
• image: zdjęcia, obrazki, grafiki  w formatach takich jak .png, .jpg, .jpeg, .webp, .jp2, jpx, .jpm, .jxr, .hdp, .wdp;
• object: zasodzby osadzane w elemencie<object>;
• script: pliki JavaScript;
• style: pliki styli CSS;
• track: pliki WebVTT;
• worker: skrypty JavaScript Web worker lub Shared Worker.
• video: pliki wideo osadzane jako <video>.

Nie wszystkie jednak zasoby są na stronie zawsze potrzebne lub od razu po jej wczytyniu. Dotyczy to szczególnie np. platformy WordPress, która tak jak inne systemy CMS posiada wiele bibliotek i elementów, które mogą być zbędne i opóźniać wczytanie strony. Nazywamy je wtedy jako zasoby blokujące renderowanie, czyli takie, które wstrzymuję pełne wyświetlenie strony internetowej WordPress do czasu, aż zostanie ona załadowana.

Czym są zasoby blokujące renderowanie?

Pojęcie te jest znane przede wszystkim z narzędzia Google PageSpeed Insight, które w taki o to sposób prezentuje zasoby, które według tego narzędzia należy wyeliminować:

Nie oznacza to jednak, że wszystkie zasoby, które w tym narzędziu blokują renderowanie strony należy wykluczyć. Niektóre z nich mogą być wciąż niezbędne do poprawnego wygenerowania witryny. Jednak jest to niewątpliwie jeden z najważniejszych kroków przyspieszania strony WordPress oraz jej optymalizacji. O tym jak tego dokonać bez specjalistycznej wiedzy przeczytasz w dalszej części tego poradnika.

To co musisz teraz wiedzieć to jak dokładnie zasoby blokujące renderowanie wpływają na czas ładowania strony internetowej.

Korzystając z narzędzia Google PageSpeed Insight znajdziesz na liście głównie takie pliki [wraz ze ścieżkami URL] jak:

• Cascading Style Sheets [format .css]
• JavaScript [format .js]

Pierwsze z nich dotyczą styli strony internetowej, drugie natomiast wykonywanych skryptów. Zdecydowanie największy wpływ na czas ładowania strony internetowej mają skrypty, jednak odpowiednio pomniejszone, połączone i opóźnione pliki CSS również potrafią przynieść wymierne korzyści oraz poprawić wynik w Google. Nie chodzi jednak o to, aby osiągnąć w narzędziu Google PageSpeed Insight 100/100 pkt., a o to, aby strona rzeczywiście wczytywała się szybko oraz była dobrze oceniana przez Google. Ma to wpływ na komfort Twoich użytkowników oraz wynik w SEO.

Wracając do tematu zasobów blokujących renderowanie musisz zrozumieć jak wygląda proces wczytywania strony internetowej. Jest to bowiem pewnego rodzaju kolejka elementów wykonywana przez przeglądarkę internetową. Są one ładowane najczęściej zgodnie z kolejnością wykonywania funkcji, czy też napisanego kodu, jednak istnieje możliwość, aby wpłynąć na ten proces przyspieszając to zadanie. Może bowiem zdarzyć się, zwłaszcza w sytuacji, gdy korzystasz z darmowych lub płatnych motywów WordPress, że niektóre jej elementy nie są od razu potrzebne i mogą zostać przesunięte na koniec „kolejki”. W ten sposób strona internetowa zacznie od ładowania tylko tych styli i skryptów [oraz np. czcionek, zdjęć, tekstu], które pozwalają na jej pełne wyrenderowanie, czyli wizualną prezentację.

Usuwając więc zasoby blokujące renderowanie tak naprawdę jedynie minimalizujemy, łączymy oraz opóźniamy wczytywanie zasobów, które są mniej istotne. Niestety, proces ten jest sam w sobie dosyć skomplikowany i zazwyczaj wymaga dużej wiedzy oraz technicznej analizy strony. Część informacji podpowiada Ci samo Google we wspomnianym narzędziu, jednak bez wnikliwego sprawdzenia kodu strony się nie obejdzie 🤷‍♂️

Możesz skorzystać z pomocy naszych ekspertów klikając w ten link lub spróbować zrobić to samodzielnie. Jeżeli posiadasz stronę WordPress to istnieje prosty sposób na to jak zrobić to automatycznie za pomocą wtyczki ☺️

Jak wyeliminować zasoby blokujące renderowanie

Mowa o Autoptimize, o której wspominaliśmy już w tym wpisie: Najlepsze darmowe wtyczki do WordPress. Autoptimize to narzędzie, które pobierzesz bezpłatnie z repozytorium WordPress, a które to pozwala na optymalizację strony internetowej poprzez minifikację, łączenie oraz opóźnianie ładowania plików CSS, JS i HTML, czyli to czego potrzebujemy. Jej konfiguracja jest bardzo prosta i umożliwi Ci wyeliminować zasoby blokujące renderowanie strony internetowej.

Gdy już zainstalujesz wtyczkę Autoptimize przejdź do zakładki Ustawienia i wybierz w niej pozycję Autoptimize. Znajdziesz tam kilka sekcji, które musisz skonfigurować jak na poniższych screenach.

Zasoby JS blokujące renderowanie

Pierwsza sekcja umożliwia optymalizowanie plików JS oraz ich agregację tj. łącznie. Dzięki temu będą one wczytywane bez blokowanie renderowanie z atrybutami async lub defer. Zaznacz tylko dwa pierwsze checkboxy i sprawdź, czy strona wczytuje się poprawnie. Tak będzie w 99% przypadków. Jeżeli jednak na stronie nie będą działać pewne elementy jak np. wyświetlanie zdjęć to musisz tutaj wrócić i odznaczyć opcję Agregować pliki JS?.

Zasoby CSS blokujące renderowanie

Kolejny krokiem jest optymalizacja styli CSS. Zaznacz dwa pierwsze checkboxy, dzięki czemu przestaną one blokować renderowanie strony WordPress. Możesz zaznaczyć także opcję Łącz również CSS w treści strony?, ale spowoduje to szybkie powiększanie pamięci podręcznej wtyczki. Pamiętaj, aby również to ustawienia sprawdzić, czy nie powoduje problemów na stronie WordPress.

Zasoby HTML blokujące renderowanie

Ostatnia opcja dotyczy optymalizacji kodu HTML i ją też należy zaznaczyć. Teraz zapisz ustawienia i gotowe ☺️ Autoptimize na podstawie wybranej konfiguracji samodzielnie przeanalizuje kod strony i wybierze te zasoby, które powinien zoptymalizować. W pozostałych zakładkach znajdziesz inne przydatne opcje, które również warto ustawić.

Oczywiście podobne zadanie możesz wykonać za pomocą innych narzędzi, jednak naszym zdaniem najlepszy efekty daje właśnie wtyczka Autoptimize. Na sam koniec pozostaje ponownie sprawdzić wynik strony w Google PageSpeed Insight.

Napewno przybędzie tam kilka punktów, a lista zasobów blokujących renderowanie ulegnie zmniejszeniu 💁‍♂️

Wyeliminuj zasoby blokujące renderowanie razem z nami

Skontaktuj się z nami, aby uzyskać od nas pomoc przy eliminowaniu zasobów renderowania strony internetowej. Pomożemy Ci zarówno w konfiguracji wtyczki jak i ręcznej technicznej analizie strony WordPress pod kątem wydajności. Kliknij w ten link i napisz nam jakiej pomocy potrzebujesz ☺️ do usłyszenia ✋