/symbol>

Как ускорить работу сайта

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

Основных способов ускорить сайт несколько -
  • уменьшить объем передаваемых данных,
  • сократить время на передачу запроса от клиента к серверу и обратно,
  • ускорить обработку кода на сервере
  • визуальными эффектами добиться у пользователя ощущения что сайт работает быстрее.

На сегодня есть несколько инструментов, позволяющий увеличить отклик сайта с минимальными затратами:

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 не работает кэширование.

Related Articles

Как перенести сайт на хостинг

Перенос сайта на хостинг не сложный и доступен даже новичку. Главное следовать инструкции. Он...

Экспорт и Импорт базы данных в phpMyAdmin

При переносе сайта на хостинг часто стоит задача переноса базы данных. Это делается вручную, в...

Смена версии PHP

На нашем хостинге Вы можете выбрать версию языка PHP, подходящую для Вашего сайта. Версию PHP...

Установить SSL сертификат

На любом тарифе хостинга возможна установка бесплатного сертификата от Lets Encrypt. Для...

Как ускорить время ответа сервера

Время ответа сервера это величина, состоящая из времени, затраченного на путь от клиента к...