Поиск по сайту:

Уменьшите размер вашего веб-сайта с помощью сжатия Gzip и Deflate


Скорость вашего веб-сайта важна, так как более быстрый веб-сайт значительно снизит показатель отказов. Сжатие ваших файлов на стороне сервера — это простой способ уменьшить размер вашего веб-сайта, что ускорит загрузку.

Кодирование контента, объяснение

Всякий раз, когда вы пытаетесь получить доступ к веб-сайту, ваш браузер отправляет запрос GET на сервер, который отвечает кодом веб-страницы. Это работает, но пересылка кода требует времени, особенно для мобильных пользователей с медленным соединением. Каждый килобайт на счету.

HTML очень повторяющийся. Каждый тег <div> и <style> имеет аналогичный закрывающий тег, и в любом случае это всего лишь текст. Это означает, что он очень легко сжимается.

Большинство браузеров поддерживают сжатый HTML, и они сообщат вам об этом с заголовком Accept-Encoding в запросе GET к вашему серверу:

Accept-Encoding: gzip, deflate

Это означает, что клиент может распаковывать файлы, сжатые с помощью gzip или deflate. Ваш сервер может прослушать этот заголовок, а затем отправить обратно HTML-файл, сжатый с помощью gzip, с заголовком:

Content-Encoding: gzip

Таким же образом вы можете серверировать все типы файлов, включая ответы CSS, JavaScript, XML и JSON API. Все текстовые под капотом, и все могут быть сжаты.

Включить сжатие в Nginx

К счастью, это довольно простой процесс. Nginx имеет встроенную кодировку gzip, вам просто нужно включить ее, добавив следующий код в файл конфигурации, обычно расположенный по адресу  /etc/nginx/nginx.conf:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

Это включает модуль gzip и настраивает его на сжатие большинства текстовых файлов.

Включение сжатия в Apache

Для Apache вам нужно открыть файл конфигурации Apache, обычно расположенный в одном из следующих мест:

  • /etc/apache2/httpd.conf
  • /etc/apache2/apache2.conf
  • /etc/httpd/httpd.conf
  • /etc/httpd/conf/httpd.conf

Затем убедитесь, что следующие строки не закомментированы, чтобы включить модуль deflate:

LoadModule filter_module modules/mod_filter.so
LoadModule deflate_module modules/mod_deflate.so

Сохраните и перезагрузите Apache, и вы сможете проверить, загружен ли модуль:

apachectl -t -D DUMP_MODULES | grep deflate

Если это так, вы можете открыть резервную копию конфигурации и включить кодирование контента с помощью директивы AddOutputFilter:

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript

Проверка того, включено ли сжатие

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

Как видите, сжатие linux-console.net приводит к экономии 77 %, всего до 32 КБ.

Сжатие изображений вручную

Изображения работают немного по-другому, так как они не являются текстом и не так легко сжимаются. Вы по-прежнему можете сжимать изображения с помощью gzip, но вы не сэкономите много места.

Вместо этого вы захотите использовать традиционное сжатие JPEG. JPEG имеет настройку качества, а качество JPEG, установленное на 70%, почти неотличимо от файла со 100%-м качеством, что дает значительную экономию места.

Вы можете сделать это вручную в Photoshop или другом текстовом редакторе, а можете обработать целую папку изображений сразу с помощью ImageMagick:

for f in *.jpg; do convert -quality 70 $f $f; done

Если ваши изображения все еще слишком велики, вы можете еще больше снизить качество, но 70% — это хороший показатель для общего сжатия. Убедитесь, что разрешение ваших изображений не слишком большое.

Сжатие — это только часть ускорения вашего сайта. Вы можете прочитать наше руководство по ускорению медленного веб-сайта, чтобы узнать больше.