Usuń kod JavaScript blokujący renderowanie

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje, że w części strony widocznej na ekranie znajduje się odwołanie do blokującego zewnętrznego pliku JavaScript.

Opis

Zanim przeglądarka będzie mogła wyrenderować stronę, musi utworzyć drzewo DOM przez analizę znaczników HTML. Gdy w trakcie tego procesu parser napotka skrypt, musi go zatrzymać i wykonać, zanim będzie mógł kontynuować analizowanie kodu HTML. W przypadku zewnętrznego skryptu parser jest również zmuszony do oczekiwania na pobranie zasobu, co może spowodować jedną lub więcej operacji przesyłania danych w obie strony i opóźnić czas pierwszego wyrenderowania strony. W artykule Dodawanie funkcji interaktywnych przy użyciu JavaScriptu dowiesz się więcej o wpływie JavaScriptu na krytyczną ścieżkę renderowania.

Rekomendacje

Unikaj blokowania JavaScriptu i ograniczaj jego użycie, zwłaszcza do zewnętrznych skryptów, które muszą zostać pobrane przed wykonaniem. Skrypty niezbędne do renderowania treści strony można umieścić w treści strony, aby uniknąć dodatkowych żądań sieciowych. Wbudowana treść musi jednak być mała i szybko wykonywać, by zapewnić dobrą wydajność. Skrypty, które nie są niezbędne dla wstępnego renderowania, powinny zostać ustawione asynchroniczne lub odroczone do czasu pierwszego renderowania. Pamiętaj, że aby poprawić czas wczytywania, musisz też zoptymalizować dostarczanie CSS.

JavaScript wbudowany

Zewnętrzne skrypty blokujące wymuszają na przeglądarce oczekiwanie na pobranie JavaScriptu, co może spowodować dodanie co najmniej jednej sesji w obie strony, zanim strona zostanie wyrenderowana. Jeśli skrypty zewnętrzne są małe, możesz umieścić ich zawartość bezpośrednio w dokumencie HTML, aby uniknąć opóźnień w żądaniu sieci. Jeśli na przykład dokument HTML wygląda tak: 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
A zasób small.js wygląda tak: 
  /* contents of a small JavaScript file */
Następnie możesz wbudować skrypt w ten sposób: 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Wbudowanie treści skryptu eliminuje zewnętrzne żądanie dotyczące small.js i umożliwia przeglądarce szybsze pierwsze renderowanie. Pamiętaj jednak, że wbudowanie zwiększa też rozmiar dokumentu HTML, a ta sama zawartość skryptu może być wymagana na wielu stronach. Aby osiągnąć najwyższą wydajność, należy umieszczać w tekście tylko małe skrypty.

Ustaw JavaScript jako asynchroniczny

Domyślnie JavaScript blokuje konstrukcję DOM, przez co opóźnia czas pierwszego renderowania. Aby zapobiec blokowaniu przez JavaScript przez parser, zalecamy używanie atrybutu HTML async w zewnętrznych skryptach. Na przykład: 
<script async src="my.js">
Aby dowiedzieć się więcej o skryptach asynchronicznych, przeczytaj artykuł Blokowanie parsera a JavaScript asynchroniczny. Pamiętaj, że skrypty asynchroniczne nie powinny być wykonywane w określonej kolejności i nie powinny używać polecenia document.write. W celu uwzględnienia tych ograniczeń konieczne może być przepisanie skryptów zależnych od zamówienia wykonania lub wymagających dostępu do DOM lub CSSOM strony bądź do modyfikowania.

Odłóż wczytywanie kodu JavaScript

Wczytywanie i wykonywanie skryptów, które nie są niezbędne do początkowego renderowania strony, może zostać odroczone do czasu zakończenia wstępnego renderowania strony lub innych kluczowych części strony. W ten sposób można ograniczyć rywalizację o zasoby i poprawić wydajność.

Najczęstsze pytania

Co robić, jeżeli używam biblioteki JavaScript, takiej jak library such as jQuery?
Wiele bibliotek JavaScript, takich jak JQuery, jest używanych do wzbogacania strony o dodatkowe elementy interaktywne, animacje i inne efekty. Wiele z tych działań można jednak bezpiecznie dodać po wyrenderowaniu części strony widocznej na ekranie. Sprawdź, czy kod JavaScript jest asynchroniczny, lub opóźnij jego ładowanie.
Co zrobić, jeżeli do zbudowania strony używam platformy JavaScript?
Jeśli zawartość strony jest tworzona przy użyciu JavaScriptu po stronie klienta, warto rozważyć wbudowanie odpowiednich modułów JavaScript, aby uniknąć dodatkowych transferów danych w obie strony. Podobnie korzystanie z renderowania po stronie serwera może znacznie poprawić wydajność pierwszego wczytywania strony: najpierw renderuj szablony JavaScript na serwerze, aby pierwsze renderowanie było szybkie, a po wczytaniu strony używaj szablonów po stronie klienta. Więcej informacji o renderowaniu po stronie serwera znajdziesz na stronie http://youtu.be/VKTWdaupft0?t=14m28s.

Prześlij opinię

Czy ta strona była pomocna?