Szybkość ładowania strony internetowej i jej użyteczność mają bardzo duży wpływ na to, czy potencjalny klient zostanie na Twojej stronie czy też nie. Jeśli wyniki są słabe mogą Cię spotkać niemiłe konsekwencje choćby mniejsza liczba leadów, gorsze wyniki w wyszukiwarce Google, a ostatecznie słabe wyniki sprzedażowe. Jednym z narzędzi do sprawdzania szybkości działania strony internetowej jest PageSpeed Insights.
Z artykułu dowiesz się:
- Czym jest PageSpeed Insights?
- Dlaczego warto korzystać z PageSpeed Insights?
- Jaki wynik to dobry wynik?
- 11 tipów - jak poprawić wynik PageSpeed Insights
Czym jest PageSpeed Insights?
PageSpeed Insights (PSI) to darmowe narzędzie Google, pozwalające sprawdzić szybkość ładowania dowolnej strony internetowej.
Po wykonaniu analizy pokazuje się ogólny wynik (od 0 do 100) oraz czas ładowania strony podzielony na poszczególne składowe.
Poniżej otrzymujemy również listę rekomendacji jakie można wprowadzić, aby strona uzyskała lepsze wyniki.
Więcej technicznych szczegółów o PSI można przeczytać tutaj:
https://web.dev/performance-scoring/
https://developers.google.com/speed/docs/insights/v5/about
Dlaczego warto korzystać z PageSpeed Insights?
PSI jest narzędziem do sprawdzenia szybkości ładowania strony, a jest to niezwykle istotny czynnik dla użytkowników odwiedzających Twoją witrynę.
„Amazon wykazał, że każde 0,1 sek opóźnienia w działaniu ich strony internetowej powoduje 1% spadek sprzedaży.”
źródło: jchost.pl
Czas ładowania strony ma realny wpływ na liczbę konwersji.
Dzięki PSI możesz sprawdzić ile czasu ładuje się Twoja strona internetowa przeciętnemu użytkownikowi i poprawić ten wynik.
Jaki wynik to dobry wynik?
Google oznacza wyniki: 0-49 jako słaby, 50-89 - wymagający poprawy, 90 - 100 - dobry. Ogólna liczba punktów powyżej 90 (dla komputerów) jest wystarczająca.
Nie ma sensu walczyć za wszelką cenę o 100 punktów, ponieważ najważniejsze jest doświadczenie użytkownika. Jeżeli strona ładuje się szybko i wzięliśmy pod uwagę rekomendacje Google, to jest to wystarczające. Nie ma potrzeby spędzać kolejnych godzin na dążeniu do idealnego wyniku.
Może być również tak, że dana rekomendacja nie jest odpowiednia dla Twojej witryny, np. ze względu na użyte technologie lub jej rozmiar. Dlatego warto podejść do poprawiania wyniku PSI racjonalnie i nie starać się na siłę wszystkiego implementować.
11 tipów - jak poprawić wynik PageSpeed Insights
1. Zmień rozmiar obrazów
Jakie są odpowiednie rozmiary załączanych na stronie obrazków? Grafika rozciągająca się na całą szerokość strony powinna mieć między 1440 a 1600px szerokości.
W przypadku mniejszych grafik warto sprawdzić w przeglądarce w narzędziu dla deweloperów jaki rozmiar przyjmuje i taki właśnie ustawić (nie ma sensu dodawać zdjęcia o szerokości 1000px, jeśli na stronie wyświetla się w rozmiarze 400px).
Każda grafika na stronie (pojedyncze zdjęcie, obrazek) nie powinna ważyć więcej niż ok. 200kB. Po ustawieniu odpowiedniego rozmiaru należy następnie grafikę skompresować, aby uzyskać jak najmniejszy plik. Istnieje wiele darmowych i bardzo prostych narzędzi do kompresji zdjęć, np. https://compressor.io/.
2. Odłóż ładowanie obrazów poza ekranem
Leniwe ładowanie (ang. lazy loading) to sposób ładowania zasobów (w tym wypadku grafiki na stronie), w którym przeglądarka nie robi tego od razu, lecz wtedy gdy są potrzebne. W ten sposób obrazki widoczne tuż po otwarciu strony są ładowane natychmiast (nie są leniwie ładowane), natomiast wczytanie reszty grafik zostaje odłożone na później.
Implementacja leniwego ładowania jest bardzo prosta i może być wykonana za pomocą dostępnych bibliotek, np. Lazysizes.
3. Wyświetlaj obrazy w formatach nowej generacji
JPEG 2000
źródło: caniuse.com
JPEG XR
źródło: caniuse.com
WebP
źródło: caniuse.com
Jak sobie z tym poradzić? Wystarczy wykryć jaka przeglądarka jest używana i sprawdzić jej wsparcie dla danego formatu, a następnie załadować odpowiedni obrazek. W zależności od użytych na stronie technologii będzie to wyglądało nieco inaczej.
Formaty nowej generacji pozwalają na znaczne zmniejszenie rozmiaru grafik bez strat jakości.
4. Minifikuj CSS, minifikuj JavaScript
Minifikacja polega na usunięciu zbędnych znaków z pliku, aby zmniejszyć jego rozmiar. Jeśli korzystasz z narzędzia typu Webpack, to zapewne minifikowanie kodu dzieje się automatycznie, trzeba jedynie pamiętać o zbudowaniu kodu produkcyjnego. Inną opcją, aby proces ten odbywał się automatycznie wraz z wszelkimi aktualizacjami jest np. narzędzie Minify. Istnieje również szereg stron oferujących minifikowanie wklejonego kodu, np. https://www.minifier.org/.
5. Cały tekst pozostaje widoczny podczas ładowania czcionek internetowych
Google rekomenduje użycie właściwości CSS font-display:swap. Dlaczego? Domyślnym zachowaniem przeglądarek jest niewyświetlanie tekstu dopóki nie załaduje się font. Ustawienie właściwości font-display:swap sprawia, że zamiast tego od razu po otwarciu strony zostanie użytkownikowi pokazana treść z użyciem fontu domyślnego, który zostanie podmieniony po wczytaniu właściwego fontu. Użytkownik nie musi zatem czekać, aby przeczytać tekst na stronie.
Implementacja jest bardzo prosta. Jeśli używasz reguły @font-face wystarczy wpisać w nią właściwość font-display:swap. Jeśli korzystasz z fontu Google należy dodać na końcu linku do fontu &display=swap (<link href=„…&display=swap” …>).
6. Wyeliminuj zasoby blokujące renderowanie
Sugerujemy umieszczenie krytycznego kodu JS/CSS w kodzie strony i opóźnienie ładowania wszystkich niekrytycznych plików JS i stylów.
Kod krytyczny to fragment Twojego kodu CSS i JS potrzebny do prawidłowego wyświetlenia widocznej na ekranie zawartości strony. Należy umieścić ten kod w znacznikach <style> i <script> w sekcji HEAD strony internetowej, a załadowanie wszystkich właściwych skryptów i plików ze stylami opóźnić. W ten sposób użytkownik natychmiast otrzymuje część witryny nazywaną above the fold i nie musi czekać na załadowanie całej strony.
źródło: https://www.paceco.com/
Implementacja tego rozwiązania zależy do użytych na stronie technologii. Dostępne są wtyczki, pozwalające automatycznie generować kod krytyczny, np. Critters, Critical lub Penthouse. Możesz również skorzystać z takiego narzędzia jak Critical Path CSS Generator i wkleić utworzony kod na swoją witrynę. Musisz również załadować pliki ze stylami asynchronicznie, aby wczytały się po kodzie krytycznym. Należy to zrobić w ten sposób:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href=„styles.css"></noscript>
Szczegółowe wyjaśnienie można przeczytać tutaj: https://web.dev/defer-non-critical-css/
7. Włącz kompresję tekstu
Zasoby tekstowe powinny być kompresowane (gzip, deflate lub brotli), by zminimalizować ilość danych przesyłanych w sieci.
Gzip, defalte i brotli to formaty bezstratnej kompresji danych, które są wspierane przez przeglądarki (gzip przez wszystkie). Oznacza to, że możemy trzymać na serwerze skompresowane pliki, które będą szybciej pobierane przez przeglądarkę użytkownika (ponieważ zajmują mniej miejsca), która następnie je zdekoduje i wyświetli.
źródło: https://betterexplained.com/
Istnieją różne sposoby na implementację tego rozwiązania i również zależą od używanych narzędzi. Możesz to zrobić m.in. poprzez edycję pliku .htaccess (https://httpd.apache.org/docs/2.4/mod/mod_deflate.html) lub użycie wtyczki Webpack (https://webpack.js.org/plugins/compression-webpack-plugin/).
8. Załaduj wstępnie kluczowe żądania
Pomyśl o użyciu elementu `<link rel=preload>`, by szybciej pobierały się zasoby, które są obecnie żądane na dalszym etapie ładowania strony.
Dodanie atrybutu „rel=preload” informuje przeglądarkę, że dany zasób jest potrzebny natychmiast i powinien zacząć się pobierać jak najszybciej. Istnieją również wartości „preconnect” i „prefetch” dla atrybutu „rel”. Warto skorzystać z tych opcji, aby ustawić priorytety zasobów dla przeglądarki, żeby użytkownik nie musiał czekać na załadowanie najważniejszych treści.
Więcej o implementacji i dobrych praktykach można przeczytać tutaj:
https://developers.google.com/web/fundamentals/performance/resource-prioritization
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
9. Stosuj efektywne zasady pamięci podręcznej dla zasobów statycznych
Cache’owanie zasobów to bardzo ważny element optymalizacji. Dzięki efektywnemu wykorzystaniu tego mechanizmu można znacznie przyspieszyć ponowne załadowanie naszej strony internetowej, ponieważ dany użytkownik ma zapisane elementy witryny w pamięci przeglądarki - nie trzeba na nowo ich pobierać.
Aby trzymać statyczne zasoby strony w pamięci podręcznej należy dodać dyrektywy „Expires” lub „Cache-Control” do pliku .htaccess.
10. Czas wykonania JavaScriptu, minimalizuj aktywność głównego wątku
Pomyśl o skróceniu czasu poświęcanego na analizowanie, kompilowanie i wykonywanie kodu JS. Może w tym pomóc dostarczanie mniejszych ładunków JS.
Aby poradzić sobie z tą wskazówką PSI możesz zrobić 2 rzeczy:
- Podział plików Javascript
Po pierwsze należy w danym momencie ładować tylko te skrypty JS, które są potrzebne. Warto podzielić główny plik JS na mniejsze, niezależne od siebie, aby móc wczytywać je w zależności od wyświetlanej aktualnie zawartości. Jeśli korzystasz z Webpacka można to zaimplementować w bardzo prosty sposób: https://webpack.js.org/guides/code-splitting/. - Dynamiczne importy w Javascript
Webpack (oraz inne popularne „module bundlers”) pozwala również na dynamiczne importy. Oznacza to, że możesz wczytać dany zasób dopiero wtedy, gdy jest potrzebny (np. załadować bibliotekę po kliknięciu w przycisk lub wysłaniu formularza).
11. Minimalizacja wykorzystania kodu zewnętrznego
Ogranicz liczbę zewnętrznych dostawców kodu i spróbuj wczytywać kod spoza witryny dopiero po zakończeniu wczytywania podstawowej strony.
Przede wszystkim należy pamiętać, że kod zewnętrzny powinniśmy wczytywać na naszej stronie tylko jeśli jest to konieczne. W takiej sytuacji możemy skorzystać z atrybutów „async” oraz „defer”, aby jak najmniej spowolnić ładowanie strony.
Poniższa grafika przedstawia różnicę pomiędzy sposobami wczytywania skryptów:
źródło: https://www.growingwiththeweb.com/
Ogólna zasada jest taka, że ładując kod zewnętrzny powinno się zawsze (z nielicznymi wyjątkami) używać „async” (przy skryptach potrzebnych wcześnie w procesie ładowania) lub „defer” (przy mniej istotnych zasobach).
Podsumowanie
Wdrożenie przedstawionych powyżej technik poprawi wynik Twojej witryny w PageSpeed Insights oraz przyspieszy jej ładowanie. Należy jednak pamiętać, że PageSpeed Insights nie jest jedynym wyznacznikiem poprawnego działania strony. Możesz się nim sugerować, ale warto zapoznać się z takimi narzędziami jak GTMetrix, Lighthouse, SEOptimer.
Jeżeli chcesz otrzymać raport dotyczący Twojej strony internetowej to skontaktuj się z nami.
Zachęcam Cię również do przeczytania powiązanego wpisu na temat: 7 cech dobrej strony internetowej
