Wyeliminuj blokujący renderowanie kod JavaScript i CSS
Jednym z częściej występujących zaleceń w narzędziu Google PageSpeed Insights jest informacją o kodzie „blokującym” renderowanie witryny przez roboty wyszukiwarek. Najczęściej dotyczą one właśnie plików JS oraz CSS odpowiadających za warstwę wizualną witryny. W praktyce jednak często oznacza to, że kod nie tyle co blokuje, a znacząco opóźnia proces wyrenderowania strony. W w wyniku tego wskaźnik szybkości ładowania strony maleje, co może mieć wpływ na jej pozycjonowanie.
Błędy te pojawiają się w momencie wykorzystania zbyt dużej ilości plików JS, CSS, czy z posługiwania się zewnętrznymi plikami np. font (chociażby skorzystanie z usługi Google Font). Aby skutecznie rozwiązać te problemy należy gruntownie przeanalizować kod źródłowy witryny – lista plików, które należy sprawdzić dostępne są w wyniku testu narzędzia.
Jak poprawić wynik?
Samo Google podpowiada kilka rozwiązań tej sytuacji. Większość z nich wymaga zaawansowanej wiedzy technicznej oraz biegłą znajomość technologii JavaScript oraz CSS. Może się okazać, iż optymalizacja strony www oraz bardzo duży nakład pracy nad poprawą tych parametrów nie wpłynie znaczące na pozycjonowanie strony.
Przykładowe rozwiązania:
korzystanie z ogólnodostępnych czcionek lub ładowanie ich z własnego serwera,
wdrożenie prostych instrukcji JavaScript bezpośrednio w kodzie,
kompresja (minifikacja) plików stylu CSS oraz niestosowania stylu in-line,
ładowanie asynchroniczne plików JS,
graniczenie do minimum pobierania plików JS z serwisów zewnętrznych.