Быстрее размещайте контент в верхней части страницы, а об остальном позаботьтесь позже.

Крайне важно, чтобы веб-сайты загружались как можно быстрее.

Мы хотим, чтобы контент отображался и был виден с отметкой в ​​​​1 секунду, изображения, которые находятся ниже сгиба и вне поля зрения, могут сильно задерживать и влиять на время загрузки страницы.

Так зачем мы их загружаем?

Беспокоитесь о них позже, это ответ, после загрузки основного содержимого «выше сгиба», после загрузки dom. Затем мы загружаем изображения ниже, это называется отложить.

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

Но как? добавляется небольшой прослушиватель js при загрузке, а затем мы вызываем изображения для загрузки после загрузки содержимого страницы над сгибом.

слушать под нагрузкой

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

теперь страница загружена достаточно для нужд посетителей, теперь загрузите изображения ниже.

<a href=" aria-label="Click to join us on FaceBook" target="_blank" rel="noopener noreferrer">
  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src=" alt="join us On Facebook">
 </a>

Итак, несколько вещей.

js прослушивает, а затем мы вызываем изображение, изображение в кодировке base64 настолько легковесно, что когда мы изначально загружаем страницу, оно не влияет на время загрузки, не похоже на то, что попытка загрузить изображения стандартным способом может привести к рендерингу задержка блокировки.

Кроме того, мы также добавим некоторую дополнительную безопасность, добавив rel=»noopener noreferrer» , потому что мы используем target=»_blank» , плюс aria-label помогает людям с ограниченными возможностями просматривать ваш сайт и понимать, что такое логотип/ функция ссылки на самом деле делает.

Надеюсь, вам понравился этот краткий обзор, и я надеюсь, что он поможет вам ускорить ваши сайты и побеспокоиться об этих изображениях позже.

Дев VIP