Optymalizacja podstawowych wskaźników internetowych w witrynie The Economic Times znacznie poprawiła wygodę użytkowników i znacznie obniżyła współczynnik odrzuceń w całej witrynie.
Szybkość internetu zmienia się z dnia na dzień, więc użytkownicy oczekują, że strony będą reagować szybciej i sprawniej niż kiedykolwiek wcześniej. The Economic Times obsługuje ponad 45 milionów aktywnych użytkowników miesięcznie. Dzięki optymalizacji pod kątem podstawowych wskaźników internetowych w całej domenie, na stronach AMP i stronach innych niż AMP udało nam się znacznie obniżyć współczynniki odrzuceń i poprawić wygodę czytania.
Pomiar wpływu
Skupiliśmy się na największym wyrenderowaniu treści (LCP) i skumulowanym przesunięciem układu (CLS), ponieważ są one najważniejsze, jeśli chodzi o zapewnianie użytkownikom dobrych wrażeń podczas czytania. Po wdrożeniu różnych poprawek wydajności zgodnie z opisem poniżej gazeta „The Economic Times” w ciągu kilku miesięcy znacząco poprawiła dane dotyczące eksperymentów z użytkownikami Chrome (CrUX).
Ogólnie wskaźnik CLS poprawił się o 250% między 0,25 a 0,09. Ogólny wskaźnik LCP poprawił się o 80% z 4,5 sekundy do 2,5 sekundy.
Ponadto w okresie od października 2020 r. do lipca 2021 r. wartości LCP w zakresie „Słabej jakości” zostały zmniejszone o 33%:
Ponadto wartości CLS w zakresie „Słabej jakości” zostały zmniejszone o 65%, a wartości CLS w zakresie „Dobra” wzrosły o 20% w tym samym okresie:
W efekcie gazeta The Economic Times, która wcześniej nie osiągała progów podstawowych wskaźników internetowych, przekroczyła progi Podstawowych wskaźników internetowych w całym źródle i ogólnie obniżyła współczynniki odrzuceń o 43%.
Co to jest wskaźnik LCP i jak go ulepszyliśmy?
Największy element jest najbardziej trafny, jeśli chodzi o poprawę wrażeń użytkownika i rozpoznawanie szybkości wczytywania. Dane o skuteczności, takie jak Pierwsze wyrenderowanie treści (FCP), uwzględniają tylko pierwsze wrażenia z wczytywania strony. LCP podaje natomiast czas renderowania największego fragmentu obrazu, tekstu lub filmu widocznego dla użytkownika.
Oprócz przejścia na szybszego dostawcę DNS i optymalizacji obrazów omówiliśmy niektóre z technik, które omówiliśmy, aby poprawić LCP.
Najpierw żądania krytyczne
Wszystkie nowoczesne przeglądarki ograniczają liczbę równoczesnych żądań, dlatego deweloperzy muszą najpierw skupić się na wczytywaniu najważniejszych treści. Aby wczytać złożoną stronę internetową, musimy pobrać takie zasoby, jak elementy nagłówka, CSS, zasoby JavaScript, baner powitalny, treść artykułu, komentarze, inne powiązane wiadomości, stopkę i reklamy. Oceniliśmy, które elementy są niezbędne w przypadku LCP, i umożliwiliśmy wczytywanie ich w pierwszej kolejności w celu poprawy LCP. Odłożyliśmy także wywołania, które nie były częścią początkowego renderowania strony.
Wygląd tekstu
Przetestowaliśmy właściwość font-display, ponieważ wpływa ona zarówno na LCP, jak i CLS. Próbowaliśmy font-display: auto;, a potem przełączyliśmy się na font-display: swap;. Spowoduje to wyrenderowanie tekstu na początku w najlepszym dopasowaniu i dostępnym czcionce, a potem przełączy się na czcionkę po pobraniu. W rezultacie nasz tekst renderował się szybko niezależnie od szybkości sieci.
Lepsza kompresja
Brotli to alternatywny algorytm kompresji dla Gzip i Deflate opracowanych przez Google. Zastąpiliśmy nasze czcionki i zasoby oraz zmieniliśmy kompresję serwera z Gzip na Brotli, aby zmniejszyć jej rozmiar:
- Pliki JavaScript są o 15% mniejsze niż w przypadku Gzip.
- Pliki HTML są o 18% mniejsze niż w formacie Gzip.
- Pliki CSS i pliki czcionek są o 17% mniejsze niż w przypadku Gzip.
Wcześniejsze łączenie z domenami innych firm
Usługi preconnect należy używać z rozwagą, ponieważ nadal może to zajmować cenny czas procesora i opóźniać działanie innych ważnych zasobów, zwłaszcza w przypadku bezpiecznych połączeń.
Jeśli jednak wiadomo, że nastąpi pobranie zasobu z domeny innej firmy, preconnect jest dobrym rozwiązaniem. Jeśli zdarza się to tylko sporadycznie w witrynie o dużym natężeniu ruchu, preconnect może aktywować niepotrzebne funkcje TCP i TLS. Dlatego dns-prefetch lepiej nadaje się do korzystania z zasobów zewnętrznych – na przykład mediów społecznościowych, analiz itp. – do przeprowadzania wyszukiwań DNS z wyprzedzeniem.
Podziel kod na fragmenty
W nagłówku witryny wczytywaliśmy tylko te zasoby, które zawierają istotną część logiki biznesowej lub były krytyczne przy renderowaniu strony w części strony widocznej na ekranie. Ponadto dzielimy kod na fragmenty za pomocą podziału kodu. Pomogło nam to w dalszym polepszaniu LCP strony.
Lepsze buforowanie
Do wszystkich tras interfejsu użytkownika dodaliśmy warstwę Redis, która wyświetlała szablony z pamięci podręcznej. Skraca to czas przetwarzania na serwerze i tworzy cały interfejs użytkownika w przypadku każdego żądania, co zmniejsza LCP w kolejnych żądaniach.
Podsumowanie celów i osiągnięć LCP
Przed rozpoczęciem projektu optymalizacji zespół porównał wynik LCP na 4,5 sekundy (dla 75 centyla użytkowników – na podstawie danych z pola raportu CrUX). Po zakończeniu projektu optymalizacji został on skrócony do 2, 5 sekundy.
Co to jest CLS i jak go ulepszyliśmy?
Czy kiedykolwiek zdarzyło Ci się zauważyć nieoczekiwany ruch zawartości strony podczas przeglądania witryny? Jedną z przyczyn jest asynchroniczne ładowanie multimediów (obrazów, filmów, reklam itp.) na stronie o nieznanych wymiarach. Gdy tylko zasoby multimedialne zostaną wczytane, układ strony przesuwa się.
Na stronie The Economic Times omówimy działania podjęte w celu ulepszenia CLS.
Używanie obiektów zastępczych
Użyliśmy obiektu zastępczego ze stylem dla jednostek reklamowych i elementów multimedialnych o znanych wymiarach, aby uniknąć zmian układu, gdy biblioteka reklam wczytuje i renderuje reklamy na stronach. Dzięki temu rezerwowanie miejsca na reklamę eliminuje przesunięcia układu.
Zdefiniowane wymiary kontenera
Określiliśmy jawne wymiary dla wszystkich obrazów i kontenerów, aby przeglądarka nie musiała obliczać szerokości i wysokości elementów DOM, gdy są one dostępne. Pozwoliło to uniknąć niepotrzebnych przesunięć układu i dodatkowego malowania.
Podsumowywanie celów i osiągnięć CLS
Przed rozpoczęciem projektu optymalizacji zespół porównał swój wynik CLS z wynikiem 0, 25. Udało nam się je znacznie obniżyć o 90% – do 0,09.
Co to jest opóźnienie przy pierwszym działaniu (FID) i jak możemy je poprawić?
Opóźnienie przy pierwszym działaniu to dane śledzące responsywność witryny w odniesieniu do danych wejściowych użytkownika. Główną przyczyną niskiego wyniku FID jest intensywna praca JavaScriptu, która powoduje zajęcie głównego wątku przeglądarki, co może opóźniać interakcje użytkownika. Ulepszyliśmy FID na kilka sposobów.
Rozdzielanie długich zadań JavaScript
Długie zadania to zadania trwające co najmniej 50 milisekund. Długie zadania zajmują główny wątek przeglądarki i uniemożliwiają odpowiadanie na dane wejściowe użytkownika. Gdy tylko było to możliwe, podzieliliśmy długotrwałe zadania na mniejsze, co pomogło ograniczyć ilość kodu JavaScriptu.
Odłóż nieużywany JavaScript
Zawartość strony jest ważniejsza od treści skryptów innych firm, takich jak analityka, aby zapewnić jej większą elastyczność. Niektóre biblioteki podlegają jednak pewnym ograniczeniom, ponieważ muszą one być ładowane w dokumencie <head>, aby dokładnie śledzić ścieżkę użytkownika.
Ogranicz elementy polyfill
Zmniejszyliśmy zależność od niektórych elementów polyfill i bibliotek, ponieważ przeglądarki obsługują nowoczesne interfejsy API, a mniej użytkowników korzysta ze starszych przeglądarek, takich jak Internet Explorer.
Reklamy z leniwym ładowaniem
Leniwe ładowanie reklam w części strony widocznej po przewinięciu pomogło skrócić czas blokowania wątków głównych i poprawić wskaźnik FID.
Podsumowywanie celów i osiągnięć FID
Udało nam się zmniejszyć wartość FID z 200 ms do poniżej 50 ms.
Zapobieganie regresjom
The Economics Times planuje wprowadzić automatyczne kontrole wydajności w środowisku produkcyjnym, aby uniknąć spadków wydajności strony. Planuje ocenić narzędzie Lighthouse-CI w celu zautomatyzowania testów laboratoryjnych, co pozwoliłoby uniknąć regresji w gałęzi produkcyjnej.