Увеличение веб-трафика от мобильных пользователей и людей по всему миру с ограниченными возможностями подключения подтолкнуло компании и разработчиков к значительной оптимизации скорости загрузки веб-сайтов. Традиционно, когда вы переходите на веб-страницу, она загружает и отображает весь доступный контент: изображения, значки, GIF-файлы, стили, сценарии и т. Д. Как вы понимаете, загрузка всего этого материала вызывает задержку при запуске веб-сайта, особенно для пользователей с медленным подключением. Google уже какое-то время пытается устранить эту проблему. Только в прошлом году они добавили функцию отложенной загрузки изображений в Google Chrome 76. Теперь Google привносит те же функции в окна iframe.
Ленивая загрузка загружает содержимое веб-страницы по запросу, а это означает, что они не будут загружаться и отображаться до тех пор, пока вы не прокрутите вниз и не отобразите их в представлении, что снизит начальную скорость запуска веб-сайта. Как уже упоминалось, отложенная загрузка изображений доступна в Chrome с прошлого года, но теперь разработчики могут использовать тот же метод и для окон iframe. Чтобы реализовать это на своем собственном веб-сайте, все, что вам нужно сделать, это добавить атрибут loading = “lazy” к вашим изображениям и / или элементам iframe. Такие браузеры, как Firefox и Safari, уже реализовали встроенную функцию отложенной загрузки изображений. Что касается окон iframe, они все еще работают над исправлением пары ошибок. Google также упомянул, что Chrome для Android в упрощенном режиме автоматически лениво загружает закадровые изображения и фреймы.
По иронии судьбы, во время тестирования того, как встраивание видео YouTube (основанного на iframe) может влиять на скорость загрузки веб-страницы при ленивой загрузке, команда Chrome обнаружила, что они « сэкономили 10 секунд того, как скоро наши страницы могут быть интерактивными. мобильные устройства. «Излишне говорить, что отложенная загрузка имеет реальные преимущества перед традиционным методом загрузки всего содержимого веб-страницы, как только вы ее посещаете.
Источник: web.dev
Через: Techdows
| Rating | Installs | Content Rating |
0 Comments