Почему сайт грузится медленно и что с этим делать

Медленный сайт теряет посетителей ещё до того, как они увидят дизайн. Кроме того, скорость загрузки учитывают поисковые системы. Расскажу, из-за чего сайты обычно тормозят, на примере того, что я недавно исправлял на этом сайте

01Как измерить

Google оценивает скорость сайта по трём показателям, которые называются Core Web Vitals:

• LCP, загрузка самого крупного элемента на экране. Хорошо, если он появляется быстрее 2,5 секунды
• INP, отклик на действия пользователя. Хорошо, если меньше 200 миллисекунд
• CLS, сдвиги вёрстки во время загрузки. Хорошо, если меньше 0,1

Проверить свой сайт можно бесплатно в PageSpeed Insights. Смотрите мобильную версию: на телефоне показатели почти всегда хуже, чем на компьютере

02Причина первая: видео

Видео на сайте почти всегда самая тяжёлая часть. Часто ролик выгружают из монтажной программы в том же качестве, что и для большого экрана, и ставят на сайт как есть

На этом сайте в кейсах было шесть роликов общим весом 88 МБ. Самый тяжёлый, ролик о платформе теннисного турнира, весил 35 МБ при длительности 43 секунды. Для видео внутри страницы такое качество не нужно. Я пересобрал все ролики в 720p с битрейтом около 2 Мбит/с. Общий вес стал 31 МБ, этот ролик стал весить 11 МБ, а на глаз разницы в картинке не видно. Загрузка этого ролика целиком ускорилась примерно в три раза

Что ещё важно для видео:

• у ролика должна быть обложка, чтобы до нажатия на «плей» браузер не скачивал сам файл;
• служебные данные о ролике должны лежать в начале файла, тогда видео начинает играть, не дожидаясь полной загрузки;
• для фонового видео на главном экране делайте отдельную облегчённую версию под телефоны

03Причина вторая: картинки

Фотографии и скриншоты часто загружают на сайт в исходном размере, по пять-десять мегабайт каждая. Что помогает:

• Современный формат. WebP при том же качестве обычно легче JPEG примерно на четверть или треть. Все картинки на этом сайте хранятся в WebP
• Правильный размер. Картинка не должна быть шире, чем её покажут на экране, с запасом для экранов высокой чёткости
• Ленивая загрузка. Картинки ниже первого экрана загружаются, только когда человек до них докрутит
• Заданные размеры. Если у картинки заранее указаны ширина и высота, страница не прыгает, пока она загружается. Это улучшает показатель CLS

04Причина третья: лишнее

Конструкторы и тяжёлые темы подключают на каждую страницу десятки скриптов, шрифтов и виджетов, даже если на странице они не используются. Каждый такой файл это дополнительный запрос и время

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

05Причина четвёртая: сервер

Иногда дело не в сайте, а в хостинге: дешёвый тариф, сервер далеко от посетителей, нет кэширования. Проверить просто: если первый байт страницы приходит дольше секунды, стоит смотреть на сервер. Сервер стоит выбирать ближе к аудитории: для сайтов, которые работают на Россию, удобнее всего российские дата-центры

06С чего начать

1. Проверьте главную и пару внутренних страниц в PageSpeed Insights
2. Посмотрите, какие файлы самые тяжёлые: обычно это видео и фото
3. Пережмите их и включите ленивую загрузку

Если хотите, чтобы я посмотрел ваш сайт, напишите мне. А если планируете новый сайт, скорость я закладываю с самого начала: об этом на странице дизайн и разработка сайтов