Jak poprawić wyniki Google Core Web Vitals?

(23 sierpnia 2020 r.)

Następna era w wydajności stron internetowych

Pracuję już od kilku miesięcy na temat strategii poprawy wydajności stron internetowych w witrynach należących do mojej firmy i szczerze mówiąc, jest to naprawdę interesująca praca, którą chcę się z wami podzielić.

Rozumiem, że praca nad wydajnością stron internetowych nie jest niczym nowym i ludzie wpadli na wiele pomysłów i sztuczek, aby przyspieszyć ładowanie strony. Ale teraz wydaje się, że to już nie wystarcza i musisz przejść na następny poziom !!

Jak powinniście wiedzieć o znaczeniu SEO (optymalizacji witryn pod kątem wyszukiwarek) i umieszczania wyników swojej strony internetowej nie tylko na pierwszej stronie wyników Google, ale na samej górze tej samej pierwszej strony to naprawdę świetna okazja! Krótko mówiąc – gwarantuję, że odtąd Google Core Web Vitals będzie jednym z największych współtwórców rankingu SEO wyników wyszukiwania Google.

Krótki & Proste wyjaśnienie dotyczące Google Core Web Vitals

Core Web Vitals, wprowadzone w pierwszym kwartale tego roku, to zestaw wskaźników związanych z szybkością, responsywnością i wizualną stabilnością Twojej strony internetowej.

Google zdefiniował je jako Core Web Vitals:

  • Największa farba zawierająca treści : czas potrzebny do załadowania głównej treści strony. Idealny pomiar LCP to 2,5 sekundy lub szybciej.
  • Opóźnienie pierwszego wejścia : czas potrzebny, aby strona stała się interaktywna. Idealny pomiar to mniej niż 100 ms .
  • Skumulowane przesunięcie układu : Wielkość nieoczekiwanego przesunięcia układu zawartości wizualnej strony. Idealny pomiar to mniej niż 0,1 .

Ten zestaw wskaźników został zaprojektowany, aby pomóż właścicielom witryn mierzyć wrażenia użytkowników, które zapewniają, jeśli chodzi o ładowanie, interaktywność i stabilność wizualną.

Ogólnie, poniżej wydajność Twojej strony zostanie sklasyfikowana jak poniżej.

Pełna lista danych branych pod uwagę przy określaniu wydajności strony.

Następna sekcja zasadniczo omawia pomysły lub metody poprawy wydajności ładowania strony i wyników CWV.

Wskazówki dotyczące poprawy wyników Core Web Vitals

Poniżej znajduje się kilka metod co pomogło mi znacznie poprawić moje wyniki Core Web Vitals, a także poprawić ogólną wydajność strony.

  1. Efektywne wykorzystanie przeglądarki i pamięci podręcznej CDN (poprawia FID i LCP)
    To jest bardzo proste podejście ch, aby poprawić wyniki FID i LCP. Upewnij się, że Twoje zasoby statyczne są obsługiwane z CDN (jeśli jest to AWS, możesz je buforować w Cloudfront). W ten sposób powoduje to szybkie pobieranie zasobów do przeglądarek. Aby poprawić drugie ładowanie, upewnij się, że zasoby, które dotarły do ​​klienta, są zapisane w pamięci podręcznej przeglądarki.
    cache-control: max-age=120 – oznacza, że ​​zwrócony zasób jest ważny przez 120 sekund, po których przeglądarka musi zażądać nowszej wersji.
    Możesz także buforować swoje strony dynamiczne również w swój CDN z odpowiednią wartością TTL opartą na zachowaniu aplikacji.
  2. Ustaw dokładne atrybuty rozmiaru lub wymiary dla swoich mediów i reklam (poprawia CLS)
    Jest to bardzo ważne, aby poprawić wyniki CLS. Upewnij się, że masz prawidłowo ustawiony height:XXpx; width: YYpx obraz lub tagi multimedialne. Znowu jest to bardzo ważne, przynajmniej w przypadku elementów znajdujących się nad zakładką. Jednym ze skrótów jest to, że jeśli brakuje Ci pomysłów na uzyskanie dokładnej wysokości obrazu, możesz ustawić jako height:auto;, co naprawdę mi pomogło. Oprócz mediów, jeśli Twoja witryna wyświetla reklamy, upewnij się, że ustawiłeś odpowiednie boksy reklamowe o odpowiednich wymiarach, ponieważ przesuwanie w górę lub w dół komponentów na stronie z pewnością obniży Twój wynik CLS. Dlatego też miej oko na reklamy!
  3. Leniwe ładowanie obrazów w odpowiedniej rozdzielczości na podstawie typu urządzenia (poprawia LCP)
    To naprawdę szybka wygrana! Na świecie jest wiele pakietów ładujących się z opóźnieniem, których możesz użyć na swojej stronie internetowej, aby leniwie ładować wszystkie obrazy na swojej stronie.Spowoduje to zmniejszenie ogólnej wagi strony i czasu ładowania w celu renderowania strony w przeglądarce. Kolejnym ważnym elementem jest to, że wstępnie zdefiniuj rozdzielczość obrazu, który chcesz załadować, na podstawie typu urządzenia. Nie należy ładować obrazów o tej samej rozdzielczości na różnych typach urządzeń.
  4. Efektywnie używaj SSR i CSR na swojej stronie internetowej (popraw FID & LCP)
    Powinieneś wiedzieć, że Google promuje i zachęca strony renderowane po stronie serwera (SSR) do uzyskiwania dobrych wartości SEO. Ale najlepiej kompromis z SEO Vs Page Load Performance. Jeśli Twoja strona jest zbyt duża pod względem treści i jeśli zdecydujesz się wyrenderować całą stronę na serwerze, z pewnością załadowanie całej strony zajmie więcej czasu waga też będzie wysoka. Krótko mówiąc – zalecam, aby renderować SSR dla komponentów strony, które pojawiają się w części strony widocznej na ekranie, i renderować pozostałe komponenty po stronie klienta, które pojawiają się poniżej. W ten sposób użytkownik ładuje stronę w części strony widocznej na ekranie, a reszta strony renderuje się asynchronicznie bez utrudniania użytkownikowi doświadczenia.
  5. Użyj kodu Dzielenie & dzieli zasoby na porcje (poprawia FID & LCP)
    Zawsze nie jest dobrym pomysłem posiadanie ogromnych zasobów (wszystko, co przekracza 100 KB, to duże) (zwłaszcza plików JS) w aplikacji. Dlatego lepiej używaj pakietów takich jak „webpack”, aby podzielić ciężkie zasoby na małe fragmenty, które będą asynchronicznie ładować zasoby do przeglądarki (jeśli włączysz protokół h2). Możesz także skorzystać z funkcji dzielenia kodu, aby rozbić komponenty strony na oddzielne pliki, zamiast umieszczać je w jednym pliku HTML.
  6. Kompresuj wszystkie swoje statyczne zasoby za pomocą kompresji Brotli (poprawia LCP)
    Zachęcam do używania Brotli do kompresji statycznych zasobów, co daje znacznie lepsze współrzędne wskaźniki depresji w porównaniu z innymi bibliotekami na rynku. Jednocześnie pamiętaj, że gdy używasz Brotli z wyższym współczynnikiem kompresji, zdecydowanie wydłuży to czas kompilacji i pakowania w ścieżce DevOps. Dla mnie dobrze było poświęcić czas tworzenia aplikacji, ponieważ uzyskuję lepszą wartość pod względem wydajności ładowania strony.
  7. Zoptymalizuj żądanie API i treść odpowiedzi (poprawia FID & LCP)
    Jest to bardzo ważne, aby wziąć to pod uwagę, ponieważ każdy bajt ma tutaj znaczenie, kiedy mówimy o wydajność strony. Ufam, że nie będziesz żałować, aby wrócić i sprawdzić odpowiedzi na żądania API & dotyczące zapełnienia strony. Upewnij się, że otrzymujesz tylko te dane, które są potrzebne do być renderowane z odpowiedzi interfejsu API. Kolejną głupią rzeczą, którą możesz popełnić, jest to, że wywołania interfejsu API są wywoływane wewnętrznie, a nie przy użyciu publicznych punktów końcowych lub Internetu – ponieważ zawsze jest to kosztowne pod względem czasu, wywołują twoje API przez internet, jeśli masz API hostowane w tej samej podsieci lub przynajmniej w tej samej sieci!
  8. Zmniejsz całą stronę / dokument rozmiar (poprawia LCP)
    Idealnie, jeśli Twoja strona docelowa jest ciężka (kategoryzowałbym każdą stronę z> 80 KB jako ciężką), z pewnością wpłynie to niekorzystnie na wynik LCP ponieważ proporcjonalnie zwiększy prędkość pobierania i pobierania Twojej strony. Dlatego upewnij się, że nie pobierasz żadnych nieużywanych dużych porcji danych po stronie serwera i ładuj tylko dane potrzebne do renderowania strony.
  9. Używaj formatów obrazu NEXT-GEN (poprawia LCP)
    JPEG 2000, JPEG XR i WebP to formaty obrazów, które mają lepszą kompresję i jakość w porównaniu ze starszym JPEG i Odpowiedniki PNG. Kodowanie obrazów w tych formatach, a nie w formacie JPEG lub PNG, oznacza, że ​​będą ładować się szybciej i zużywać mniej danych komórkowych. Możesz użyć dowolnego narzędzia dostępnego na rynku, aby przekonwertować obrazy na obrazy w formacie NEXT-GEN lub możesz nawet zbudować usługę obrazu w czasie wykonywania, która może wykonać konwersję obrazu w czasie rzeczywistym z JPEG do WebP i wyświetlać w przeglądarce.
  10. Włącz powrót do natywnych czcionek obsługiwanych przez przeglądarkę (poprawia FID)
    Udowodniono, że czcionki może naprawdę obniżyć wyniki wydajności, jeśli przeglądarka opóźnia się z ładowaniem niestandardowej czcionki używanej w aplikacji, chyba że jest to czcionka domyślna obsługiwana przez przeglądarkę. W takim przypadku szybką wygraną jest zastosowanie metody zastępczej podczas ładowania czcionkę z czcionkami, które są domyślnie obsługiwane przez przeglądarkę. Poniżej znajduje się przykładowy fragment kodu przedstawiający podejście zastępcze w przypadku innych czcionek.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Wszystkie powyższe wskazówki mogą być stopniowo wdrażane w Twojej aplikacji i ponownie, jak wspomniano wcześniej, wyniki Core Web Vitals pochodzą od rzeczywistych użytkowników danych, a nie z żadnych danych „Laboratorium”. Dlatego potrzeba czasu, aby odzwierciedlić poprawę wyniku, który jest przeważnie 28 dni. Nadal możesz korzystać z narzędzia PageSpeed firmy Google – https://developers.google.com/speed/pagespeed/insights/ , aby uzyskać wyniki CWV.

Mam nadzieję, że to pomoże i życzę powodzenia w Twoich pracach! Pozdrawiam!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *