Google stworzyło i aktywnie wspiera moduł mający na celu podniesienie szybkości działania witryny internetowej – Page Speed. Zadaniem tego modułu jest szybka i automatyczna optymalizacja prędkości strony czy sklepu online. Co ważne, wtyczka działa niemal od razu po jej aktywacji, bez konieczności długotrwałej konfiguracji. Wystarczy wywołać jedno polecenie na serwerze, niezależnie czy jest to serwer dedykowany, czy współdzielony VPS.
Kiedy można zainstalować ten moduł na stronie?
Jeśli masz dostęp do SSH, co oznacza możliwość bezpośredniego połączenia z serwerem dedykowanym lub VPS oraz uprawnienia do modyfikacji plików konfiguracyjnych serwera APACHE/NGINX, możesz zainstalować ten moduł. Takie połączenie jest dostępne również na bardziej zaawansowanych pakietach hostingowych.
Uwaga: Wersja Apache 2.4.1 posiada błąd niekompatybilności z modułem Page Speed. Dlatego zalecam unikanie jego instalacji na tej konkretnej wersji.
Jeśli nie jesteś pewien dostępności modułu na Twoim serwerze, warto skontaktować się z dostawcą hostingu. Jeśli moduł Page Speed jest już zainstalowany, można go aktywować poprzez wprowadzenie odpowiednich opcji w pliku .htaccess dostępnym na koncie FTP.
Dlaczego warto korzystać z modułu Page Speed?
- Prosty i szybki proces instalacji – zaledwie 5 minut.
- Znacząca poprawa szybkości ładowania strony, co przekłada się na większy komfort dla użytkowników.
- Bogate opcje konfiguracji i testowania.
- Niezawodność działania oraz kompatybilność z większością systemów CMS i aplikacji e-commerce.
- Automatyczna optymalizacja wszystkich elementów witryny, nawet jeśli jest to tysiące produktów w sklepie internetowym.
Możliwości modułu – Czym jest i co potrafi Page Speed Mod?
Page Speed Mod to zaawansowany moduł stworzony przez Google, który może znacząco wpłynąć na optymalizację szybkości witryny. W zależności od konfiguracji, moduł jest w stanie przeprowadzić szereg automatycznych działań mających na celu poprawę wydajności strony.
Zanim jednak zdecydujesz się na skorzystanie z konkretnej funkcji, warto zapoznać się z ryzykiem jej użycia na oficjalnej stronie modułu. Niewłaściwe ustawienia mogą bowiem zakłócić funkcjonalność witryny. Szczegółowe informacje i dostępne komendy można znaleźć na oficjalnej stronie Mod Page Speed.
Dodanie znacznika HEAD: Moduł może automatycznie wstawić znacznik <head> zaraz po znaczniku <body>.
Analiza czasu wczytywania i renderingu strony: Funkcja ta wdraża dwa bloki kodu JavaScript na każdą podstronę serwisu. Służą one monitorowaniu danych dotyczących czasu wczytywania i renderingu strony, które są następnie przesyłane z powrotem do serwera. Dzięki temu mamy dokładne informacje na temat tego, jak długo użytkownik musi czekać na pełne załadowanie strony.
Asynchroniczne wczytywanie skryptu Google AdSense: Moduł modyfikuje skrypt Google Adsense, umożliwiając jego asynchroniczne ładowanie. Dzięki temu skrypt wczytuje się równolegle z innymi requestami, eliminując ryzyko blokowania wczytywania strony.
Asynchroniczne wczytywanie skryptu Google Analytics: Podobnie jak w przypadku AdSense, skrypt Google Analytics jest modyfikowany do ładowania asynchronicznego, zwiększając efektywność wczytywania strony.
Podmiana skryptów JavaScript: Moduł automatycznie podmienia adresy URL popularnych skryptów JavaScript (takich jak jQuery) na adresy serwera CDN Google. Dzięki temu skrypty są ładowane z Google, co przyspiesza ładowanie dla użytkowników, którzy mogli już wcześniej załadować te skrypty na innych stronach. Wykorzystanie tego CDN jest darmowe.
Usunięcie białych znaków z HTML: Komenda ModPageSpeed pozwala usunąć zbędne białe znaki z kodu HTML, takie jak tabulacje, bez wpływu na bloki <script>, <textarea> i <pre>.
Połączenie plików CSS: Funkcja łączy wszystkie pliki .css znajdujące się na stronie w jeden. Użytkownik dzięki temu wczytuje tylko jeden plik CSS zamiast kilku, co redukuje liczbę zapytań do serwera.
Połączenie znaczników head: Jeśli strona zawiera więcej niż jeden znacznik <head>, Page Speed Mod łączy je w jeden.
Konwersja metatagów do nagłówka HTTP: Dzięki określonej komendzie, Page Speed Mod potrafi przekształcić znaczniki metatagów content type, przenosząc je bezpośrednio do response header. Proces ten koncentruje się na metatagach związanych z opcją http-equiv.
Znacznik UTF 8Analogia w stosunku do punktu wyżej,
Deduplikacja osadzonych zdjęć: Jeśli na Twojej stronie pojawiają się identyczne zdjęcia więcej niż raz (patrz Rys. 2), to moduł automatycznie wykorzysta kod JavaScript, aby pobierać obraz z jego pierwszego wystąpienia na stronie (jak na Rys. 1)..
Odroczenie wykonywania JavaScript: Głównym celem tej funkcji jest wykonanie kodu JavaScript dopiero po pełnym wczytaniu strony. W praktyce oznacza to, że skrypty JavaScript są generowane dopiero po załadowaniu wszystkich zdjęć na stronie.
Usuwanie domyślnych atrybutów: Głównym celem tej funkcji jest usunięcie atrybutów z kodu HTML, które są zbędne, ponieważ są domyślnie identyczne. Aby lepiej zrozumieć, zobacz przykład z opcją GIF wyłączoną/włączoną
Wydłużenie czasu cache’owania plików: Funkcja ta umożliwia automatyczne dodawanie nagłówka HTTP (max-age) do plików JavaScript, CSS oraz zdjęć. Domyślnie, PageSpeed ustala okres przechowywania w cache na rok (max-age: 31536000).
Kluczowym elementem tej opcji jest to, że moduł samodzielnie monitoruje, czy dany plik nie został zmodyfikowany na serwerze FTP poprzez TTL (time-to-live). Jeśli plik ulegnie zmianie, w ciągu 5 minut adres URL zmieni się, co sprawi, że użytkownik pobierze aktualizację – czy to nowe zdjęcie, skrypt JavaScript czy CSS.
Wydłużenie czasu cache’owania plików PDF: To rozwiązanie działa podobnie jak opisane wcześniej dla plików JavaScript, CSS i zdjęć, ale jest dedykowane dla plików PDF przechowywanych na serwerze. Dotyczy to zarówno bezpośrednich linków do PDF, jak i PDF-ów osadzonych bezpośrednio na stronie (embedded).
Filtry i opcje optymalizacji zdjęć w module Page Speed: Ta funkcja stanowi jedno z kluczowych narzędzi w module Page Speed. Umożliwia automatyczną konwersję i optymalizację zdjęć w różnych wariantach. Oto kilka z tych możliwości:
- Konwersja formatu GIF do PNG (z pierwszej klatki animacji GIF).
- Konwersja zdjęć JPEG do formatu progresywnego.
- Konwersja JPEG do formatu WebP.
- Konwersja PNG do JPEG (uwzględniając przezroczystość – od wersji 1.8.31.2 modułu konwersja odbywa się tylko, gdy PNG nie posiada kanału alfa).
- Konwersja animacji GIF do formatu WebP oraz bezstratna konwersja tego typu.
- Konwersja mniejszych zdjęć (inline) do formatu data, eliminując potrzebę requestu do serwera.
- Automatyczne dodawanie atrybutów width i height do znaczników img.
- Rekompresja zdjęć pod kątem aktualnej konfiguracji modułu, w tym dla formatów PNG i WebP.
- Redukcja próbek w formatach JPEG.
- Skalowanie zdjęć pod kątem atrybutów width, height czy stylów – pozwala to na unikanie wczytywania dużych zdjęć tam, gdzie wystarczy miniaturka.
- Skalowanie zdjęć pod określony wymiar, bazując na wymiarze renderowanego obrazu na stronie (pomijając atrybuty width i height) z wykorzystaniem JavaScript.
- Generowanie i przypisanie atrybutu srcset dla zdjęć responsywnych, tak by dostosować obrazy do urządzenia użytkownika.
- Dodatkowo dostępne są opcje dotyczące specyficznych aspektów, takich jak jakie rozmiary plików optymalizować czy jaki poziom kompresji zastosować. Szczegółowe informacje oraz pozostałe komendy można znaleźć w oficjalnej dokumentacji modułu.
Połączenie plików @import w CSS: Funkcja ta ma na celu integrację importowanych plików CSS (poprzez komendę @import) i włączenie ich bezpośrednio w kodzie HTML w ramach znacznika <style>.
Wstępne ładowanie zasobów: Ta funkcja ma na celu wcześniejsze ładowanie zasobów takich jak JavaScript czy CSS podczas wczytywania strony.
Integracja map źródłowych JavaScript: Proces ten polega na składaniu kodu, a następnie tworzeniu mapy źródłowej (mappings). Główną korzyścią jest zmniejszenie całkowitej wielkości skryptu, co skraca czas analizy, zmniejsza zużycie pamięci oraz przyspiesza pobieranie. Więcej szczegółów znajduje się w oficjalnej dokumentacji.
Integracja @import jako link: Kiedy ta opcja jest aktywna, instrukcje @import w CSS są zastępowane przez znacznik <link>. Na przykład:
<style type="text/css" media="screen"> @import url(http://www.example.com/style.css); </style>
zmienia się na:
<link type="text/css" media="screen" rel="stylesheet" href="http://www.example.com/style.css" />
Wbudowywanie CSS: Funkcja umożliwia włączenie kodu CSS bezpośrednio do kodu HTML, eliminując potrzebę oddzielnego zapytania do serwera w celu pobrania pliku CSS. Można ustawić maksymalny rozmiar pliku CSS, który ma zostać włączony do kodu HTML.
Wbudowywanie CSS z Google Fonts: Podobnie jak wyżej, ale dotyczy to CSS z czcionkami od Google.
Wbudowywanie JavaScript: Kod JavaScript jest automatycznie wdrażany bezpośrednio do kodu HTML, aby zmniejszyć liczbę zapytań do serwera. Procedura jest analogiczna do tej dla CSS.
Wbudowywanie obrazów wstępnych: Ta funkcja generuje obrazy o niższej jakości, które są następnie zastępowane obrazami o docelowej jakości po ich pełnym załadowaniu. Istnieje opcja aktywacji tej funkcji tylko dla użytkowników korzystających z urządzeń mobilnych.
Wstawianie Google Analytics: Ten moduł automatycznie dodaje kod Google Analytics do każdej podstrony witryny, chyba że kod ten już znajduje się w znaczniku <head>. Co ważne, kod jest dodawany w sposób asynchroniczny, co oznacza, że narzędzia do testowania szybkości strony, takie jak GTmetrix czy Google PageSpeed Insights, nie będą traktować tego kodu jako błąd wpływający na wydajność.
Leniwe ładowanie obrazów: Ta funkcja aktywuje „lazy load” dla obrazów, co oznacza, że użytkownik nie wczytuje wszystkich obrazów umieszczonych na stronie od razu, ale tylko te, które są aktualnie wyświetlane na ekranie. Dzięki temu zmniejsza się zużycie transferu danych i przyspiesza renderowanie strony. Można także ustawić domyślny obraz, który będzie wyświetlany zanim użytkownik przewinie stronę do kolejnych obrazów.
Cache w Local Storage: Ten filtr pozwala na zapisanie kodu zawartego w kodzie źródłowym strony w lokalnym cache’u przeglądarki użytkownika, co jest jednym z atutów HTML5. Gdy użytkownik przegląda inne strony na tej samej witrynie, które mają ten sam kod w kodzie źródłowym, system automatycznie korzysta z wcześniej wczytanego kodu. Mechanizm ten jest obsługiwany przez dodatkowy skrypt JavaScript umieszczony w sekcji <head> strony. Cache jest wykorzystywany dla plików CSS i obrazów.
Dostosowywanie obrazów do odpowiednich rozmiarów: Głównym celem jest generowanie wersji tego samego obrazu w różnych rozdzielczościach, aby dostarczyć zoptymalizowaną wersję obrazu dla danego urządzenia użytkownika. Skorzystanie z komend, takich jak [su_highlight]ModPagespeedJpegRecompressionQuality[/su_highlight], umożliwia regulację jakości obrazów JPEG.
Minifikacja JavaScript: Proces minifikacji kodu JavaScript usuwa zbędne białe znaki, znaki tabulacji i komentarze, pozostawiając tylko czysty kod JavaScript. Jest to podobne do działania popularnych narzędzi do minifikacji, takich jak JSMin.
Przesuwanie CSS przed skrypty: Filtr ten przesuwa kod CSS powyżej skryptów JavaScript w kodzie źródłowym strony, dając priorytet wczytywaniu stylów CSS przed skryptami.
Przenoszenie CSS do sekcji head: Ta funkcja automatycznie przenosi wszystkie style CSS, które znajdują się wewnątrz tagów <style>, do sekcji <head> każdej podstrony.
Optymalizacja obrazów: Wspomniane filtry pozwalają na optymalizację obrazów pod względem jakości, formatu i rozmiaru. Efektem jest redukcja wielkości obrazów i szybsze wczytywanie strony.
Wyodrębnianie CSS: Eksperymentalny filtr, który przenosi style kaskadowe z kodu HTML do zewnętrznego pliku .css.
Wyodrębnianie JavaScript: Analogicznie, ten filtr przenosi skrypty JavaScript z kodu HTML do zewnętrznego pliku .js.
Pedantyczny: Filtr ten dokonuje drobnych korekt w kodzie strony, aby był zgodny z walidacją HTML4.
Wstępne rozwiązanie DNS: Filtr ten dostarcza przeglądarce wskazówek na temat rozwiązywania DNS dla różnych zasobów na stronie, przyśpieszając tym samym wczytywanie strony.
Priorytet dla kluczowego CSS: Ten filtr analizuje kod CSS strony i przenosi do kodu źródłowego strony tylko te reguły CSS, które są aktualnie używane na stronie. Pomaga to unikać niepotrzebnego blokowania renderowania strony przez zbędne style.
Usuwanie komentarzy: Filtr ten usuwa komentarze z kodu źródłowego HTML, ale pozwala na zachowanie wybranych komentarzy, które użytkownik chce zachować. Warunkowe komentarze dla przeglądarki Internet Explorer są zachowywane i nie są usuwane.
Usuwanie cudzysłowów: Filtr ten usuwa apostrofy i cudzysłowy z atrybutów elementów HTML, co może nieco zredukować wielkość pliku HTML.
Nadpisywanie CSS: Filtr ten przeszukuje i optymalizuje znaleziony kod CSS. Obejmuje to minifikację oraz podmianę obrazów używanych w tle (background-image) na zoptymalizowane wersje.
Nadpisywanie domeny: Jest to zaawansowany filtr, który pozwala na mapowanie i kontrolowanie, które domeny lub sekcje domeny są brane pod uwagę przez moduł PageSpeed. Pozwala to na precyzyjne kontrolowanie optymalizacji zasobów.
Nadpisywanie atrybutów stylu: Filtr ten skupia się na optymalizacji atrybutów stylu CSS bezpośrednio w kodzie HTML. Przykładowo, może zoptymalizować obrazy używane jako tło dla elementów HTML.
Eksperymenty z prędkością: Filtr ten pozwala na przeprowadzenie eksperymentów dotyczących wydajności strony internetowej. Umożliwiają one testowanie różnych konfiguracji modułu PageSpeed na różnych grupach użytkowników i obserwowanie wpływu tych zmian na wydajność strony. Wszystkie te dane mogą być następnie analizowane za pomocą Google Analytics, co pozwala na dokładne porównanie różnych konfiguracji i wybranie tej, która przynosi najlepsze rezultaty.
Kombinacja obrazów w sprite: Filtr ten jest używany do wykrywania obrazów w formatach .PNG i .GIF, które są używane w stylach CSS, na przykład jako tło. Głównym celem jest skonsolidowanie tych wielu małych obrazów w jeden większy obraz (zwany sprite). W praktyce oznacza to, że zamiast wielu żądań do serwera w celu pobrania każdego obrazka, jest tylko jedno żądanie do pobrania jednego dużego obrazu. A następnie, za pomocą CSS, odpowiednie fragmenty tego dużej grafiki są wyświetlane w odpowiednich miejscach na stronie. Jest to skuteczny sposób na redukcję liczby żądań do serwera i przyspieszenie ładowania strony. Warto dodać, że obecnie obrazy .JPG i tagi IMG nie są obsługiwane przez ten filtr.
Skracanie adresów URL: Ten filtr działa na kodzie źródłowym HTML i skupia się na obcinaniu niepotrzebnych części adresów URL w linkach. Dzięki temu kod HTML jest bardziej zwięzły i lepiej zoptymalizowany, co może przyspieszyć czas ładowania strony. Filtr jest szczególnie przydatny na stronach, które mają wiele powtarzających się, zbędnych fragmentów URL w swoich linkach.
Kompatybilność modułu z E-commerce
Moduł Page Speed, choć potężny w optymalizacji wydajności stron internetowych, może wpłynąć na działanie aplikacji e-commerce, takich jak WooCommerce, Magento oraz PrestaShop. Kluczowe informacje dotyczące kompatybilności to:
-
Wpływ na sklepy e-commerce: Chociaż sklepy internetowe działające na platformach WooCommerce, Magento oraz PrestaShop mogą skorzystać z modułu Page Speed, jest kilka filtrów, które mogą zakłócić lub nawet zepsuć ich działanie. Ważne jest, aby być świadomym tych filtrów i dostosowywać je odpowiednio w zależności od specyfiki sklepu.
-
Testowanie w środowisku deweloperskim: Zanim zdecydujesz się wdrożyć moduł Page Speed na żywo, zalecamy przeprowadzenie testów w środowisku deweloperskim. W ten sposób możesz oszacować wpływ modułu na sklep i zidentyfikować ewentualne problemy.
-
Niekompatybilność z dodatkami: Choć moduł Page Speed może działać poprawnie z podstawową wersją platform e-commerce, istnieje wiele dodatków i rozszerzeń, które mogą nie być kompatybilne z modułem. Dlatego ważne jest przeprowadzenie dokładnych testów, zwłaszcza jeśli sklep korzysta z wielu dodatków.
-
Doświadczenie z testami: Przeprowadzone testy na wersjach sklepów PrestaShop 1.6, PrestaShop 1.7, Magento 1.9 oraz 2.0 potwierdziły, że są one kompatybilne z modułem Page Speed. Jednakże każda instalacja sklepu może być unikalna, dlatego indywidualne testowanie jest kluczowe.
Wpływ modułu na testy prędkości
Film autorstwa Google prezentujący porównanie prędkości ładowania się stron z aktywnym i nieaktywnym modułem jest świetnym narzędziem, które pokazuje realne korzyści z optymalizacji. Wizualna reprezentacja różnicy w prędkości ładowania może być przekonująca dla właścicieli stron i sklepów internetowych, podkreślając znaczenie wykorzystania takich narzędzi jak moduł Page Speed.
Wpływ wdrożenia modułu na pobieranie strony przez robota Google
Wprowadzenie modułu Page Speed może znacząco wpłynąć na to, jak roboty wyszukiwarki Google indeksują i oceniają stronę. Moz, czołowe narzędzie do SEO, przeprowadziło testy dotyczące wpływu wdrożenia tego modułu na indeksowanie stron przez robota Google.
Narzędzia GTMetrix
Magento 1.9
WordPress 4.9.3
PrestaShop 1.7
Aplikacja na Symfony 2.8
Jak sprawdzić czy moduł PageSpeed jest aktywny?
Jeśli chcesz sprawdzić, czy na stronie jest aktywny moduł PageSpeed, możesz to zrobić za pomocą konsoli deweloperskiej przeglądarki. Oto jak to zrobić krok po kroku w przeglądarce Google Chrome:
- Otwórz stronę, którą chcesz sprawdzić.
- Kliknij prawym przyciskiem myszy na dowolnym miejscu strony i wybierz „Zbadaj” (lub „Inspect” w angielskiej wersji językowej).
- W otwartym panelu deweloperskim przejdź do zakładki „Network” (Sieć).
- Odśwież stronę (F5 lub ikona odświeżania), aby załadować wszystkie zasoby.
- Na liście załadowanych zasobów kliknij na rekord odpowiadający nazwie domeny (zazwyczaj będzie to pierwszy rekord na liście).
- W prawej części panelu przejdź do zakładki „Headers” (Nagłówki).
- W sekcji „Response Headers” (Nagłówki odpowiedzi) szukaj informacji związanej z PageSpeed. Jeśli moduł jest aktywny, zobaczysz coś w stylu:
X-Mod-Pagespeed: 1.13.35.2-0– tutaj wartość po „X-Mod-Pagespeed” przedstawia wersję modułu.
Jeśli zobaczysz tę informację, oznacza to, że moduł PageSpeed jest aktywny na badanej stronie. Jeśli nie widzisz takiego nagłówka, prawdopodobnie moduł nie jest aktywowany lub jest ukrywany przez konfigurację serwera.
Podsumowanie: Moduł PageSpeed a SEO oraz E-commerce
Moduł PageSpeed od Google to zaawansowane narzędzie, które ma na celu poprawę wydajności i szybkości ładowania się stron internetowych. Z perspektywy SEO, jest to niewątpliwie wartościowy moduł – szybkość ładowania strony jest jednym z czynników rankingowych w wyszukiwarce.
Jednak wdrożenie tego modułu, zwłaszcza na skomplikowanych stronach, takich jak platformy e-commerce, nie jest łatwe. Pomimo obietnic szybszego ładowania strony i lepszego doświadczenia dla użytkownika, wiele firm napotyka na trudności w trakcie implementacji. Wymaga to zaawansowanej wiedzy technicznej i precyzyjnej konfiguracji, aby uniknąć potencjalnych problemów z funkcjonowaniem strony lub wyglądem.
Firmy e-commerce muszą szczególnie uważać, ponieważ nawet niewielkie błędy w konfiguracji mogą prowadzić do poważnych problemów, takich jak niewłaściwe wyświetlanie produktów, błędy w procesie zakupowym lub nawet brak dostępu do strony. Dlatego wdrożenie modułu PageSpeed w środowisku e-commerce wymaga zaangażowania dużego zespołu deweloperskiego i dogłębnych testów.
Można stwierdzić, że chociaż potencjał modułu PageSpeed jest ogromny, jego złożoność sprawia, że wiele firm e-commerce decyduje się nie korzystać z niego, bądź robi to bardzo ostrożnie. Wykorzystanie tego narzędzia w praktyce wciąż pozostaje niszowe, ze względu na konieczność zapewnienia ciągłości działania sklepu i uniknięcia potencjalnych problemów.
