Przyśpieszenie strony www - opis modułu Apache / Nginx

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.

Apache 2.4.1

Wersja 2.4.1 posiada bug, który powoduje niekompatybilność z modułem Page Speed. Dlatego odradza się jego instalacje na tej wersji.

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.

Add HeadAdd InstrumentationAsync Google AdSenseAsync Google AnalyticsCanonicalize JavaScript LibrariesCollapse WhitespaceCombine CSSCombine Heads Convert Meta TagsDeduplicate Inlined ImagesDefer JavaScriptElide Attributes

Dodanie znacznika HEAD

Opcja automatycznie dodaje po znaczniku <body> znacznik <head>.

Analiza czasu wczytywania i renderingu strony oraz zwrócenie wartości z powrotem do serwera

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

Monitoring prędkości wcztywania strony - moduł Google

Zmienne dotyczące prędkości zwracane przez moduł Page Speed

Asynchroniczne wczytywanie skryptu Google AdSense

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).

Podmiana skryptów JavaScript

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

Usunięcie białych znaków z HTML

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>.

(Połączenie plików CSS)

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.

Połączenie znaczników head

Jeżeli podstrona zawiera 2 lub więcej znaczniki head, zostaną one połączone w jeden znacznik.

Połączenie znaczników HEAD

Konwersja metatagów do nagłówka HTTP

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,

Redukcja / wczytywanie zduplikowanych zdjęć

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

Odroczenie wykonania kodu JavaScript od wczytania strony

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

Usunięcie standardowych atrybutów z kodu HTML

Celem komendy jest usunięcie opcji, które są dodane mimo że są domyślnie identyczne). Przykład GIF opcja wyłączona / włączona:

Extend CacheExtend Cache PDFsFilters and Options for Optimizing ImagesFlatten CSS @importsHint Resource PreloadingInclude JavaScript Source MapsInline @import to LinkInline CSSInline Google Fonts API CSSInline JavaScriptInline Preview Images

Dłuższy cache plików

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

Dłuższy cache plików PDF

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)

Filtry i opcje dotyczące optymalizacji zdjęć

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

Połączenie plików @import CSS

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:

&lt;style type="text/css" media="screen"&gt;<strong>@import url</strong>(http://www.example.com/style.css);&lt;/style&gt;

1	<style type="text/css" media="screen"><strong>@import url</strong>(http://www.example.com/style.css);</style>

<strong>&lt;link type</strong>="text/css" media="screen" rel="stylesheet" href="http://www.example.com/style.css"/&gt;

1	<strong><link type</strong>="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

&lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto"&gt;

1	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">

  &lt;style&gt;@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');
    }
    &lt;/style&gt;

<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

Insert Google AnalyticsLazily Load ImagesLocal Storage CacheMake Images ResponsiveMinify JavaScriptMove CSS Above ScriptsMove CSS to HeadOptimize ImagesOutline CSSOutline JavaScript

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

Filter zapisuje kod zainkludowany w kodzie źródłowym strony do lokalnego cache przeglądarki użytkownika (jest to jedna z zalet HTML5). Jeżeli użytkownik przegląda inne strony serwisu gdzie znajduje się ten sam kod w kodzie źródłowym to podmienia go na ten już wczytany wcześniej. Jest to obsługiwane przez dodatkowy kod JavaScript znajdujący sie w headzie strony. Cache dotyczy plików CSS i zdjęć.

: 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:

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.

Optymalizacja zawierająca filtry z w/w punktu dotyczącego, optymalizacja dotyczy jakości zdjęcia, jego formatu i wielkości.

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”/>

Eksperymentalny filtr który wyciąga style kaskadowe zawarte w źródle HTML (np. pomiędzy <style> </style>) do pliku .css

Eksperymentalny filtr który wyciąga skrypt JavaScript zawarty w źródle HTML (np. pomiędzy <script> </script>) do pliku .js

PedanticPre-Resolve DNSPrioritize Critical CSSRemove CommentsRemove QuotesRewrite CSSRewrite DomainRewrite Style AttributesSprite ImagesTrim URLs

Filtr wpływa na poprawki w kodzie strony związane z kompatybilnością do walidacji HTML4.

Filtr umieszcza wskazówki dla przeglądarki użytkownika na temat DNS (komenda <link rel=”dns-prefetch”> co umożliwia przeglądarce na samym początku wczytywania pliku określenie DNSów poszczególnych zasobów strony

Filtr skanuje kod CSS aktualnie wczytywaniej podstrony i przenosi do kodu źródłowego strony tylko te reguły, które występują na stronie. Zapobiega to blokowaniu np. requestów CSS wymaganych do zainicjowania renderingu.

: Filtr włączony

: Filtr wyłączony

Usuwa komentarze z kodu źródłowego HTML, istnieje możliwość ustawienia wybranych komentarzy, które nie zostaną usunięte. Nie usuwane są też warunkowe komentarze wykorzystywane przez przeglądarkę Internet Explorer

Filtr usuwa apostrofy i cudzysłowia z komend HTML.

Przed: &lt;img src="BikeCrashIcn.png" align='left' alt="" border="0" width='70' height='30' &gt;
Po: &lt;img src=BikeCrashIcn.png align=left alt="" border=0 width=70 height=30 &gt;

1 2	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 >

Filtr nadpisuje znaleziony kod CSS i go optymalizuje (minifikacja, podmiana zdjęć na zoptymalizowane z komend background-image)

Zaawansowany filtr dotyczący mapowania domeny, domyślnie dotyczy to zasobów, ale istnieje również opcja nadpisywania hiperlinków. Mapowanie określa jaka sekcja lub domena ma być brana pod uwagę w działaniu modułu PageSpeed. Przykładowe rekordy mapowania:

ModPagespeedDomain http://example.com
ModPagespeedDomain cdn.example.com
ModPagespeedDomain http://styles.example.com/css
ModPagespeedDomain * .example.org

ModPagespeedDomain http://example.com

ModPagespeedDomain cdn.example.com

ModPagespeedDomain http://styles.example.com/css

ModPagespeedDomain * .example.org

Filtr nadpisuje elementy znajdujące się w atrybutach stylu css, które znajdują sie w kodzie źródłowym strony (HTML)

Przykład zdjęcia background image, które zostanie zoptymalizowane modułem:

Przed: &lt;div style="background-image: url('images/Puzzle.jpg');"/&gt;

1	Przed: <div style="background-image: url('images/Puzzle.jpg');"/>

Po: &lt;div style="background-image:url('images/Puzzle.jpg.pagespeed.ic.7X5cYtoCx-.jpg');"/&gt;

1	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

Filtr wykrywa obrazy .PNG i .GIF, które są używane jako np. tło serwisu za pomocą stylu CSS. Automatycznie stara się połączyć wszystkie takie pliki w jeden duży plik obrazu a kod CSS określa który element dużego obrazu należy wyświetlić w miejsce starego małego zdjęcia.

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.

Filtr obcina z kodu źródłowego HTML strony zbędne adresy w linkach.

Przed: &lt;a href="http://www.example.com/<strong>bar</strong>"&gt;Link&lt;/a&gt;

1	Przed: <a href="http://www.example.com/<strong>bar</strong>">Link</a>

Po: &lt;a href="<strong>bar</strong>"&gt;Link&lt;/a&gt;

1	Po: <a href="<strong>bar</strong>">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

: Obraz prędkości i optymalizacji OFF

: Prędkość i optymalizacja ON

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.