IT-инфраструктура для бизнеса и творчества
Разработка
Letsrock Pro

Как установить brotli и увеличить скорость загрузки сайта на nginx

Один из способов ускорить работу сайта — кэширование данных. Один из эффективных методов сжатия — установка модуля brotli, разработанного Google.

Для установки данного модуля нужно пересобирать веб-сервер nginx, на котором расположен сайт. Но это долгий процесс и может помешать работе уже существующего сайта. Поэтому мы нашли способ, как этого избежать.

Его мы использовали, например, на проекте МонакоМода. Это позволило ускорить загрузку сайта на 35 пунктов по Google Pagespeed без рисков для стабильности.

Для реализации нужен root-доступ к серверу сайта, а сам сайт должен быть с защищенным соединением SSL. Если это есть, нужно выполнить следующие шаги:

Шаг 1 - Установка исходников nginx

Прежде чем начать, надо обновить сам сервер, все его модули, а также установить дополнительные библиотеки:

sudo apt update

sudo apt install -y build-essential git apt-transport-https socat

Смотрим свою версию nginx:

nginx -v

После обновлений и проверок, можно скачивать исходники:

wget https://nginx.org/download/nginx-1.14.1.tar.gz && tar zxvf nginx-1.14.1.tar.gz

rm nginx-1.14.1.tar.gz

Шаг 2 - Скачивание модуля brotli и перенос его на боевой nginx

Скачиваем модуль:

git clone https://github.com/eustas/ngx_brotli.git

cd ngx_brotli && git submodule update --init && cd ~

Переходим в папку с исходниками nginx и добавляем модули:

cd ~/nginx-1.14.1

sudo apt install -y libpcre3 libpcre3-dev zlib1g zlib1g-dev openssl libssl-dev

Затем скомпилируем модуль в этой же папке:

./configure --with-compat --add-dynamic-module=../ngx_brotli

make modules

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

"/etc/nginx/modules" - это адрес папке, где находятся модули боевого nginx, обычно он всегда такой, но лучше пред этим проверить

После таких махинаций, смотрим что все файлы появились в папке (ngx_http_brotli_filter_module.so, ngx_http_brotli_static_module.so):

ls /etc/nginx/modules

Устанавливаем разрешение 644 для всех файлов .so:

sudo chmod 644 /etc/nginx/modules/*.so

Шаг 3 - Настройка боевого nginx

Переходим в папку самого nginx и находим конфиг /etc/nginx/nginx.conf, в нем мы добавляем вот такие строки:

load_module modules/ngx_http_brotli_filter_module.so;

load_module modules/ngx_http_brotli_static_module.so;

Это позволяет нам подключить сам модуль. После этого проверяем nginx на ошибки sudo nginx -t, если все нормально, то мы настроили все верно.

Дальше заходим в конфиг нужного сайта и активируем brotli, при этом убираем gzip, больше он нам не нужен.

brotli on;

brotli_static on;

brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

После этого перезагружаем nginx — и всё готово!

{ "author_name": "Letsrock Pro", "author_type": "self", "tags": [], "comments": 6, "likes": 2, "favorites": 8, "is_advertisement": false, "subsite_label": "dev", "id": 203073, "is_wide": true, "is_ugc": true, "date": "Mon, 01 Feb 2021 09:29:53 +0300", "is_special": false }
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
6 комментариев
Популярные
По порядку
Написать комментарий...

написали бы хоть кратко за счет чего улучшение 

2

Добрый день!
В первом абзаце указано — за счет кэширования данных :)

0

Там же в первом абзаце написано, что модуль за сжатие отвечает, а не за кэширование.

Характеристика в 35 пунктов пейджспид ни о чем не говорит. Что и как стало быстрее? 

1

вас не смутила приписочка plus? (((: а ценник вас не смущает?

0

Признаюсь, вначале не заметил, думал можно без коммерческой версии поставить. Потом когда пробовать начал запустить, увидел, что нужно покупать.

Но это не отменяет, что они в статье нормально на вопрос не ответили, а начали считать гугл попугаями улучшение.

Вот внедрение webp например реально чуть ли не в 5-10.. раз (можно выбрать какое вам качество надо) может объем изображений уменьшить и улучшить скорость загрузки. А тут хоть бы показали на сколько запрос стал быстрее или меньше.

0
Читать все 6 комментариев
Apple выпустила macOS Monterey и анонсировала запуск сервиса Fitness+ в России Статьи редакции

Он станет доступен 3 ноября.

«Авито Доставка» — покупатель забрал товар, а деньги мне не перевели

Решила продать xBox, после нескольких дней бесплодных попыток в своем городе соблазнилась Авито Доставкой, которую предложил покупатель. До этого отправляла через доставку небольшой товар, все прошло идеально. У покупателя долгая история покупок и отличные отзывы. Что может пойти не так? - подумала я и решительно потащила коробку в пункт приема в…

Предсказать и оптимизировать: плавим сталь с помощью Data Science

Как создавали программу, которая помогает металлургам экономить 3-5 млн долларов в год

У альфа-банка стоит ограничение на отображение баланса в пуше, его не видно полностью

Скорее всего, Альфа-банк провел свой аналог "Игры в Кальмара", где разыграл суперприз. Их версия отличается от корейской тем, что там не надо никого убивать и проходить испытания. Вы, как обычно, пользуетесь картой и получаете шанс выиграть супер приз! Когда мне пришел этот пуш, я сразу понял, что не зря был вашим клиентом столько лет! Вы…

Кикшеринг станет ещё доступнее, но для крупных игроков места больше нет: интервью с инвесторами кикшеринга «Юрент» Статьи редакции

Андрей Азаров и Михаил Гейшерик рассказали, зачем «Юрент» купил сервис аренды обычных велосипедов, продолжится ли бурный рост кикшеринга и что этому может помешать.

Михаил Гейшерик и Андрей Азаров
Продуктовые метрики: какие они бывают и как ими пользоваться?

Я работаю CPO в компании с десятками тысяч заказов в день. Недавно стал плотно вовлекать коллег в продуктовые процессы. Оказалось, что не все знают, что такое GMV или конверсия, не говоря уже о более узких метриках, например, session duration или page depth. Расскажу поподробнее в этой статье про метрики и комплексы метрик.

МТС дополнила экосистему B2B-продуктов решениями МТТ

ПАО «МТС», ведущая российская компания по предоставлению цифровых, медийных и телекоммуникационных сервисов, дополнила экосистему продуктов для бизнеса новым решением – виртуальной АТС от своей 100% дочерней компании АО «Межрегиональный ТранзитТелеком» (МТТ), федерального провайдера интеллектуальных телеком- и ИТ-решений для бизнеса. Теперь…

Blue Origin Джеффа Безоса запланировала создать собственную космическую станцию «Орбитальный риф» Статьи редакции

Она начнёт работать во второй половине 2020-х годов.

Рыночная капитализация Tesla превысила $1 трлн Статьи редакции

На рост акций могли повлиять новости, связанные с компанией.

Улыбнитесь, вас снимают: как биометрия меняет жизнь банковских клиентов

Что такое биометрия, как ее используют банки и что нас ждет в будущем с единой биометрической системой, мы узнали у Дарьи Скачковой, управляющего директора в Газпромбанке

Час в неделю — на помощь детям: как 303 учителя со всей России стали онлайн-волонтёрами для школьников

Движение «Педагоги-волонтеры России» учит ребят из детских домов и малоимущих семей. Их репетиторы уже помогли 1 350 детям наверстать знания по школьным предметам. Сейчас платформа ищет новых учителей по всей России. Особенно — математиков и программистов

null