Оптимизация загрузки сайта необходима по двум причинам. Во-первых, чем быстрее загружается сайт, тем больше вероятность, что посетитель получит положительное впечатление от его просмотра и не покинет его сразу, устав ждать, когда страница сайта появится. Во-вторых, Google и другие поисковые машины при оценке сайтов принимают во внимание скорость загрузки его страниц в качестве одного из критериев. Описывается оптимизация загрузки сайта, пошаговая инструкция настройки http сервера Apache и директивы конфигурации mod_deflate. The same in English.
Оптимизация загрузки сайта за счет сжатия данных
При загрузке страницы, http сервер может передавать браузеру пользователя следующие виды данных:
- текстовый файл HTML с содержимым страницы.
- текстовые файлы каскадных таблиц стилей (CSS) с указаниями браузеру посетителя как и где отображать элементы страницы.
- текстовые файлы сценариев javascript для интерактивного взаимодействия с пользователем.
- файлы, содержащие изображения или видео в специальных форматах.
Первые три вида данных за счет сжатия могут быть значительно уменьшены и соответственно, время их передачи значительно уменьшено. Файлы изображений уже сжаты при помощи специализированных алгоритмов и попытка их дальнейшего сжатия дополнительных дивидендов не принесет.
Мой опыт показывает, что объем передаваемых данных при загрузки страницы за счет сжатия может быть уменьшен на 1/3 или более, в зависимости от количества изображений на странице.
В интернете много различных сервисов, при помощи которых можно оценить скорость загрузки страниц сайта. Я предпочитаю использовать два. Google PageSpeed Insights и Pingdom Website Speed Test. Второй (Рис. 1.) выдает в результате тестирования прекрасную наглядную диаграмму, на которой хорошо видно сколько и каких файлов загружается при отображении страницы. Сколько времени занимает передача каждого файла какой его объем (Рис. 2.). Обычно, файл гораздо больше. Здесь приведен только кусочек.
Рис. 1. Результат теста загрузки страницы
В настройках можно выбирать точку, из которой будет проводиться измерение скорости. Для получения наиболее достоверного результата лучше провести несколько тестов подряд. В свою очередь, Google дает добрые советы, как улучшить ситуацию.
Рис. 2. Диаграмма загрузки страницы
Настройка Apache для передачи сжатых данных
Оптимизация загрузки сайта осуществляется за счет настройки модуля mod_deflate. Далее я опишу как настроить Apache для оптимизации загрузки сайта за счет сжатия передаваемых текстовых файлов.
В результате проведенных манипуляций с настройками Apache, сервер http будет передавать ВСЕ текстовые файлы указанных типов в сжатом виде. В случае, если указанные настройки вызовут какие-либо проблемы, то область их действия можно отрегулировать директивами <Directory> … </Directory>.
-
Создаем безопасное соединение с сервером. Как это сделать см. “Что такое ssh/sftp и для чего он нужен?” для OS Linux (OSX) или “SSH клиент для Windows PuTTY” и “Клиент SSH для Windows Bitvise Tunnelier” для Windows.
-
Стать суперпользователем (См. «Команды Linux. Краткое описание.«)
#su
- Сжатие выполняется при помощи модуля mod_deflate Необходимо убедиться, что модуль mod_deflate присутствует в папке загружаемых модулей Apache. В Redhat(CentOs) Linux модули Apache должны находиться в папке /etc/httpd/modules или /chroot/httpd/etc/httpd/modules. Модуль называется mod_deflate.so.
- Переходим в папку/chroot/httpd/etc/httpd/conf/ или /etc/httpd/conf/
#cd /chroot/httpd/etc/httpd/conf/
- При помощи редактора vi (см. “Редактор vi. Краткая инструкция“) вносим изменения в основной конфигурационный файл Apache:
#vi httpd.conf
Находим инструкции по загрузке модулей Apache и раскомментируем mod_deflate, после чего Apache будет загружать модуль после чтения конфигурационного файла. Должно быть как на рис. 3.
Рис. 3. mod_deflate будет загружен
- Спускаемся ниже и перед ### Section 3: Virtual Hosts вставляем следующий текст:
# mod_deflate configuration <IfModule mod_deflate.c> # Restrict compression to these MIME types AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css <Files ~ "\.(htm|html|css|js|php)$"> SetOutputFilter DEFLATE </Files> DeflateCompressionLevel 9 # This is for some old browsers BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html <IfModule mod_headers.c> # Make sure proxies don't deliver the wrong content Header append Vary User-Agent env=!dont-vary </IfModule> </IfModule>Это стандартная настройка mod_deflate для сжатия основных текстовых файлов, передаваемых Apache браузеру посетителя. Выделенные строчки необходимы, поскольку некоторые системы управления контентом (CMS), например, WordPress, добавляют после расширения типа файла служебную информацию (хорошо видно на рис. 2.) и директивы определения типа файла их не понимают.
- Все. Еще раз проверяем и закрываем редактор vi.
- Даем Apache команду перечитать конфигурационные файлы:
#/etc/init.d/httpd reload
- Повторяем тесты скорости загрузки еще раз:
Рис. 4. Повторный тест
Видим, что и размер страницы и скорость загрузки существенно уменьшились.
Рис. 5. Диаграмма повторного теста
На диаграмме можем сравнить размер файлов с предыдущим тестом (рис. 2.). Результат очевиден.
Итак мы за 10 минут упорной работы существенно сократили время загрузки страниц сайта за счет сжатия всех текстовых файлов.
Для уменьшения размера изображений, и, соответственно времени их загрузки, нужно уменьшать из размер и качество до минимально необходимого.
Описана оптимизация загрузки сайта за счет сжатия данных. Дана пошаговая инструкция настройки http сервера Apache и необходимые директивы конфигурации модуля mod_deflate.
No comments yet.