Usuń blokujący renderowanie kod JavaScript

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje, że w kodzie HTML, we fragmencie dotyczącym części strony widocznej na ekranie, znajdują się odniesienia do blokującego zewnętrznego pliku JavaScript.

Omówienie

Zanim przeglądarka wyrenderuje stronę, musi ją przeanalizować. Jeżeli w trakcie analizy napotka blokujący zewnętrzny skrypt, musi się zatrzymać i pobrać zasoby JavaScript. Każda taka operacja to dodatkowy transfer danych w obie strony, który oznacza opóźnienie pierwszego wyrenderowania.

Zalecenia

Kod JavaScript wymagany do wyrenderowania części strony widocznej na ekranie musi być wbudowany, a pobieranie kodu JavaScript niezbędnego do realizacji dodatkowych funkcji na stronie powinno się odbywać dopiero po dostarczeniu tych treści. Pamiętaj, że aby poprawić czas wczytywania strony, musisz także zoptymalizować dostarczanie CSS.

Umieść krótki kod JavaScript bezpośrednio w dokumencie

Krótkie skrypty zewnętrzne możesz włączyć bezpośrednio do dokumentu HTML. Wbudowanie niewielkich plików pozwoli przeglądarkom kontynuować renderowanie strony. Na przykład jeżeli 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 tak:

  /* contents of a small JavaScript file */

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>

Wyeliminuje to konieczność żądania zewnętrznego pliku small.js, którego zawartość będzie wbudowana w dokument HTML.

Odłóż wczytywanie kodu JavaScript

Aby zapobiec blokowaniu wczytywania stron przez kod JavaScript, przy wczytywaniu tych zasobów zalecamy użycie w kodzie HTML atrybutu async. Na przykład:

<script async src="my.js">

Jeżeli w kodzie JavaScript używasz document.write, wczytywanie asynchroniczne nie jest bezpiecznym rozwiązaniem. Zalecamy przepisanie skryptów korzystających z parametru document.write i użycie innej techniki.

Ponadto przy asynchronicznym wczytywaniu JavaScriptu, jeżeli strona wczytuje skrypty zależne od siebie nawzajem, musisz zwrócić uwagę, by aplikacja uwzględniała tę zależność i wczytywała je w odpowiedniej kolejności.

Najczęstsze pytania

Co robić, jeżeli używam biblioteki JavaScript, takiej jak jQuery?
Biblioteki JavaScript, takie jak JQuery, umożliwiają wzbogacenie strony o dodatkowe funkcje, animacje i inne efekty. Wiele z tych działań można jednak bezpiecznie dodać już po wyrenderowaniu części strony widocznej na ekranie. Sprawdź, jaki będzie efekt przesunięcia wykonywania i wczytywania JavaScriptu na okres po wczytaniu strony.
Co robić, jeżeli moja strona jest zbudowana w oparciu o architekturę JavaScript?
Jeżeli zawartość strony jest oparta na kodzie JavaScript po stronie klienta, powinieneś rozważyć wbudowanie odpowiednich modułów JavaScript, by uniknąć dodatkowych transferów danych w obie strony. Również skorzystanie z możliwości renderowania po stronie serwera może znacząco przyspieszyć pierwsze renderowanie strony: wyrenderuj szablony JS na serwerze, wbuduj uzyskany kod w HTML, a następnie użyj szablonów po stronie klienta po wczytaniu aplikacji. Więcej informacji o renderowaniu po stronie serwera znajdziesz na http://youtu.be/VKTWdaupft0?t=14m28s.