Zmniejsz rozmiar zawartości części strony widocznej na ekranie

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje, że wygenerowanie części strony widocznej na ekranie wymaga dodatkowych transferów sieciowych w obie strony.

Omówienie

Jeżeli wymagana ilość danych przekracza początkowy rozmiar okna przeciążenia, konieczna będzie dodatkowa wymiana informacji między serwerem a przeglądarką użytkownika. W przypadku sieci o długim czasie oczekiwania, na przykład sieci komórkowych, może to powodować poważne opóźnienia wczytywania stron.

Zalecenia

Aby strony wczytywały się szybciej, ogranicz rozmiar danych (znaczniki HTML, obrazy, CSS, JavaScript) wymaganych do wyrenderowania części strony widocznej na ekranie. Można to zrobić na kilka sposobów:

Zaplanuj taką strukturę kodu HTML, by najważniejsza część strony – widoczna na ekranie – wczytywała się najpierw

W pierwszej kolejności wczytuj główną zawartość strony. Zorganizuj stronę w taki sposób, by początkowa odpowiedź serwera zawierała dane niezbędne do bezpośredniego wyrenderowania najważniejszych fragmentów strony. Resztę odłóż. Może to oznaczać konieczność podziału CSS na część wbudowaną, odpowiedzialną za styl treści widocznej na ekranie, i część, z której przesłaniem można zaczekać.

Popatrz na poniższe przykłady możliwych zmian struktury witryny, by wczytywała się szybciej:

  • Jeżeli HTML wczytuje zewnętrzne widżety przed główną zawartością, zmień kolejność tak, by to główna zawartość wczytywała się najpierw.
  • Jeżeli układ witryny jest oparty na dwóch kolumnach, z paskiem bocznym do nawigacji i artykułem, a HTML wczytuje najpierw pasek, a potem artykuł, pomyśl o nadaniu priorytetu artykułowi.

Zmniejsz ilość danych wykorzystywanych przez zasoby

Po przeprojektowaniu witryny pod kątem poprawnego wyświetlania na różnych urządzeniach i wczytywania najważniejszej zawartości na początku zmniejsz ilość danych niezbędnych do wyrenderowania stron, posługując się następującymi metodami: