Ускорение загрузки сайтов

Почти каждый владелец сайта, задумывающийся о месте сайта в поисковой выдаче, слышал, что на это влияет скорость его загрузки. Это вполне логично: поисковые системы стараются выдавать качественный (иногда по весьма странным критериям) контент в начале списка. После этого вебмастер проверяет свой сайт автоматизированными тестами вроде gtmetrix и google pagespeed и пытается набрать там больше баллов как для десктопной версии, так и для мобильной.

В целом повысить баллы в автотесте неплохой подход, однако, необходимо учитывать некоторые тонкости. Главная из них: автотест один на всех и даёт унифицированный результат, а сайт индивидуален. У каждого сайта своя аудитория и свой контент, соотношение текста/графики/видео в нём, время активной жизни контента, география посетителей… и многое другое, что автотестом учитывается «в среднем» или не учитывается вообще. Поэтому, что важно для вашего сайта, может быть неважно для автотеста и наоборот.

Кроме автотестов хорошим инструментом анализа производительности сайта отладчик браузера. В Firefox он открывается сочетанием Ctrl-I, отладчик есть также в Chrome и других браузерах. Отладчик даст детальную информацию о том, какой контент сколько загружается по времени и сколько при этом потребляет траффика. Этот тест зависит от скорости подключения вашего ПК к интернету, для объективности его необходимо запускать на быстром проводном соединении. А заодно можно протестировать насколько долго грузятся элементы на медленном беспроводном.

Итак, будем опираться на результаты автотестов и отладчика. Автоматизированные тесты нам понадобятся скорее как check-list того, что должно быть реализовано на хорошем сайте. Это очевидные вещи, вроде кеширования статики, грамотного разнесения js/css, сжатия картинок, уменьшения использования сторонних ресурсов… При этом конкретно следует обратить внимание на важные не всегда очевидные моменты:

  1. Размер страниц. Несмотря на высокую скорость современных способов подключения к сети размер остаётся важным и часто главным фактором загрузки страниц. Находитесь вы с ноутбуком в кафе в Новосибирске и загружаете сайт из дата-центра в Петербурге, при этом наиболее медленным участком канала связи будет … беспроводное соединение в кафе. Похоже на парадокс, но это так. Поэтому размер страниц и загружаемых статических файлов имеет значение, и особенно критичен для мобильных клиентов. Что делать: уменьшать размер страниц, выносить встроенные стили, скрипты в отдельные статические файлы, а для статических файлов настроить возможность кеширования на стороне браузера. И, конечно, уменьшать размер картинок до минимальных разумных значений.
  2. HTTP/2. Этот протокол имеет ряд новшеств существенно ускоряющих загрузку сайтов: бинарный формат и сжатие данных, использование push-технологии, мультиплексирование и многое другое, о чём подробно можно прочитать в документации. Сейчас HTTP/2 поддерживается всеми современными браузерами, и если используется SSL, то не включить на стороне сервера HTTP/2 просто неприлично. Купить и поставить SSL-сертификат имеет смысл только ради скорости. Вместе с этим становятся бесполезными оптимизации старых протоков HTTP 1.x, которые к сожалению часто предлагают автотесты. Иногда эти оптимизации в случае новой версии протокола даже вредны, о чём уже давно написано. Отдельно стоит заметить сомнительность использования CDN для сайтов на новом протоколе: он действительно не так часто и нужен. Поэтому, здесь лучше опираться не на баллы из автотеста, а на разумность разного рода изменений применительно к HTTP/2.
  3. CDN. Content Delivery Network не всегда оказывается полезен. Для HTTP 1.x его использование позволяет распараллелить загрузку статических файлов, и это действительно ускоряет загрузку сайта. В случае HTTP/2 такую задачу хорошо решает сам протокол. Поэтому, CDN действительно полезен бывает в ситуациях очень больших файлов или географически глобальной аудитории сайта. В остальных — лучше протестировать и сравнить результат.

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