Сначала был документ
Вы хотите прочитать один абзац: прогноз, цену или расписание. Открываете сайт — и смотрите на пустой экран. Крутится значок. Потом ещё. Потом страница появляется вся сразу, как будто её держали за занавеской.
Это не «медленный интернет» и не «старый телефон», хотя кажется именно так. Это устройство самого сайта.
Раньше сайт был документом. Браузер запрашивал страницу, сервер присылал готовый текст, и текст сразу показывался. Между запросом и содержимым был один шаг — доставка.
Теперь сайт — программа. Прежде чем показать хоть что-то, браузер скачивает код этой программы, разбирает его и запускает. Запущенная программа запрашивает данные, ждёт ответа и рисует страницу — нередко целиком, в самом конце. Отсюда и эффект занавески: программа рисует всё одним куском, когда готово, а не по мере поступления частей. Первый текст отодвинулся на несколько шагов: доставка кода, запуск, запрос данных, ожидание, отрисовка.
Из арифметики шагов следует простая вещь: каждое звено цепочки — ожидание, а цепочка стала длинной. Пустой экран — не пауза в работе, а сама работа, результата которой пока не показывают.
Почему страницу собирают на вашем устройстве
Сайты стали «живее»: списки обновляются без перезагрузки, подсказки выпадают по мере набора, содержимое подстраивается под конкретного человека. Писать такое вручную долго и дорого, поэтому индустрия перешла на готовые наборы деталей — страница собирается из них, как из конструктора. Для разработчика сделка честная: страница пишется быстрее, везде ведёт себя одинаково, деталь исправляется один раз и сразу на всех страницах.
Цена видна не сразу. Конструктор — это код, и везти его читателю приходится целиком, даже если на конкретной странице нужна малая часть. В код вкладывают и заплатки для старых браузеров — вдруг зайдёт читатель с устаревшим. У большинства браузер новый, но заплатки едут всем. И конструктор умеет только расти: каждая функция ложится ещё одним слоем, а снятие слоя никому не приносит очков.
Второй вес — картинки, видео, фирменные шрифты. Экраны стали крупнее и чётче, картинки под них делают заметно крупнее, видео на первом экране стало нормой. Шрифт — отдельный файл, и страница может ждать его, прежде чем показать текст, чтобы буквы не «дёргались». Этот вес хотя бы виден глазами.
Главное изменение — третье, и оно невидимо. Раньше страницу собирал сервер: его процессор, его время, его электричество. Теперь сборка происходит на устройстве читателя. Стоимость не исчезла — её перенесли. В бюджете сайта такой строки нет: сервер почти не работает. Платит читатель — временем и батареей своего телефона.
Отсюда следствие, которое нам кажется самым неприятным во всей этой истории: чем слабее и дешевле устройство читателя, тем дороже обходится ему чужой сайт. Читатель с дорогим телефоном ничего не заметит. Читатель с простым будет ждать дольше всех — на том же сайте.
Чужие программы на вашей странице
Откройте типичный коммерческий сайт и посчитайте, что на нём работает, кроме самого сайта: счётчик посещаемости, второй счётчик на всякий случай, система аналитики, рекламная сеть, виджет чата, инструмент для сравнения вариантов страницы, карта, баннер согласия, кнопки соцсетей.
Каждая из этих вещей — чужая программа, которую кто-то вставил в страницу. И вставлял не разработчик в одиночку: маркетингу нужно знать, откуда приходят покупатели; поддержке — чат; рекламе — показы; юристам — уведомление о сборе данных. У каждого была причина, и каждый раз причина казалась достаточной.
Проблема — в устройстве вставки. Каждый посторонний элемент — отдельная поездка: браузер спрашивает чужой сервер, скачивает код, запускает его. Поездки выстраиваются в очередь, следующая начинается после предыдущей. Ожидание складывается из «дозвонов», которых на странице могло бы не быть вовсе. Скорость страницы начинает зависеть от серверов, которыми сайт не управляет: чужой сервер отвечает вяло — страница ждёт, а ускорить его сайт не может, только убрать вставку. И чужая программа, как и своя, работает на устройстве читателя и ест его батарею.
Реклама — отдельный случай. Пока страница открывается, за право показать баннер успевают пройти торги: владелец места спрашивает нескольких покупателей, кто предложит больше. Торги идут в момент открытия, и страница их ждёт.
А ответственного за сумму обычно нет. Разработчик скажет: это не мой код. Владелец счётчика: мой скрипт лёгкий. Маркетинг: без данных нельзя. Каждый по отдельности прав. Ждёт читатель.
Почему никто не жмёт на тормоза
У каждой новой вставки на странице есть автор, цель и защитник. У отказа от вставки — только неудобство: кому-то придётся объяснять, почему пропали его цифры. В этой арифметике лишнее почти всегда побеждает: добавляющему есть что предъявить, отказывающему — нечего.
Время читателя при этом не отражается ни в одной внутренней цифре. Отчёты показывают продажи и посещения — то, что случилось после загрузки. Сама загрузка в отчёты не попадает. Пока ожидание читателя не пересчитано в деньги, им никто не управляет.
И последнее: сайт проверяют там, где его делают. Офисный интернет быстрый, рабочий ноутбук свежий, коллеги рядом. На таком оборудовании невидимый вес не чувствуется — он чувствуется в метро, на дешёвом телефоне, в зоне плохого приёма. Тяжёлое не болит у тех, кто его создаёт. Оно болит у тех, кто читает.
Тупик: сначала все сжимают картинки
Когда сайт признают медленным, первым делом делают очевидное: сжимают картинки, переводят файлы на раздачу с ближайших серверов, учат браузер запоминать файлы для повторных визитов. Рефлекс понятный: вес — единственное, что видно, а невидимое рефлексов не вызывает. Это не бесполезно — на слабом интернете разница заметна. Но это лечение не той болезни, из-за которой вы смотрели на белый экран.
Сжатие и быстрая раздача ускоряют доставку байтов. Пустой экран в типичном случае держит не доставка, а два других ожидания. Первое — запуск программы: браузер должен исполнить код, прежде чем что-то показать, и чем слабее устройство, тем дольше. Второе — очереди чужих скриптов. Это как ускорить доставку разобранного шкафа: детали приедут раньше, а собирать их будут столько же.
Запоминание файлов помогает тем, кто уже приходил: возвращённому посетителю часть файлов заново брать не надо. Но решение «уйти или остаться» принимается при первом визите, когда запоминать ещё нечего.
У тупика есть и читательская версия: купить интернет побыстрее. Она не помогает по той же причине — узкое место не в трубе, а в том, что происходит на устройстве и в чужих очередях.
Мы уже писали об этом отдельно: размер скачиваемого кода перестал быть главным показателем. Главным стало то, что обязано произойти до первого текста.
Что помогает
Лечит то же, что диагностирует: сокращение обязательных шагов до первого текста.
- Показывать текст сразу. Текст сам по себе лёгок, и сервер может приготовить его заранее. Тогда читатель видит содержимое в один шаг, а программа подключается следом и делает страницу интерактивной. Пустого экрана нет в принципе.
- Пересматривать каждую чужую вставку как сделку: что она даёт и сколько стоит в ожидании. Незаменимое загружать после появления текста, остальное не загружать вовсе. При пересмотре часто выясняется, что часть вставок не нужна уже никому — их ставили ради того, что давно не работает.
- Замерять на слабом устройстве и медленной сети. Если сайт быстрый на рабочем ноутбуке, это ничего не значит: у всех, кто принимает решения, ноутбуки обычно хорошие.
Проверить свой сайт можно без специальных знаний. У каждого браузера есть инструменты разработчика — в справке подскажут, где их включить, — а в них список всех запросов страницы. Перезагрузите свой сайт при открытом списке и посмотрите, что запрашивается до появления текста и чьи это запросы. Отрезвляющее зрелище: чужих запросов нередко больше, чем своих.
Позиция редакции
Тяжесть сайтов — не злой умысел и не лень. Наша позиция: страница превратилась из документа в программу, её сборку перенесли на устройство читателя, и одновременно страница стала площадкой для чужих программ — у каждой свой заказчик, и ни у одной нет ответственности за общее ожидание. Это перенесённая на читателя стоимость, и она не перестанет расти, пока не станет чьей-то строкой в бюджете. Лечится она не сжатием файлов, а сокращением того, что обязано случиться до первого текста.
Мы назовём условие, при котором эта позиция неверна. Если на конкретном сайте замер покажет, что почти всё ожидание — доставка больших файлов по сети: тяжёлое видео в шапке, огромные картинки, грузящиеся раньше текста, — то правы те, кто сжимает и ускоряет раздачу, а не мы. Поэтому первое действие — не спор, а замер. Как его сделать, описано выше: список запросов до первого текста покажет, какая это болезнь.