Asing Google PageSpeed ​​Insights Assessment

Jeśli jesteś właścicielem firmy, chcesz uzyskać lepsze rankingi wyszukiwania swojej witryny. Jeśli jesteś programistą, musisz zaspokoić potrzeby klienta i stworzyć witrynę o dobrej pozycji w rankingu. Google bierze pod uwagę setki cech, gdy określa kolejność witryn na swojej stronie rankingowej w wyszukiwarkach (SERP).

Szybkość strony została oficjalnie wymieniona jako ważny atrybut rankingu w połowie 2018 roku. W tym artykule wyjaśnimy wyniki skuteczności, na które właściciele firm powinni zwracać uwagę: PageSpeed ​​Insights. Zagłębimy się w szczegóły techniczne, które pomogą twórcom oprogramowania wprowadzić ulepszenia w skomplikowanych przypadkach, takich jak te związane z aplikacjami jednostronicowymi.

Dlaczego test Acing Google PageSpeed ​​Insights ma znaczenie

Kiedy Google wprowadził PageSpeed ​​Tools w 2010 roku, większość właścicieli witryn zapoznała się z nimi. Ci, którzy tego nie zrobili, powinni otworzyć PageSpeed ​​Insights, aby sprawdzić swoje witryny.

Usługa zawiera szczegółowe informacje o tym, jak witryna działa zarówno w przeglądarkach stacjonarnych, jak i mobilnych. Łatwo przeoczyć fakt, że możesz przełączać się między nimi za pomocą zakładek Mobile i Desktop u góry analizy:

Ponieważ urządzenia mobilne są kompaktowe i mają na celu oszczędzanie baterii, ich przeglądarki internetowe mają zwykle niższą wydajność niż urządzenia z komputerowymi systemami operacyjnymi, więc spodziewaj się, że wynik dla komputerów stacjonarnych będzie wyższy.

Duże firmy technologiczne nie osiągną ujemnego wyniku w żadnej dziedzinie, ale mniejsze witryny z mniejszym budżetem mogą. Właściciele firm mogą również uruchamiać PageSpeed ​​Insights w witrynach konkurencji i porównywać wyniki z własnymi, aby sprawdzić, czy muszą zainwestować w poprawę wydajności.

Jaki wynik jest wystarczający, aby przejść ocenę PageSpeed?

PageSpeed ​​wykorzystuje dane z Core Web Vitals, aby zapewnić ocenę zaliczenie/niezaliczenie.

To narzędzie ma trzy wyniki:

1. PageSpeed ​​wyraźnie wyświetla wynik wydajności w kolorowym kółku w sekcji Diagnozuj problemy z wydajnością. Jest obliczany przy użyciu wbudowanych maszyn wirtualnych PageSpeed, których charakterystyka odpowiada przeciętnemu urządzeniu mobilnemu lub stacjonarnemu. Pamiętaj, że ta wartość dotyczy ładowania strony i maszyny wirtualnej PageSpeed ​​i nie jest brana pod uwagę przez wyszukiwarkę Google.

   Ta liczba jest przydatna, gdy programiści wdrażają zmiany na stronie internetowej, ponieważ pozwala im sprawdzić wpływ zmian na wydajność. Jednak wyszukiwarka Google bierze pod uwagę tylko szczegółowe wyniki.

2. Szczegółowe wyniki dla określonej strony — i dla tych, które PageSpeed ​​uważa za podobne do analizowanej strony — są obliczane na podstawie statystyk, które przeglądarki Chrome zbierają na prawdziwych komputerach i wysyłają do Google. Oznacza to, że wydajność w przeglądarkach Firefox, Safari i innych przeglądarkach innych niż Chromium nie jest brana pod uwagę.

3. Podsumowanie dla wszystkich stron serwisu uzyskuje się w taki sam sposób jak wynik pojedynczej strony. Aby uzyskać do niego dostęp, wybierz zakładkę Pochodzenie zamiast zakładki Ten adres URL. Adres URL podany pod paskiem kart będzie inny, ponieważ Origin wyświetli stronę główną witryny (tylko domena).

Google stale aktualizuje listę wskaźników uwzględnianych przez PageSpeed, więc najlepszym źródłem tego, co ważne, jest sekcja Experience / Core Web Vitals w Google Search Console, zakładając, że dodałeś już tam swoją witrynę.

Aby zaliczyć ocenę Core Web Vitals Assessment, wszystkie wyniki muszą być zielone:

Aby wartości były zielone, strona musi uzyskać w teście co najmniej 75% punktów, a wielu użytkowników musi doświadczyć równych lub lepszych wartości. Próg różni się dla każdego wyniku i jest znacznie wyższy dla FID.

Aby lepiej zrozumieć wartości, kliknij tytuł wyniku:

Jest to link do wpisu na blogu wyjaśniającego bardziej szczegółowo progi dla danej kategorii.

Dane są gromadzone przez 28 dni i istnieją dwie inne poważne różnice w stosunku do rzeczywistych użytkowników:

1. Wydajność rzeczywistych urządzeń i prędkości internetu są różne, więc ten test daje inne wyniki niż wyniki maszyn wirtualnych PageSpeed.
2. Szczegółowe oceny są obliczane przez cały okres życia strony, biorąc najgorsze wartości z każdego pięciosekundowego interwału otwarcia strony.

Jeśli wielu użytkowników witryny mieszka w regionach o wolnym dostępie do internetu i korzysta z przestarzałych lub mało wydajnych urządzeń, różnica może być zaskakująca. To nie jest jedna z rekomendacji ulepszeń PageSpeed ​​Insights. Na pierwszy rzut oka nie jest oczywiste, jak sobie z tym poradzić, ale postaramy się wyjaśnić później.

Poprawianie wyników za pomocą zaleceń PageSpeed ​​Insights

Główna część oceny pochodzi z tego, jak większość użytkowników otwiera stronę. Pomimo tego, że nie wszyscy użytkownicy odwiedzają witrynę przez dłuższy czas, a większość odwiedza witrynę okazjonalnie, wszyscy użytkownicy są uwzględniani w rankingach, więc poprawa szybkości ładowania strony, która ma wpływ na wszystkich, jest dobrym punktem wyjścia.

Rekomendacje można znaleźć w sekcji Możliwości pod wynikami oceny.

Każdy element możemy rozbudować i uzyskać szczegółowe zalecenia dotyczące ulepszeń. Jest wiele informacji, ale oto najważniejsze i najważniejsze wskazówki:

• Popraw szybkość odpowiedzi serwera. Na przykład, jeśli korzystasz z hostingu współdzielonego, uaktualnij swój plan lub przeprowadź migrację do wirtualnego serwera prywatnego (VPS) lub nawet serwera dedykowanego. Ponadto nie wszystkie hosty są równe. Spróbuj wybrać niezawodny hosting z dobrymi gwarancjami sprzętu i dostępności.
• Zmniejsz natężenie ruchu wymaganego do otwarcia witryny. Aby to osiągnąć, możesz zastąpić obrazy zoptymalizowanymi: zmienić ich format, dostosować rozdzielczość i kompresję, w razie potrzeby zastąpić animowane obrazy statycznymi itp. Popularne systemy zarządzania treścią mają wtyczki, które ułatwiają ten proces.
• Buforuj więcej danych. Najprostszym sposobem na to jest użycie sieci dostarczania treści (CDN), takiej jak Cloudflare, dla treści statycznych (obrazów, stylów, skryptów, stron, które się nie zmieniają). Możesz skonfigurować reguły buforowania, aby zoptymalizować wydajność.

Przyjrzyjmy się teraz bardziej skomplikowanym czynnikom, w których może pomóc doświadczony programista.

Jak debugować wyniki w czasie życia strony?

Jak wspomniano, Google Search Console uwzględnia średnie wyniki uzyskane z przeglądarek opartych na Chromium w ciągu ostatnich 28 dni, a także uwzględnia wartości z całego okresu istnienia strony.

Problemem jest niemożność zobaczenia, co dzieje się w czasie życia strony. Maszyna wirtualna PageSpeed ​​nie może uwzględnić, jak strona działa po jej załadowaniu, a użytkownicy wchodzą z nią w interakcję, co oznacza, że ​​twórcy witryn nie będą mieli dostępu do zaleceń dotyczących ulepszeń.

Rozwiązaniem jest dołączenie biblioteki Google Chrome Web Vitals do wersji deweloperskiej projektu witryny, aby zobaczyć, co się dzieje, gdy użytkownik wchodzi w interakcję ze stroną.

Różne opcje dołączania tej biblioteki znajdują się w pliku README.md na GitHub. Najprostszym sposobem jest dodanie poniższego skryptu. Został zmodyfikowany, aby wyświetlać wartości przez cały okres istnienia strony w <head> głównego szablonu:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Należy pamiętać, że obliczanie skumulowanego przesunięcia układu (CLS) i największej zawartości farby (LCP) jest dostępne tylko dla przeglądarek opartych na Chromium, w tym Chrome, Opera, Brave (wyłącz Brave Shields, aby biblioteka działała) i większości innych nowoczesnych przeglądarek, z wyjątkiem Firefox , który jest oparty na silniku Mozilli i przeglądarce Safari firmy Apple.

Po dodaniu skryptu i przeładowaniu strony otwórz narzędzia programistyczne przeglądarki i przejdź do zakładki Konsola.

Aby zobaczyć, jak te wartości są obliczane dla wersji mobilnej, przełącz się na urządzenie mobilne za pomocą paska narzędzi Urządzenia. Aby uzyskać do niego dostęp, kliknij przycisk Przełącz pasek narzędzi urządzenia w narzędziach programistycznych przeglądarki.

Pomoże to zlokalizować problemy. Rozwinięcie wiersza w konsoli pokaże szczegółowe informacje o tym, co spowodowało zmianę wyniku.

W większości przypadków automatyczne porady dotyczące innych wyników wystarczają, aby zorientować się, jak je poprawić. Jednak CLS zmienia się po załadowaniu strony z interakcjami użytkownika i po prostu może nie być żadnych zaleceń, szczególnie w przypadku aplikacji jednostronicowych. Możesz zobaczyć doskonały wynik 100 w sekcji Diagnozuj problemy z wydajnością, nawet jeśli Twoja strona nie przejdzie oceny pod kątem czynników branych pod uwagę przez wyszukiwarkę.

Dla tych z nas, którzy zmagają się z CLS, będzie to pomocne. Rozwiń rekord dziennika, a następnie wpisy, określony wpis, źródła, określone źródło i porównaj currentRect z previousRect :

Teraz, gdy widzimy, co się zmieniło, możemy zidentyfikować kilka sposobów, aby to naprawić.

Zmniejszenie skumulowanego przesunięcia układu

Ze wszystkich wyników CLS jest najtrudniejszy do uchwycenia, ale ma kluczowe znaczenie dla wygody użytkownika. Zmiana układu występuje, gdy element zostanie dodany do modelu obiektów dokumentu (DOM) lub zmieni się rozmiar lub położenie istniejącego elementu. Powoduje to przesunięcie elementów poniżej tego elementu, a użytkownik czuje, że nie może kontrolować tego, co się dzieje, co powoduje, że opuszcza witrynę.

Jest to stosunkowo łatwe do obsługi na prostej stronie HTML. Ustaw atrybuty szerokości i wysokości obrazów, aby tekst pod nimi nie był przesuwany podczas ładowania. To prawdopodobnie rozwiąże problem.

Jeśli Twoja strona jest dynamiczna i użytkownicy pracują z nią jak z aplikacją, rozważ następujące kroki, aby rozwiązać problemy z CLS:

1. Ustaw stronę tak, aby wyświetlała treść 500 milisekund po kliknięciu przez użytkownika przycisku lub linku bez wywoływania CLS.
2. Zmień parametry, które nie powodują przesunięcia innych elementów DOM: tło, kolor itp.
3. Upewnij się, że inne elementy nie przesuną się podczas zmiany rozmiaru lub pozycji elementu.

Bardziej szczegółowe zalecenia są dostępne na stronie Google Developers Optimize CLS.

Jak 500 milisekund może zmniejszyć CLS?

Aby zilustrować, jak korzystać z progu 500 milisekund, posłużymy się przykładem przesyłania obrazu.

Zwykle, gdy użytkownik przesyła plik, skrypt dodaje element <img> do DOM, a następnie przeglądarka klienta pobiera obraz z serwera. Pobieranie obrazu z serwera może zająć ponad 500 milisekund i może spowodować zmianę układu.

Istnieje jednak sposób na szybsze uzyskanie obrazu, ponieważ znajduje się on już na komputerze klienckim, a tym samym utworzenie elementu <img> przed upływem terminu 500 milisekund.

Oto uniwersalny przykład na czystym ECMAScript bez bibliotek, który będzie działał na większości nowoczesnych przeglądarek:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

Jak widzieliśmy wcześniej, naprawienie tego rodzaju problemów może wymagać sprawności umysłowej. Dzięki urządzeniom mobilnym, zwłaszcza tanim, i powolnemu internetowi mobilnemu, sztuka optymalizacji wydajności z lat 90. staje się użyteczna, a tradycyjne podejścia do programowania stron internetowych mogą zainspirować naszą technikę. Pomogą w tym nowoczesne narzędzia do debugowania przeglądarki.

Zaktualizuj Konsolę wyszukiwania Google

Po znalezieniu i wyeliminowaniu problemów, zarejestrowanie zmian przez wyszukiwarkę Google może zająć trochę czasu. Aby nieco szybciej zaktualizować wyniki, poinformuj Google Search Console o rozwiązaniu problemów.

Wybierz stronę, nad którą pracujesz, korzystając z pola właściwości wyszukiwania w lewym górnym rogu. Następnie przejdź do Core Web Vitals w lewym menu hamburgera:

Kliknij przycisk Otwórz raport w prawym górnym rogu raportu na urządzenia mobilne lub komputery. (Jeśli wystąpiły problemy z obydwoma, pamiętaj, aby powtórzyć te same czynności dla drugiego raportu później).

Następnie przejdź do sekcji Szczegóły pod wykresem i kliknij wiersz z ostrzeżeniem o nieudanej weryfikacji.

Następnie kliknij przycisk Zobacz szczegóły dla tego problemu.

I na koniec kliknij Rozpocznij nową weryfikację.

Nie oczekuj natychmiastowych rezultatów. Weryfikacja może potrwać do 28 dni.

Optymalizacja to ciągła walka

Optymalizacja SEO jest procesem ciągłym, podobnie jak optymalizacja wydajności. Wraz ze wzrostem liczby odbiorców serwery otrzymują więcej żądań, a odpowiedzi stają się wolniejsze. Rosnące zapotrzebowanie zwykle oznacza, że ​​do witryny są dodawane nowe funkcje, które mogą wpływać na wydajność.

Jeśli chodzi o aspekt kosztów i korzyści optymalizacji wydajności, konieczne jest zachowanie odpowiedniej równowagi. Deweloperzy nie muszą przez cały czas osiągać najlepszych wartości we wszystkich witrynach. Skoncentruj się na tym, co powoduje największe problemy z wydajnością; uzyskasz wyniki szybciej i przy mniejszym wysiłku. Duże korporacje mogą sobie pozwolić na zainwestowanie dużej ilości zasobów i uzyskanie wszystkich wyników, ale nie dotyczy to małych i średnich firm. W rzeczywistości mała firma najprawdopodobniej musi tylko dorównać lub przewyższyć wyniki swoich konkurentów, a nie firm o dużej wadze, takich jak Amazon.

Właściciele firm powinni zrozumieć, dlaczego optymalizacja witryny ma kluczowe znaczenie, jakie aspekty pracy są najważniejsze i jakich umiejętności szukać u osób, które do tego zatrudniają. Deweloperzy ze swojej strony powinni przez cały czas pamiętać o wydajności, pomagając swoim klientom tworzyć witryny, które są nie tylko szybkie dla użytkowników końcowych, ale także osiągają dobre wyniki w PageSpeed ​​Insights.