Gdy użytkownik odwiedza stronę, przeglądarka dostaje instrukcje od serwera, jak postępować z plikami z tej strony. W praktyce oznacza to, że pewne pliki są „zapisywane” lokalnie i przy kolejnych wizytach są ładowane bezpośrednio z dysku użytkownika. Pozwala to znacząco obniżyć transfer danych i obciążenie serwera – nawet o 95%.

Jak działa pamięć podręczna przeglądarki na stronie www?

Jak włączyć Leverage Browser Cache na serwerze z Apache?

Aby aktywować tę funkcję, potrzebujesz:

• Dostępu do serwera przez SSH lub FTP oraz pliku .htaccess,
• Włączonego modułu serwerowego, takiego jak mod_expires dla serwerów Apache.

W pliku .htaccess dodaj poniższe komendy:

# Uruchamiamy moduł expires
<IfModule mod_expires.c>
ExpiresActive on
#Opcja automatycznie ustawia na wszystkich plikach cache 1 miesiąca
ExpiresDefault "access plus 1 month"
#Opcje umożliwiają w zależności od pliku (css, js, html) ustawienie dowolnej daty.
#Obrazki
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
# Cache ikonek i plików  statycznych html
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/html "access plus 600 seconds"
#CSS / JS
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>

Uwaga! Na niektórych hostingach, np. home.pl, powyższe komendy mogą nie zadziałać. Jeśli korzystasz z serwera home.pl, w pliku .htaccess wprowadź:

#Rodzaj pliku - oznaczenie M oznacza sekundy w przykładzie - miesiąc.
:Location *.(jpg|png|css|js|gif)
Expires M2592000
:Location

Restart serwera Apache

Po dokonaniu zmian w pliku .htaccess, ważne jest przeprowadzenie restartu serwera Apache, aby nowe ustawienia weszły w życie. W zależności od systemu, na którym jest zainstalowany serwer, można to zrobić na kilka sposobów:

• Dla większości dystrybucji Linux (np. Ubuntu/Debian):

sudo service apache2 restart

lub

sudo systemctl restart apache2

• Dla CentOS/Red Hat:

sudo service httpd restart

lub

sudo systemctl restart httpd

Uwaga: Zawsze warto zrobić kopię zapasową pliku .htaccess przed wprowadzeniem jakichkolwiek zmian, aby w razie potrzeby móc przywrócić pierwotne ustawienia.

Jak włączyć Leverage Browser Cache na serwerze Nginx?

Włączenie cache’u przeglądarki w Nginx polega na dodaniu odpowiednich dyrektyw do pliku konfiguracyjnego serwera. Poniżej znajduje się krok po kroku przewodnik, który pozwoli Ci skonfigurować Leverage Browser Cache na serwerze Nginx:

1. Edycja pliku konfiguracyjnego: Przejdź do głównego pliku konfiguracyjnego Nginx. Zwykle można go znaleźć w lokalizacji /etc/nginx/nginx.conf lub w /etc/nginx/sites-available/twojadomena.com.

2. Dodawanie dyrektyw: W odpowiedniej sekcji bloku serwera (lub bloku lokalizacji, jeżeli chcesz, aby te ustawienia miały zastosowanie tylko do określonej sekcji Twojego serwisu), dodaj:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

W tym przypadku pliki z rozszerzeniami takimi jak .jpg, .jpeg, .png, .gif, .ico, .css i .js będą miały ustawione wygaśnięcie na 30 dni.

3. Sprawdź konfigurację: Zawsze warto upewnić się, że konfiguracja jest prawidłowa po dokonaniu zmian. Użyj polecenia:

sudo nginx -t

Jeżeli wszystko jest w porządku, zobaczysz komunikaty syntax is okay oraz test is successful.

4. Restart Nginx: Aby zmiany weszły w życie, przeładuj serwer Nginx poleceniem:

sudo systemctl reload nginx

Jak sprawdzić działanie pamięci podręcznej?

1. Używając konsoli developerskiej przeglądarki (patrz przykład powyżej),
2. Narzędziami do optymalizacji prędkości strony, takimi jak gtmetrix.com czy page speed google,
3. Sprawdzając nagłówek HTTP, na przykład z użyciem narzędzia curl:

curl -I -L https://wp.pl

Rezultat powinien zawierać informacje o kontrolach cache, takie jak „cache-control” i „expires”.

HTTP/2 200 
date: Mon, 21 May 2018 19:03:38 GMT
content-type: text/html; charset=UTF-8
set-cookie: __cfduid=d9c8052f337ee9edccacd85f8db6c7ac91526929418; expires=Tue, 21-May-19 19:03:38 GMT; path=/; domain=.wojciechpietrzak.com.pl; HttpOnly; Secure
vary: Accept-Encoding
x-mod-pagespeed: 1.13.35.2-0
cache-control: public, max-age=2678400
cf-cache-status: HIT
expires: Thu, 21 Jun 2018 19:03:38 GMT
strict-transport-security: max-age=0
x-content-type-options: nosniff
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server: cloudflare
cf-ray: 41e94dde9ab34064-HAM

Podsumowanie i opinia

Jako doświadczony specjalista SEO z pełnym przekonaniem mogę powiedzieć, że prawidłowo skonfigurowana pamięć podręczna przeglądarki odgrywa kluczową rolę w optymalizacji serwisu. Właściwe jej ustawienie prowadzi do znaczącego obniżenia transferu serwerowego oraz przyspiesza ładowanie strony.

Szybkość ładowania to jeden z kluczowych czynników rankingowych w wyszukiwarkach, co przekłada się na lepsze pozycje w wynikach wyszukiwania.  Dlatego warto poświęcić chwilę, by właściwie skonfigurować Leverage Browser Cache na swoim serwerze, niezależnie od tego, czy korzystasz z Apache czy Nginx.

The post Jak włączyć pamięć podręczna przeglądarki na stronie WWW? – Leverage browser caching appeared first on Specjalista SEO Wojciech Pietrzak.

Apache

Moduł do Apache wspiera dystrybucje Fedora / CentOS oraz Debian/Ubuntu (32 i 64 bit)

1. Logujemy się do serwera / vps i przelogowujemy się na konto root.
2. Pobieramy oficjalny plik modułu ze strony modpagespeed.com, do wyboru są dwie wersje (ostatnia stabilna, i beta) za pomocą opcji wget / curl.

CentOS / Fedora

wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm 

Następnie wykonujemy polecenia instalacyjne:

sudo yum install at  # jeżeli nie jest zainstalowany
sudo rpm -U mod-pagespeed-*.rpm

Aktualizacja modułu:

sudo yum install at  # jeżeli nie jest zainstalowany
sudo rpm -U mod-pagespeed-*.rpm

Debian / Ubuntu

wgert https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb

Następnie wykonujemy polecenia instalacyjne:

sudo dpkg -i mod-pagespeed-*.deb
sudo apt-get -f install

Aktualizacja modułu:

sudo yum update mod-pagespeed-beta lub mod-pagespeed-stable
sudo /etc/init.d/httpd restart

Co instaluje się na serwerze?

• Plik modułu apache – mod_pagespeed_ap24.so (Apache 2.4) lub mod_pagespeed.so (Apache 2.2),
• Pliki konfiguracyjne Pagespeed.conf, pagespeed_libraries.conf) i pagespeed.load (Debian),

Zamiana modułu stabilnego na wersje beta

W przypadku zamiany modułu na wersje beta, należy odinstalować stary moduł i zainstalować wersje beta

Fedora / CentOS

sudo yum remove mod-pagespeed-stable
sudo yum install mod-pagespeed-beta

Debian / Ubuntu

sudo apt-get remove mod-pagespeed-stable
sudo apt-get install mod-pagespeed-beta

Konfiguracja – czyli jak edytować moduł (Apache 2.4)

• Za pośrednictwem pliku pagespeed.conf w folderze modułów Apache (zmiany globalne),

• W plikach konfiguracyjnych strony (Virtual Host).

• W pliku .htaccess

Uruchamianie i wyłączanie filtrów modułu mod_pagespeed

W podanych wyżej plikach można dodawać filtry modułów, modyfikować je i wyłączać. Opis poszczególnych filtrów znajduje się tutaj.oraz na oficjalnej stronie.

Zablokowanie przykładowych filtrów

ModPagespeedForbidFilters rewrite_images,combine_css

Włączenie przykładowych filtrów

ModPagespeedEnableFilters combine_css,extend_cache,rewrite_images

Rezultat powinien być widoczny w źródle strony po odświeżeniu strony / restarcie serwera WWW.

Nginx

Instalacja automatyczna [zalecana opcja]

W przypadku instalacji automatycznej modułu na serwerze nginx należy wykonać następujące polecenia:

bash <(curl -f -L -sS https://ngxpagespeed.com/install) \
     --nginx-version latest

Gdy chcemy wybrać opcje i wersje modułu należy wykonać polecenie

bash <(curl -f -L -sS https://ngxpagespeed.com/install) --help

Instalacją manualna (kompilacja)

Na początku instalujemy kompilator c++. W przypadku starszych wersji serwerowych (Ubuntu 12.04, CentOS 5, CentOS 6) należy zainstalować ręcznie nowszy kompilator (więcej informacji)
Fedora / CentOS

sudo yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel

Debian / Ubuntu

sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev

Pobranie ngx_pagespeed i rozpakowanie

#[Sprawdź ostatnią wersje modułu nginx_pagespeed i podaj na dole]
NPS_VERSION=1.13.35.1-beta
cd
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . -name "*pagespeed-ngx-${NPS_VERSION}" -type d)
cd "$nps_dir"
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/}
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/}
psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${psol_url}
tar -xzvf $(basename ${psol_url})  # extracts to psol/

Pobranie i zainstalowanie serwera nginx z obsługą pagespeed

NGINX_VERSION = [sprawdź stronę nginxa dla najnowszej wersji] 
cd 
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz 
tar -xvzf nginx - $ {NGINX_VERSION} .tar.gz 
cd nginx- $ {NGINX_VERSION} / 
./configure --add-module = $ HOME / $ nps_dir $ {PS_NGX_EXTRA_FLAGS} 
make 
sudo make install

Jeżeli chcesz użyć modułów dynamicznych to należy zmienić komendę add-module= na add-dynamic-module=

Dodatkowe informacje na temat modułu prędkości oraz to w jaki sposób sprawdzić czy działa prawidłowo znajduję się w artykule Przyśpieszenie strony www – opis modułu Apache / Nginx

The post Instalacja modułu mod_pagespeed na serwerze / vps appeared first on Specjalista SEO Wojciech Pietrzak.

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?

1. Prosty i szybki proces instalacji – zaledwie 5 minut.
2. Znacząca poprawa szybkości ładowania strony, co przekłada się na większy komfort dla użytkowników.
3. Bogate opcje konfiguracji i testowania.
4. Niezawodność działania oraz kompatybilność z większością systemów CMS i aplikacji e-commerce.
5. 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.

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

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

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

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

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

1. Otwórz stronę, którą chcesz sprawdzić.
2. Kliknij prawym przyciskiem myszy na dowolnym miejscu strony i wybierz „Zbadaj” (lub „Inspect” w angielskiej wersji językowej).
3. W otwartym panelu deweloperskim przejdź do zakładki „Network” (Sieć).
4. Odśwież stronę (F5 lub ikona odświeżania), aby załadować wszystkie zasoby.
5. Na liście załadowanych zasobów kliknij na rekord odpowiadający nazwie domeny (zazwyczaj będzie to pierwszy rekord na liście).
6. W prawej części panelu przejdź do zakładki „Headers” (Nagłówki).
7. 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.

The post Co to jest mod_pagespeed? Zalety, właściwości i kluczowe informacje appeared first on Specjalista SEO Wojciech Pietrzak.