PageSpeed Insights Deep Dive (Pełne Omówienie & Wskazówki do osiągnięcia wyniku 100)

W Internecie nie ma ograniczeń prędkości – ale na szczęście jest prędkościomierz.

Prędkość i wydajność Twojej strony mają ogromny wpływ na biznes. Mogą poprawić Twoje pozycje w wyszukiwarkach i SEO, zwiększyć zaangażowanie na stronie oraz przyczynić się do większej liczby konwersji – i przychodów.

Ale zanim zoptymalizujesz szybkość swojej strony, musisz wiedzieć, jak ona działa.

To właśnie tu przydaje się PageSpeed Insights.

To darmowe narzędzie od Google pomaga zrozumieć wydajność Twojej strony, ale może być skomplikowane na początku.

W końcu, co oznaczają wszystkie te różne terminy i wyniki? Jak masz wiedzieć, co robić lub od czego zacząć?

Przewodnik ten koncentruje się na tym, co zrobić z wynikami raportu PageSpeed Insights oraz jak strategicznie przepracować konkretne rozwiązania, aby poprawić każdy z wyników, bez względu na to, jakie problemy wymagają rozwiązania!

Dziś przejdziemy przez każdy z kluczowych czynników i pokażemy strategie poprawy wydajności w każdym z nich.

Co to jest Google PageSpeed Insights?

PageSpeed Insights to narzędzie, które testuje, mierzy i raportuje wydajność Twojej strony internetowej. Rejestruje kluczowe dane na temat tego, jak użytkownicy doświadczają i wchodzą w interakcje z Twoją stroną, analizując aspekty takie jak szybkość strony, czas ładowania oraz doświadczenie użytkownika.

Oprócz oceniania Twojej strony pod kątem kluczowych wskaźników wydajności, PageSpeed Insights przeprowadza szereg diagnostyk i również poleca konkretne działania, które pomogą Ci poprawić wydajność Twojej strony internetowej.

PageSpeed Insights jest napędzane przez otwartoźródłowy silnik analizy Google, Lighthouse.

To, co czyni PageSpeed Insights szczególnie ważnym dla webmasterów i marketerów, to fakt, że wydajność strony jest ściśle powiązana z doświadczeniem użytkownika (UX), SEO, ruchem, konwersjami i wszystkimi innymi kluczowymi wskaźnikami efektywności (KPI), które mają największe znaczenie dla biznesu.

Osiągnięcie 100% w PageSpeed Insights jest jak zdobycie maksymalnej liczby punktów na SAT.

To niekoniecznie oznacza, że świetnie poradzisz sobie na studiach, ale zdecydowanie daje Ci przewagę.

Szybkość Strony i SEO

Najpierw odpowiedzmy na główne pytanie.

Tak, prędkość i wydajność Twojej strony mogą wpłynąć na optymalizację pod kątem wyszukiwarek (SEO).

W szczególności słaba wydajność może zranić Twoje SEO. Przydatne jest myślenie o wynikach PageSpeed Insights jako o “gubernatorze” dla Twojej strony internetowej. Jeśli Twoje wyniki są niskie, oznacza to, że strona jest wolna – co również spowalnia Twój rozwój w SERPs (Search Engine Results Page)!

Google publicznie stwierdziło, że używa sygnałów szybkości strony, które nazywa „doświadczeniem na stronie”, jako czynnik rankingu SEO.

Istnieją trzy główne czynniki zawarte w algorytmie wyszukiwania, które Google określa jako Core Web Vitals:

1. Ładowanie – Największy Element Zawartości (LCP)
2. Interaktywność – Opóźnienie Pierwszego Wejścia (FID)
3. Stabilność Wizualna – Skumulowane Przesunięcie Układu (CLS)

Wszystkie te czynniki mierzą, jak szybko ładuje się Twoja strona oraz prędkość i jakość doświadczenia użytkownika, co może również wpłynąć na dostępność.

Te trzy czynniki są częścią sześciu całkowitych metryk mierzonych przez PageSpeed Insights.

Jak działa PageSpeed Insights

Teraz, gdy rozumiemy kto, co, gdzie i dlaczego… wszystko co pozostało to jak.

Jak działa PageSpeedInsights i jak wykorzystać dostarczane przez nie informacje?

Najpierw kilka słów o tym, jak narzędzie działa za kulisami, bezpośrednio od Google:

„PageSpeed Insights dostarcza dane zarówno z laboratorium, jak i z rzeczywistego użytkowania strony. Dane z laboratorium są przydatne do debugowania problemów, ponieważ są zbierane w kontrolowanym środowisku. Jednakże mogą nie uchwycić rzeczywistych problemów. Dane z rzeczywistego użytkowania są przydatne do uchwycenia prawdziwego, rzeczywistego doświadczenia użytkowników – ale mają bardziej ograniczony zestaw metryk.”

Innymi słowy, PageSpeed Insights analizuje dwie rzeczy.

Najpierw komputery Google wczytują Twoją witrynę, aby sprawdzić, jak działa.

Po drugie, ponieważ komputery Google nie są takie same jak laptop, którego możesz używać w domu lub w pracy, analizują one logi historycznych danych od rzeczywistych użytkowników, którzy odwiedzili Twoją stronę w ciągu ostatnich 28 dni. (Te dane pochodzą z Raportu Doświadczeń Użytkowników Chrome, często nazywanego „CrUX”, i są zbierane od użytkowników przeglądarki Chrome.)

Następnie PageSpeed Insights łączy te dwa testy i ocenia Twoją stronę na podstawie tego, jak mogą ją doświadczyć rzeczywiści użytkownicy.

Wynik PageSpeed Insights to zbiór metryk dotyczących wydajności Twojej strony, które pokazują, które obszary są dobre, a które mogą wymagać pracy.

Jest 6 wyników do poznania:

1. Pierwsze Malowanie z Treścią (FCP)
2. Opóźnienie Pierwszego Wejścia (FID)
3. Największe Malowanie z Treścią (LCP)
4. Kumulatywne Przesunięcie Układu (CLS)
5. Interakcja do Następnego Malowania (INP)
6. Czas do Pierwszego Bajtu (TTFB)

Każda z tych metryk jest mierzona, a następnie oceniana zgodnie z poziomem wydajności.

Kiedy uruchomisz raport PageSpeed Insights dla swojej strony, otrzymasz wynik i „ocenę” dla każdego z nich, która będzie należeć do jednej z trzech kategorii:

1. Dobry
2. Wymaga poprawy
3. Słaby

Oceny te są ustalane na podstawie predefiniowanych zakresów, które ustala Google:

Jak użyć tego przewodnika, aby poprawić wynik PageSpeed Insights

Zrozumienie PageSpeed Insights to pierwsza część bitwy.

Następnie musimy znaleźć sposób na przetłumaczenie wszystkich wyników, liczb i sugestii na praktyczny plan poprawy.

Oto jak korzystać z tego przewodnika:

• Uruchom raport PageSpeed Insights dla swojej strony.
• Szukaj niezaliczonych testów CWV lub metryk na „słabym” końcu skali.
• Znajdź sekcję poniżej, która odnosi się do tych konkretnych metryk.
• Pracuj nad krokami (przedstawionymi w kolejności od największego do najmniejszego wpływu).
• Ponownie uruchom raport PageSpeed Insights.
• Jeśli to konieczne, powtórz proces dla wszelkich metryk nadal oznaczonych jako „słabe”.
• Przejdź do metryk oznaczonych jako „Wymaga poprawy”.
• Powtórz od początku.

#1 – Pierwsze Malowanie Zawartości (FCP)

Zanurzmy się w pierwszą metrykę na liście Google.

To pierwszy Contentful Paint, czyli FCP, który mierzy, jak szybko użytkownik może zobaczyć Twoją stronę podczas ładowania.

Co to jest First Contentful Paint?

First Contentful Paint (FCP) to czas, jaki upływa od momentu załadowania pierwszego obiektu w przeglądarce użytkownika. Jest to inne niż szybkość ładowania strony czy czas ładowania, ponieważ nie jest to czas potrzebny do wyrenderowania całej strony — to tylko pierwszy fragment strony, który pojawia się na ekranie.

To jest ważne z punktu widzenia użytkownika, ponieważ może on obserwować postęp, gdy strona zaczyna się wyświetlać.

To również oznacza, że strategie przyspieszania FCP są inne niż te dotyczące po prostu szybszego ładowania całej strony.

FCP jest mierzony w sekundach.

• Dobry: < 1.8 sekundy
• Wymaga poprawy: 1.8 – 3 sekundy
• Słaby: > 3 sekundy

Techniki poprawy FCP

Załóżmy, że osiągnąłeś wynik 2.2s na swoim wyniku FCP. Mamy nadzieję, że uda ci się go obniżyć do 1.8s.

Jakie narzędzia masz do dyspozycji?

Minimalizacja zasobów blokujących renderowanie

Pamiętaj, że First Contentful Paint to nie tylko czas ładowania całej strony. Chodzi o jak najszybsze pojawienie się pierwszych pikseli na ekranie.

Jedną z kluczowych strategii jest po prostu zmiana kolejności treści na stronie.

Niech przeglądarka renderuje najważniejszy tekst, obrazy i style przed rozpoczęciem ładowania ciężkich skryptów, wyszukanych animacji i treści, które są „poniżej linii przewijania”.

Pierwszą rzeczą, którą powinieneś zrobić to: Usuń wszystkie nieużywane style lub skrypty ze swojej strony.

Jeśli wczytujesz JavaScript lub CSS na stronie (zazwyczaj w sekcji Head witryny), spowolni to FCP. Jeśli ich nie używasz, to tylko niepotrzebnie spowalniają Cię.

W WordPress można to zwykle osiągnąć, wyłączając nieużywane pluginy, które mogą ładować kod na stronę, nawet jeśli plugin nie jest używany lub wyświetlany.

Jeśli przyjrzysz się wynikom w swoim raporcie PageSpeed Insights, zostanie zaznaczony kod, który jest ładowany na stronę, ale nie jest używany:

To powinno powiedzieć Ci, który kod lub pluginy możesz bezpiecznie usunąć.

(Uwaga: To, że kod nie jest używany na jednej stronie, nie oznacza, że nie występuje na innych stronach Twojej witryny! Bądź ostrożny, zanim zaczniesz usuwać i modyfikować elementy na swoich stronach.)

Następnie: Opóźnij lub załaduj skrypty asynchronicznie.

Jeśli potrzebujesz skryptów lub stylizacji na swojej stronie, ale nie są one natychmiast niezbędne dla pierwszej zawartości, którą widzi użytkownik, możesz zastosować tzw. opóźnienie lub ładowanie ich asynchronicznie. Informuje to przeglądarkę, aby poczekała z załadowaniem ich, zamiast ładować je w kolejności, w jakiej się pojawiają na stronie.

To jest dość proste — Możesz dodać trochę dodatkowego kodu do swojej strony internetowej, który zainstruuje przeglądarkę, aby opóźniła lub załadowała asynchronicznie (lub oba):

<script src="app.js" async></script>

(Uwaga dla nerdów: Async i defer technicznie nie są tym samym. Jednak dla większości z nas różnica jest głównie semantyczna. Niemniej jednak, zapraszamy do zagłębienia się w temat i poznania subtelnych niuansów.)

Jeśli szukasz łatwiejszego sposobu na obsługę tego kroku, rozważ użycie dodatku JetPack Boost dla WordPress.

JetPack to darmowy zestaw wtyczek, który zapewnia różnorodne narzędzia do optymalizacji szybkości i wydajności Twojej strony internetowej. Możesz między innymi wybrać opóźnienie ładowania nieistotnego JavaScriptu jednym kliknięciem.

W WordPressie przejdź do Plugins > Add New.

Następnie, wyszukaj Boost. Kliknij „Zainstaluj” i „Aktywuj”.

Powinieneś zobaczyć nowe menu w nawigacji po lewej stronie o nazwie „JetPack”.

Przejdź do JetPack > Boost.

Plugin wyrenderuje Twoją stronę w tle i pokaże Twój wynik, plus opcje ulepszenia. Aby opóźnić wykonanie nieistotnego JS, wystarczy kliknąć przełącznik, aby go włączyć.

Wreszcie: Zmień strukturę CSS (stylizacja).

Jeśli znasz CSS, wiesz, że często wrzuca się wszystkie style do jednej dużej masy kodu i ładuje je wszystkie w standardowym pliku, jak style.css.

To nie jest źle. To po prostu nie jest bardzo wydajne.

Aby poprawić FCP, możesz zoptymalizować strukturę CSS:

1. Usuń wszystkie style, które dotyczą treści będących częścią FCP (wszystko “powyżej linii przewijania.”)
2. Dodaj te style jako blok stylów w linii w nagłówku Twojej strony internetowej.
3. Załaduj pozostałe style asynchronicznie za pomocą funkcji „preload” (pokazanej poniżej.)

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Alternatywnie, jeśli posiadasz wiele oddzielnych stylów dla różnych urządzeń i przeglądarek, możesz rozdzielić arkusz stylów na wiele plików i użyć zapytania medialnego @import, aby ładować tylko odpowiednie style.

Optymalizacja obrazów i filmów

Ponieważ FCP dotyczy głównie optymalizacji pierwszych kilkuset pikseli na górze strony, nie będziemy tutaj zbytnio wnikać w optymalizację obrazów i filmów.

Ale jeśli nagłówek zawiera wiele obrazów lub na górze strony znajduje się wideo, warto zbadać, jak zoptymalizować te zasoby, aby poprawić początkową prędkość ładowania. Zobacz poniżej, aby dowiedzieć się więcej o optymalizacji.

Korzystanie z Sieci Dostarczania Treści (CDN)

Tak samo jak powyżej. CDN-y mogą pomóc w szybszym ładowaniu całej strony, co daje małą poprawę FCP. Zobacz poniżej, aby uzyskać więcej informacji na temat korzystania z CDN.

#2 – Opóźnienie Pierwszego Wejścia (FID), Całkowity Czas Blokowania (TBT) oraz Czas do Interaktywności (TTI)

Teraz porozmawiajmy o kompromisach.

Jeśli skupisz się tylko na First Contentful Paint, możesz pomyśleć, że wszystko, co musisz zrobić, aby znacznie poprawić wynik w PageSpeed Insights, to opóźnić i wczytać wszystkie zasoby później, aby górna część Twojej strony internetowej ładowała się szybko.

Ale jeśli strona ładuje się szybko, a ja nie mogę z nią wchodzić w interakcję, to również jest to słabe doświadczenie użytkownika.

Wprowadź: Pierwsze Opóźnienie Wejścia.

Opóźnienie Pierwszego Wejścia jest również powiązane z Całkowitym Czasem Blokowania (TBT) i Czasem do Interaktywności (TTI).

Rozpakujmy każdy z tych elementów i zobaczmy, jak są ze sobą powiązane, ale różne.

Co to jest opóźnienie pierwszego wejścia?

First Input Delay (FID) to czas, który upływa, zanim przeglądarka odpowie na pierwsze działanie użytkownika lub interakcję (np. kliknięcie linku lub przycisku). Wydajność Twojej strony wpływa na opóźnienie, ponieważ większość interakcji nie może być przetworzona podczas ładowania lub renderowania kodu przez przeglądarkę.

Innymi słowy, jeśli Twój kod potrzebuje dużo czasu na załadowanie, uniemożliwi to użytkownikowi interakcję ze stroną internetową, a między kliknięciem a wykonaniem akcji wystąpi opóźnienie lub przesunięcie w czasie.

Ta metryka jest mierzona w milisekundach i opiera się na rzeczywistych danych użytkowników.

• Dobry: < 100ms
• Wymaga poprawy: 100 – 300ms
• Słaby: > 300ms

Czym jest Time to Interactive (TTI)?

Time to Interactive to czas, który upływa, zanim strona stanie się „niezawodnie interaktywna”.

Google definiuje „niezawodnie interaktywne” jako stan, gdy główny wątek przeglądarki jest wolny przez co najmniej 5 sekund, czyniąc stronę w pełni interaktywną dla użytkownika.

To jest metryka mierzona przez Lighthouse Google’a, więc nie opiera się na rzeczywistych danych użytkowników. Zamiast tego jest mierzona według konkretnych, kontrolowanych kryteriów.

Co to jest Całkowity Czas Blokowania (TBT)?

Całkowity Czas Blokowania mierzy pełny okres czasu między FCP a TTI.

Innymi słowy, zegar nie zaczyna liczyć czasu, dopóki nie zostanie wyrenderowana górna część strony, a następnie zatrzymuje się, gdy strona jest uznana za „niezawodnie interaktywną” lub 5 sekund po zwolnieniu głównego wątku.

Opóźnienie Pierwszego Wejścia vs Czas do Interakcji vs Całkowity Czas Blokowania

Te trzy metryki są powiązane, ale nie identyczne.

First Input Delay opiera się na danych rzeczywistych użytkowników i Core Web Vitals. TTI i TBT są mierzone przez raport wydajności w PageSpeed Insights, napędzane przez Lighthouse Google’a.

Pod względem poprawy wydajności tych trzech wskaźników, rozwiązania są podobne, ale nie identyczne. Najbardziej znaczące, rozwiązania polegające na opóźnieniu renderowania JavaScript, które poprawiają FID, nie wpłyną na poprawę TTI lub TBT, ponieważ JavaScript nadal musi być załadowany.

Ale rozwiązania takie jak usuwanie, minifikacja i pamięć podręczna powinny pomóc poprawić wszystkie trzy metryki.

Techniki poprawy FID, TTI i TBT

Największy wpływ na FID ma JavaScript załadowany na twojej stronie.

Możesz myśleć o JavaScript jak o osobnym torze dla przeglądarki. Kiedy przeglądarka renderuje lub wykonuje kod JavaScript, nie może wykonywać innych zadań ani reagować na wejścia, takie jak kliknięcie użytkownika w link („główny wątek” musi być wolny, aby przeglądarka mogła odpowiedzieć).

Więc im dłużej zajmuje przeglądaniu i wykonaniu kodu JavaScript podczas pierwszego ładowania strony, tym dłuższe będą opóźnienia, gdy użytkownik zacznie wchodzić w interakcje ze stroną.

Zmniejsz wpływ kodu stron trzecich

Jednym z typowych powodów wolnej odpowiedzi na wprowadzone dane jest fakt, że na stronie wciąż ładowane są różnego rodzaju narzędzia, widżety i aplikacje stron trzecich.

Za każdym razem, gdy dodajesz do swojej strony takie rzeczy jak Facebook, Drift, Intercom, HotJar lub inne narzędzia i usługi stron trzecich, dodawany jest kawałek kodu, który musi zostać załadowany i wyrenderowany na stronie.

Jeżeli posiadasz wiele tych usług, załadowanie ich wszystkich może zająć dużo czasu.

Jeszcze gorzej, nie masz żadnej kontroli nad tym, jak szybko te zasoby są ładowane na Twojej stronie. Więc jeśli przeglądarka próbuje pobrać jakieś JavaScript z witryny zewnętrznej na wolnym serwerze, może to spowodować znaczne opóźnienia.

Naprawmy to.

Opcja #1: Usuń wszystkie nieużywane narzędzia stron trzecich.

Prawdopodobnie zainstalowałeś różnego rodzaju usługi, pluginy i narzędzia na swojej stronie przez lata. I prawdopodobnie używasz tylko kilku z nich.

Teraz jest czas, aby usunąć lub odinstalować te, których aktywnie nie używasz.

Aby uzyskać pełną listę JavaScriptów stron trzecich, które są ładowane na Twojej stronie, zapoznaj się z raportem PageSpeed Insights lub uruchom oddzielny raport Lighthouse.

Powinieneś zobaczyć listę wszystkich ładowanych skryptów oraz czas ich ładowania:

Teraz, korzystając z tych informacji, możesz zdecydować, które z nich są kluczowe, a które można bezpiecznie usunąć.

W zależności od usług, które chcesz usunąć, może być konieczne ręczne usunięcie kodu ze strony internetowej, odinstalowanie wtyczki WordPress lub usunięcie kodu dodanego przez Google Tag Manager, aby poprawić wydajność strony.

Opcja #2: Ładuj JavaScript asynchronicznie.

Jeśli nie jest to niezbędne do renderowania FCP, zaleca się prawie zawsze renderowanie skryptów stron trzecich asynchronicznie. Jeśli masz niezbędny JavaScript, który spowalnia FID, ale nie możesz go usunąć, to spróbuj zamiast tego załadować go asynchronicznie.

Minimalizacja czasu wykonania JavaScript

Kod stron trzecich może być niegrzeczny, ale co z naszym własnym kodem, który umieściliśmy na naszej stronie internetowej?

Prawdopodobnie nie jest to niewinne w przypadku wolnego czasu ładowania.

Jeśli masz nieistotny JavaScript, który dodałeś do swojej własnej strony internetowej, możesz chcieć go usunąć.

Patrząc na raport PageSpeed Insights, powinieneś zobaczyć sekcję, która odnosi się do nieużywanego JavaScript:

• Jeśli JavaScript jest w 100% nieużywany, rozważ jego usunięcie
• Jeśli JavaScript jest używany na innych stronach, rozważ dostarczanie go wybiórczo tylko na stronach, gdzie jest to konieczne (znane również jako “podział kodu”)

Możesz również zbadać opcje usprawnienia czasu ładowania JavaScript.

Najczęstszym sposobem na przyspieszenie czasu ładowania jest zmniejszenie rozmiaru pliku. W przypadku JavaScript istnieją dwie główne strategie:

• Minifikacja – Usuwanie wszystkich spacji, przełamań linii itp. w kodzie
• Kompresja – „Zipping” pliku w celu zmniejszenia jego rozmiaru

Każda z tych opcji może pomóc w zwiększeniu wydajności Twojego kodu.

Priorytetowanie Widocznej Zawartości

Jeśli głównie zależy Ci na poprawie FID, to możesz skupić się na opóźnieniu ładowania JavaScript i innych elementów strony, aby skoncentrować się tylko na zawartości w pierwszym widocznym renderowaniu.

Przecież użytkownicy nie mogą wchodzić w interakcję z elementami, które nie zostały wyrenderowane.

#3 – Największy Element Zawartości (LCP)

Jeśli FCP jest czasem przyspieszenia Twojego samochodu od 0 do 60, to LCP jest jego czasem na ćwierć mili.

Dobrze, dla osób, które nie są specjalistami, mam na myśli to, że LCP mierzy, jak szybko użytkownik może zobaczyć „główną” treść na twojej stronie internetowej.

Co to jest Największy Contentful Paint?

Largest Contentful Paint (LCP) to miara, która określa jak długo trwa, zanim największy blok treści na stronie stanie się widoczny dla użytkownika. W przeciwieństwie do FCP, analizuje czas ładowania największego bloku obrazu lub tekstu na stronie, niezależnie od jego pozycji czy kolejności.

Mierzy największy blok treści na podstawie jego wymiarów w obszarze widzenia użytkownika. Innymi słowy, jeśli istnieje pojedynczy <div> z dużą ilością tekstu lub pojedynczy obraz zajmujący dużą część ekranu, może to być uznane za największy blok treści i użyte do obliczenia LCP.

Jest mierzony w sekundach i opiera się na rzeczywistych danych użytkowników (lub „w terenie”):

• Dobrze: < 2.5s
• Wymaga poprawy: 2.5 – 4s
• Słabo: > 4s

Techniki poprawy LCP

Zanim zaczniesz pracować nad optymalizacją swojego LCP, możesz chcieć ustalić, która część Twojej strony jest uważana za największy blok treści.

To może pomóc Ci skoncentrować Twoje wysiłki na poprawie wydajności konkretnej strony lub szablonu.

Możesz to zrobić używając Chrome DevTools w swojej przeglądarce do identyfikacji zasobu LCP na dowolnej konkretnej stronie.

Optymalizuj Priorytet Ładowania

W powyższych sekcjach omówiliśmy opcje takie jak stosowanie strategii asynchronicznych lub opóźniających, aby przyspieszyć renderowanie kluczowych części strony.

Możesz rozważyć rozpoczęcie od tych opcji jako pierwszego wyboru.

Usuwanie lub opóźnienie zasobów blokujących renderowanie może pomóc w szybszym ładowaniu głównej treści. Należy jednak pamiętać, że jeśli te zasoby znacząco zmieniają układ lub strukturę strony, mogą faktycznie zmienić, który blok jest uważany za największy i spowolnić LCP zamiast go poprawić!

Możesz pójść w tej strategii o krok dalej. Szczególnie jeśli największy blok treści to obraz.

Możesz zastosować tzw. PRPL (Preload, Render, Precache, Lazy load) framework, aby celować w konkretne zasoby na Twojej stronie i aby ładowały się one jako pierwsze w kolejce. Jeśli ten obraz jest największym blokiem treści, to znacząco poprawi Twoją ocenę LCP.

Oprócz opcji asynchronicznego renderowania, ten framework dostarcza również innych strategii optymalizacji ścieżki renderowania.

Jedną z najprostszych jest wczytywanie kluczowych zasobów.

Możesz to zrobić, dodając niewielki fragment do nagłówka swojej strony internetowej, który informuje przeglądarkę, aby priorytetowo traktowała kluczowe obrazy, czcionki, style lub skrypty, które mogą być istotne dla największej sekcji treści.

Na przykład, jeśli masz obraz bohatera, który jest największym blokiem na stronie, możesz chcieć wczytać ten obraz na każdej stronie, używając fragmentu kodu takiego jak ten:

<link rel="preload" as="image" href="image1.png">

To informuje przeglądarkę, aby zaczęła ładować ten zasób natychmiast, zanim zostanie odkryty na stronie.

Optymalizuj rozmiar pliku (zasobu)

Teraz porozmawiajmy o wielkości pliku.

Większe pliki wymagają więcej czasu na załadowanie. Dotyczy to obrazów, skryptów, filmów, czcionek i wszystkiego innego na Twojej stronie, które mogą być ładowane jako część największego bloku treści.

Jednym ze sposobów na przyspieszenie wyniku LCP jest optymalizacja rozmiaru pliku.

Strategie optymalizacji rozmiaru pliku będą zależeć od formatu pliku.

Optymalizacja obrazów

Zazwyczaj znajdziesz duże korzyści, kompresując i optymalizując swoje obrazy.

Zacznij od oceny tych obszarów pod kątem możliwości poprawy:

• Format: Różne formaty obrazów oferują różne poziomy kompresji i jakości. Dla większości przypadków użycia w sieci, JPEG, PNG i WebP są najczęściej stosowanymi formatami.
  • JPEG jest zwykle najlepszy do zdjęć.
  • PNG jest zwykle najlepszy dla zaprojektowanych obrazów z tekstem lub ostrymi krawędziami.
  • WebP to bardziej efektywny format, który zapewnia lepszą kompresję bez poświęcania jakości, ale może nie być obsługiwany przez wszystkie przeglądarki.
• Kompresja: W wielu przypadkach można skompresować rozmiar pliku obrazu bez utraty jakości wizualnej.
  • Narzędzia do kompresji obrazów online: TinyPNG (dla PNG i JPEG), Squoosh (dla WebP).
  • Narzędzia do kompresji obrazów WordPress: ShortPixel, Imagify.
• Rozmiar obrazu: Jeśli przesyłasz surowe obrazy lub zdjęcia na swoją stronę internetową, a następnie dodajesz je do swojej strony, istnieje duża szansa, że są one znacznie większe niż potrzeba, co spowalnia czas ładowania.
  • Zmień rozmiar swoich obrazów i przesyłaj tylko potrzebny rozmiar.
  • Użyj wtyczki WordPress do automatycznego zmiany rozmiaru obrazów podczas ich przesyłania.
  • Użyj atrybutów “srcset” i “sizes” w tagu “img” do określenia wielu źródeł i rozmiarów obrazów. Przeglądarka automatycznie wybiera najbardziej odpowiedni obraz na podstawie rozmiaru ekranu i rozdzielczości użytkownika.

Optymalizacja skryptów i stylów

Wszystkie zasoby niezbędne do wyrenderowania największego bloku treści muszą być w pełni załadowane przed obliczeniem LCP.

To obejmuje skrypty i style, które wpływają na największy blok treści.

Korzystając z niektórych technik, które omówiliśmy wcześniej, możesz poprawić LCP poprzez optymalizację rozmiaru pliku i ścieżki renderowania dla JavaScript, CSS itp.:

• Minimalizuj pliki.
• Podział kodu, aby zmniejszyć rozmiar pliku.
• Dodaj style i skrypty w linii.
• Wstępnie załaduj lub użyj pamięci podręcznej.

Optymalizacja Wideo

Jeśli twoim zasobem LCP może być wideo, powinieneś rozważyć sposoby optymalizacji filmów wideo.

• Umieść wideo na YouTube lub innym serwisie z szybką siecią CDN zamiast przesyłać bezpośrednio.
• Kompresuj rozmiar pliku wideo.

Optymalizacja czcionek

Jeśli zasób LCP w pytaniu to tekst i ten tekst używa importowanego fontu (np. z Google Fonts), to możesz zoptymalizować poprzez poprawę szybkości ładowania pliku fontu.

• Używaj tylko czcionek WOFF i WOFF2.0 dla stron internetowych.
• Wstępnie załaduj plik czcionki za pomocą tagu link rel (patrz powyżej).
• Zbadaj więcej opcji dla dalszego zmniejszenia czasu ładowania pliku czcionki.

Wdrożenie CDN

Pomyśl o CDN jak o pasie dla pojazdów wieloosobowych na autostradzie.

Pomaga przeglądarce szybciej pobierać zasoby, przechowując je w serwerach na całym świecie.

Najważniejszą rzeczą, którą należy wiedzieć, jest to: Implementacja CDN może znacząco poprawić wydajność strony na każdym poziomie. Szczególnie jeśli chodzi o LCP, może to pomóc w szybszym renderowaniu obrazów, skryptów i innych zasobów niż normalny serwer Twojego hosta internetowego.

Aby wdrożyć CDN:

• Wybierz dostawcę CDN: Na rynku dostępnych jest kilku popularnych dostawców CDN, takich jak Cloudflare, Amazon CloudFront, Google Cloud CDN oraz Fastly.
• Załóż konto i skonfiguruj CDN: Po wybraniu dostawcy CDN, zarejestruj się na konto i skonfiguruj ustawienia CDN. Zazwyczaj obejmuje to tworzenie strefy CDN, konfigurację reguł pamięci podręcznej oraz ustawienie szyfrowania SSL/TLS.
• Zintegruj CDN ze swoją stroną internetową: Aby zintegrować CDN ze swoją stroną internetową, musisz zaktualizować adresy URL treści, którą chcesz serwować przez CDN. Obejmuje to zmianę Nameservers na adresy CDN zamiast normalnego serwera.
• Przetestuj CDN: Po zintegrowaniu CDN ze swoją stroną internetową, przeprowadź testy, aby upewnić się, że treść jest serwowana przez CDN oraz że wydajność LCP uległa poprawie.

Aby uzyskać bardziej szczegółowy przewodnik, sprawdź nasz artykuł na temat używania CDN z WordPress.

Popraw wydajność serwera

Ostatnia, ale z pewnością nie mniej ważna, wydajność serwera Twojego hostingu odgrywa również kluczową rolę w LCP.

Omówimy to szczegółowo, gdy zagłębimy się w TTFB; wystarczy powiedzieć, że przeglądarka może pobierać zasoby tylko tak szybko, jak serwer na to pozwala. Jeśli serwer odpowiada z opóźnieniem, zasób także będzie się ładował długo.

#4 – Kumulacyjne przesunięcie układu (CLS)

Czy wiesz, że strony internetowe mogą tańczyć?

Cóż, mniej więcej. I niezbyt dobrze.

Dokładniej mówiąc, mogą się przesuwać. Elementy na stronie poruszają się, podczas gdy różne obrazy, skrypty, style i tekst są renderowane, aż strona zostanie w pełni załadowana.

Co to jest Kumulacyjne Przesunięcie Układu?

Kumulacyjne przesunięcie układu mierzy, jak daleko obrazy, tekst, przyciski i inne elementy na Twojej stronie przesuwają się na ekranie, podczas gdy użytkownik czeka na załadowanie strony. Niższe CLS jest uważane za lepsze dla doświadczenia użytkownika.

To nie jest zaskakujące, jeśli weźmiesz pod uwagę swoje własne nawyki przeglądania.

Jeśli masz wrażenie, że grasz w grę typu “stuknij kreta”, próbując kliknąć link, który ciągle przesuwa się niżej na stronie, prawdopodobnie poczujesz frustrację i opuścisz stronę. (Cześć, wskaźnik odrzuceń!)

To doświadczenie może być szczególnie irytujące podczas przeglądania na urządzeniu mobilnym.

CLS to dane terenowe od rzeczywistych użytkowników, mierzone jako wynik, który łączy „impact fraction” (jaki procent elementów w widoku uległ przesunięciu) oraz „distance fraction” (jak daleko one się przesunęły względem całkowitego rozmiaru ekranu).

Istnieje także specjalne oznaczenie dla “oczekiwanych zmian” (np. kliknięcie przycisku, które otwiera nową sekcję na stronie) oraz “nieoczekiwanych zmian”, które nie są wywołane przez wejście użytkownika.

CLS jest mierzony poprzez pomnożenie ułamka wpływu i ułamka odległości:

• Dobry: < 0.1
• Wymaga poprawy: 0.1 – 0.25
• Słaby: > 0.25

Techniki poprawy CLS

Jest prawdopodobne, że jeśli nie próbujesz celowo mylić użytkowników, przesuwając elementy na swojej stronie, twój CLS jest domyślnie dość niski, ale istnieje kilka niewinnych błędów, które możesz popełnić i które warto naprawić.

Zdefiniuj rozmiary wszystkich obrazów i filmów

Jedna mała rzecz o dużym wpływie. Jeśli nie zdefiniujesz wyraźnie rozmiaru obrazów i filmów na swojej stronie, może to prowadzić do przesunięcia układu, ponieważ przeglądarka nie jest pewna, ile miejsca zarezerwować na ten zasób.

To jest takie proste, jak dodanie atrybutu dla dowolnego obrazu lub wideo na stronie:

<img src="hero_image.jpg" width="400" height="400">

Unikaj reklam i wyskakujących okienek powodujących przesunięcia układu

Musisz jakoś opłacić rachunki, ale unikaj używania wyskakujących okienek, które zmieniają układ strony. Jeśli nie masz innego wyjścia, użyj prostokąta proporcji CSS do „zarezerwowania” miejsca na reklamy lub inne komunikaty ładowane na stronie, gdy użytkownik z nią wchodzi w interakcję.

Wybieraj Animacje Rozsądnie

Za pomocą nowoczesnego CSS i JavaScript możemy zaimplementować różnego rodzaju fajne i efektowne animacje na stronie.

Ale z punktu widzenia użytkownika, funkcjonalność zawsze przeważa nad formą.

Usuń wszelkie animacje, które wywołują zmiany układu, ponieważ każda zmiana stanu może przyczynić się do ogólnej zmiany układu i wpłynąć na twoją ocenę CLS.

#5 – Interakcja do Następnego Malowania (INP)

Jak powiedział kiedyś Jay-Z, „Nie mam cierpliwości. I nienawidzę czekać.”

Czyż nie wszyscy?

Chociaż już omówiliśmy opóźnienie wejścia podczas pierwszej interakcji z Twoją stroną (FID), INP to szerszy wskaźnik, który ocenia ogólną responsywność Twojej strony.

Co to jest Interakcja do Następnego Malowania?

Interakcja do następnego malowania mierzy, jak długo trwa pojawienie się następnego „malowania” lub zaktualizowanej ramki na Twojej stronie po interakcji użytkownika z przyciskiem lub elementem strony. Mierzy ogólną responsywność witryny i płynność interakcji.

To jest szczególnie ważne dla aplikacji internetowych, które wymagają znaczącej interakcji użytkownika i mogą wydawać się powolne oraz mylące, jeśli opóźnienie wejścia lub opóźnienie między działaniem a rezultatem jest zbyt długie.

INP jest mierzone w milisekundach:

• Dobry: < 200ms
• Wymaga Poprawy: 200 – 500ms
• Słaby: > 500ms

Techniki poprawy INP

Jeśli masz problemy z INP, współczuję ci, synu. (Przepraszam, to kolejny tekst Jay-Z.)

Na szczęście, większość problemów można podzielić na trzy główne kategorie:

1. Opóźnienie wejściowe
2. Opóźnienie interakcji
3. Opóźnienie prezentacji

To jest naprawdę trudna część; Aby dokładniej zdiagnozować problem, musisz skorzystać z profilera wydajności Google Chrome lub funkcji nagrywania Lighthouse.

Tutaj możesz przybliżyć pojedynczą interakcję i zobaczyć, gdzie występuje najdłuższe opóźnienie.

Stąd możemy poszukać rozwiązań dla każdego z nich.

Naprawianie opóźnienia wejścia

Opóźnienie wejścia jest spowodowane zajętością głównego wątku w momencie interakcji. Oznacza to, że podczas kliknięcia lub naciśnięcia klawisza dzieje się coś innego.

Aby to naprawić, będziesz chciał zbadać, które procesy są uruchamiane jako część głównego wątku:

• Usuń lub zoptymalizuj zewnętrzne JavaScript.
• Użyj web workers do uruchamiania JavaScript poza głównym wątkiem.
• Użyj słuchaczy takich jak isInputPending(), aby zwolnić główny wątek (jest to najbardziej zaawansowana opcja).

Naprawianie opóźnień interakcji

Jeśli sama interakcja jest problemem – co oznacza, że wykonanie interakcji zajmuje dużo czasu – wówczas konieczne będzie zrefaktoryzowanie kodu dla tego wejścia.

Główna rekomendacja tutaj to opóźnienie obliczeń nieistotnych.

Innymi słowy, wykonaj część interakcji, którą użytkownik widzi i oczekuje natychmiast. Następnie, po zaktualizowaniu ramki, wykonaj wszelkie inne obliczenia lub interakcje w tle.

Załóżmy na przykład, że użytkownik kliknie przycisk, który otwiera okno, a także rejestruje zdarzenie pokazujące, że kliknął przycisk. Chciałbyś, aby Twój kod najpierw otworzył okno, „kończąc” interakcję z perspektywy użytkownika.

Następnie, po zakończeniu interakcji, zarejestruj zdarzenie, którego użytkownik nie zobaczy ani bezpośrednio nie doświadczy.

Naprawa Opóźnienia Prezentacji

Możliwe, że dane wejściowe i interakcja zachodzą dość szybko, ale przeglądarce zajmuje dużo czasu na zaktualizowanie prezentacji nową klatką.

Niestety, nie ma wiele refaktoryzacji, które mogłyby pomóc w tej kwestii.

Ale kilka rzeczy mogłoby spowodować dłuższe niż zwykle opóźnienie:

• Nadmierne używanie requestAnimationFrame(). Za każdym razem, gdy ta funkcja jest wywoływana, powoduje niewielkie opóźnienie. Sprawdź przypadki, w których może być używana zbyt często lub niepotrzebnie.
• Atrybuty „Async” działają nieprawidłowo. W zależności od kontekstu, niektóre zasoby, które oznaczyłeś do asynchronicznego renderowania, mogą zignorować dyrektywę lub załadować się nieoczekiwanie. Jeśli to się stanie, spowoduje to opóźnienie innych elementów ścieżki renderowania i następnej klatki.

#6 – Czas do Pierwszego Bajtu (TTFB)

Teraz zastanawiamy się nad tym pierwszym momentem, gdy strona internetowa się ładuje.

Zanim strona zacznie się renderować, przeglądarka użytkownika musi nawiązać kontakt z serwerem internetowym, rozpoznać, z kim się łączy, i otrzymać instrukcje dotyczące tego, co zacząć ładować i w jakiej kolejności.

Pierwsze uścisk dłoni zawiera pierwszy bajt informacji. Szybkość, z jaką ten bajt przybywa, jest jak strzał z pistoletu na początku wyścigu konnego.

Co to jest Time to First Byte?

Czas do Pierwszego Bajtu to czas, który potrzebuje Twoja przeglądarka, aby przejść przez procesy takie jak wyszukiwanie DNS, uściski dłoni TCP i SSL, oraz konfiguracja połączenia, aby zażądać – i otrzymać – pierwsze bajty informacji z serwera internetowego. Szybkość nawiązywania połączenia z serwerem internetowym zależy prawie całkowicie od samego serwera oraz sposobu, w jaki strona internetowa jest hostowana.

Jest mierzony w milisekundach:

• Dobry: < 800ms
• Wymaga poprawy: 800 – 1800ms
• Słaby: > 1800ms

Techniki poprawy TTFB

Możesz myśleć o TTFB jako o czasie spędzonym na linii startowej przed wystrzałem pistoletu. Wszystko, co opóźnia początkowe zezwolenie, wydłuża czas TTFB oraz całkowity czas ładowania strony.

Jakie są więc Twoje opcje na poprawę?

Usuń Przekierowania

Przede wszystkim eliminuj przekierowania stron, ilekroć jest to możliwe. Jeśli przekierowujesz użytkowników z jednej strony na inną, czas potrzebny do wykonania tej operacji wpada w okno TTFB, co oznacza, że dodasz znaczącą ilość czasu do swojego wyniku.

To obejmuje przekierowania 301 ze starych adresów URL na nowy, jak również tymczasowe przekierowania i inne implementacje.

Rozbuduj Swój Hosting

Hosting odgrywa ogromną rolę w ogólnej szybkości i wyniku wydajności Twojej strony, szczególnie jeśli chodzi o TTFB.

Będziesz chciał przyjrzeć się szczegółom swojego dostawcy usług hostingowych, zwracając szczególną uwagę na kwestie takie jak:

• Hosting współdzielony vs serwery dedykowane: Czy twoja strona jest hostowana na własnej instancji, czy dzieli zasoby z innymi użytkownikami i ich stronami? Serwery dedykowane zwykle kosztują więcej, ale zapewniają bardziej stabilną wydajność.
• Pamięć (RAM): Pamięć, do której może sięgnąć twoja strona na serwerze, odgrywa kluczową rolę w jej ogólnej wydajności. Jeśli pamięć jest maksymalnie wykorzystana, serwer nie będzie mógł przetwarzać i odpowiadać na nowe żądania.
• CPU / Procesor: Szybkość procesora serwera również wpływa na szybkość odpowiedzi i czas przetwarzania.
• Aktualizacje infrastruktury: Czy oprogramowanie działające na serwerze jest aktualizowane i wolne od błędów czy konfliktów? Zaktualizuj do najnowszych wersji PHP, MySQL i innych niezbędnych aplikacji, aby maksymalizować wydajność.

Wprowadź Pamięć podręczną

Na tak zwanych „dynamicznych stronach internetowych”, takich jak strony działające na WordPressie, buforowanie stron może przynieść ogromne korzyści dla czasu ładowania stron i TTFB.

Pamięć podręczna oznacza, że zamiast pobierać informacje z bazy danych Twojej strony za każdym razem, gdy strona jest ładowana, strona będzie przechowywać kopię strony i serwować ją użytkownikowi. Jest to znacznie szybsze niż wyszukiwanie informacji za każdym razem.

Aby zrozumieć, jak to działa, przeczytaj nasz przewodnik po pamięci podręcznej stron internetowych.

Uwaga na temat indeksu prędkości

Nie uwzględniliśmy oddzielnej sekcji skupionej na metryce Speed Index w tym przewodniku, ponieważ mierzy ona zasadniczo całkowity czas ładowania strony.

To oznacza, że ​​rozwiązanie problemów z indeksem szybkości to zwykle kwestia zajmowania się innymi powiązanymi metrykami, które już omówiliśmy:

• Pierwsze Znaczące Malowanie
• Największe Znaczące Malowanie
• Interakcja do Następnego Malowania
• Czas do Pierwszego Bajtu

Każdy z nich odegra małą rolę w kumulatywnym czasie ładowania strony, a bezpośrednie zajęcie się nimi powinno poprawić ogólny wynik indeksu prędkości.

Końcowe przemyślenia na temat PageSpeed Insights

W tym przewodniku omówiliśmy prawie wszystko, co musisz wiedzieć na temat raportu PageSpeed Insights oraz jak strategicznie rozwiązywać każdy potencjalny problem.

Ogólnie rzecz biorąc, oczekuję, że wydajność strony, dostępność i najlepsze praktyki techniczne będą nadal zyskiwać na znaczeniu. Budujemy razem internet – jedną stronę na raz – i to zależy od nas wszystkich, aby inwestować w utrzymanie internetu otwartego, dostępnego i pięknego.

Zarządzaj elastycznym hostingiem VPS

Oto co wyróżnia ofertę VPS od DreamHost: wsparcie klienta 24/7, intuicyjny Panel, skalowalna RAM, nieograniczona przepustowość, nieograniczona liczba domen hostingowych i przechowywanie SSD.

Wybierz swój plan VPS

Brian Glassman