Usuń kod JavaScript blokujący renderowanie

. Ta reguła się uruchamia, gdy PageSpeed Insights wykryje, że w kodzie HTML występuje odwołanie do blokowania zewnętrznym pliku JavaScript w części strony widocznej na ekranie.

Omówienie

Zanim przeglądarka wyrenderuje stronę, musi utworzyć drzewo DOM, analizując znaczniki HTML. Za każdym razem, gdy parser napotka skrypt, musi go zatrzymać i wykonać. przed kontynuacją analizy kodu HTML. W przypadku skryptu zewnętrznego parser jest również musi czekać na pobranie zasobu, co może się wiązać z przesyłaniem co najmniej jednej transmisji danych w obie strony opóźniają pierwsze wyrenderowanie strony. Zobacz dodanie języka JavaScript, by dowiedzieć się więcej o wpływie JavaScriptu na ścieżki renderowania.

Rekomendacje

Należy unikać blokowania JavaScriptu, zwłaszcza zewnętrznych skryptów, które muszą zostać pobrane przed ich wykonaniem. skrypty niezbędne do renderowania treści strony; można wbudować, aby uniknąć dodatkowych żądań sieciowych, jednak treść wbudowana musi być niewielka i muszą się szybko uruchamiać, aby zapewnić dobrą skuteczność. Skrypty, które nie mają krytycznego znaczenia dla początkowego renderowanie powinno być asynchroniczne lub odroczone do czasu pierwszego wyrenderowania. Pamiętaj Aby poprawić czas wczytywania, należy również optymalizować wyświetlanie CSS.

Wbudowany JavaScript

Zewnętrzne skrypty blokujące wymuszają na przeglądarce oczekiwanie na pobranie JavaScriptu. co może spowodować dodanie co najmniej jednego cyklu przesyłania danych w obie strony, zanim strona zostanie wyrenderowana. Jeśli zewnętrzny skryptów można umieścić bezpośrednio w dokumencie HTML, aby uniknąć opóźnienia żądania sieciowego. 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 */
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 zawartości skryptu eliminuje zewnętrzne żądanie small.js i pozwala na przeglądarka może przyspieszyć pierwsze renderowanie. Pamiętaj jednak, że zwiększa się również zakres rozmiaru dokumentu HTML i umieszczenia w obu stronach tych samych treści skryptu. wiele stron. Z tego względu, aby uzyskać najlepszą wydajność, należy umieszczać w tekście tylko małe skrypty.

Asynchroniczny JavaScript

Domyślnie JavaScript blokuje konstrukcję DOM i opóźnia czas pierwszego renderowania. Do zapobiec blokowaniu parsera przez JavaScript, zalecamy użycie kodu HTML async w skryptach zewnętrznych. Na przykład: 
<script async src="my.js">
Zobacz Blokowanie parsera a JavaScript asynchroniczny, aby dowiedzieć się więcej o skryptach asynchronicznych. Pamiętaj, że skrypty asynchroniczne nie będą wykonywane w określonej kolejności i nie powinny używać document.write skrypty zależne od kolejności wykonywania, wymagające dostępu lub modyfikacji; DOM lub CSSOM strony może wymagać przepisania, by uwzględnić te ograniczenia.

Odłóż wczytywanie kodu JavaScript

Wczytywanie i wykonywanie skryptów, które nie są niezbędne do początkowego renderowania strony, może jest opóźniane do momentu zakończenia wstępnego renderowania lub innych istotnych części strony; wczytuję. Dzięki temu można ograniczyć rywalizację o zasoby i zwiększyć 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 dodatkowe elementy interaktywne, animacje i inne efekty. Jednak wiele z tych zachowania można bezpiecznie dodać już po wyrenderowaniu części strony widocznej na ekranie. Sprawdź, czy JavaScript ma być asynchroniczny lub opóźniać jego wczytywanie.
Co zrobić, jeśli do tworzenia strony używam języka JavaScript?
Jeśli zawartość strony jest tworzona przez JavaScript po stronie klienta, rozważ wbudowanie odpowiednich modułów JavaScript, by uniknąć dodatkowych dane o połączeniach w obie strony. Analogicznie wykorzystanie renderowania po stronie serwera popraw szybkość pierwszego wczytywania strony: wyrenderuj szablony JavaScript na serwerze, aby wyświetlać szybkie renderowanie, a po wczytaniu strony użyć szablonów po stronie klienta. Więcej informacji na temat renderowania po stronie serwera można znaleźć w sekcji http://youtu.be/VKTWdaupft0?t=14m28s.

Prześlij opinię

Czy ta strona była pomocna?

.