Сайт для медленного интернета: что на самом деле скачивает страница

В Душанбе на хорошем 4G этот сайт открывается меньше чем за секунду. В горном селе на 2G та же страница может грузиться больше минуты. Сайт не изменился. Изменилась только дорога к нему.

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

Страница — это не один файл

Когда вы открываете страницу, браузер сначала скачивает один небольшой файл: HTML, текст и структуру страницы. Потом HTML говорит: «мне нужно ещё вот это» — и браузер докачивает остальное:

• CSS — стили: цвета, размеры, расположение;
• шрифты — сами буквы, если у сайта свой шрифт;
• JavaScript — код, благодаря которому работают кнопки, упражнения и анимации;
• фото и другие картинки.

Вот главная страница этого сайта, измеренная по настоящей сборке:

Больше половины всего — фото, и большинство из них далеко внизу страницы, куда многие посетители так и не долистывают.

Медленный интернет вредит дважды

У связи два числа, а не одно:

• Скорость — сколько байтов в секунду может пройти. На хорошем 4G около 10 мегабит в секунду; на слабом 2G около 70 килобит — в 140 раз меньше.
• Задержка — сколько длится одна поездка «вопрос — ответ», даже для крошечного файла. На 4G около 50 миллисекунд; на 2G больше секунды.

Браузер получает страницу не за одну поездку. Он просит HTML, ждёт, читает его, потом просит стили, шрифты и код, снова ждёт, потом просит фото. Каждая волна запросов снова платит задержкой. Поэтому на медленной связи вы платите за каждый байт и за каждое ожидание.

Попробуйте

Выберите связь и сравните две версии главной страницы этого сайта.

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

Как сайт узнаёт, что связь медленная

Некоторые браузеры — Chrome, Edge, Samsung Internet и большинство браузеров на Android — сообщают странице о связи. JavaScript может прочитать две вещи:

• effectiveType — догадку самого браузера: «4g», «3g», «2g» или «slow-2g»;
• saveData — включил ли человек экономию трафика в телефоне или браузере.

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

var connection = navigator.connection;
var slow = connection && (connection.saveData ||
  ["slow-2g", "2g", "3g"].includes(connection.effectiveType));
var choice = localStorage.getItem("lite"); // "on", "off" или ничего

if (choice === "on" || (choice !== "off" && slow)) {
  document.documentElement.setAttribute("data-lite", "auto");
}

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

Что меняет облегчённая версия

Когда облегчённая версия включена, вверху появляется жёлтая заметка об этом и кнопка Показать полную версию. Дальше:

1. Нет анимаций. Движущиеся картинки тратят батарею и силы процессора на недорогих телефонах.
2. Фото ждут. На месте каждого фото — кнопка: Показать фото · 157 КБ. Вы видите размер до того, как за него заплатите.
3. Упражнения ждут. Интерактивные упражнения в этих уроках выглядят как Загрузить упражнение и скачивают свой код только после нажатия.

Не менее важно, что она не меняет: весь текст, все ссылки, форма связи и все языки остаются. Облегчённая версия — не беднее. Это тот же сайт, который спрашивает, прежде чем отправлять тяжёлые части.

Хитрость, на которой всё держится: скрытые фото не скачиваются

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

Тем, кто заказывает сайт

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

1. Сколько весит главная страница? Хороший ответ — число, например «613 КБ, из них 342 КБ — фото». «Он быстрый» — не ответ.
2. Его проверяли на медленной связи? Хороший ответ: да, с замедлением до 3G, и всё важное работает.
3. Что будет на 2G или с включённой экономией трафика? Хороший ответ: сначала приходят текст и кнопки; фото, видео и тяжёлые дополнения ждут или приходят меньшего размера.

Проверьте себя

Маленький словарь

• HTML — файл с текстом и структурой страницы; браузер скачивает его первым.
• CSS — стили: цвета, размеры, расположение.
• JavaScript — код, который работает в браузере и делает страницу интерактивной.
• Килобайт (КБ) — единица размера; 1000 КБ — примерно один мегабайт.
• Скорость (пропускная способность) — сколько данных связь передаёт за секунду.
• Задержка — сколько длится путь одного запроса туда и обратно, каким бы маленьким он ни был.
• Ленивая загрузка — скачивание картинки, только когда её вот-вот увидят.
• Экономия трафика — настройка телефона или браузера, которая просит сайты присылать меньше.

Сайты для всех, кто будет ими пользоваться

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