Jak być na szczycie narzędzia Google PageSpeed ​​Insights?

Opublikowany: 2018-12-10

Indeks treści

  • Wstęp
  • 1. Statystyki szybkości strony Google
  • 2. Wnioski z Google PageSpeed ​​Insights
  • 3. Dlaczego PageSpeed ​​jest ważny
  • 4. Esencja PageSpeed ​​Insights
  • 5. Jakie są zalety korzystania z Google PageSpeed ​​Insights?
  • 6. Wskazówki, jak uzyskać idealne 100% w Google Pagespeed Insights
  • 7. Wnioski

Wstęp

Zawsze dobrze jest być na szczycie czegokolwiek i wszystkiego. Google Page Speed to coś, co w dużym stopniu wpływa na wydajność Twojej witryny. Google Page Speed to ogólna szybkość ładowania witryny. Musisz upewnić się, że wyeliminujesz elementy, które obciążają Twoją witrynę. W ten sposób możesz zwiększyć Page Speed swojej witryny i wysoką pozycję w rankingu. Dodaje to również do ogólnego rankingu SEO. Zobaczmy w tym artykule, jak wywnioskować istotę Google Page Speed ​​Insights oraz sformułować i wdrożyć najlepiej dopasowane algorytmy, aby uzyskać szczyt w teście Google Page Speed !

Szybkość strony

1. Statystyki szybkości strony Google

Po przejrzeniu 900 000 reklam analitycy z Google Page Speed ​​Insights odkryli, że zwykła przenośna strona prezentacji układa się w upokarzające 22 sekundy. To więcej niż wielokrotnie dłużej, niż większość niespokojnych klientów internetowych wytrzyma, zanim zrezygnuje ze strony — 53%, aby być poprawnym. W przypadku braku szansy, że Twoja strona będzie się układać w stosy w ciągu 3 sekund, większą część pozostawiają Twoi potencjalni klienci, zanim jeszcze ją zauważą. Jakby to nie było wystarczająco straszne, spostrzeżenia strony wykazały, że z każdym torturującym momentem strona nie układa się w stos, o wiele więcej gości pominie.

Z pomocą uczenia maszynowego w innowacjach SOASTA naukowcy odkryli związek między czasem ładowania, wagą strony (miarą w danych) i szybkością transformacji. Zasadniczo „cięższy” oznacza wolniejszy. W szczególności, gdy liczba elementów (treści, zdjęcia itp.) na stronie wzrasta z 400 do 6000, Twoje szanse na zmianę gościa spadają o 95%.

Jednak w sytuacji, gdy Twoja strona stopniowo się układa, wskazanie problemu nie zawsze jest proste. Chociaż miara Google Page Speed wpływająca na treść i liczbę zdjęć jest początkowo dostrzegalna, problemy takie jak niepotrzebny JavaScript i zbyt wiele boków już nie.

2. Wnioski z Google PageSpeed ​​Insights

Google PageSpeed ​​Insights to narzędzie, które umożliwia szybkie i bezproblemowe testowanie szybkości strony w witrynie. Na szczęście jest to bezpłatne narzędzie, którego możesz użyć, aby dokładnie odkryć, co moderuje czas ładowania Twojej strony. Wpisanie adresu URL i naciśnięcie „Analiza” szybko dostarczy Ci szczegółowy raport o tym, co osłabia tę stronę witryny, zależny od dwóch parametrów, wraz z sugestiami najlepszego sposobu rozwiązania tego problemu.

  • Parametr 1: Czas do załadowania na zakładkę. Jest to miara czasu, jaki zajmuje programowi wyrenderowanie treści tuż pod zakładką, gdy klient tego zażąda.
  • Parametr 2: Czas do pełnego załadowania strony. Jest to czas potrzebny przeglądarce na pełne wyrenderowanie strony po tym, jak zażąda tego klient.

Jak więc PageSpeed ​​Insights ocenia Twoją witrynę? Przygląda się autonomicznym elementom wykonania strony systemu: rozmieszczeniu serwera, strukturze HTML strony i wykorzystaniu zasobów zewnętrznych, na przykład obrazów, JavaScript i CSS.

Testowanie swojej witryny za pomocą PageSpeed ​​Insights może otworzyć oczy każdej osobie, która nie próbowała ulepszać swojej witryny, a ponadto Page Insights oferuje niezwykły etap początkowy dla tych, którzy chcą usprawnić działanie witryny.

To powiedziawszy, może to również doprowadzić do bezsensownego szaleństwa, gdy witryna zwraca wyniki niższe niż oczekiwano w teście Google Page Speed ​​Test lub zalecenia, które liczniki szacunków skonfigurowałeś w swojej witrynie. Instrument opiera się obecnie na dwóch kluczowych pomiarach:

1. Pierwsza satysfakcjonująca farba
2. Opóźnienie pierwszego wejścia

Powyższe dwa parametry są oceniane na trzy różne sposoby:

1.Szybko
2.Średnia
3. Powolny.

Oto, co oznaczają te dwa pomiary prostym językiem.

2.1. Pierwsza zawartość treściowa (FCP)

FCP jest rozwinięciem „pierwszej farby”, metryki, która szacuje, kiedy jakikolwiek render pojawi się w programie (na przykład korekta cieniowania podkładu sprawdziłaby). Wskaźnik FCP szacuje czas do momentu, w którym rzeczywista treść została ułożona na stronie, co zapewnia bardziej wartościową ocenę kontaktu z klientem.

2.2.Opóźnienie pierwszego wejścia (FIP)

FIP jest ważnym parametrem Google Page Speed ​​Test i sugeruje czas ładowania strony. Jest to w zasadzie czas od momentu, w którym użytkownik komunikuje się z Twoją witryną, do momentu, w którym Twoja przeglądarka faktycznie zaczyna komunikować się z przeglądarką.

3. Dlaczego PageSpeed ​​jest ważny

Gdy ktoś pojawi się na Twojej stronie, masz tylko kilka chwil, aby przykuć jego uwagę i przekonać go, aby został i nie pomijał. Niezbędna jest wysokiej jakości treść i atrakcyjny przedmiot; jednak w przypadku, gdy Twoja strona stopniowo się układa, możesz stracić osoby, zanim zmotywują się do zobaczenia Twojej treści.

Zgodnie z Kissmetrics, prawie 50% klientów internetowych przewiduje, że strona internetowa ułoży się w stos w ciągu dwóch sekund lub mniej, i generalnie zrezygnuje z miejsc docelowych, które nie układają się w ciągu trzech sekund. W sumie 79 procent klientów online, którzy mają trudności z wykonaniem witryny, nie wróci na stronę, aby ponownie dokonać zakupu, a około 44 procent z nich powiedziałoby towarzyszom, którzy nie mieli szansy, że przeżyli kiepskie zakupy w sieci, co jest negatywny wpływ na Twoją witrynę. Dlatego PageSpeed jest bardzo ważny.

4. Esencja PageSpeed ​​Insights

Chociaż prędkość strony jest jednym z ponad 200 znaków używanych przez Google do określania ogólnych rankingów, a flaga prędkości witryny ma wpływ na mniej niż 1 procent pytań związanych z polowaniem, to jednak transformacje, na które należy zwrócić uwagę.

Dobra strona z doskonałą szybkością strony sprawi, że Twoi goście zaufają Twojemu przedmiotowi lub skorzystają i przekonają ich do przekazania swoich pieniędzy. Wykonanie strony to podstawowa część każdej witryny. Możesz mieć wyjątkowo niezwykłą treść i ładnie wyglądającą witrynę, jednak jeśli nie jest to możliwe, jeśli układanie w stos zajmuje zbyt dużo czasu lub nie jest wszechstronnie responsywne, użytkownicy szybko przejdą do witryn twoich rywali.

Wtedy zdajesz sobie sprawę, że jest to autentyczne, ponieważ my jako całość to robimy. Google PageSpeed ​​Insights może zanalizować sposób działania Twojej witryny i udzielić odpowiedzi na temat zwiększenia wydajności witryny, czasu stosu i od tego miejsca .

5. Jakie są zalety korzystania z Google PageSpeed ​​Insights?

Oto lista zalet korzystania z Google PageSpeed ​​Insights

Zalety korzystania z Google PageSpeed ​​Insights?

5.1. PageSpeed przedstawia wyjątkowo szczegółowy raport ze swoich odkryć

Uzyskaj raport, który pokazuje, jak radzi sobie Twoja witryna i jakie zmiany (jeśli są fundamentalne), które musisz zastosować. Zapewnia zarówno dochodzenie, jak i administrację zaawansowaną, które są niezwykle przydatne do budowania szybkości witryny.

5.2. PageSpeed poprawia wrażenia użytkownika

Obecnie wiele osób korzysta ze swoich telefonów komórkowych do odwiedzania witryn i możesz stracić dużą część ruchu, jeśli Twoja strona nie jest responsywna dla urządzeń mobilnych. Google PageSpeed ​​Insights tworzy dokładny raport o aktualnym wyniku i informuje, czy Twoja strona dotyczy etapów mobilnych, czy nie. Możesz skorzystać z jego wskazówek dotyczących wykonywania, aby poprawić zarówno obszar roboczy, jak i wykonywanie stron mobilnych

5.3. PageSpeed zawiera dodatkowe języki

To narzędzie może być bardzo łatwo używane w różnych językach, na przykład rosyjskim, hiszpańskim i serbskim.

5.4. PageSpeed jest łatwy w użyciu

Google PageSpeed ​​Insights nie oczekuje, że będziesz mieć swoją witrynę lub być klientem Google. Nie musisz uzupełniać żadnych ramek rejestracji, tworzyć rekordu ani podawać adresu e-mail, aby z niego skorzystać.

5.5. PageSpeed jest bezpłatny

Google PageSpeed ​​Insights jest całkowicie darmowy do użytku na całym świecie. Nie musisz płacić ani grosza za korzystanie z tego niesamowitego narzędzia.

6. Wskazówki, jak uzyskać idealne 100% w Google Pagespeed Insights

Oto kilka wskazówek, które możesz zastosować, aby uzyskać doskonałe 100% w Google PageSpeed ​​Insights .

Statystyki Google PageSpeed.

6.1. DNS

Używamy Cloudflare, jednak żaden z nich nie przyspiesza usprawniania. W naszych testach stwierdziliśmy, że jest wolniejszy. W przypadku, gdy jesteś w stanie wzajemnego ułatwiania, Cloudflare najprawdopodobniej bardzo pomoże. W każdym razie dla nas konkretnie, z serwerem dedykowanym, było lepiej, gdy wszystko było wyłączone. W przypadku, gdy nie masz możliwości ani czasu na wprowadzenie Cloudflare jako opcji, możesz skorzystać z dostawców ułatwiających, na przykład WP-Engine, Presslabs, Pantheon.io. Pracowali razem w sklepie serwerowym i aranżacji CDN.

6.2. MIF

Mobile-First Index - Jest to obecnie jedno z najważniejszych kryteriów rankingu SEO. Po zbudowaniu strony internetowej należy ją zoptymalizować, aby była widoczna na smartfonach i innych gadżetach elektronicznych. Wynika to z faktu, że obecnie przeglądanie odbywa się głównie na telefonach komórkowych. Dlatego ważne jest, aby Twoja witryna była odpowiednio zoptymalizowana, ponieważ znacząco przyczynia się do Google Page Speed.

6.3. Mijający czas odpowiedzi serwera

Benchmark to 0,2 sekundy. Cokolwiek ponad to, a Google Cię oceni. Nasza strona nadal działa na dedykowanym serwerze o wysokiej specyfikacji z mnóstwem rekordów. Duża część tego, co czytasz online, zaleca ci przejście na szybsze konto WordPress (z przyłączeniami partnerskimi), co jest najprostszym sposobem, ale nie byłem przygotowany na porzucenie naszego własnego stanu bez jakiejkolwiek próby.

Mając wiele spotkań z administratorami serwera, wyłączyłem wszelkie bezsensowne administracje uruchomione na serwerze, aby umożliwić przyrost do Pagespeed . Mimo to nie odniosło to wielkiego efektu.

Największą różnicą, jaką widzieliśmy, aby skrócić czas reakcji serwera, była zmiana na PHP 7. Nie wszystkie hosty wspierają PHP 7, ale na szczęście, ponieważ mamy własne ustawienia regionalne, robimy. Połączone raporty online pokazują 20 do 50 procent przyrostu szybkości przy przejściu na PHP 7.

Niezależnie od rzeczywistej stawki, mieliśmy wymaganie dotyczące Pagespeed i musieliśmy go przetestować. Jeśli nie wiesz, jakiego wariantu PHP używasz, przedstaw ten moduł, a zobaczysz go w swoim „W skrócie” na panelu administratora.

Zanim przejdziesz dalej, musisz sprawdzić, czy strona jest dobra. Na szczęście istnieje moduł sprawdzania podobieństwa PHP, który można pobrać dla WordPressa, który przegląda Twój kod i wykrywa wszelkie problemy z przejściem na PHP 7. Wyniki badania Page Insights pokazały kilka rzeczy, które wymagały zajęcia się, z czym szybko się zajęliśmy .

Byliśmy w końcu przygotowani do przejścia na PHP 7. Aby przejść z WHM do „Menedżera Multi PHP”, wybierz stronę, której potrzebujesz i zmień wersję PHP. Jeśli nie zwrócisz się do WHM, zapytaj administratorów serwera, ale upewnij się, że robisz to na warunkach testowych/zaawansowanych – nie jest najlepszą praktyką łamanie witryny produkcyjnej.

6.4. Zaktualizowany projekt i układ strony internetowej

Grid Layout to rozmowa o mieście w zakresie projektowania i układu strony internetowej. Jeśli chodzi o Google Page Speed ​​Insight , projektowanie siatki ma więcej zalet. Zauważyłem również, że oferowałem większą liczbę wyróżnień, niż potrzebowałem w swojej witrynie, więc zacząłem szukać podstawowego, umiarkowanego tematu. Odkryłem Franka, temat zaplanowany specjalnie pod kątem szybkości. Domyślna strona docelowa podmiotu rodzica wysyła dziewięć zapytań do bazy danych i zawiera tylko dwa zapytania HTTP o wadze około 29 kb. Ten temat jest zbyt lekki – bez struktur JavaScript i zbędnych obrazków, tylko podstawowy i responsywny temat. Po wprowadzeniu tematu Franka, spodziewana liczba żądań HTTP, które ładują moją witrynę, spadła z 31 do zaledwie czterech.

6.5. Optymalizacja strony głównej

Istnieje kilka prostych sposobów na dodatkowe przyspieszenie witryny:

  • Jeśli rozpowszechniasz wpisy bloga na swojej stronie docelowej, rozpowszechniaj tylko wybrane lub streszczenia i zmniejsz liczbę prezentów na pięć lub mniej.
  • Trzymaj gadżety w bazie. Po prostu korzystaj z gadżetów, które są absolutnie niezbędne.
  • Usuń bezczynne lub bezsensowne moduły.

Ogólnie rzecz biorąc, nieskazitelna i wyśrodkowana konfiguracja witryny pomoże Twojej stronie wyglądać świetnie, a PageSpeed ​​​​będzie szybszy.

6.6. Optymalizacja obrazu

Zdjęcia o wysokiej rozdzielczości układają się w stosy o wiele dłużej niż obrazy ulepszone, a zbyteczne grindowanie może zdecydowanie zmniejszyć szybkość strony . WPMU DEV oferuje wspaniały (bezpłatny!) moduł o nazwie WP-Smush.it. Kiedy luzujesz zdjęcia za pomocą tego modułu, zauważysz, że miara twoich zdjęć zostanie kolosalnie zmniejszona bez utraty jakości wizualnej. Chociaż jesteśmy przy temacie obrazów, apatyczne układanie obrazów może również zwiększyć szybkość strony .

JPEG 2000, JPEG XR i WebP to formaty obrazu, które mają lepsze atrybuty ciśnienia i jakości w porównaniu do bardziej uznanych partnerów JPEG i PNG. Kodowanie zdjęć w tych układach w przeciwieństwie do JPEG lub PNG oznacza, że ​​będą się one ładować szybciej i będą pobierać mniej danych mobilnych, co zwiększy wydajność Google Page Speed . WebP jest wzmocniony w Chrome i Operze i zapewnia lepszą kompresję stratną i bezstratną dla zdjęć w Internecie.

6.7. Odłóż nieużywany CSS

Nieużywany kod CSS hamuje rozwój drzewa renderowania przez program. Drzewo renderowania przypomina drzewo DOM, ale w rzeczywistości dodatkowo zawiera style dla każdego centrum. Aby zbudować drzewo renderowania, program musi przejść przez całe drzewo DOM i sprawdzić, które reguły CSS mają zastosowanie do każdego huba. Im więcej nieużywanych CSS, tym dodatkowy czas, który program może potrzebować na określenie stylów dla każdego węzła, co będzie miało negatywny wpływ na Google Page Insight Speed .

6.8. Włącz kompresję tekstu i koduj obrazy

Musisz także skompresować pliki tekstowe, jeśli chcesz zoptymalizować Google Page Speed . Kompresja tekstu umożliwia szybsze transfery sieciowe, co ułatwia lepsze. Kodowanie obrazów to rodzaj kompresji danych, który pozwala skompresować przechowywanie i transmisję obrazu.

6.9. Zminimalizuj CSS, HTML, JavaScript

„Minifying” odnosi się do usuwania bezsensownych lub powtarzających się informacji bez wpływania na sposób obsługi strony przez program, co poprawi wyniki Google Page Speed . Przyczyną tego problemu może być złe kodowanie, które można rozwiązać na kilka różnych sposobów.

Poza fizycznym badaniem kodu źródłowego strony Google sugeruje wypróbowanie towarzyszących zasobów:

  • Minifikator HTML do minimalizacji HTML.
  • CSSNano i csso w celu zminimalizowania CSS.
  • UglifyJS2 i kompilator zamknięcia do minimalizacji JavaScript.

Innym wyborem jest oczywiście wykorzystanie AMP i AMP Google do systemów promocji. Te dwa projekty umożliwiają inżynierom tworzenie stron z uproszczoną formą HTML, CSS i JavaScript. Rezultatem są strony i promocje, które gromadzą się w ciągu kilku sekund.

6.10. Unikaj przekierowań strony docelowej

Jeśli struktura Twojej strony nie jest responsywna, rezultatem mogą być różne boczne ścieżki do stron zaawansowanych dla różnych gadżetów, które zwiększą PageSpeed . Niektóre podstawowe projekty przekierowania, wskazane przez Google:

  • com wykorzystuje responsywną architekturę strony internetowej, nie są wymagane przekierowania – szybko i idealnie!
  • pl ? m.example.com/home – kara za wielokrotną podróż dla wszechstronnych klientów.
  • pl ? www.example.com ? m.example.com – umiarkowane, wszechstronne doświadczenie.

Za każdym razem, gdy klient musi zostać przekierowany, renderowanie strony zatrzymuje się — co dodaje cenne sekundy do czasu sterty strony. Trzymaj się z daleka od boków wewnątrz i na zewnątrz, budując swoje strony za pomocą planu responsywnego — techniki, która gwarantuje jakość spotkań z klientami niezależnie od gadżetu, z którego korzysta potencjalny klient. W ten sposób ostateczne wyniki testu Google Page Speed ​​Test będą lepsze.

6.11. Wyeliminuj JavaScript blokujący renderowanie

Oprócz innych rzeczy, JavaScript umożliwia korzystanie z niesamowitych urządzeń zewnętrznych i intuicyjnych komponentów strony. Problem będzie polegał na tym, że dodatkowo zatrzyma parsowanie kodu HTML.

Gdy zobaczysz komunikat o błędzie, który analizuje „wyeliminuj kod JavaScript blokujący renderowanie”, oznacza to, że istnieje fragment kodu JavaScript, który opóźnia procedurę układania w stos dla fragmentu strony, który jest powyżej zagięcia, co ma negatywny wpływ na wyniki testu Google Page Speed ​​Test . Treści z zewnątrz prawdopodobnie będą winić ten problem. Zajmij się tym na trzy różne sposoby:

  • Skrypty, które nie są krytyczne dla procedury układania stosów, powinny być celowo odkładane — wprowadzane i wykonywane po całkowitym wyrenderowaniu strony.
  • Skrypty, które sterują asynchronicznie, powinny być używane częściej niż te, które sterują synchronicznie. Treści synchroniczne zatrzymują proces renderowania strony, podczas gdy te, które nie są zbieżne, umożliwiają programowi układanie w stos różnych komponentów w międzyczasie.
  • Zastanów się nad wstawieniem treści — osadzeniem niewielkiej ilości zewnętrznych zasobów JavaScript bezpośrednio w raporcie HTML — aby zmniejszyć liczbę żądań, których wymaga Twój program.

Próbując wdrożyć powyższe kroki, ogólne wyniki testu Google Page Speed ​​Test się poprawiają.

6.12. Cache przeglądarki dźwigni

Może mieć różne wymagania między serwerem a programem, zanim strona całkowicie się ułoży dla klienta. Jeśli chodzi o czas, każdy obejmuje. Przechowywanie umożliwia programowi niejako; „przypomnij sobie” niektóre elementy, które były ostatnio ułożone w stos — nagłówek, trasa, logo i tak dalej. Im więcej komponentów program może przechowywać, tym mniej komponentów musi ułożyć w stos w chwili, gdy klient zgłasza żądanie, i na koniec, tym szybciej strona będzie się układać, co zwiększa PageSpeed . Google zaleca podstawową strategię rezerwacji wielotygodniową, a dla komponentów, które są ogólnie niezmienione, jeden rok jest idealny.

7. Wnioski

Sieć zaczęła się pakować i nie możesz kłaść laurów w nadziei na sławę i skuteczność, jeśli Twoja witryna działa umiarkowanie lub nie działa tak, jak powinna. Propozycje Google PageSpeed ​​Insights zależą od najlepszych praktyk branży przepływu w zakresie obszaru roboczego i wszechstronnego wykonywania stron internetowych, więc nie zatrzymuj się stopniowo i zacznij zdobywać więcej grup obserwatorów, rozszerzając działanie witryny i pozycjonowanie indeksu internetowego oraz poprawiając wiedzę gości. Masz już dobrą znajomość całego tego szumu na temat Google PageSpeed ​​Insights .

Skorzystaj z powyższych wskazówek, a prawdopodobnie zobaczysz dobre wyniki i pozytywne zmiany. Pamiętaj też, że Rzym nie został zbudowany w jeden dzień, więc musisz dać mu trochę czasu, zanim będziesz mógł ostatecznie ocenić, czy kroki, które podjąłeś, aby poprawić wynik testu Google PageSpeed ​​Insight Test, działają, czy nie.