Nainštalujte modul Nginx PageSpeed na server Ubuntu 22.04/20.04

ngx_pagespeed je modul Nginx s otvoreným zdrojom, ktorý automaticky používa osvedčené postupy na optimalizáciu výkonu front-endu webových stránok. V tomto návode vám ukážem, ako nainštalovať modul PageSpeed s Nginx na server Ubuntu 22.04 a Ubuntu 20.04. ngx_pagespeed sa chystáme zostaviť ako dynamický modul, ktorý zjednoduší priebežnú údržbu.

Krok 1: Nainštalujte webový server Nginx na Ubuntu

sudo apt install nginx

PageSpeed sa integruje s Nginxom ako dynamický modul, ktorý vám umožňuje kompilovať zdrojový kód jednotlivých modulov bez kompilovania samotného Nginxu.

Binárny súbor Nginx je potrebné skompilovať s argumentom --with-compat, vďaka čomu budú dynamické moduly binárne kompatibilné s vašou existujúcou binárnou hodnotou Nginx. Avšak nie každý binárny súbor Nginx dodaný z predvoleného úložiska Debian/Ubuntu je skompilovaný s argumentom --with-compat.

Skontrolujte konfiguračné argumenty Nginx pomocou nasledujúceho príkazu:

sudo nginx -V

Teraz musíme povoliť úložisko zdrojového kódu, aby sme si mohli stiahnuť zdrojový kód Nginx.

Ubuntu

sudo apt install software-properties-common
sudo apt-add-repository -ss
sudo apt update

Poznámka: Modul PageSpeed momentálne nie je kompatibilný s Nginx 1.23.0. Neodporúčam inštalovať najnovšiu verziu Nginx. Balík nginx z predvoleného úložiska Ubuntu je v poriadku.

Krok 2: Stiahnite si zdrojový balík Nginx

Spustite nasledujúci príkaz na vytvorenie adresára nginx pod /usr/local/src/ na uloženie balíka zdrojového kódu Nginx. Nahraďte používateľské meno svojím skutočným používateľským menom.

sudo chown username:username /usr/local/src/ -R 

mkdir -p /usr/local/src/nginx

cd do zdrojového adresára Nginx.

cd /usr/local/src/nginx/

Stiahnite si zdrojový balík Nginx pomocou príkazu nižšie:

sudo apt install dpkg-dev

sudo apt source nginx

Ak uvidíte nasledujúce varovné hlásenie, môžete ho pokojne ignorovať.

W: Download is performed unsandboxed as root as file 'nginx_1.19.5-0ubuntu1.dsc' couldn't be accessed by user '_apt'. - pkgAcquire::Run (13: Permission denied)

Pozrite si stiahnuté súbory.

ls

Ukážkový výstup:

nginx-1.19.5
nginx_1.19.5-1~bionic.debian.tar.xz
nginx_1.19.5-1~bionic.dsc
nginx_1.19.5.orig.tar.gz

Krok 3: Stiahnite si zdrojový balík ngx_pagespeed

Na kompiláciu Nginx s modulom ngx_pagespeed potrebujeme aj zdrojový balík ngx_pagespeed. Naklonujte úložisko Git ngx_pagespeed.

cd /usr/local/src

sudo apt install git

git clone https://github.com/apache/incubator-pagespeed-ngx.git

cd incubator-pagespeed-ngx/

Použite najnovšiu stabilnú vetvu.

git checkout latest-stable

Pozrime sa na súbor PSOL_BINARY_URL.

cat PSOL_BINARY_URL

Môžeme vidieť adresu URL na stiahnutie PSOL (PageSpeed Optimization Libraries).

https://dl.google.com/dl/page-speed/psol/1.13.35.2-$BIT_SIZE_NAME.tar.gz

Stiahnite si PSOL a rozbaľte ho.

wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz
tar xvf 1.13.35.2-x64.tar.gz

Vytvorí adresár psol v adresári incubator-pagespeed-ngx.

Krok 4: Kompilujte modul ngx_pagespeed

Uistite sa, že ste v zdrojovom adresári Nginx.

cd /usr/local/src/nginx/nginx-1.19.5

Nainštalujte závislosti zostavenia pre Nginx.

sudo apt build-dep nginx
sudo apt install uuid-dev libpcre2-dev

Nakonfigurujte prostredie pomocou nasledujúceho príkazu. Nebudeme kompilovať samotný Nginx, ale kompilovať iba modul PageSpeed. Príznak --with-compat spôsobí, že modul bude binárne kompatibilný s vašou existujúcou binárnou hodnotou Nginx.

sudo ./configure --with-compat --with-openssl=/usr/include/openssl --add-dynamic-module=/usr/local/src/incubator-pagespeed-ngx

Zostavte len moduly PageSpeed, ktoré budú hotové za pár okamihov.

sudo make modules

Ak narazíte na chyby, skontrolujte, či má váš server dostatok pamäte RAM. Modul sa uloží ako objs/ngx_pagespeed.so, skopírujte ho do adresára /usr/share/nginx/modules/.

sudo cp objs/ngx_pagespeed.so /usr/share/nginx/modules/

Ak ste nainštalovali Nginx z úložiska nginx.org, môžete ho skopírovať do adresára /etc/nginx/modules/.

sudo cp objs/ngx_pagespeed.so /etc/nginx/modules/

Krok 5: Načítajte modul ngx_pagespeed

Upravte hlavný konfiguračný súbor Nginx.

sudo nano /etc/nginx/nginx.conf

Na začiatok súboru pridajte nasledujúci riadok.

load_module modules/ngx_pagespeed.so;

Uložte a zatvorte súbor. Potom otestujte konfiguráciu Nginx.

sudo nginx -t

Ak je test úspešný, znova načítajte Nginx.

sudo systemctl reload nginx

Krok 6: Nakonfigurujte filtre PageSpeed

Vytvorte priečinok pre vyrovnávacie pamäte rýchlosti stránok a zmeňte jeho vlastníctvo na používateľa Nginx (www-data), aby ho mohol zapísať Nginx.

sudo mkdir -p /usr/share/nginx/ngx_pagespeed_cache

sudo chown -R www-data:www-data /usr/share/nginx/ngx_pagespeed_cache

Teraz upravte konfiguračný súbor bloku servera Nginx.

sudo nano /etc/nginx/conf.d/your-domain.conf

Do sekcie server pridajte nasledujúce direktívy pagespeed.

# enable pagespeed module on this server block
pagespeed on;
pagespeed Domain https://www.example.com;
pagespeed Domain https://example.com;

# uncomment the following line if your website runs on HTTPS protocol
#pagespeed FetchHttps enable;

#admin console
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;
pagespeed AdminPath /pagespeed_admin;

location ~ ^/pagespeed_admin {
   allow 127.0.0.1;
   allow your-own-IP-address;
   deny all;
}

# Needs to exist and be writable by nginx. Use tmpfs for best performance.
pagespeed FileCachePath /usr/share/nginx/ngx_pagespeed_cache;

# Ensure requests for pagespeed optimized resources go to the pagespeed handler
# and no extraneous headers get set.
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
  add_header "" "";
}
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }

pagespeed RewriteLevel CoreFilters;

Ak hosťujete viacero webových stránok na jednom serveri, pridajte vyššie uvedené príkazy rýchlosti stránky do každého konfiguračného súboru bloku servera, aby ste na každej z nich povolili rýchlosť stránky.

Posledná direktíva nastavila CoreFilters ako úroveň prepisovania. PageSpeed ponúka 3 úrovne prepisovania: CoreFilter, PassThrough a OptimizeForBandwidth. CoreFilter je predvolený, pretože obsahuje filtre, ktoré sa považujú za bezpečné pre väčšinu webových stránok.

CoreFilter obsahuje nasledujúce filtre.

  • add_head: Pridá prvok <head> do dokumentu, ak ešte nie je prítomný.
  • combine_css: Kombinuje viacero prvkov CSS do jedného.
  • combine_javascript: Znížte počet požiadaviek HTTP uskutočnených prehliadačom počas obnovovania stránky nahradením viacerých odlišných súborov JavaScript jedným.
  • convert_meta_tags: Pridá hlavičku odpovede, ktorá zodpovedá každej metaznačke s atribútom http-equiv.
  • extend_cache: Predlžuje životnosť vyrovnávacej pamäte zdrojov CSS, JS a obrázkov, ktoré inak neboli optimalizované, podpísaním adries URL pomocou hash obsahu.
  • fallback_rewrite_css_urls: Prepíše zdroje, na ktoré sa odkazuje v akomkoľvek súbore CSS, ktoré nemožno inak analyzovať a minifikovať.
  • flatten_css_imports: Inline CSS zlúčením všetkých pravidiel @import.
  • inline_css: Vloží malé súbory CSS do dokumentu HTML.
  • inline_import_to_link: Vložené značky <style> obsahujúce iba @importy CSS ich konverziou na ekvivalentné značky <link>.
  • inline_javascript: Vloží malé súbory JS do dokumentu HTML.
  • rewrite_css: Prepíše súbory CSS, aby sa odstránili nadbytočné medzery a komentáre, a ak je to povolené, prepíše alebo rozšíri do vyrovnávacej pamäte obrázky uvedené v súboroch CSS. V režime OptimizeForBandwidth prebieha minifikácia na mieste bez zmeny adries URL.
  • rewrite_images: Toto je skupina filtrov, ktorá zahŕňa inline_images, recompress_images, convert_to_webp_lossless a zmeniť veľkosť_obrázkov.
  • rewrite_javascript: Prepíše súbory JavaScript, aby sa odstránili nadbytočné medzery a komentáre. V režime OptimizeForBandwidth prebieha minifikácia na mieste bez zmeny adries URL.
  • rewrite_style_attributes_with_url: Prepíšte CSS v atribútoch štýlu použitím nakonfigurovaného filtra rewrite_css.

Môžete tiež pridať nasledujúce direktívy PageSpeed do konfiguračného súboru bloku servera Nginx, ktorý nie je v CoreFilters.

pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters lazyload_images;
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters prioritize_critical_css;
#This filter is likely to cause problems for loading your web pages. 
pagespeed EnableFilters defer_javascript;

Upozorňujeme, že WordPress teraz predvolene lenivo načítava obrázky. Ak teda používate WordPress, nemusíte povoliť filter lazyload_images.

Podrobné vysvetlenie každého filtra nájdete na stránke Filter Google PageSpeed.

Uložte a zatvorte konfiguračný súbor serverového bloku. Na generovanie webp obrázkov odporúčam nainštalovať nasledujúce balíčky.

sudo apt install imagemagick php7.4-imagick ffmpeg

Pred opätovným načítaním Nginxu odporúčam prejsť na Google PageSpeed Insights a otestovať svoju webovú stránku. Potom znova načítajte Nginx.

sudo systemctl reload nginx

Teraz znova otestujte svoje skóre PageSpeed, aby ste videli rozdiel.

Krok 7: Skontrolujte, či ngx_pagespeed funguje

Prejdite na svoj web. Obnovte niekoľkokrát a potom skontrolujte zdroj stránky. Stlačte kláves Ctrl+F a vyhľadajte rýchlosť stránky. Uvidíte, že mnohé z vašich webových zdrojov boli spracované rýchlosťou stránky. Niektoré súbory CSS a súbory javascript sú spojené do jedného súboru. Ak používate prehliadač Google Chrome, uvidíte, že obrázok vašej webovej lokality je vo formáte súboru webp. webp môže výrazne znížiť veľkosť súboru obrázka. Napríklad veľkosť hlavného súboru obrázka na mojej domovskej stránke je znížená z 208 kB na 98 kB.

Môžete tiež zistiť, že ngx_pagespeed funguje porovnaním testu rýchlosti vášho webu. Aj na svojom serveri môžete zadať nasledujúci príkaz:

curl -I -p https://youdomain.com

Uvidíte X-Page-Speed a číslo jeho verzie.

x-page-speed: 1.13.35.2-0

Tipy na riešenie problémov

Obrázok nebol konvertovaný do formátu webp

Ak vaše filtre PageSpeed nefungujú, môžete otvoriť zdrojový kód stránky vo webovom prehliadači a pridať parameter ?PageSpeedFilters=+debug k adrese URL, aby sa zobrazili informácie o ladení, ktoré vám povedia, prečo zdroj nebol optimalizovaný modulom PageSpeed.

Niektorí ľudia môžu vidieť napríklad nasledujúcu chybu.

<!--The preceding resource was not rewritten because its domain (www.example.com) is not authorized-->

Dôvodom je, že doména nie je pridaná do zoznamu povolených. Doménu, ako je uvedené nižšie, môžete pridať do zoznamu povolených v konfiguračnom súbore Nginx.

pagespeed Domain https://www.linux-terminal.com;
pagespeed Domain https://linux-terminal.com;

Dobrým spôsobom, ako skontrolovať správu o ladení PageSpeed, je vyhľadať frázu „nebol prepísaný, pretože“.

Ak sa zdá, že PageSpeed stále nefunguje a v zdrojovom kóde nevidíte informácie o ladení, obnovte stránku ešte niekoľkokrát.

Obrázok sa nepodarilo načítať

Ak sa nepodarilo načítať obrázok na vašej webovej stránke vo webovom prehliadači a v denníku webového servera sa vám zobrazí nasledujúce chybové hlásenie, musíte do konfiguračného súboru Nginx pridať direktívu pagespeed FetchHttps enable; modul PageSpeed načítava zdroje HTTPS priamo bez toho, aby najprv prešiel na HTTP.

Resource based on http://www.example.com/path/to/png but cannot access the original

Odporúčam tiež pridať nasledujúce vlastné záznamy DNS do súboru /etc/hosts, aby modul PageSpeed nemusel vyhľadávať verejné DNS, aby rozpoznal názov vašej domény.

127.0.0.1 localhost example.com www.example.com

::1 ip6-localhost ip6-loopback example.com www.example.com

Ak sa stále nepodarilo načítať obrázky, môžete povoliť LoadFromFile pre PageSpeed. To umožňuje PageSpeed načítať statické súbory priamo z lokálneho disku/adresára. Pridajte nasledujúci riadok do konfiguračného súboru Nginx. Nahraďte /usr/share/nginx/example.com koreňovým webovým adresárom vašej webovej lokality.

pagespeed LoadFromFile "http://www.example.com" "/usr/share/nginx/example.com";

FATAL:shared_mem_cache.cc(564)] Kontrola zlyhala: pracovník != NULL.

Táto chyba sa môže vyskytnúť, keď povolíte PageSpeed na viacerých virtuálnych hostiteľoch Nginx. Najlepšou praxou je použiť rovnakú konfiguráciu PageSpeed na všetkých vašich virtuálnych hostiteľoch Nginx.

Túto chybu možno nájsť v súbore /var/log/nginx/error.log. Spôsobí to ukončenie jedného z procesov Nginx woker.

worker process 755743 exited on signal 6

Zablokujte automatickú aktualizáciu Nginx

Ak je v úložisku dostupná novšia verzia Nginx, príkaz sudo apt upgrade aktualizuje Nginx. Novšia verzia Nginx nebude kompatibilná s predtým skompilovaným modulom PageSpeed. Ak je Nginx aktualizovaný príkazom sudo apt upgrade, reštartovanie sa nepodarí.

Moja rada je zabrániť inovácii Nginxu, keď spustíte príkaz sudo apt upgrade. To sa dá dosiahnuť nasledujúcim príkazom:

sudo apt-mark hold nginx

Keď vám správca balíkov apt povie, že je k dispozícii nová verzia Nginx, mali by ste si stiahnuť nový zdrojový balík Nginx a znova skompilovať modul PageSpeed. Presuňte novo skompilovaný modul PageSpeed do adresára /usr/share/nginx/modules/ alebo /etc/nginx/modules/. V podstate to znamená, že musíte odstrániť všetko v adresári /usr/local/src/ (sudo rm /usr/local/src/* -rf ) a prejsť krokom 2 , znova krok 3 a krok 4.

Potom uvoľnite Nginx.

sudo apt-mark unhold nginx

A inovujte Nginx.

sudo apt upgrade nginx

Po dokončení inovácie znova podržte Nginx.

sudo apt-mark hold nginx

Ak chcete zobraziť, ktoré balíky sú pozastavené, spustite

apt-mark showhold

Zlepšenie výkonu Nginx PageSpeed

Modul PageSpeed môže využívať množstvo zdrojov CPU, keď robí grunt. Pre lepší výkon by ste mali používať aspoň 4 jadrá CPU, inak sa vaše webové stránky môžu zdať pomalšie, keď je povolený modul PageSpeed.

Dobrým spôsobom, ako znížiť zaťaženie procesora, je zmeniť predvolenú hodnotu RewriteLevel na hodnotu PassThrough, ktorá zakáže všetky filtre PageSpeed. Potom môžete povoliť filter, ktorý potrebujete, ako napr

pagespeed EnableFilters convert_to_webp_lossless;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters resize_images;

Predspracovanie

Webová stránka môže trvať niekoľko obnovení, kým bude plne optimalizovaná modulom PageSpeed. Ak chcete návštevníkom poskytovať plne optimalizované webové stránky, môžete použiť nasledujúci príkaz na predbežné spracovanie všetkých webových stránok na vašom webe.

wget -m -p -E -k -P /tmp/ramdisk/ https://www.example.com/

Tento príkaz načíta všetky webové stránky na vašej webovej lokalite a môžete vytvoriť úlohu Cron, aby sa tento príkaz spúšťal každú hodinu, takže PageSpeed môže plne optimalizovať vaše webové stránky predtým, ako ich uvediete do produkcie.

PageSpeed a Nginx FastCGI cache

Môže modul PageSpeed pracovať s vyrovnávacou pamäťou Nginx FastCGI? Áno.

Keď prehliadač odošle požiadavku HTTP na váš web, Nginx najprv skontroluje, či existuje vyrovnávacia pamäť FastCGI pre požadovanú webovú stránku.

  • Ak sa vyrovnávacia pamäť nenájde, Nginx odošle požiadavky do PHP-FPM, ktorý preloží PHP kód do statického HTML kódu a pošle ho späť do Nginxu. Potom modul PageSpeed optimalizuje webovú stránku HTML a odošle ju do webového prehliadača.
  • Ak sa nájde vyrovnávacia pamäť, modul PageSpeed optimalizuje stránku uloženú vo vyrovnávacej pamäti a odošle ju do webového prehliadača.

PageSpeed & Cloudflare Static HTML Cache

Môže modul PageSpeed pracovať so statickou HTML vyrovnávacou pamäťou Cloudflare? Áno.

Majte však na pamäti, že môže trvať niekoľko obnovení, kým PageSpeed dokáže plne optimalizovať vaše webové stránky. Ak sa zdá, že vaše webové stránky nie sú optimalizované, niekoľkokrát vymažte statický HTML kód Cloudflare.

Ďalši krok

Dúfam, že vám tento návod pomohol nainštalovať modul PageSpeed s Nginx na Ubuntu 22.04 a Ubuntu 20.04. Môžete tiež nastaviť bránu firewall webovej aplikácie ModSecurity na ochranu vašej webovej stránky pred hackermi.

  • Ako nastaviť ModSecurity s Nginx na Debian/Ubuntu

A ako vždy, ak ste považovali tento príspevok za užitočný, prihláste sa na odber nášho bezplatného bulletinu pre ďalšie tipy a triky 🙂

Súvisiace články