Firma Google przygotowała i wspiera specjalny moduł do poprawienia szybkości witryny WWW – Page Speed. Celem modułu jest usprawnienie i optymalizacja w szybki, automatyczny sposób prędkości strony, sklepu internetowego. Wtyczka ta nie wymaga konfiguracji i działa automatycznie po uruchomieniu 1 komendy na serwerze dedykowanym bądź współdzielonym – VPS.
Źródło zdjęcia: Google Moduł Page Speed
Kiedy mogę zainstalować moduł na swojej stronie?
Moduł można zainstalować wtedy, gdy posiadasz dostęp do SSH czyli masz możliwość połączenia się z serwerem dedykowanym bądź VPS i uprawnienia do edycji plików i folderów konfiguracyjnych serwera www APACHE / NGNIX. W przypadku bardziej rozbudowanych hostingów taki dostęp również jest możliwy.
Zachęcam do kontaktu z hostingodawcami w celu zapytania dotyczącego modułu – jeżeli dany moduł jest na serwerze zainstalowany to jest możliwe “włączenie” modułu za pomocą wprowadzenia opcji w pliku .htaccess na koncie FTP.
Zalety modułu Page Speed – czyli dlaczego warto go zainstalować?
- Łatwość instalacji (5 minut),
- Poprawa prędkości wczytywania się strony – a tym samym komfortu użytkowników :),
- Szeroka możliwość konfiguracji i testów,
- Wysoka stabilność działania i współpraca z większością systemów CMS / aplikacji e-commerce,
- Automatyczna optymalizacja całej witryny (np. tysięcy produktów w sklepie).
Możliwości modułu – czyli co potrafi Page Speed Mod
W zależności od wybranych ustawień, moduł automatycznie może wykonywać następujące działania. Należy pamiętać że każda z opcji ma określone ryzyko na oficjalnej stronie modułu i włączenie danej opcji może zepsuć funkcjonalność strony internetowej. Wszystkie komendy są dostępne na oficjalnej stronie Mod Page Speed.
Opcja automatycznie dodaje po znaczniku <body> znacznik <head>.
Komenda ma na celu wdrożenie dwóch bloków kodu JavaScript na każdą podstronę serwisu, kod służy do monitorowania danych dotyczących wczytywania i renderingu strony przez użytkownika
Zmienne dotyczące prędkości zwracane przez moduł Page Speed
Skrypt Google Adsense jest zmieniany na ładowanie asynchroniczne – czyli takie, które wczytuje się równolegle z innymi requestami. (Nie powoduje to blokady np. wczytywania się strony dopóty dopóki nie wczytany zostanie ten skrypt)
Asynchroniczne wczytywanie skryptu Google Analitycs.
Kod skryptu Google Analitycs jest modyfikowany z opcją ładowania asynchronicznego – czyli takiego, który wczytuje się równolegle z innymi requestami. (Nie powoduje to blokady np. wczytywania się strony dopóty dopóki nie wczytany zostanie ten skrypt).
Opcja automatycznie podmienia adresy URL popularnych skryptów JavaScript (np. skrypt biblioteki jQuery) tak by były wczytywane z serwera cdn Google.
Skrypty pobierane są z serwera Google.
Jest to ważne z kilku punktów:
- użytkownik mógł już wczytać ten sam skrypt na innej stronie
- w wyniku czego przeglądarka wczyta mu zapisaną wersje z jego dysku co przyśpieszy wczytanie strony i zmniejszy obciążenie po stronie twojego WWW. Wykorzystanie CDN jest darmowe w takiej opcji. Więcej informacji dotyczącej tej komendy
Komenda ModPagespeedEnableFilters collapse_whitespace usuwa białe, niewidzialne znaki z kodu HTML, takie jak tabulacje. Niedotyczy to znaków zawartych w blokach <script>, <textarea> i <pre>.
Komenda ModPagespeedEnableFilters combine_css ma na celu połączenie wszystkich plików .css znajdujących się na stronie w jednej. Oznacza to że przeglądarka wczytuje tylko jeden plik, zamiast kilku bądź kilkunastu. W rezultacie użytkownik generuje mniej zapytań do serwera WWW.
Jeżeli podstrona zawiera 2 lub więcej znaczniki head, zostaną one połączone w jeden znacznik.
Połączenie znaczników HEAD
Komenda sprawdza znaczniki metatagów content type i umieszcza je w znaczniku response header. Dotyczy to opcji http-eqiv.
Znacznik UTF 8
Analogia w stosunku do punktu wyżej,
Jeżeli na stronie znajdują się identyczne zdjęcia, które występują dwukrotnie (Rys 2.) moduł zamieni do wystąpienia zdjęcia dostawi kod JavaScript i pobierze zdjęcie z pierwszego wystąpienia na stronie (Rys 1.)
-
- Rys 1. Kod źródłowy: Opcja włączona
-
- Rys 2. Kod źródłowy -Opcja wyłaczona
-
- Rys 3. Opcja włączona – ilość pobranych danych i requestów
-
- Rys 4. Opcja wyłączona – ilość pobranych danych i requestów
Celem komendy jest wykonanie kodu JavaScript dopiero po wczytaniu strony. W przykładzie – wygenerowanie skryptów JavaScript następuje dopiero po wczytaniu wszystkich zdjęć na stronie.
-
- Bez opcji Defer
-
- Z opcja Defer
Celem komendy jest usunięcie opcji, które są dodane mimo że są domyślnie identyczne). Przykład GIF opcja wyłączona / włączona:
Opcja oznacza automatyczne przypisywanie nagłówka HTTP (max-age) dla plików javascript, css, i zdjęć. Domyślnie PageSpeed ustala wartość na rok (max-age: 31536000).
Najważniejszą z opcji jest to że moduł sam kontroluje czy dany plik nie został zmieniony na serwerze FTP za pomocą TTL (time-to-live) – Jeżeli plik został zmieniony to w ciągu 5 minut zmieni adres url loga na inny i tym samym użytkownik pobierze nowe zaaktualizowane zdjęcie, skrypt js, css.
Końcówka HASH zdjęcia w celu odświeżenia pliku dla użytkowniku
Analogiczna opcja jak punkt wyżej, dotyczy plików PDF znajdujących się na serwerze. Dotyczy linków PDF i PDFy embedded (wczytywane w źródle strony)
Jedna z najważniejszych opcji modułu Page Speed, dotycząca automatycznej konwersji zdjęć, atrybutów rozmiaru i innych. W opcji tej zawiera się kilkanaście komend, które dotyczą zmiany wielu wariantów ich optymalizacji:
- konwersja GIF do PNG (pierwsza klatka animacji GIF jako PNG),
- konwersja zdjęć JPEG do formatu progresywnego,
- konwersja JPEG do formatu WebP,
- konwersja PNG do JPEG (przed wersją 1.8.31.2 modułu nie sprawdzane były piksele transparentne. Aktualnie konwersja następuje tylko i
- wyłącznie gdy plik PNG nie posiada kanału alfa (przezroczystość),
- konwersja animacji GIF do animacji WebP,
- bezstratna konwersja animacji GIF do animacji WebP,
- konwersja małych zdjęć (inline images) do formatu data (oznacza to że nie generowany jest request do serwera),
- automatyczne wdrożenie w znaczniki img znaczników width i height,
- rekompresja zdjęć (zestaw komend dotyczących kompresowania zdjęć) – komendy typu png, webp. Komenda rekompresuję zdjęcia pod aktualną konfigurację modułu,
- redukcja sampli JPEG,
- skalowanie zdjęć pod atrybuty width i height lub style – Zapobiega to wczytywanie dużych zdjęć do np. miniaturek.
- skalowanie zdjęć pod określony wymiar – Skrypt optymalizuje zdjęcia pod renderowany wymiar na stronie internetowej (ignoruje atrybuty width i height) na podstawie JavaScript (beacon),
- generowanie i przypisanie srcset dla zdjęć responsywnych – moduł przypisze atrybuty srcset i wygeneruje opcjonalne warianty zdjęć, tak by użytkownik wchodzący np. na smartfonie nie otrzymał zdjęcia z widoku przeznaczonego dla komputerów stacjonarnych.
- kolejne opcje dotyczą specyficznych zagadnień jakie rozmiary plików optymalizować, jaki poziom kompresji zastosować. Reszta komend znajduję się w dokumentacji
Celem jest połączenie importowanych plików css (komenda @import) i wdrożenie ich bezpośrednio w kod html w znaczniku <style>.
-
- Brak znacznika import
-
- Znaczniki import
Celem opcji jest wstępne ładowanie zasobów JavaScript, CSS na wczesnym etapie przetwarzania strony
Komenda opracowuje mapy źródłowe skryptu JavaScript. Pierwszy elementem jest “sklejenie kodu, następnym stworzenie mapy źródłowej (mappings). Celem tworzenia mapowań jest, zmniejszenie całkowitego rozmiaru skryptu co poprawi czas analizy, zużycie pamięci i czas pobierania. Więcej informacji dostępnych jest w oficjalnym konspekcie.
Gdy opcja jest włączoną, następuje zamiana znaczników @import na kod <link>. Przykładowo:
<style type="text/css" media="screen">
@import url
(http://www.example.com/style.css);</style>
<link type
="text/css" media="screen" rel="stylesheet" href="http://www.example.com/style.css"/>
Celem jest przeniesienie kodu CSS z pliku .css do źródła strony HTML, oznacza to że użytkownik nie musi generować zapytania do serwera by pobrać oddzielny plik CSS. Istnieje mozliwosć ustawienia maksymalnej wielkości pliku css, który wklejany jest do kodu HTML.
Analogiczna sytuacja jak wyżej, tylko dotycząca pliku css zawierającego czcionki Google
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
<style>@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/abcd.woff) format('woff');
}
</style>Automatyczne wdrażanie w treść pliku HTML kodu pliku JavaScript w celu zminimalizowania requestów do serwera. (Analogia jak w przypadku css, komendy dotyczą JS). Możliwość ustawienia do jakiej wielkości plik jest “konwertowany” do źródła strony.
Opcja generuje słabszej jakości zdjęcie, które po wczytaniu zdjęcia o docelowej jakości jest podmieniane. Istnieje możliwość ustawienia opcji tylko dla użytkowników mobilnych (resize_mobile_images)
Podmiana zdjęcia
Moduł automatycznie umieszcza kod Google Analitycs na każdej podstronie serwisu – o ile nie występuje on najpierw w znaczniku <head>. Kod umieszcza w postaci asynchronicznej (Oznacza to że testery pagespeed jak gtmetrix czy google page speed) nie wyświetlą tego pliku jako błąd prędkości.
Uaktywnia opcje lazy load – oznacza to że użytkownik nie wczytuje wszystkich zdjęć znajdujących się na stronie, a tylko te, które aktualnie widzi na monitorze. Redukuje to transfer danych i szybciej wczytuje rendering strony. Dodatkowo istnieje możliwość umieszczenia dowolnej grafiki blank na zdjęciach, które zostaną doładowane gdy użytkownik zascrolluje na dół strony
-
- Filtr Cache w module Page Speed
-
- Gdy Filtr Cache jest wylączony w module Page Speed
Celem jest wygenerowanie wariantów tego samego zdjęcia w rożnych rozdzielczościach – w celu wygenerowania jak najlepiej zoptymalizowanego zdjęcia dla wybranego użytkownika. Komendy: ModPagespeedJpegRecompressionQuality i ModPagespeedJpegRecompressionQualityForSmallScreens
Sposób działania opcji
(foo.png jest plikiem o rozdzielczości 1000×1000 px)
Wczytujemy plik foo.png jako miniature
<img src=”foo.png” width=”100″ height=”100″>
Otrzymamy wynik:
<img src=”100x100xfoo.png.pagespeed.ic.HASH1.png” width=”100″ height=”100″
srcset=”150x150xfoo.png.pagespeed.ic.HASH2.png 1.5x,200x200xfoo.png.pagespeed.ic.HASH3.png 2x,
300x300xfoo.png.pagespeed.ic.HASH4.png 3x, foo.png 10x”>
Minifkacja kodu JavaScript usuwa automatyczne białe znaki, znaki tabulacji oraz komentarze programistów zostawiając tylko i wyłacznie kod JavaScript. Minifikacja działa podobnie jak popularny minifikator – JSMin.
Filtr przesuwa pliki CSS wyżej od plików JavaScript w źródle strony – tak by pierwszeństwo wczytywania posiadały pliki CSS.
Automatycznie przesuwa kod CSS znajdujący się w znaczniku <style> do sekcji <head> każdej podstrony serwisu.
Przykładowe działanie:
Przed: <img src=”images/Image1.gif”/>
Po: <img src=”images/xImage1.gif.pagespeed.ic.GSLMcHP-fl.png”/>
W przypadku dopasowania zdjęcia do wczytywanej wielkości, jest generowane nowe zdjęcie:
Przed: <img src=”images/Image2.png” width=”256″ height=”192″/>
Po: <img src= “images/256x192xImage2.png.pagespeed.ic.ryODdDEGKc.png” width=”256″ height=”192″/>
W przypadku małych zdjęć, generowane jest ciąg znaków DATA, który znajduję się bezpośrednio w kodzie HTML (nie generuje requestu do serwera)
Przed:<img src=”images/Image3.jpg” width=”65″ height=”70″/>
Po: <img src=”data:image/jpeg;base64,…Base64 data”/>
-
- Filtr włączony
-
- Filtr wyłączony
Przed: <img src="BikeCrashIcn.png" align='left' alt="" border="0" width='70' height='30' > Po: <img src=BikeCrashIcn.png align=left alt="" border=0 width=70 height=30 >
ModPagespeedDomain http://example.com ModPagespeedDomain cdn.example.com ModPagespeedDomain http://styles.example.com/css ModPagespeedDomain * .example.org
Przykład zdjęcia background image, które zostanie zoptymalizowane modułem:
Przed: <div style="background-image: url('images/Puzzle.jpg');"/>Po: <div style="background-image:url('images/Puzzle.jpg.pagespeed.ic.7X5cYtoCx-.jpg');"/>- Run Experiments (Analiza Page Speeda i jego wpływu za pomocą Google Analitycs)
Filtr pozwala wygenerować kilkadziesiąt wariantów ustawień modułu Page Speed dla poszczególnych podstron serwisu, w celu określenia, które ustawienie jest najlepsze i generuje najlepszy współczynnik poprawy prędkości serwisu internetowego.
Wymagane jest integracja z narzędziem Google Analitycs. Za pomocą wybranych komend można określić dla ilu użytkowników wyświetlimy wersje zoptymalizowaną (np. co drugi użytkownik uzyska wersje zoptymalizowaną przez moduł).
Można ustawić wiele wariantów ręcznie – np. dla 10% wczytują się określone filtry, dla 10% innych inne, bądź bardziej zoptymalizowane filtry.
Następnie w Google Analitycs należy porównać zestawy danych.
Źródło zdjęcia: Modpagespeed.com / Analiza prędkości modułu Page Speed
Oznacza to obniżenie zapytań do serwera i przyśpieszenie wczytywania się strony (np. zamiast 20-50 małych zdjęć, wczytywanie jest 1 duże). Obrazy w formacie .JPG i znaczniki IMG nie są jeszcze wspierane.
Przed: <a href="http://www.example.com/
bar
">Link</a>
Po: <a href="
bar
">Link</a>
Kompatybilność modułu z aplikacjami E-commerce
Sklepy internetowe na WooCommerce, Magento oraz PrestaShop wykorzystują ten moduł i nie wpływa to na ich funkcjonowanie, należy jednak pamiętać ze moduł sam w sobie posiada kilkanaście filtrów które mogą bardzo mocno wpłynąć na funkcjonowanie sklepu, bądź nawet go zepsuć.
Jeżeli planujesz wprowadzić takie rozwiązanie w swoim serwisie to zalecam najpierw wypróbowanie go na wersji testowej – deweloperskiej w celu oszacowania prawidłowości działania serwisu, dodatkowo wiele sklepów posiada róznego rodzaju filtry i dodatki które mogą być niekompatybilne z modułem. Uruchomiłem testowe wersje sklepów PrestaShop 1.6, PrestaShop 1.7, Magento 1,9 oraz 2.0 i wszystkie z nich działały prawidłowo z modułem Page Speed.
Efekty i wpływ modułu na “testery” prędkości
Film porównujący wczytywanie się dwóch stron z aktywnym i nieaktywnym modułem prędkości (Autor: Google).
Wpływ wdrożenia modułu na pobieranie strony przez robota Google (moz.com)
Źródło: moz.com
Testy zostały przeprowadzone na domyślnym motywie graficznym aplikacji i z domyślnymi produktami (sample data), dlatego nie można na podstawie ich wywnioskować realnego przyśpieszenia danej strony np. w przypadku gdy administrator witryny umieszczał bardzo duże, nie skompresowane zdjęcia i je skalował do małej rozdzielczości to poprawa PageSpeeda powinna być diametralna.
Narzędzia GTMetrix
Magento 1.9
-
- Moduł Page Speed Aktywny
-
- Obraz prędkości i optymalizacji OFF
WordPress 4.9.3
-
- Moduł nieaktywny
-
- Moduł aktywny
PrestaShop 1.7
-
- Moduł Page Speed Nieaktywny
-
- Moduł Page Speed Aktywny
Aplikacja na Symfony 2.8
-
- Moduł nieaktywny
-
- Moduł aktywny
Jak sprawdzić czy moduł PageSpeed jest aktywny?
Aktywność modułu sprawdzamy w konsoli deweloperskiej przeglądarki. W przypadku Google Chrome należy kliknąć prawym przyciskiem myszy na stronie i wybrać “Zbadaj“. Następnie przechodzimy do zakładki Network. Kolejny krok to wybranie 1 rekordu z listy plików (rekord o nazwie domeny).
Otworzy się zakładka Headers i w sekcji “Response Headers” znajdzie się informacja o module pagespeed i jego wersji.
Sprawdzenie wersji modułu PageSpeed i jego aktywności
