Уменьшите размер вашего веб-сайта с помощью сжатия 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% — это хороший показатель для общего сжатия. Убедитесь, что разрешение ваших изображений не слишком большое.
Сжатие — это только часть ускорения вашего сайта. Вы можете прочитать наше руководство по ускорению медленного веб-сайта, чтобы узнать больше.