Jaki jest wynik obliczany przez Google Pagespeed Insights lub GTMetrix?

Narzędzia takie jak Google Pagespeed Insights czy GTMetrix obliczają procent, który pozwala ocenić wydajność stron internetowych. Wynik ten nie jest bezpośrednio związany z czasem ładowania strony internetowej, ale głównie z jej jakością projektową. Innymi słowy, wynik Pagespeed mówi o tym, czy strona jest zaprojektowana do bardzo szybkiego wyświetlania, czy nie.

Dlaczego mobile score różni się od desktop score? Po prostu narzędzie będzie brało pod uwagę prędkość połączenia, która na komórce jest wolniejsza. Pewne elementy, takie jak rozmiar obrazów, liczba zapytań itp. będą miały większe znaczenie. Uważa się również, że telefony komórkowe są mniej wydajne niż komputer, więc obciążenie procesora (wykonanie javascript) będzie miało ważniejszą rolę w obliczaniu wyniku.

Jak osiągnąć wynik Pagespeed na poziomie 100/100?

Z CMS Prestashop mogę powiedzieć, że jest to prawie mission impossible na prawdziwej stronie internetowej. Dlaczego tak jest? Po prostu dlatego, że zawsze będziesz miał reguły CSS i kod Javascript nie używane przez wyświetlaną stronę internetową, które są dodawane przez moduły lub nawet motyw, ale dla innych stron. Zazwyczaj nie można naprawić następujących możliwości:

  • Ograniczenie niewykorzystanych zasobów JS
  • Redukcja niewykorzystanych zasobów CSS

Istnieje jednak kilka problemów zgłaszanych przez Pagespeed Insights, które można poprawić, aby jak najbardziej zbliżyć się do wyniku 100/100.

Oto lista najczęstszych problemów i sposób ich rozwiązania lub optymalizacji

Optymalizacja związana z wydajnością serwera

Optymalizacja związana z obrazami

  • Opóźnianie ładowania obrazów spoza ekranu: Google zaleca ustawienie opóźnionego ładowania obrazów lub filmów, czyli nie wyświetlanie od razu treści, które nie są widoczne na ekranie. Jest to szczególnie istotne na telefonach komórkowych, które mają małe ekrany i odwiedzający niekoniecznie przewinie całą stronę w dół, więc nie ma potrzeby ładowania zdjęć czy filmów, których nigdy nie zobaczą. Motywy często oferują tę funkcję "Lazy Loading", w przeciwnym razie możesz użyć modułu takiego jak Speed Pack (Page Cache Ultimate + WEBP + SQL Profiling + Database cleaning) .
  • Rozpowszechniaj obrazy w formatach nowej generacji: Google stworzyło zoptymalizowany format obrazu WEBP, który zmniejsza rozmiar plików przy zachowaniu bardzo dobrej jakości obrazu. Aby skompresować zdjęcia w formacie WEBP, potrzebujesz modułu takiego jak Kompresja WEBP , który w przeciwieństwie do innych modułów, skompresuje wszystkie zdjęcia w Twoim sklepie, nie tylko te dotyczące produktów i kategorii.
  • Koduj obrazy wydajnie: wskazuje, że twoje obrazy mogłyby być bardziej skompresowane. Jeśli użyjesz formatu WEBP ten problem również zostanie rozwiązany.
  • Elementy obrazkowe nie mają jawnej szerokości i wysokości: kiedy przeglądarka zaczyna wyświetlać stronę internetową, nie pobrała jeszcze obrazków, ale zarezerwuje ich położenie, korzystając z atrybutów szerokości i wysokości zawartych w HTML (szablonach motywów lub modułów). Jeśli brakuje tych atrybutów to przeglądarka nie może zarezerwować niezbędnego miejsca i przy każdym pobraniu obrazka zawartość strony będzie się przesuwać, co jest bardzo nieprzyjemne dla odwiedzającego (powoduje CLS). Musisz więc zmodyfikować swoje szablony, aby dodać te atrybuty.

Optymalizacja związana z konfiguracją serwera

  • Aktywuj kompresję tekstu: pod Apache musisz aktywować mod_deflate, który będzie kompresował wszystkie treści tekstowe takie jak CSS, JS, HTML itp. Na przykład, możesz dodać następujący kod do pliku .htaccess w korzeniu swojego sklepu:
<IfModule mod_deflate.c>

   SetOutputFilter DEFLATE

   <IfModule mod_filter.c>

       AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

       AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript

       AddOutputFilterByType DEFLATE application/rss+xml

       AddOutputFilterByType DEFLATE application/xml

       AddOutputFilterByType DEFLATE application/json

   </IfModule>

</IfModule>
  • Rozmieść elementy statyczne dzięki efektywnym zasadom buforowania: w Prestashop, na stronie Wydajność, należy włączyć opcję "Optymalizacje Apache". Bądź świadomy, że nie będziesz w stanie poprawić tego problemu dla plików, które nie są hostowane na Twoim serwerze (Google Analytics, Facebook, itp.)

Optymalizacja związana z motywem Prestashop

  • Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych: w swoim sklepie używasz czcionki, którą przeglądarka musi pobrać. W tym czasie musisz powiedzieć przeglądarce, aby używała czcionki systemowej, takiej jak na przykład Arial, w przeciwnym razie nie może nic wyświetlić i jest to blokowanie. Aby to zrobić, dodaj opcję "font-display: swap;" do reguły CSS definiującej czcionkę (@font-face).
  • Zmniejszenie nieużywanych zasobów JavaScript: niemożliwe do zoptymalizowania ze względu na konstrukcję Prestashop
  • Zmniejszanie nieużywanych zasobów CSS: niemożliwe do zoptymalizowania przy projekcie Prestashop
  • Wyeliminuj zasoby, które blokują renderowanie: niemożliwe do zoptymalizowania, ponieważ musi to być zrobione od początku w motywie
  • Zmniejszenie rozmiaru zasobów CSS: zwykle poprawiane przez aktywowanie opcji "Smart Cache CSS" na stronie Performance oraz przez aktywowanie mod_deflate Apache'a
  • Zmniejszenie rozmiaru zasobów JavaScript: zwykle naprawiane przez włączenie opcji "Smart Cache CSS" na stronie Wydajność i włączenie Apache mod_deflate
  • Unikaj nadmiernego rozmiaru DOM: wskazuje, że na Twojej stronie jest zbyt wiele informacji, a konkretnie, że HTML jest zbyt duży. Jest to często związane ze zbyt dużą liczbą produktów na stronie; możesz zmniejszyć tę liczbę lub włączyć opcję nieskończonego przewijania, która pozwala na pobranie produktów, gdy odwiedzający przewinie się do dołu listy.
  • Strona nie używa pasywnych słuchaczy zdarzeń, aby poprawić wydajność przewijania: jest to kwestia Javascript dostarczona przez motyw lub moduł. Trudno będzie ci go zidentyfikować.
  • Unikaj tworzenia krytycznych ciągów żądań: oznacza to, że pliki odwołują się do innych plików, więc przeglądarka może rozpocząć ich pobieranie dopiero po pobraniu i przeczytaniu tych plików nadrzędnych. Aby zmniejszyć tę stratę czasu, należy odwoływać się do tych plików bezpośrednio w HTML, używając atrybutu "preload".

Czy wynik ma wpływ na SEO?

Google nie mówi, że używa tego wyniku do rankingu wyników wyszukiwania, ale myślę, że istnieje pośredni efekt.

Google mierzy tak zwany "Dwell Time", czyli czas, który upłynął pomiędzy 2 kliknięciami na liście wyników. To mówi, czy gość przebywał tam długo, czy wcale. Na przykład, jeśli ten Dwell Time jest mniejszy niż 3 sekundy, możemy pomyśleć, że nie jest interesujący i grozi mu degradacja.

Podsumowując

Oczywiście wdrożenie tych wszystkich optymalizacji jest bardzo skomplikowane! Ideałem jest uwzględnienie ich podczas tworzenia motywu i modułów, dlatego stworzyłem motyw Prestashop JPresta Origin i moduły, które z nim idą

Bardzo dobra szybkość ładowania stron Twojego sklepu nie sprawi, że będziesz sprzedawał więcej, ale powolna strona sprawi, że na pewno stracisz klientów!