Dziesięć sposobów na poprawę czasu ładowania witryny i Google Core Vitals

Jakie są kluczowe wskaźniki internetowe?

Na początku tego roku Google wprowadził nowy zestaw kryteriów definiujących stabilność, szybkość i responsywność dowolnej witryny. Trzy główne kryteria są następujące:

• Kumulatywne przesunięcie układu określa, jak bardzo struktura strony internetowej powinna się przesunąć i zmienić pozycję. Punktem odniesienia dla tego jest 0,1.
• Największe wyrenderowanie treści mierzy, ile czasu zajmuje wczytanie głównej zawartości strony. Najlepsze wyniki powinny trwać 2,5 sekundy lub mniej.
• Opóźnienie pierwszego wejścia to czas między otwarciem strony internetowej a momentem, w którym po raz pierwszy staje się interaktywna. Najczęściej poszukiwany przedział czasowy to około 100 milisekund.

Mając na uwadze te podstawowe terminy, przyjrzyjmy się, jak możesz użyć Core Vitals, aby Twoja witryna była tak szybka i wydajna, jak to tylko możliwe.

1. Zoptymalizuj swój CDN i pamięć podręczną przeglądarki

Dzięki tej metodzie Twoje wyniki FID i LCP powinny zostać dość szybko poprawione. Udostępniaj swoje zasoby statyczne z sieci CDN lub buforuj je w usłudze takiej jak Cloudfront z AWS. Po tym przeglądarki znacznie szybciej uzyskają potrzebne wyniki.

Ponadto strony dynamiczne mogą być buforowane w Twojej sieci CDN z już zastosowanymi poprawnymi wartościami TTL, w zależności od tego, jak zachowują się Twoje aplikacje.

2. Użyj dokładnego rozmiaru dla wszystkich reklam i mediów

Jeśli chodzi o wyniki CLS, jest to jeden z najważniejszych czynników. Zawsze sprawdzaj, czy ustawiono określoną wysokość obrazów lub otagowanych zasobów, co jest bardzo ważne, zwłaszcza w przypadku komponentów na poziomie zwijania. Jeśli nie masz czasu, zawsze możesz ustawić wysokość na auto i uzyskać przybliżony rozmiar, który powinien wystarczyć w mgnieniu oka.

Reklamy są również uwzględniane w CLS i należy dokładnie sprawdzić ich wysokość i rozmiary, aby upewnić się, że nie przesuwają treści przez nieprawidłowe wyświetlanie. Może to wymagać skontaktowania się z dostawcą usług reklamowych lub rozejrzenia się o kilka różnych opcji, jeśli Twój CLS jest stale zagrożony.

Jeśli korzystasz z platformy WordPress, zalecamy rozważenie wtyczki takiej jak Ewww , która może automatycznie dostarczać Twoje obrazy w Webp i włączać funkcje, takie jak leniwe ładowanie, aby opóźnić ładowanie wszystkich obrazów podczas ładowania strony.

3. Załaduj obrazy o odpowiedniej rozdzielczości w leniwy sposób w zależności od typu używanego urządzenia

Ta technika daje niesamowicie szybkie rezultaty i powinna być jednym z twoich pierwszych rozważań. Użycie pakietu leniwego ładowania do, co zaskakujące, leniwego ładowania wszystkich obrazów w witrynie, pozytywnie wpłynie na LCP, przede wszystkim poprzez zmniejszenie wagi strony i zapewnienie jej jak najszybszego załadowania.

Niezbędne jest również ustawienie rozdzielczości dla każdego zasobu na podstawie typu urządzenia używanego do przeglądania witryny. Rozdzielczość ładowania jako uniwersalna dla wszystkich spowoduje, że witryna będzie działać znacznie wolniej na mniejszych lub mniej wydajnych urządzeniach i wpłynie na LCP w najgorszy możliwy sposób.

4. Korzystaj z SSR i CSR w inteligentny sposób

Google zawsze chętnie zachęca i promuje dobrze ocenione strony renderowane po stronie serwera (SSR), aby inspirować cenną wydajność SEO. Musisz jednak wziąć pod uwagę równowagę między SEO a wydajnością ładowania strony. Strony ze zbyt dużą zawartością mogą ładować się po stronie serwera przez całe wieki i obniżać ogólną wydajność Twojej witryny.

Rzeczywista treść powinna znajdować się w części strony widocznej na ekranie, podczas gdy inne funkcje witryny powinny być zachowane, aby poprawić SSR. Ten asynchroniczny styl wczytywania zajmuje dużo czasu wczytywania i renderowania wyników.

5. Rozbij wszystko, dzieląc swój kod

Używanie najbardziej znaczących rozmiarów plików dla zasobów (szczególnie plików JS) jest ogólnie złym pomysłem. Zamiast tego należy zezwolić na protokół h2 i wykorzystać go, aby ponownie ładować zasoby asynchronicznie w osobnych częściach.

Ponadto, zamiast jednego dużego pliku HTML, możesz podzielić witrynę na wiele mniejszych plików, a tym samym zmniejszyć obciążenie wczytywania.

6. Użyj technik kompresji Brotli, aby zmniejszyć zasoby statyczne

Jeśli chodzi o kompresję, Brotli wydaje się być najlepszą opcją pod względem szybkości ładowania. Jednak wyższe współczynniki kompresji wydłużą czas tworzenia pakietów i kompilacji pod względem DevOps.

Ale pod koniec dnia czas ładowania strony jest najważniejszym czynnikiem i powinien być traktowany priorytetowo ponad wszystko inne.

7. Spraw, aby treść odpowiedzi i żądanie API były tak wydajne, jak to tylko możliwe

Niewątpliwie najważniejszy element pod względem szybkości ładowania, nawet najmniejsze zmiany, mogą przynieść ogromne rezultaty dzięki API. Odpowiedzi i żądania API powinny być często sprawdzane w celu optymalizacji.

Zdefiniuj również parametry danych i używaj tylko tego, co niezbędne, aby zaoszczędzić sobie wiele czasu i wysiłku. Wybór sieci dla interfejsów API również zasługuje na staranne rozważenie, ponieważ hosting w niewłaściwych podsieciach może znacznie zwiększyć wymagany czas.

8. Zmniejsz całkowity rozmiar swoich stron i dokumentów

Strony docelowe z dużym kodem (wszystkie powyżej 75 KB prawdopodobnie będą poważne) są bardzo niepożądane, ponieważ drastycznie wydłużają czas ładowania i pobierania.

Zawsze staraj się zachować porządek po stronie kodu, ponieważ łatwo jest przeoczyć zbędne fragmenty danych.

9. Zastąp miniatury wideo obrazami zastępczymi

Wielu odwiedzających witrynę woli nie angażować się w treści wideo, więc ładowanie miniatur nieodtwarzanych filmów jest w tym przypadku marnowaniem zasobów.

Lepszym pomysłem jest wybranie obrazu zastępczego lub pustego miejsca na wideo, aby zaoszczędzić zasoby, a tym samym zwiększyć szybkość witryny.

10. Wybierz najszybszy dostępny serwer

To może wydawać się oczywistym czynnikiem, ale wciąż warto to powiedzieć. Inwestowanie w najlepszą infrastrukturę serwerową to zazwyczaj świetny pomysł, ponieważ wpływa bezpośrednio na szybkość całej witryny bez wyjątku.

Wydając nieco więcej pieniędzy, ogólnie zaoszczędzisz znaczną ilość czasu. Cloudflare to doskonałe narzędzie na poziomie DNS, które pozwala zoptymalizować witrynę w sposób ekonomiczny bez kosztownych zasobów serwerowych.

Wniosek

Powyższe wskazówki pomogą Ci osiągnąć lepszy wynik Page Speed ​​i kluczowe wskaźniki. Możesz jednak znaleźć się na nadętej platformie lub motywie, który często oznacza najlepszy sposób działania, aby stworzyć nową, czystszą i lżejszą witrynę.

Załóżmy, że zastanawiasz się nad wszystkimi tymi terminami lub czujesz się zniechęcony pomysłem przerobienia całej witryny w celu zwiększenia szybkości. W takim przypadku możesz rozważyć przegląd witryny przez eksperta od projektowania stron internetowych , który prawdopodobnie zasugeruje najlepszy sposób działania w celu optymalizacji istniejącej witryny lub zasugeruje przejście na nową witrynę z bazą kodu, która jest bardziej zoptymalizowana pod kątem kluczowych elementów.