Читать «Разгони свой сайт» онлайн - страница 20

Два слова о nginx

Кто работал с этим сервером, наверное, уже подумали: есть же модуль ngx_http_gzip_static_module, который позволяет класть рядом с файлом его сжатую версию с дополнительным расширением .gz и забыть практически обо всех описанных проблемах (этот функционал присутствует и для Apache 1.3). К сожалению, минусом данного решения будет отключение сжатия для всех видов файлов у браузера, который не поддерживает хотя бы один (теряется гибкость настройки).

Однако, на данный момент таких случаев — доли процента, поэтому если у нас проект с низкой или средней посещаемостью, указанный модуль (в совокупности с ngx_http_gzip_module) позволит преодолеть почти все «подводные камни». Подробная конфигурация для nginx и Apache приведена в восьмой главе.

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

2.3. Все о сжатии CSS

Проблема уменьшения CSS-файлов в размере действительно актуальна, и хотелось бы иметь результаты исследования конкретно для такой оптимизации. Они, собственно, и приведены ниже.

В Интернете было найдено 5 различных инструментов для минимизации CSS-кода; далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты представлены в виде графиков.

Инструменты

CSSMin ( http://code.google.com/p/cssmin/ ). Библиотека проводит набор простейших замен в CSS-файле (удаляет ненужные символы) и склеивает его в одну строку.

Minify ( http://code.google.com/p/minify/ ) . Библиотека, минимизирующая как CSS-, так и JS-файлы. Кроме того, она может склеивать несколько файлов в один, заменять относительные пути к фоновым картинкам на более короткие и самостоятельно отдавать кэширующие заголовки. В общем, не намного лучше предыдущей.

YUI ( http://developer.yahoo.com/yui/compressor/ ). YUI-compressor (использовалась версия 2.2.5). Фактически, делает то же самое, что две предыдущих библиотеки.

CSS Minifier ( http://www.artofscaling.com/css-minifier/ ). Автор разработал собственный алгоритм сжатия (после беглого анализа это оказалась несколько переработанная версия CSS Tidy), который, по его собственному утверждению, «жмет лучше всех». Это мы и проверим чуть дальше.

CSS Tidy ( http://csstidy.sourceforge.net/ ). Проект по минимизации CSS-файлов с открытым исходным кодом. Имеет много настроек, перенесен на несколько языков и используется на нескольких ресурсах, которые предлагают инструментарий для минимизации CSS-файлов, например, на www.codebeautifier.com. Это наиболее широко распространенная версия минимизатора.

В качестве исходных файлов брались таблицы стилей с некоторых достаточно активно посещаемых ресурсов. Каждый из них был подвергнут действию минимизатора (для Minifier дополнительно файл склеивался в одну строку; вероятно, это временный баг текущей версии), затем архивировался. Корректность минимизации не проверялась (с этим в некоторых особо агрессивных случаях могут быть проблемы: CSS Tidy с определенными настройками перегруппировывает селекторы, и часть логики теряется).