Что на самом деле замедляет сайт

«Сайт медленный, наверное, нужен хостинг помощнее» — почти всегда неверный вывод. Хостинг оказывается виноват редко. Чаще виновато то, что сайт отправляет в браузер лишние мегабайты.

Расскажу на своём сайте, потому что там я мерил всё сам и могу назвать цифры.

Что было и что стало

Главная страница до правок: 755 КБ на компьютере и 487 КБ на телефоне. После: 216 КБ и 159 КБ. Дизайн при этом не изменился ни на пиксель.

1. Картинки — почти всегда главный вес

Фотография с телефона весит 4–8 МБ. На сайте она показывается шириной 800 точек, но браузер всё равно скачивает оригинал целиком. Десять таких картинок — и страница весит как небольшая программа.

Что делать: отдавать картинку в том размере, в котором она показывается, и в современном формате. Перевод в WebP на моём сайте дал файлы примерно в пять раз легче исходных JPEG при неотличимой на глаз картинке. Старый формат при этом остаётся запасным вариантом для древних браузеров.

2. Чужие скрипты с чужих серверов

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

Измерение на моём сайте: внешние ресурсы блокировали отрисовку на 3960 мс, те же файлы, положенные на свой сервер, — на 210 мс. Почти четыре секунды разницы на ровном месте.

Что делать: класть библиотеки и шрифты к себе. Они поедут по уже открытому соединению и попадут под кэш.

3. Шрифты и наборы иконок

Полный набор иконок Bootstrap — 127 КБ шрифта и 83 КБ стилей, при том что на сайте используется штук двадцать значков. Я собрал шрифт только из нужных: 3 КБ вместо 127, стили — 1 КБ вместо 83.

Со шрифтами текста то же самое: часто грузятся начертания, которых на странице нет, и наборы символов, которые не нужны.

4. Отсутствие кэша

Если файлы отдаются без указания, сколько их хранить, браузер скачивает их заново при каждом визите. Решается настройкой сервера за десять минут.

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

5. Прыгающая вёрстка

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

Чего я не стал делать

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

С чего начать вам

1. Откройте свой сайт на телефоне, не на офисном Wi-Fi.
2. Посмотрите, сколько весит главная. Больше 1 МБ — есть что чинить.
3. Начните с картинок. Это 80% результата и самая простая часть.