Презентация технического директора Айри — Мациевского Николая — с летней партнерской конференции 1С-Битрикс — «10 шагов к быстрому сайту».
С чего нужно начать при ускорения сайта? С понимаю проблем скорости. Прежде чем начнутся работы по ускорению сайта, вам нужно понимать, какие части загрузки сайта тормозят, какие метрики скорости есть у сайта сейчас, как меняется скорость сайта в течение суток, дней недели, и сколько пользователей получают сайт за 2-3 секунды.
Когда вы получите текущие метрики скорости сайта — используя любые бесплатные инструменты, например, Айри.рф или Яндекс.Метрику — можно приступать непосредственно к ускорению. И первый шаг в этом — настройка сервера.
Для корректной настройки веб-сервера под большинство задач не нужно глубоких знаний или серьезной работы. Вам нужно проверить несколько простых вещей. Первое — входящие соединения должен обслуживать nginx. Второе — у вас должен быть установлен акселератор PHP (или вашего языка программирования). Третье — у вас должно быть настроено кэширование в базе данных (например, MySQL) и кэширующих движках (например, Memcached) на использование 80-85% доступной памяти. После настройки этих параметров сервер будет работать, практически, на пике оптимальности для малой и средней нагрузки.
Второй шаг — это быстрая настройка nginx для подключения сжатия (gzip) и клиентского кэширования файлов. Эти несколько правил в конфигурации будут «стоить» 3-5% вашего оборота онлайн-бизнеса, если вы их не подключите.
Третий шаг — это настройка использования сжатых копий статических файлов (например, стилей, скриптов или шрифтов). Для сжатия можно использовать zopfli, а статическое сжатие подключить через модуль nginx — gzip_static.
Четвертый шаг — оптимизация изображений без потери качества. Для JPEG подойдут утилиты ExifTool и jpegtran (или mozjpeg). Для PNG — pngcrush, optipng (или TruePNG) и zopflipng. Все остальные форматы (кроме анимированных GIF) могут быть переведены в JPEG или PNG и далее оптимизированы. Для большинства браузеров можно использовать формат WebP: он позволяет уменьшить размер еще на 15-20% без потери качества.
Пятый шаг — попробовать оптимизировать изображения с потерями. Для JPEG поможет resampling 4:1:1, для PNG — сокращение палитры (например, через pngnq).
Шестой шаг — глубокая работа со шрифтами. Во-первых, необходимо свести использование различных шрифтов на странице до минимума. Во-вторых, использовать наиболее прогрессивный формат (на текущий момент это woff) и сжатие файлов шрифтов для остальных браузеров. В третьих, есть возможно вырезать неиспользуемые глифы и мета-информацию и сократить физический размер файла в 5-10 раз.
Седьмой шаг — оптимизация CSS, JavaScript и HTML-кода утилитами YUI Compressor, Google Closure Compiler, CSS Tidy и HTML Compressor.
Восьмой шаг — подключение отложенной загрузки изображений.
Девятый шаг — настройка логики загрузки остальных скриптов (возможно, отложенная загрузка части из них).
Десятый шаг — использование Navigation Timing API / Navigation User API для получения данных о фактическом опыте использования сайта пользователями и проблемах, которые у них возникают.
Сервис Айри позволяет автоматизировать шаги со второго по десятый, а также предлагает меры для решения проблем серверной нагрузки.