Оптимизация загрузки сайта за счет сжатия данных

Оптимизация загрузки сайта необходима по двум причинам. Во-первых, чем быстрее загружается сайт, тем больше вероятность, что посетитель получит положительное впечатление от его просмотра и не покинет его сразу, устав ждать, когда страница сайта появится. Во-вторых, 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. Результат теста скорости загрузки страницы

Рис. 1. Результат теста загрузки страницы

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

оптимизация загрузки сайта. Рис. 2. Диаграмма загрузки страницы

Рис. 2. Диаграмма загрузки страницы

Настройка Apache для передачи сжатых данных

Оптимизация загрузки сайта осуществляется за счет настройки модуля mod_deflate. Далее я опишу как настроить Apache для оптимизации загрузки сайта за счет сжатия передаваемых текстовых файлов.

В результате проведенных манипуляций с настройками Apache, сервер http будет передавать ВСЕ текстовые файлы указанных типов в сжатом виде. В случае, если указанные настройки вызовут какие-либо проблемы, то область их действия можно отрегулировать директивами <Directory> ... </Directory>.

  1. Создаем безопасное соединение с сервером. Как это сделать см. "Что такое ssh/sftp и для чего он нужен?" для OS Linux (OSX) или "SSH клиент для Windows PuTTY" и "Клиент SSH для Windows Bitvise Tunnelier" для Windows.

  2. Стать суперпользователем (См. «Команды Linux. Краткое описание.«)

    #su

  3. Сжатие выполняется при помощи модуля mod_deflate Необходимо убедиться, что модуль mod_deflate присутствует в папке загружаемых модулей Apache. В Redhat(CentOs) Linux модули Apache должны находиться в папке /etc/httpd/modules или /chroot/httpd/etc/httpd/modules. Модуль называется mod_deflate.so.
  4. Переходим в папку/chroot/httpd/etc/httpd/conf/ или /etc/httpd/conf/

    #cd /chroot/httpd/etc/httpd/conf/

  5. При помощи редактора vi (см. "Редактор vi. Краткая инструкция") вносим изменения в основной конфигурационный файл Apache:

    #vi httpd.conf

    Находим инструкции по загрузке модулей Apache и раскомментируем mod_deflate, после чего Apache будет загружать модуль после чтения конфигурационного файла. Должно быть как на рис. 3.

    оптимизация загрузки сайта. Рис. 3. mod_deflate будет загружен

    Рис. 3. mod_deflate будет загружен

  6. Спускаемся ниже и перед ### 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.) и директивы определения типа файла их не понимают.

  7. Все. Еще раз проверяем и закрываем редактор vi.
  8. Даем Apache команду перечитать конфигурационные файлы:

    #/etc/init.d/httpd reload

  9. Повторяем тесты скорости загрузки еще раз:
    оптимизация загрузки сайта. Рис. 4. результаты повторного теста скорости

    Рис. 4. Повторный тест

    Видим, что и размер страницы и скорость загрузки существенно уменьшились.

    оптимизация загрузки сайта. Рис. 5. Диаграмма повторного теста

    Рис. 5. Диаграмма повторного теста

    На диаграмме можем сравнить размер файлов с предыдущим тестом (рис. 2.). Результат очевиден.

Итак мы за 10 минут упорной работы существенно сократили время загрузки страниц сайта за счет сжатия всех текстовых файлов.

Для уменьшения размера изображений, и, соответственно времени их загрузки, нужно уменьшать из размер и качество до минимально необходимого.

Описана оптимизация загрузки сайта за счет сжатия данных. Дана пошаговая инструкция настройки http сервера Apache и необходимые директивы конфигурации модуля mod_deflate.

, ,

No comments yet.

Leave a Reply

Please verify that you are not a robot.

Thank You for your comment.

s2Member®