Как сделать прелоадер и не замаскировать медленный сайт
Прелоадер имеет смысл, когда первый экран нельзя показать частями: например, композиция зависит от нескольких изображений и шрифта. Он не уменьшает вес сайта и не лечит медленное видео. Хороший прелоадер ждёт только критичные ресурсы, имеет предел ожидания и исчезает даже при ошибке. Процент, который просто растёт по таймеру, создаёт красивую, но ложную задержку.
Короткий ответ
Сначала оптимизируйте первый экран. Прелоадер добавляйте, только если частичная отрисовка действительно разрушает замысел.
Что считать готовностью
Не событие «прошло три секунды», а конкретный короткий список: главное фоновое изображение, логотип, один необходимый шрифт. Видео целиком ждать нельзя — на мобильной сети заставка может не уйти никогда.
Для каждого ресурса учитывайте и успех, и ошибку. Если картинка не загрузилась, сайт всё равно должен открыться с запасным фоном.
Предел ожидания
Даже при настоящем счётчике поставьте максимальное время. После него заставка исчезает, а в консоль уходит диагностическое сообщение. Пользователь пришёл за содержанием, а не за идеальным числом 100%.
Доступность
Прелоадер не должен удерживать фокус, озвучивать каждое изменение процента или
запрещать закрыть страницу. При prefers-reduced-motion оставьте статичный знак
без вращения и пульсации.
Что проверить
Откройте сайт с ограничением скорости сети, заблокируйте одну картинку, отключите кеш и перезагрузите. Затем повторите на быстром соединении: прелоадер не должен мелькать на долю секунды. MOD-090 пока описан как спецификация, а не готовая вставка; обещать его клиенту можно после такого стенда.