Почему сайт медленно грузится
Медленный сайт теряет посетителей молча. Человек не пишет "у вас долго грузится", он просто закрывает вкладку и уходит к следующему результату в выдаче. Причин у медленной загрузки много, однако распределены они неравномерно, и почти всегда виноваты одни и те же две или три вещи.
Картинки: главная причина медленной загрузки
Первая и самая частая причина заключается в картинках. Фотография с телефона весит несколько мегабайт и имеет ширину в четыре тысячи точек. На сайте она показывается в блоке шириной шестьсот точек, но браузер всё равно скачивает её целиком. Восемь таких фотографий на странице приводят к тому, что человек с мобильным интернетом ждёт полминуты.
Решается это не сжатием файла перед загрузкой, а пережатием на стороне сайта. Изображение приводится к нужному размеру, переводится в современный формат вроде webp и отдаётся под тот экран, с которого зашёл посетитель. На обложках статей в этом блоге такой перевод уменьшил вес ленты примерно в восемь раз, причём разницы на глаз нет.
Шрифты и чужие скрипты
Вторая причина связана со шрифтами. Каждый нестандартный шрифт представляет собой отдельный файл, и пока он не скачался, текст либо не виден, либо прыгает при подстановке. Три начертания вместо одного означают три файла. Проблема решается ограничением набора и подрезкой шрифта под нужный алфавит, ведь кириллице не нужны иероглифы, а в исходном файле они лежат.
Третья причина состоит в чужих скриптах. Речь идёт о счётчиках, чатах поддержки, виджетах социальных сетей и рекламных пикселях. Каждый из них тянет свой код с чужого сервера, и страница ждёт их все. Особенно обидно, когда виджет чата, которым пользуются трое в месяц, задерживает загрузку у всех посетителей. Такие вещи подключают отложенно, уже после того как страница показана, а не в первых строках.
Сервер и размещение сайта
Четвёртая причина кроется в самом сервере. Если страница собирается заново при каждом заходе, время сборки складывается с временем передачи. Тяжёлая система управления на дешёвом тарифе легко тратит полторы секунды только на то, чтобы начать отвечать. Помогают кеширование готовых страниц, более приличный тариф или переход на статику, где собирать попросту нечего.
Иногда причина обнаруживается не в сайте, а в том, как он размещён. В одном из наших проектов коммерческий движок на Laravel открывался пятнадцать секунд, и дело было вовсе не в коде. Приложение, база и кеш жили в одном тесном окружении и мешали друг другу. После переноса в изолированный стек контейнеров загрузка сократилась до пяти секунд, притом что в самом приложении не поменяли ни строчки.
Как измерять скорость и с чего начинать
Измерять всё это нужно инструментами, а не ощущениями. PageSpeed Insights и вкладка "Сеть" в браузере показывают, что именно и сколько грузилось. Смотреть следует мобильную версию на медленном соединении, поскольку на офисном интернете и мощном ноутбуке плохо не бывает почти никогда. Обращайте внимание не на общий балл, а на конкретные строки: какой файл оказался самым тяжёлым и что задержало появление текста.
Порядок действий, который даёт результат быстрее всего, выглядит так: сначала картинки, затем чужие скрипты, потом шрифты и только после этого всё остальное. В большинстве случаев первые два пункта закрывают основную часть проблемы, а до тонкой оптимизации кода дело просто не доходит.
Чего делать точно не стоит, так это гнаться за максимальным баллом в PageSpeed. Последние проценты даются дорого, а посетитель разницы между "быстро" и "очень быстро" не замечает. Он замечает разницу между "уже видно" и "ещё крутится", и она отыгрывается на первых же шагах.