Переход к программе второго дня
10 шагов к быстрому сайту
25 Июнь, 2015. Четверг
15:30 - 16:00
Что нужно сделать, чтобы сайт был действительно быстрым? Какие инструменты и стек технологий смогут помочь?
Во-первых, это мониторинг как серверной части, так и клиентской - есть большое количество продуктов и сервисов, которые могут помочь.
Во-вторых, это оптимизация и профилирование серверных задержек. После собранной коробки (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 раз. За счет системного подхода, рефакторинга и бесплатных утилит. И он всегда будет быстрым, потому что ускорение уже заложено в архитектуру.
Мне нравится
Добавить в избранное
Николай Мациевский