Сайты должны грузиться мгновенно. Ах, нет, сайты ничего никому не должны? Зайдите в троллейбус и сядьте рядом со студентом, который сидит с айфоном. Посмотрите, готов ли он ждать, пока загрузится какой-то интернет-магазин. Скажем так: три секунды — и вкладка закрывается. В ход идет следующий результат из поисковой выдачи.

Кстати, про поисковую выдачу. Скорость загрузки сайта влияет на ранжирование в поисковиках. Пруфы здесь и здесь. «Тормозящие» сайты реже посещаются роботами, а, значит, реже индексируются. От этого страдает место в выдаче и удобство поиска нужной инфы.

Гугл потрудился и выпустил свой инструмент для проверки скорости — PageSpeed. Найти тормозящие загрузку элементы просто — заходим сюда и в единственном поле указываем адрес, который хочется протестировать. За минуту будет готов подробный отчет о производительности. Результат будет показан в попугаях. В идеале их сто, но попробуй-ка добейся! Даже самому Гуглу это не под силу: проверьте его сервисы :)

Тесты проводятся как для десктопной, так и для мобильной версии сайта. Ориентироваться лучше по цветовой шкале: желтая зона укажет, что есть элементы, которые стоит оптимизировать, зеленая сообщит, что все ок. Если сайт в красной зоне, подкручивайте скорость и оптимизируйте. Иначе впереди бездна: пока загружается страничка, юзер уже уйдет на другой сайт :)

Оптимизировать сайт можно двумя способами.

1. Сжимаем картинки Фотошопом или прогоняем через Optimizilla, например

Чем меньше весят картинки, тем больше шакалов тем быстрее загружается сайт. Делаем сжатие, многомегапиксельные фотки прячем под кат. Хватит превьюшки 640×480. Меньше картинка — шустрее сайт.

Даже на стартовой странице Google Developers графику можно сжать на 71%.

2. Выполняем подключение шрифтов с самого сайта, а не тянем их с гуглофонтов

Минус — пока браузер не загрузил шрифт, юзер увидит надоевший Ариал или Тахому.

3. Используем кэш браузера по максимуму

Когда сайт частично уже сохранен у клиента — загрузка пойдет намного быстрее.

4. Сокращаем JavaScript и CSS

Скрипты не редактируются каждый день после релиза — нет смысла сжимать их на лету. Хватит оптимизировать один раз после правок кода. Шаблоны JS лучше обработать на сервере, встроить результаты в HTML и использовать шаблоны на клиенте после загрузки.

5. Сокращаем HTML

На практике — удаление лишних пробелов, табов, переносов строк.

6. Удаляем неиспользуемый код

Можно встроенным в «Хром» аудитом. Нажимаем F12 и переходим на вкладку Audits. Внизу есть единственная кнопка Run. Занимается в целом тем же самым, что и PageSpeed. Только в реальном времени.

Любой сайт состоит из динамических и статических элементов. Динамические элементы — сам HTML-код, полученный из работы php и запросов к базе данных. А остальное — статика. Это картинки, JavaScript и CSS.

Автоматически оптимизировать сайт можно крутой штукой от Гугла — PageSpeed Insights. Этот модуль устанавливается на сервер nginx и после настроек сжимает в реальном времени дофига инфы, в том числе, графической.

PageSpeed Insights умеет анализировать HTML и оптимизировать ресурсы. Пережимать, короче. В исходном коде ресурсы будут находиться по другому пути, не по тому, что задан поленившимся сжать фоточку разработчиком. Это стоит учитывать. Но отображение ресурсов не изменится. Уменьшится вес. А значит, возрастет скорость загрузки страницы и посетители станут довольнее :)

Однако у PageSpeed Insights имеются ограничения. Его можно поставить только на nginx, запущенный на реальном или виртуальном сервере. Нет, арендованный где-то в Германии shared-сервер не подойдет.

Второе ограничение связано с вечной войной браузеров. Картинки, пережатые PageSpeed-ом, конвертируются в формат .webp, который понимает только «Хром» (на всенародно любимом Internet Explorer 6 такая штука не пройдет). В последних версиях отображению таких картинок научилась и «Опера». Потому что движок поменяла.

Мы установили модуль PageSpeed Insights на трех проектах — на своем новом сайте и на двух клиентских. Модуль видит, с какого браузера приходит запрос, смотрит, обучен ли он отображать webp-формат и отдает либо оптимизированную картинку, либо обычный jpeg.

1. Сибирикс

По Сибириксу настройка заняла примерно полдня. Кое-что пришлось делать эмпирическим путем: меняли, смотрели, что происходит. Иногда зона была зеленой, а слететь в желтую могла совершенно непредсказуемо.

Сейчас обе версии стоят в зеленой зоне. Значит, проблем со скоростью не возникнет. Если скорость подключения хорошая, не EDGE какой-нибудь :)

2. ДаВита

В рамках технической поддержки интернет-магазина фабрики «Витра» мы решили поэкспериментировать и установить модуль PageSpeed Insights на него:

Версия для мобилок набирает 85 попугаев — достойный результат. Десктопная смогла получить 95.

Столь положительный анализ — результат долгой работы руками и курения мануалов от Гугла. Без оптимизации «Витра» набирала 64 попугая в десктопной версии и лишь 52 — в мобильной.

Автоматом PageSpeed Insights-а удалось поднять результат до 62 попугаев на мобилках и до 82 — в десктопах. Полная версия попала в зеленую зону, а мобильная так и оставалась в красной, нещадно прося об оптимизации кода. И было решено подкрутить сайт руками.

3. United Panel Group

Первая проверка боевого сайта выдала 63 попугая для десктопной версии и 52 для мобилок. Не впечатляет.

Мы поддались эксперименту и добавили модуль PageSpeed Insights. Автоматическая оптимизация добавила 25 попугаев десктопам и 12 — мобилкам.