Nowy Google PageSpeed Insights: A Perfect 100 Jest Teraz Super Łatwe

Google PageSpeed Insights właśnie dostał aktualizację i zdobycie idealnego 100 jest o wiele łatwiejsze. To doskonała wiadomość dla agencji i freelancerów z pakietami do zarządzania witryną.

Próba wyjaśnienia wadliwego systemu punktacji Google klientom, którzy widzą swój wynik PageSpeed jako system pass-fail, zawsze była trudna. „Dlaczego nie masz nic przeciwko 73!? Czy to nie C -?”

Plusy nowego silnika Google Page Speed

PageSpeed Insights korzysta teraz z Lighthouse jako silnika analitycznego wraz z danymi terenowymi z CrUX. Ta zmiana nie tylko pozwala Google spojrzeć na kod, ale także pozwala im uwzględnić rzeczywiste wyniki wydajności.

Oznacza to, że Google nie ocenia już Twojej witryny na podstawie tego, co możesz zrobić, aby poprawić swoją witrynę, oceniają ją na podstawie tego, jak faktycznie działa.

Wspaniale … prawda?

Retrospekcja starego interfejsu:

I zupełnie nowy interfejs działa Lighthouse:

Jako bonus, korzystanie z Google Analytics i Google Fonts nie obciąża już Twojego wyniku (yay za zgodność). Dla uzależnionych od szybkości witryny OCD, takich jak ja, jest to duża aktualizacja.

Ale PageSpeed Insights nigdy nie chodziło o granie w system ze sto lub sprawianie, że czujesz się lepiej o sobie. Chodzi o poprawę komfortu użytkowania, a co za tym idzie zwiększenie ruchu i współczynników konwersji w Twojej witrynie.

Nowszy, Lepszy I Nie Tak Doskonały System Punktacji

Dobra wiadomość jest taka, że Twoja strona może mieć nowy seksowny wynik 100, ale to nie znaczy, że Twoja strona jest w pełni zoptymalizowana.

Duża różnica w Nowym Google PageSpeed Insights polega na tym, że możesz mieć zarówno doskonałą szybkość strony 100, jak i nadal mogą istnieć możliwości poprawy.

Ta aktualizacja jest przełomowa i oznacza, że musimy dostosować sposób, w jaki czytamy wyniki PageSpeed Insights.

Co się nie zmieniło: prędkość wciąż jest ważna

Podczas gdy stare wyniki były bardzo sztywne i trudne do uzyskania, te nowe wyniki mogą sprawić, że użytkownicy końcowi przegapią niektóre z szybkich zwycięstw w celu dalszej poprawy wydajności witryny. A 100 nie oznacza już, że zrobiłeś wszystko, co możliwe, a Twoja strona jest w pełni zoptymalizowana.

Rzeczy do rozważenia:

• Czy używasz wysokiej jakości hosta? – Może to mieć wpływ na prędkość (więcej na ten temat później).
• Czy wdrożyłeś każdą możliwą „szansę” optymalizacji prędkości?
• Czy rozumiesz, w jaki sposób wtyczki, motywy lub inne usługi innych firm wpływają na szybkość?
• Czy jesteś w stanie iść na inteligentne kompromisy, które realizują cele Twojej witryny zarówno pod względem wydajności, jak i funkcjonalności?

Największym problemem jest to, że większość z nas ślepo akceptuje nasze wyniki, na dobre i na złe. W tym poście chcę przejść przez Możliwości dostępne do lądowania (lub przekroczenia) 100 🙂

Jeśli nie możemy osiągnąć 100, pod koniec tego czytania będziesz mieć wiedzę potrzebną do rozwiązywania problemów z powolnym czasem ładowania i możliwość ustalania realistycznych celów wokół doświadczenia użytkownika i szybkości strony w oparciu o potrzeby Twoich lub Twoich klientów.

Coraz Sto Google PageSpeed

Tak, masz uruchomić swój pierwszy czek z Google PageSpeed Insights i wrócił z 73 i listę możliwości optymalizacji.

Zdezorientowany? Nie uciekaj!

Oto przegląd tego, co oznaczają i jak je naprawić.

Pro tip: pamiętaj podczas sprawdzania wyniku, aby przełączać się między wynikami mobilnymi i stacjonarnymi. Domyślnie Google pokazuje wyniki mobilne.

Kochanie, Zmniejszyłem Kod (Minify Your Code)

Podczas gdy minifikacja brzmi jak produkt uboczny wynalazku z filmu science fiction z Lat 90., w rzeczywistości jest to tylko proces tworzenia kodu źródłowego bardziej zwartego. Podstawową ideą jest to, że cały niepotrzebny kod jest usuwany (tj. białe spacje, nowe linie, komentarze itp.) i wszystko wpada w 1 wielką linię.

Niezminifikowany przykład CSS:

     body {
          tło: # fff;
          kolor: #333;
          font-family: Lato, sans-serif;
     }

Minified CSS Example:

body{background: # fff; color:#333;font-family: Lato,sans-serif}

Zasadniczo wszystko, co robimy, aby Kod był łatwy do odczytania przez ludzkie oko, jest niepotrzebne. Minification tworzy wersję pliku, która jest mniejsza, a z kolei szybsza do dostarczenia przez serwery.

Dobra wiadomość jest taka, że nie musisz tego robić ręcznie. Wtyczka taka jak Koliber zautomatyzuje ten proces za Ciebie. I nie martw się, niezminifikowana wersja będzie tam, jeśli potrzebujesz jej do edycji i ludzkiej czytelności.

Masz Renderowanie Zasobów Blokujących … O Mój!

Oznacza to, że zasoby CSS lub JS są ładowane przed zawartością. Są one uważane za „blokowanie renderowania”, ponieważ muszą się załadować, zanim użytkownik zobaczy zawartość strony.

Istnieje kilka opcji rozwiązania tego problemu. Możesz zrobić swój kod CSS i JavaScript inline zamiast używać .css i .Pliki js.

Inną opcją jest załadowanie krytycznych plików CSS i JavaScript asynchronicznie lub odroczenie do załadowania po przetworzeniu strony.

Brzmi skomplikowanie? Jeśli nie jesteś ninja kodu może to być najtrudniejsza sugestia, aby ręcznie wykonać lub uzyskać prawo z wtyczki. Na szczęście z dobrym narzędziem optymalizacyjnym może to być tak proste, jak przełączanie, Testowanie i proces eliminacji.

Zoptymalizuj Swoje Obrazy

Istnieje już mnóstwo postów poświęconych optymalizacji obrazu WordPress, więc nie zamierzam spędzać tu dużo czasu. Głównie dlatego, że nawet doświadczeni specjaliści od optymalizacji prędkości automatyzują większość tego procesu za pomocą narzędzi takich jak Smush.

Oczywiście można to zrobić ręcznie, a przed przesłaniem należy skalować i kompresować zdjęcia (zwłaszcza jeśli masz misję dla idealnej 100).

Oto kluczowe czynniki wpływające na podniesienie czerwonej flagi i utratę punktów w teście spostrzeżeń.

1. Skaluj obrazy tak, aby pasowały do szerokości kontenera, w którym będą używane.
2. Aby zmniejszyć rozmiar pliku, obrazy powinny być kompresowane w formacie stratnym ( jpeg ) lub bezstratnym ( png / gif).

Ale co z tymi dużymi obrazami 2x dla ekranów siatkówki? Twórz własne obrazy i zapoznaj się z tagowaniem < srcset>.

To zajmuje trochę więcej czasu, aby zrobić optymalizację obrazu prawo. Ale dlatego twoi klienci płacą ci grubą kasę … mam rację?

Nadawanie Priorytetu Widocznym Treściom

Tak to brzmi. Twoja „główna zawartość”powinna załadować się przed wszystkim innym. To daje odwiedzającym szybsze doświadczenie użytkownika.

Oto klasyczny przykład WordPress. Jeśli twój kod HTML ma <sidebar > przed < main-content>, użytkownik musi poczekać, aż pasek boczny się załaduje, co czyni go elementem „blokującym”. HTML powinien być uporządkowany tak ,aby <main-content> znajdował się przed < sidebar>.

Uwaga: nie musi to koniecznie zmienić sposób, w jaki twoja strona będzie wyglądać, jeśli zostaną dodane poprawne reguły CSS.

Jeśli nie jesteś biegły w kodzie, upewnij się, że wybrałeś motyw, który jest zoptymalizowany lub możesz użyć instalacji Hummingbird, aby zmienić układ plików.

Ain’ t Nothin ’ But a gzip Baby (Enable Compression)

Kompresja pozwala serwerowi wysyłać mniejsze pliki, automatycznie „kompresując”je przed dostawą.

Pomyśl o tym dokładnie jak o .zip tworzysz, gdy próbujesz wysłać duży plik lub folder do znajomego.

Jeśli nie jest to już skonfigurowane w Twojej witrynie, kompresję gzip można łatwo dodać i aktywować. Jest to kolejna szybka Wygrana Zwykle aktywowana przez proste sterowanie przełącznikiem.

Buforowanie Przeglądarki

Pamięć podręczna przeglądarki mówi użytkownikom, aby przechowywali pliki tymczasowe lokalnie, więc ładuje się szybciej przy następnej wizycie na stronie.

Znowu, nic wymyślnego tutaj. Twój host może dostarczyć narzędzie buforowania przeglądarki, można użyć wtyczki lub można zaimplementować to ręcznie.

Porada Pro: pamiętaj o narzędziach pamięci podręcznej podczas wprowadzania zmian lub aktualizacji projektu witryny. Jeśli nie opróżnisz pamięci podręcznej podczas testowania, stara nieedytowana zawartość może nadal zostać dostarczona. To może być trochę mylące, co najmniej. Ręczne czyszczenie plików pamięci podręcznej rozwiąże ten problem.

Wyjaśniłem wszystkie moje błędy … co teraz?

Poszedłeś krok po kroku i rozwiązałeś każdą możliwą możliwość optymalizacji bez rozbijania swojej strony, uruchomiłeś nowy test PageSpeed i werbel proszę … masz 87. Albo gorzej miałeś 100, zmieniłeś serwery, a Twoja strona spadła do 87. Co do cholery!?

Witaj w moim świecie. To mi się przydarzyło.

Ale teraz jesteś na nowym terytorium, ponieważ wiesz, że powolna prędkość strony nie jest problemem. Nie jest to już ignorancki czas powolnego ładowania. Teraz jesteś gotowy do podejmowania świadomych decyzji w oparciu o to, co spowalnia Twoją witrynę.

• Tani lub niskiej jakości Hosting-jeśli masz płatnego klienta i to jest przyczyną problemu, współpracuj z hostem, aby sprawdzić, czy można go rozwiązać. Jeśli nie są w stanie rozwiązać problemu, może być czas na uaktualnienie do dedykowanego hosta lub opcji zarządzanej … lub obu.
• Motyw lub Framework motywu-to może być twój problem. Nigdy nie jest łatwo przejść do nowego motywu, ale jeśli masz trudności z dokonaniem poprawek bez zerwania stylizacji, może to być czas na pożegnanie. Możesz przetestować swój motyw, aktywując domyślny motyw i uruchamiając nowy test PageSpeed. * Pamiętaj, aby wyczyścić pamięć podręczną przed uruchomieniem testu.
• Wtyczki spowalniają mnie – to samo, co wolny temat dotyczy tutaj. To łatwy test. Wyłącz wtyczkę i uruchom nowy test PageSpeed. Jeśli to doprowadzi Cię do setki, współpracuj z programistą, aby rozwiązać problem lub poszukaj bardziej wydajnej opcji.

Zauważ, że Google PageSpeed Insights nie sprawdza szybkości Twojej witryny, testuje szybkość określonej strony. Jeśli umieścisz swój adres URL, analiza będzie Twojej strony głównej. Jeśli masz inne ważne strony w swojej witrynie, sprawdź je wszystkie i zoptymalizuj każdą stronę w razie potrzeby.

To Wrap It All Up

Budowanie witryny WordPress z 100 Google PageSpeed to cenne ćwiczenie, aby dowiedzieć się, co możesz kontrolować i gdzie musisz iść na kompromis… każdy programista powinien spróbować co najmniej raz. Ale w końcu szybka strona to tylko jedna z części znacznie większego celu-zapewnienie odwiedzającym niesamowitego doświadczenia użytkownika.

Pod koniec dnia, idąc poza i poza pozwoli Ci wyróżnić się w zatłoczonej przestrzeni, w której każdy może uzyskać 100 i prawdopodobnie przestanie wprowadzać ulepszenia, gdy to zrobią. Poświęcając czas na optymalizację obrazów, uporządkowanie kodu i zapewnienie najlepszego doświadczenia użytkownika, będziesz w stanie zapewnić swoim witrynom przewagę, gdy wszyscy inni dążą do minimum.

Pobierz wszystkie narzędzia optymalizacji programistów WPMU za darmo na WordPress.org lub skorzystaj z bezpłatnego okresu próbnego członkostwa WPMU DEV, aby wypróbować cały nasz pakiet wtyczek pro, w tym regularne automatyczne skanowanie. Nie jesteś pewien, czy wykorzystujesz w pełni swoją witrynę? Nasi członkowie otrzymują dostęp do wsparcia 24/7.

Tagi:

• google
• optymalizacja prędkości witryny
• wydajność strony internetowej