Czy wynik 100/100 w Page Speed wystarcz?

Witryny internetowe muszą być szybkie, aby zachować konkurencyjność i zapewniać dobre wrażenia użytkownikom, aby utrzymać wysoką liczbę odsłon na odwiedzającego, zmniejszyć współczynnik odrzuceń lub współczynnika porzucania koszyka oraz poprawić pozycję w wyszukiwarce .

Być może przeczytałeś wiele artykułów skupiających się na przyspieszeniu witryny, które wtyczki WordPress mogą pomóc, a które nie, oraz wiele podobnych wskazówek, które poprawią szybkość witryny. Możesz również osiągnąć wynik 100/100 PageSpeed zarówno na urządzeniach mobilnych, jak i stacjonarnych. Możesz też zlecić optymalizację SEO specjaliście, sprawdź.

Ale ważne pytanie brzmi: czy wynik 100/100 PageSpeed jest wystarczający?

Co to jest Google PageSpeed? i jak to działa

Google PageSpeed Insights mierzy wydajność strony internetowej na urządzeniach mobilnych i komputerach stacjonarnych oraz dostarcza praktycznych wskazówek dotyczących tego, co można zrobić, aby poprawić szybkość witryny. Następnie narzędzie ocenia witrynę oddzielnie pod kątem urządzeń mobilnych i komputerów stacjonarnych w skali od 0 do 100, gdzie 100 oznacza, że kryteria oceny wydajności są dobrze spełnione.

Kryteria obejmują pierwsze malowanie treściwe, malowanie zawierające największą zawartość, indeks szybkości, całkowity czas blokowania, czas do interakcji i skumulowane przesunięcie układu.

Wszędzie jest wiele artykułów, które mogą pomóc Ci dowiedzieć się więcej o tym, jak najlepiej zrozumieć działanie narzędzia PageSpeed oraz jak korzystać ze wskazówek dostarczonych przez to narzędzie i faktycznie zastosować je w swojej witrynie.

Reklama:

Autoryzowany dystrybutor drzwi Gerda, Porta, Intenso, Pol-Skone – Hermes Warszawa.

Ponieważ jednak tu jesteś, zakładam, że już dawno przekroczyłeś ten punkt i jesteś gotowy, aby dowiedzieć się więcej o kolejnych krokach, które możesz podjąć, aby Twoja witryna była jeszcze szybsza.

Narzędzie PageSpeed jest dobre i zawsze przyspiesza Twoją witrynę, ale nie oznacza to, że wynik 100 oznacza, że nie pozostaje już nic do zrobienia. W większości przypadków nadal masz możliwość zaoszczędzenia dużej ilości czasu dzięki wadze strony i czasowi ładowania strony.

Przyjrzyjmy się więc dodatkowym krokom, które można wykonać po uzyskaniu wyniku 100/100 za pomocą narzędzia PageSpeed.

Użyj pamięci podręcznej przeglądarki konkurenta

Jeśli masz konkurenta, który zajmuje nieco wyższą pozycję w rankingu Twoich słów kluczowych niż Ty, istnieje prawdopodobieństwo, że użytkownik odwiedzi jego witrynę, zanim kliknie Twoją, jeśli w ogóle. Jeśli jednak użytkownik był w innej witrynie, możesz ponownie wykorzystać pamięć podręczną przeglądarki odwiedzającego, sprawdzając kod źródłowy witryny, aby sprawdzić, czy korzysta z publicznej sieci CDN, a jeśli tak, to w jakiej bibliotece.

Jeśli oboje korzystacie z tej samej biblioteki (bibliotek), na przykład jQuery 3.2.1, możesz załadować ją z tej samej publicznej sieci CDN, z której korzysta Twój konkurent.

Jak można się domyślić, ta sztuczka działa bardzo rzadko i, w niektórych przypadkach, może przynieść korzyści Twojemu konkurentowi, jeśli odwiedzający najpierw odwiedzi Twoją witrynę, a potem konkurencję.

Chociaż jest mniej prawdopodobne, że ta sztuczka zadziała przeciwko konkurentom, ogólnie może to zadziałać. Ładowanie wszystkich zasobów open source z publicznej sieci CDN pomaga w ponownym wykorzystaniu zasobów publicznych z pamięci podręcznej przeglądarki witryn internetowych osób trzecich, które użytkownik odwiedził w dowolnym momencie w przeszłości.

Niektóre bezpłatne wtyczki WordPress, takie jak Easy Speedup i CommonWP, automatycznie łączą się z motywami, wtyczkami i bibliotekami open source hostowanymi w publicznej sieci CDN. Takie wtyczki umożliwiają i łatwe ponowne wykorzystanie pamięci podręcznej przeglądarki innych witryn internetowych na dużą skalę bez większego wysiłku.

Łącz pliki, ale zachowaj ostrożność

Kilka narzędzi do testowania wydajności może sugerować połączenie wielu plików CSS i JavaScript w jeden w celu zwiększenia szybkości. Dawno temu było to prawdą, ale teraz czas się zmienił.

W tym popularnym poście napisanym na blogu Google Chrome V8 zatytułowanym „ Koszt JavaScript w 2019 roku ” Addy Osmani oferuje wskazówki dotyczące skrócenia czasu pobierania JavaScript. Sugeruje, aby pakiety JavaScript były małe, a jeśli rozmiar pakietu przekracza 50-100 KB, podziel go na mniejsze pakiety. Zwrócił również uwagę na ogólną praktyczną zasadę, że jeśli skrypt jest większy niż 1 KB, unikaj wstawiania go.

Czy zatem kod Twojej witryny wymaga jakiejkolwiek refaktoryzacji, aby znowu działać po staremu? Możesz rozważyć wyłączenie wtyczek, które włączają tę funkcję w witrynach WordPress. Zmniejszy to rozdęcie wtyczek i przyspieszy Twoją witrynę.

Nie oznacza to jednak, że podzielenie całej bazy kodu JavaScript na wiele mniejszych plików nie zaszkodzi. Będziesz musiał dokładnie przetestować swój przypadek użycia.

Przełączanie między formatami obrazu

Obrazy przyczyniają się do dużej części wczytywania strony. Dlatego wymagają znacznie więcej uwagi niż powszechnie stosowane techniki optymalizacji obrazu .

Jeśli w Twojej witrynie są używane obrazy, a jestem pewien, że tak, może być konieczne ustalenie, który format obrazu odpowiada Twoim potrzebom. Niektóre formaty obrazów są bardziej odpowiednie dla wektorów, podczas gdy inne najlepiej sprawdzają się w przypadku zdjęć.

Rozróżnij kompresję dynamiczną i statyczną

Może to znacznie przyspieszyć Twoją witrynę przy minimalnym wysiłku i jest prawdopodobnie najłatwiejszą z technik, które zamierzam zasugerować. Pozwól mi wyjaśnić.

Witryny internetowe zwykle używają fragmentu kodu z sieci Web do pliku konfiguracyjnego .htaccess lub NGINX, aby umożliwić kompresję Gzip lub Brotli dla wszystkich kompresowalnych zasobów. To działa, ale pozostawia miejsce na więcej optymalizacji. Strony internetowe mogą zaoszczędzić więcej niż 50 KB dzięki po prostu lepszej kompresji Brotli . Chcesz nauczyć się sztuczki? To jest proste. Odróżnij kompresję dynamiczną od kompresji statycznej.

Kompresowalną zawartość hostowaną przez serwer internetowy można podzielić na dwa typy, dynamiczne i statyczne. Treść dynamiczna jest generowana w locie i nie może być wcześniej skompresowana. Przykładem są strony HTML. Treść statyczna, taka jak CSS i JS, pozostaje niezmieniona przez jakiś czas.

Możesz wstępnie skompresować te zasoby i skonfigurować serwer, aby obsługiwał te wstępnie skompresowane pliki w locie. Kompresja wstępna pozwala na użycie wyższego poziomu kompresji, takiego jak Brotli: 11, który jest zwykle zbyt wolny do kompresji w locie. Możesz również skorzystać z usługi innej firmy, takiej jak PageCDN, aby zrobić to bezproblemowo, jeśli wstępne kompresowanie zasobów jest dla Ciebie trudne za każdym razem, gdy plik się zmienia.

Skróć czas wyszukiwania DNS

Czas wyszukiwania DNS to czas poświęcony na przekształcenie nazwy domeny na jej adres IP. Ten adres IP jest następnie używany do znalezienia lokalizacji serwera w Internecie.

Gdy użytkownik odwiedza stronę, pierwszym zadaniem o dużym opóźnieniu wykonywanym przez przeglądarki jest wyszukiwanie DNS nazwy domeny. Dopóki przeglądarka nie uzyska adresu IP z zapytania DNS, nie może nawiązać połączenia z serwerem i wykonać żądania HTTP.

Unikaj sprite’ów CSS

„Sprites CSS” to technika łączenia wielu obrazów w jeden duży obraz i używanie CSS do wyświetlania z niego odpowiednich pikseli w różnych miejscach na stronie internetowej. To była bardzo powszechna technika kilka lat temu.

Wadą jest to, że sprawia to, że ogólna struktura strony jest skomplikowana i mniej elastyczna. Ponadto duży obraz musi zostać załadowany, nawet jeśli trzeba z niego użyć tylko strzałki, co zwiększa ogólną wagę strony. Dodawanie kolejnej ikony za pomocą sprite’ów jest czasochłonne, ponieważ musisz najpierw zmodyfikować obraz i upewnić się, że nie używa on żadnego piksela, który kiedykolwiek był używany w innym miejscu na stronie. Może to prowadzić do kilku błędów w projekcie strony internetowej. Podobnie, zmiana rozmiaru jednego elementu HTML, który wyświetla ikonę z dużego obrazu, będzie wymagała zmiany rozmiaru ikon na dużym obrazie i zmiany położenia wszystkich ikon na obrazie, które pojawią się po tym.

Jest to skomplikowane i nie daje prawie żadnych korzyści, ponieważ HTTP / 2 ma wykonać dla Ciebie prawie to samo zadanie. HTTP / 2 może multipleksować kilka żądań i odpowiedzi na tym samym połączeniu. Inną zaletą nieużywania sprite’ów CSS jest to, że na stronie ładują się tylko takie obrazy lub ikony, które są absolutnie niezbędne dla strony. Przeglądarki mogą nawet nadawać priorytety ikonom znajdującym się powyżej części strony widocznej na ekranie i pozostawiać je poniżej części ekranu na później, co dodatkowo przyspiesza ładowanie strony.

Tak więc, jeśli używasz „CSS Sprites” do swoich małych obrazów, lepiej pozwolić im ładować się swobodnie i pozwolić przeglądarce zdecydować, w jaki sposób nadać priorytet ich żądaniom, a także, które z nich zażądać w tym samym czasie.

Aktualizacja

WordPress 5.5 zostanie wkrótce wydany i doda obsługę natywnego leniwego ładowania obrazów. Tak więc witryny korzystające z wtyczek do korzystania z tej funkcji będą teraz miały natywne rozwiązanie do leniwego ładowania wbudowane w rdzeń WordPress.

Leniwe ładowanie jest ważną optymalizacją wydajności iw tym przypadku będzie dostępne dla milionów witryn za jednym kliknięciem, aby zaktualizować WordPress do następnej wersji.

Aktualizowanie systemu CMS, wtyczek, motywu, narzędzi, oprogramowania serwera, środowiska wykonawczego języka, a nawet systemu operacyjnego, przynosi zauważalną poprawę wydajności. Na przykład, każde wydanie nowej wersji PHP przyniosło znaczną poprawę wydajności i wydaje się, że ten trend będzie się utrzymywał w dającej się przewidzieć przyszłości wraz z PHP 8 na horyzoncie, który będzie dostępny z nowym kompilatorem JIT . To samo dotyczy Node.js, który korzysta z nowych optymalizacji szybkości i pamięci, które pojawiają się w każdej nowej wersji silnika JavaScript V8.

Wnioski

Chociaż narzędzie PageSpeed naprawdę dobrze radzi sobie z sugerowaniem możliwych pułapek wydajności, pozostawia pewną optymalizację, której można użyć, aby uzyskać maksimum dostępnych narzędzi i technologii. Próbowałem uwzględnić wszystkie takie optymalizacje, o których wiem. Omówiłem także kilka dodatkowych rzeczy, które możesz chcieć wiedzieć. Wszystko to pomoże Ci utrzymać Twoją witrynę przed konkurencją.