Отложенная загрузка iframe
Откладывайте загрузку iframe за пределами экрана с помощью loading=lazy
«Отложенная загрузка iframe» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что такое отложенная загрузка
Отложенная загрузка откладывает загрузку ресурсов до тех пор, пока они не понадобятся, — когда элемент окажется рядом с видимой областью или внутри неё. Для фреймов это означает, что встроенный документ, его скрипты, CSS и ресурсы не загружаются, пока пользователь не прокрутит страницу близко к фрейму.
Атрибут loading
Добавьте к фрейму loading="lazy": <iframe src="embed.html" loading="lazy">. Браузер сам определяет, когда начать загрузку, на основе собственной эвристики (обычно за 1000–2500 пикселей до появления фрейма в видимой области). JavaScript не требуется.
Влияние на производительность
Фреймы могут загружать значительные объёмы ресурсов (YouTube загружает около 500 КБ JavaScript). Отложенная загрузка встроенного видео, расположенного ниже видимой области, уменьшает первоначальную загрузку страницы ровно на этот объём, напрямую улучшая LCP и время до интерактивности для содержимого в видимой области.
loading="eager"
loading="eager" немедленно загружает фрейм независимо от его положения. Это поведение используется по умолчанию. Явное добавление eager полезно в средах, где по умолчанию применяется отложенная загрузка (например, во фреймворках, включающих её глобально), но конкретный фрейм должен загружаться сразу.
Альтернатива IntersectionObserver
Для сложной логики отложенной загрузки (загрузка по нажатию, загрузка с учётом качества соединения) используйте IntersectionObserver: наблюдайте за контейнером фрейма и задавайте src только после его появления в видимой области. Это даёт полный контроль над тем, когда и загружается ли фрейм.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Паттерн фасада
По умолчанию показывайте статичную миниатюру вместо фрейма. Добавьте поверх неё кнопку воспроизведения. При нажатии заменяйте миниатюру настоящим фреймом. Паттерн фасада YouTube: показывайте миниатюру видео и загружайте фрейм только после нажатия пользователем кнопки воспроизведения, экономя затраты на полную загрузку встраивания YouTube.
Паттерн загрузки по нажатию
Для социальных встраиваний (лент Twitter, публикаций Instagram), загружающих значительный объём JavaScript, показывайте кнопку «Загрузить комментарии». При нажатии вставляйте фрейм. Пользователи, которые не взаимодействуют с ним, никогда не оплачивают затраты на загрузку. Это прогрессивное улучшение для встроенного социального содержимого.
Поддержка браузерами
Значение loading="lazy" для фреймов поддерживается в Chrome 77+ и Firefox 121+. Safari не поддерживает отложенную загрузку фреймов (по состоянию на 2024 год). Для отложенной загрузки во всех браузерах используйте IntersectionObserver как надёжный резервный вариант — он работает во всех современных браузерах.
Предотвращение CLS
Заранее резервируйте место для фреймов с отложенной загрузкой, задавая в CSS явные width, height и aspect-ratio, чтобы предотвратить совокупный сдвиг макета (CLS). Когда фрейм загрузится и станет видимым, место под него уже будет выделено, поэтому окружающее содержимое не сдвинется.
Отслеживание аналитики
Фреймы с отложенной загрузкой могут влиять на аналитику: если фрейм для пикселя отслеживания или встроенной аналитики загружается отложенно, он может не выполниться у пользователей, которые до него не прокрутили. Убедитесь, что важные фреймы аналитики и отслеживания конверсий загружаются немедленно или расположены в видимой области.
Сочетание отложенной загрузки и песочницы
Используйте отложенную загрузку и песочницу вместе: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. Оба атрибута работают независимо: отложенная загрузка управляет временем загрузки, а песочница — тем, что может делать фрейм. Сочетайте их для эффективного и безопасного встраивания стороннего содержимого.
Проверка знаний
Что представляет собой шаблон фасада для отложенной загрузки встроенных фреймов?
Итоги
Отложенная загрузка фреймов с помощью loading="lazy" откладывает загрузку ресурсов до момента, когда они окажутся рядом с областью просмотра, — это значительно сокращает начальную загрузку страницы для тяжёлых встроенных элементов. Шаблон фасада и загрузка по щелчку позволяют отложить её ещё сильнее: фрейм загружается только после взаимодействия с пользователем. IntersectionObserver обеспечивает управление сложными сценариями отложенной загрузки в разных браузерах. Заранее задавайте размеры фрейма, чтобы предотвратить CLS.
Часто задаваемые вопросы
Урок «Отложенная загрузка iframe» бесплатный?
Да — полный текст урока «Отложенная загрузка iframe» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Отложенная загрузка iframe»?
Откладывайте загрузку iframe за пределами экрана с помощью loading=lazy Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Отложенная загрузка iframe»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Элемент iframe: src и sandbox
- Безопасность iframe: кликджекинг и X-Frame-Options
- Элементы embed и object
- Отложенная загрузка iframe