Ускорение сайта по реальным метрикам

Универсальные советы по ускорению работают плохо, потому что у каждого сайта своё узкое место. У одного это десять несжатых фотографий по три мегабайта на главной, у другого — пятнадцать внешних скриптов, у третьего — один запрос к базе, который выполняется четыре секунды, у четвёртого — слабый или неверно настроенный хостинг. Поэтому я начинаю с диагностики на реальных данных и дальше иду строго по убыванию эффекта. Обычно два-три исправления дают основную часть результата, а остальное — шлифовка, которая часто не нужна.

В большинстве случаев основной вес страницы — изображения, загруженные в исходном размере с фотоаппарата или телефона. Фотография на два мегабайта, которую браузер показывает в виде превью двести пикселей шириной, — классика. Лечится быстро: сжатие, современные форматы, генерация нужных размеров под разные экраны, отложенная загрузка того, что ниже первого экрана. Это почти всегда самый дешёвый способ радикально ускорить сайт, и начинаю я именно с него.

Гнаться за идеальными баллами в синтетических тестах смысла нет: там легко потратить много времени на последние проценты, которые никто не заметит. Значение имеют реальные показатели на живых посетителях, особенно с мобильных: как быстро появляется основное содержимое, как быстро страница начинает реагировать на нажатия, не прыгает ли вёрстка при загрузке. Последнее раздражает людей сильнее всего и при этом исправляется просто — указанием размеров для изображений и блоков, которые подгружаются позже.

Есть граница, за которой оптимизация кода не помогает. Если сайт живёт на переполненном дешёвом виртуальном хостинге, где процессорное время делится между сотнями соседей, ускорять программно почти нечего — нужен переезд, и я скажу об этом прямо. Так же честно скажу, если сайт построен на тяжёлом конструкторе или теме, которая грузит два мегабайта скриптов на каждой странице: там предел ускорения определяется самой платформой, и разумнее планировать переделку, чем годами шлифовать.