7. 10 шагов к быстрому сайту

Опубликовано 6 июля 2015, 11:11

Докладчик: Николай Мациевский, WEBO Software
Что нужно сделать, чтобы сайт был действительно быстрым? Какие инструменты и стек технологий смогут помочь?

Во-первых, это мониторинг как серверной части, так и клиентской - есть большое количество продуктов и сервисов, которые могут помочь.

Во-вторых, это оптимизация и профилирование серверных задержек. После собранной коробки (php-fpm + opcode cache + nginx + memcached) нужно проанализировать, что можно закэшировать.

Дальше смотрим уже вглубь клиентской оптимизации и включаем сжатие (gzip) и кэширование файлов. При отлаженной публикации изменений имеет смысл подключить gzip_static.

После беремся за оптимизацию изображений: это бич большинства веб-проектов. Нужно выбрать настройки и стек утилит, которые позволят максимально уменьшить изображения в автоматическом режиме. Соблюдаем размеры в HTML! Для оптимизации изображений можно использовать optipng, pngcrush, TruePNG, gifsicle, jpegtran, cwebp

Следующий этап: беремся за за статику в виде шрифтов. Нужно взять TTF, вырезать все ненужное (subset.py) и сконвертировать его во все форматы (fontforge). Плюс включить сжатие.

После шрифтов анализируем стили и скрипты. То, что можно объединить автоматически, - объединяем. Дополнительно накладываем минимизацию (Google Closure Compiler или YUI Compressor).

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

Теперь начинается магия: мы можем отложить загрузку изображений. LazyLoad. Есть специальные плагины и инструменты. Но нужно обращать внимание на логику проекта.

Следующий уровень магии: отложенная загрузка скриптов. Здесь без рефакторинга логики не обойтись, но на этом этапе оптимизации - это единственное, что существенно ускорит отрисовку сайта.

И последний шаг - это отложенная загрузка виджетов (3rd party). Можно по onload, можно по событиям. Но для пользователей это выльется в существенное ускорение сайта.

На выходе - у вас ускоренный в 3-5 раз. За счет системного подхода, рефакторинга и бесплатных утилит. И он всегда будет быстрым, потому что ускорение уже заложено в архитектуру.