Zmniejsz rozmiar zawartości części strony widocznej na ekranie
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Ta reguła się uruchamia, gdy PageSpeed Insights wykryje, że wygeneroqanie częśći strony widocznej na ekranie wymaga dodatkowych transferów sieciowych w obie strony.
Opis
Jeśli wymagana ilość danych przekroczy początkowy okres przeciążenia (zwykle 14,6 kB po skompresowaniu), konieczna będzie dodatkowa wymiana danych 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.
Rekomendacje
Aby strony wczytywały się szybciej, ogranicz rozmiar danych (znaczniki HTML, obrazy, CSS, JavaScript) wymaganych do wyrenderowania części strony widocznej na ekranie.
Możesz 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. Utwórz taką stronę, aby wstępna odpowiedź serwera wysyłała dane niezbędne do natychmiastowego wyrenderowania krytycznej części strony i odroczenia pozostałych.
Może to oznaczać, że musisz podzielić kod CSS na 2 części: część wbudowaną odpowiedzialną za stylizację części strony widocznej na ekranie oraz część z możliwością odroczenia.
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 najpierw wczytuj najważniejsze treści, aby ograniczyć ilość danych wymaganych do wyrenderowania strony, zastosuj następujące metody:
Zmniejsz zasoby: Możesz zmniejszyć rozmiar zasobów HTML, CSS i JavaScript, usuwając zbędne odstępy i komentarze. Narzędzia do zmiany nazw zmiennych w zasobach mogą pomóc w dalszej optymalizacji.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2024-09-04 UTC."],[[["This PageSpeed Insights rule is triggered when additional network round trips are needed to render above-the-fold content."],["To optimize, prioritize loading critical above-the-fold content first by restructuring HTML and reducing resource sizes."],["Reduce data size by minifying resources, using CSS instead of images where possible, and enabling compression."],["This documentation refers to a deprecated version of PageSpeed Insights API; the latest version is 5."]]],["The core issue addressed is the delay in page loading caused by excessive data transfer required to render above-the-fold content. Key actions include structuring HTML to prioritize critical content, loading it first, and deferring non-essential parts. Recommendations involve reducing data size by minifying resources (HTML, CSS, JavaScript), using CSS instead of images when feasible, and enabling compression. The document advises optimizing content loading to avoid additional network round trips and improve page speed.\n"]]
