Как часто Вы закрываете страницу в браузере, так и не дождавшись окончания ее загрузки? Одним из инструментов для решения данной проблемы является Pagespeed - модуль Nginx, который в автоматическом режиме оптимизирует работу сайта для сокращения времени загрузки браузером.

Рассмотрим его установку и настройку в популярном Linux-дистрибутиве Debian 10 (о том как установить LAMP на Debian 10 читайте в нашем блоге).

Для начала установим дополнительные пакеты которые нам понадобятся:

 

apt install dpkg-dev autotools-dev debhelper po-debconf dh-systemd libexpat-dev
libgd-dev libgeoip-dev libhiredis-dev libluajit-5.1-dev libmhash-dev libpam0g-dev
libpcre3-dev libperl-dev libssl-dev libxslt1-dev quilt zlib1g-dev uuid-dev -y

 

и перейдем в каталог в котором будем собирать Nginx:

 

cd /opt/
mkdir custom-nginx && cd  custom-nginx

 

Загрузим исходники текущей стабильной версии Nginx которую предлагает Debian и посмотрим что загрузилось:

 

apt-get source nginx && ls -l

 

Как видим скачалась версия 1.14.2:

 

total 1916
drwxr-xr-x 10 root root    4096 May 14 15:36 nginx-1.14.2
-rw-r--r--  1 root root  930528 Aug 20  2019 nginx_1.14.2-2+deb10u1.debian.tar.xz
-rw-r--r--  1 root root    4181 Aug 20  2019 nginx_1.14.2-2+deb10u1.dsc
-rw-r--r--  1 root root 1015384 Dec 13  2018 nginx_1.14.2.orig.tar.gz

 

Распакуем архив и перейдем в каталог с модулями

 

tar -xvf nginx_1.14.2-2+deb10u1.debian.tar.xz && cd nginx-1.14.2/debian/modules

 

Загружаем архив с модулем pagespeed для nginx, распаковываем:

 

wget https://github.com/pagespeed/ngx_pagespeed/archive/master.zip && unzip master.zip

 

Каталог с распакованным архивом будет иметь название incubator-pagespeed-ngx-master, немного сократим название и зайдем в него:

 

mv incubator-pagespeed-ngx-master/ ngx-pagespeed && cd ngx-pagespeed

 

Скачиваем и разархивируем PSOL - PageSpeed Optimization Libraries, набор библиотек которые будут использоваться для оптимизации:

 

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

 

Возвращаемся в каталог с которого и будем собирать:

 

cd /opt/custom-nginx/

 

Далее нам нужно подправить правила сборки. Для этого открываем файл:

 

mcedit nginx-1.14.2/debian/rules

 

Добавить модуль pagespeed нужно в одной из следующих секций, в зависимости от того какая сборка nginx Вам нужна:

 

common_configure_flags := \
light_configure_flags := \
full_configure_flags := \

 

В нашем случае будет производится установка nginx-full, поэтому в секцию "full_configure_flags := \" добавляем строчку:

 

--add-module=$(MODULESDIR)/ngx-pagespeed \

 

Можно добавить так же модуль как динамический, тогда строка будет иметь вид "--add-dynamic-module=$(MODULESDIR)/ngx-pagespeed " а в конфиг nginx, после сборки, нужно включить его, указав путь к файлу модуля "load_module modules/ngx_http_js_module.so;"

Добавляем информацию о наших действиях в историю изменений:

 

mcedit nginx-1.14.2/debian/changelog

 

например так:

 

nginx (1.14.2-2+pagespeed-unstable) buster-security; urgency=high

 

Приступаем к сборке nginx:

 

cd nginx-1.14.2/ && dpkg-buildpackage -b

 

Возвращаемся в каталог уровнем выше и просматриваем его содержимое:

 

cd .. && ls

 

Поскольку я ставлю full версию, сначала необходимо поставить все дополнительные модули (собственно то что было в секции "full_configure_flags := "). Если устанавливается light версия этого делать не нужно:

 

dpkg -i libnginx-mod-http-auth-pam_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-http-dav-ext_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-http-geoip_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-http-image-filter_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-http-subs-filter_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-http-upstream-fair_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-http-xslt-filter_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-stream_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-mail_1.14.2-2+deb10u1-pagespeed_amd64.deb
libnginx-mod-http-echo_1.14.2-2+deb10u1-pagespeed_amd64.deb

 

А теперь устанавливаем и сам Nginx:

 

dpkg -i nginx-common_1.14.2-2+deb10u1-pagespeed_all.deb
nginx-full_1.14.2-2+deb10u1-pagespeed_amd64.deb

 

Смотрим что у нас получилось:

 

nginx -V
nginx version: nginx/1.14.2
built with OpenSSL 1.1.1d  10 Sep 2019
TLS SNI support enabled
configure arguments: --with-cc-opt='-g -O2
-fdebug-prefix-map=/opt/custom-nginx/nginx-1.14.2=. -fstack-protector-strong -Wformat
-Werror=format-security -fPIC -Wdate-time -D_FORTIFY_SOURCE=2'
--with-ld-opt='-Wl,-z,relro -Wl,-z,now -fPIC' --prefix=/usr/share/nginx
--conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log
--error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock
--pid-path=/run/nginx.pid --modules-path=/usr/lib/nginx/modules
--http-client-body-temp-path=/var/lib/nginx/body
--http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy
--http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi
--with-debug --with-pcre-jit --with-http_ssl_module --with-http_stub_status_module
--with-http_realip_module --with-http_auth_request_module --with-http_v2_module
--with-http_dav_module --with-http_slice_module --with-threads
--with-http_addition_module --with-http_geoip_module=dynamic
--with-http_gunzip_module --with-http_gzip_static_module
--with-http_image_filter_module=dynamic --with-http_sub_module
--with-http_xslt_module=dynamic --with-stream=dynamic --with-stream_ssl_module
--with-stream_ssl_preread_module --with-mail=dynamic --with-mail_ssl_module
--add-dynamic-module=/opt/custom-nginx/nginx-1.14.2/debian/modules/http-auth-pam
--add-dynamic-module=/opt/custom-nginx/nginx-1.14.2/debian/modules/http-dav-ext
--add-dynamic-module=/opt/custom-nginx/nginx-1.14.2/debian/modules/http-echo
--add-dynamic-module=/opt/custom-nginx/nginx-1.14.2/debian/modules/http-upstream-fair
--add-dynamic-module=/opt/custom-nginx/nginx-1.14.2/debian/modules/http-subs-filter
--add-module=/opt/custom-nginx/nginx-1.14.2/debian/modules/ngx-pagespeed

 

Перед запуском Nginx создадим директорию для хранения кеша и назначим ей права пользователя под которым будет запускаться nginx:

 

mkdir -p /var/cache/ngx_pagespeed && chown -R www-data:www-data/var/cache/ngx_pagespeed

 

Вносим правки в конфиг nginx, в секции http - pagespeed по умолчанию будет включен для всех виртуалхостов. Для отключения в конфигке определенного виртуалхоста установим pagespeed off:

 

pagespeed on;

pagespeed AdminPath /pagespeed_admin; #путь к админке
pagespeed Statistics on; #включаем статистику
pagespeed StatisticsPath /ngx_pagespeed_statistics;#путь к статистике
pagespeed StatisticsLogging on; # включаем логировани
pagespeed LogDir /var/log/pagespeed;
pagespeed EnableCachePurge on; #включаем возможность чистки кеша через админку
pagespeed FileCachePath "/var/cache/ngx_pagespeed/"; # путь к каталогу с кешем
pagespeed FileCacheCleanIntervalMs 3600000; # Интервал для очистки кэша, в случае если он выходит за предел ограничений
pagespeed FileCacheSizeKb 1024000; #ограничиваем размер кэша
pagespeed FileCacheInodeLimit 500000; #ограничиваем количество дескрипторов
# настраиваем in-memory LRU Cache
pagespeed LRUCacheKbPerProcess     8192;
pagespeed LRUCacheByteLimit        16384;
pagespeed DefaultSharedMemoryCacheKB 100000;

pagespeed RewriteLevel CoreFilters; #определяем базовый уровень фильтров

pagespeed ServeRewrittenWebpUrlsToAnyAgent off;
pagespeed FetchWithGzip on;
pagespeed RespectVary on;

pagespeed EnableFilters in_place_optimize_for_browser;
pagespeed EnableFilters defer_javascript;
pagespeed UseExperimentalJsMinifier on;
pagespeed EnableFilters add_head;
pagespeed EnableFilters inline_import_to_link;
pagespeed EnableFilters move_css_to_head;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters rewrite_css;
pagespeed EnableFilters fallback_rewrite_css_urls;
pagespeed EnableFilters rewrite_style_attributes;
pagespeed EnableFilters rewrite_style_attributes_with_url;
pagespeed EnableFilters flatten_css_imports;
pagespeed EnableFilters prioritize_critical_css;
pagespeed EnableFilters make_google_analytics_async;
pagespeed EnableFilters make_show_ads_async;
pagespeed EnableFilters rewrite_javascript;
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters inline_css;
pagespeed EnableFilters inline_javascript;
pagespeed EnableFilters local_storage_cache;
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters sprite_images;
pagespeed EnableFilters resize_rendered_image_dimensions;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters insert_image_dimensions;
pagespeed EnableFilters responsive_images,resize_images;
pagespeed EnableFilters remove_comments;
pagespeed EnableFilters collapse_whitespace;
pagespeed EnableFilters elide_attributes;
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters pedantic;
pagespeed EnableFilters remove_quotes;
pagespeed EnableFilters convert_meta_tags;
pagespeed EnableFilters lazyload_images;

 

Обратим внимание что "pagespeed RewriteLevel CoreFilters" уже включает в себя часть фильтров. Фильтры добавлены списком для того, что бы удобно было выключить(pagespeed DisableFilters)/включить(pagespeed EnableFilters) определенный фильтр.

Создаем виртуалхост, обработкой статического контента будет заниматься Nginx, а бекендом выступит Apache на 127.0.0.1:

 

server {
	listen 178.20.158.190:80;
	listen 178.20.158.190:443 ssl;
	server_name wp-pagespeed.com.ua;
	ssl_certificate /var/www/html/wp-pagespeed.com.ua.crt;
	ssl_certificate_key /var/www/html/wp-pagespeed.com.ua.key;
	index index.php index.html;
	# pagespeed off;
	location / {

	root /var/www/html/wp-pagespeed.com.ua;
         proxy_pass		http://127.0.0.1:80/;
		
 proxy_redirect		off;
         proxy_set_header	Host			$host;

         location ~* ^.+\.(jpg|jpeg|gif|png|ico|svg|css|zip|tgz|gz|rar|bz2|
doc|xls|exe|pdf|ppt|txt|odt|ods|odp|odf|tar|wav|bmp|rtf|js|mp3|avi|mpeg|flv|
html|htm|woff|eot|woff2|ttf)$ {

         	try_files      $uri @fallback;
        }
    }

    location @fallback {
        proxy_pass      http://127.0.0.1:80;
        proxy_connect_timeout 60;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
        send_timeout 600;
    }
}

 

Включаем автозвпуск и запускаем nginx:

 

systemctl enable nginx
systemctl start nginx

 

В файле host на ПК прописываем нужный нам ip-адрес и запросим информацию о сервере:

 

curl -I http://wp-pagespeed.com.ua
HTTP/1.1 200 OK
Server: nginx/1.14.2
Content-Type: text/html
Connection: keep-alive
Date: Thu, 02 Apr 2020 07:46:24 GMT
X-Page-Speed: 1.13.35.2-0
Cache-Control: max-age=0, no-cache

 

Итак Pagespeed у нас включен и работает

Теперь давайте проведем пару тестов, чтоб проверить насколько сайт с Pagespeed стал быстрей.

В качестве тестируемого сайта, с разрешения нашего клиента, был взят достаточно крупный новостной портал на Wordpress (20GB контента + 2GB БД). Был выбран по причине того, что невооруженным взглядом видно, что с оптимизацией имеются проблемы. Каждая страница содержит около 6 рекламных блоков, достаточно большое количество картинок и контента. Сайт размещен на нашем VPS сервере со следующими характеристиками: 2 CORE CPU, 3500 Mb RAM, 35 Gb SSD HDD

Список используемых плагинов:

• advanced-custom-fields;
• ajax-load-more;
• all-in-one-seo-pack;
• better-font-awesome;
• breadcrumb-navxt;
• code-snippets;
• custom-post-type-ui;
• cyr3lat;
• delete-all-comments-of-website;
• easy-facebook-like-box;
• google-sitemap-generator;
• multiple-post-type-order;
• ns-category-widget;
• post-types-order;
• resize-image-after-upload;
• showid-for-postpagecategorytagcomment;
• simple-custom-post-order;
• slidedeck-lenses;
• so-widgets-bundle;
• super-socializer;
• taxonomy-terms-order;
• tinymce-advanced;
• widget-css-classes;
• wp-polls;
• wp-super-cache.

Скорость загрузки проверим инструментом Lihgtspeed:

Изначальная производительность оказалась даже ниже чем ожидалось (на сервере никакой оптимизации не проводилось - настройка по умолчанию nginx, apache2 и mysql).

Наиболее существенно улучшился параметр "First Contentful Paint" - время, за которое пользователь увидит первый экран (изображения/текст) и First Meaningful Paint - время отображения основного контента. Именно это наиболее важно для нас — уменьшается риск закрытия пользователями страницы, так и не дождавшись ее содержимого.

Многих беспокоит вопрос изменения нагрузки на сервер. Попробуем ее измерить.
Чтоб проэмулировать нагрузку близкую к реальной используем Puppeteer - библиотека Node.JS, позволяющая управлять браузером Chrome или Chromium, для полноценной загрузки страницы (Node.js+Puppeteer+puppeter-cluster+chromium_sandbox).

В качестве сервера с которого будем запрашивать контент нашего используем Ryzen7 2700Х c 16Гб ОЗУ.

Пример используемого скрипта 1k.js:

 

const { Cluster } = require('puppeteer-cluster');

function delay(time) {
   return new Promise(function(resolve) { 
       setTimeout(resolve, time)
   });
}

(async () => {
  const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT,
    maxConcurrency: 64,
  });

  await cluster.task(async ({ page, data: url }) => {
    await page.goto(url);
  });

  cluster.queue('http://wp-pagespeed.com.ua/');
    await delay(100);
  .....
  /// тут у нас 1000 странниц (было выбрано 20 и вставлено в случайном порядке c повторами)
  .....
  cluster.queue('http://wp-pagespeed.com.ua/kontakt/');
    await delay(100);
    
  await cluster.idle();
  await cluster.close();
})();

 

Результат тестирования приведен в сводной инфографике:

Как видим разницы по нагрузке практически нет в текущей конфигурации. Стоит отметить кратковременный скачок нагрузки на процессор в самом начале тестирования, пока pagespeed оптимизировал контент - далее он уже отдавался из кеша.

Еще выполним один тест, отключив кеширование ответов бекенд-сервера - для этого на сайте используется wp-supercache.

Результат на изображениях ниже:

Как видим нагрузка на сервер существенно выросла, правда в случае с включенным Pagespeed она несколько ниже.

Анализируя нагрузку на клиентскую машину видим, что не значительно снизилась нагрузка на CPU - примерно на 15%, а вот снижение трафика достаточно существенное - более 40%! В совокупности эти два момента обеспечивают серьезное ускорение загрузки сайта. Так же стоит отдельно отметить еще один момент - изменение порядка загрузки контента сайта.

Но присутствует и ложка дегтя в этом всем - не все фильтры можно применять к произвольному сайту, это может привести к нарушению структуры страницы, искажению отображения. Зачастую требуется тонкая настройка и доступ к специальному инструменту управления кешированием pagespeed.

Выводы

Pagespeed это полезный инструмент, позволяющий ускорить работу сайта, а значит и увеличить конверсию. Из-за большого количества нюансов его нельзя использовать на виртуальном хостинге, но на виртуальном сервере или дедикейтед сервере, его использование оправданно.

Специалисты нашей технической поддержки готовы помочь Вам в настройке Pagespeed – обращайтесь :)

 

Дата: 27.05.2020 Автор: Виктор

Голосування 1 2 3 4 5