У владельца сайта со временем может возникнуть желание увеличить скорость его загрузки. Данное решение позволит повысить рейтинг веб-ресурса в поисковой выдаче. К тому же посетителям сайта приятнее с ним работать, получая более быстрый отклик на свои действия.
Иногда в поисках простого и быстрого решения владельцы сайтов устанавливают огромное количество плагинов, которые в свою очередь потребляют ресурсы и только замедляют работу веб-ресурса. Мы не против плагинов оптимизации, но считаем, что нужно понимать принцип их работы, чтобы использовать с максимальной пользой.
Кроме того, у владельцев сайтов, которые никогда не сталкивались с администрированием, часто наблюдается неправильное понимание оптимизации. Оптимизация воспринимается как ускорение работы скрипта любой ценой, в то время как задача оптимизации - выдать оптимальную скорость работы сайта при оптимальных затратах ресурсов. Поэтому здесь не может быть универсальной инструкции для всех сайтов.
Существует несколько основных способов ускорить сайт:
- уменьшить объем передаваемых данных;
- сократить время на передачу запроса от клиента к серверу и обратно;
- ускорить обработку кода на сервере;
- добиться у пользователя ощущения, что сайт работает быстрее, при помощи визуальных эффектов.
Существует несколько инструментов, позволяющих увеличить отклик сайта с минимальными затратами:
1. Сжатие html/css/js/img с помощью gzip
Модуль gzip включен по умолчанию на всех наших серверах. Но, чтобы сжатие фактически работало на вашем сайте, нужно внести некоторые настройки в конфигурацию через файл .htaccess. Перейдите в корневую папку сайта, откройте в режиме редактирования файл .htaccess. Если такого файла нет, создайте его, именно с точкой в начале имени. Допишите в этот файл такие директивы:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Этого будет достаточно, чтобы включить сжатие. Проверить, работает ли сжатие, можно через сервис checkgzipcompression.com.
2. Минимизация стилей и js скриптов
Минимизация - это удаление лишних пробелов, табов, замена имен переменных в скриптах и прочие уловки, позволяющие сократить размер файла. Для этой задачи разработчики используют несколько инструментов. Файлы стилей можно автоматизированно сжимать с помощью yui compressor, css tidy; скрипты javascript можно сжимать через JSmin (для простых случаев), yui compressor (лучший вариант при использовании gzip). Воспользуйтесь документацией по этим решениям, чтобы внедрить их в свой проект.
3. Оптимизация картинок
Картинки, как правило, являются основным узким местом, которое тормозит загрузку сайта на этапе передачи данных от сервера в браузер.
Несколько лет назад возникали споры по поводу форматов png и gif. Сегодня мнение однозначное: в большинстве случаев для сайта нужно использовать png. Формат gif стоит использовать только для анимированных изображений, так как анимация в png поддерживается не во всех браузерах. В старых версиях IE (6/7) не поддерживается полупрозрачность в png. Для этих браузеров есть смысл использовать gif.
Для сжатия png иконок существуют специальные утилиты - pngcrush для linux и tweakpng для windows. На хостинге они не поддерживаются, оптимизацию рекомендуется проводить на стадии разработки, на локальном сервере, перед переносом на хостинг.
Формат ico используется только для favicon.ico. Это иконка сайта, которая отображается во вкладке браузера. Рекомендуется в любом случае иметь такой файл на сервере. Если его не будет, сервер вернет 404 ошибку, что займет больше времени, чем отдача иконки. Оптимальный размер иконки ~1Кб. Для favicon.ico можно использовать сжатие gzip.
Большие картинки хранятся в формате jpeg. Минусом этого формата для веба является наличие метаданных, которые передаются вместе с картинкой. Метаданные - это информация о картинке: имя автора, дата ее создания, описание и прочее. Их можно удалить утилитой jpegtran или ее аналогом.
4. Оптимизация заголовков
При каждом запросе на сервер и ответе с сервера передаются заголовки - информация о том, какие данные будут передаваться и как они должны быть использованы получателем. Оптимизировать заголовки критично важно для файлов небольшого размера. Оптимальный размер заголовков - 500 байт. Критическое значение имеют заголовки cookie (по спецификации они могут иметь размер до 4Кб). По этой причине ряд сервисов по оценке оптимизации рекомендуют использовать хост без использования cookie для статических ресурсов. Например, картинки можно разместить на специально отведенном поддомене или в поддиректории где запрещены cookie через файл htaccess.
5. Кэширование
Чтобы запретить кэширование, нужно в заголовке expires указать текущую дату. Или в max-age выставить 0.
Убрать кэш для элемента можно изменив адрес к нему в шаблоне, но это не всегда удобно. Можно настроить перенаправление со старого адреса на новый через htaccess. Третий вариант - добавить уникальный get параметр к ссылке на ресурс.
Условное кэширование - настраивается через заголовок last-modified. Плюс такого подхода в том, что клиент гарантировано получит актуальную версию файла. Минус в том, что добавляется дополнительный запрос к серверу, который увеличивает общее время загрузки. Использовать стоит в тех случаях если размер файла достаточно большой (например pdf на несколько мб).
ETag - аналог last-modified для кластера серверов, необходим для синхронизации данных о версии файла между серверами. Служит для того, чтобы файлы на разных серверах были идентичными (текстовое/бинарное содержание, дата создания/модификации, права и т.п.).
Детальнее о заголовках кэширования можно почитать на ресурсах, посвященных веб администрированию.
6. Объединение файлов
Стили объединяются через директивы @media all, @media henheld и @media print.
Объединение всего в один файл полезно при небольших объемах данных. Минус в том, что пользователю может отдаться код, который не будет использоваться.
Если файлы стилей общим размером достигают 20 Кб, их рекомендуется загружать одним файлом, если больше - лучше использовать несколько css файлов для различных шаблонов.
7. Data:URI
В общем понимании это технология записи бинарного содержимого в текстовом формате. Для среднестатистического сайта эта технология может использоваться для встраивания картинки непосредственно в html код, чтобы уменьшить количество запросов на сервер. Так, картинка будет скачиваться вместе с всей страницей, а не отдельным файлом.
Минусы:
- не поддерживается в IE7;
- размер файла при конвертации в base64 увеличивается в среднем на 30%;
- для картинок отображенных через Data:URI не работает кэширование.