Изображения составляют большую часть вашей веб-страницы! Оптимизируйте их!

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

До сих пор мы обсуждали внедрение спрайтов CSS для оптимизации наших веб-страниц. Этот метод по существу объединяет несколько изображений в один файл изображения. Это уменьшает количество запросов, которые должен сделать ваш браузер, чтобы получить все изображения.

В этой статье мы исследуем ленивую загрузку.

Что такое ленивая загрузка?

Ленивая загрузка применима к изображениям и фреймам. По сути, это говорит веб-браузеру: «Эй, браузер! Не загружайте это изображение или iframe, пока оно не появится в окне просмотра».

Другими словами, если вам нужно прокрутить вниз, чтобы просмотреть эти изображения или фреймы, не извлекайте и не загружайте их, пока зритель не прокрутит вниз и не встретит эти изображения и фреймы.

Почему вы должны использовать ленивую загрузку?

Когда вы говорите браузеру извлекать и загружать изображения/iframe только тогда, когда пользователь прокручивает страницу вниз и встречает их, это уменьшает объем контента, который браузер должен изначально загружать. Например, если у вас есть 20 изображений и 18 из них не видны в начальном окне просмотра (при загрузке вашего сайта), тогда вашему браузеру нужно загрузить только 2 из них в процессе начальной загрузки. Это экономит много времени, и это еще более верно для крупных веб-страниц, которые используют огромное количество изображений.

Представьте себе: разница между загрузкой 2 из 20 изображений и 20 изображений.

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

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

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

Реализация №1

К счастью для нас, HTML предоставляет атрибут загрузка для изображений и фреймов. Установите значение, равное ленивому.

Просто прикрепите атрибут к некритическим изображениям и фреймам, чтобы начать.

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

Быстрые решения для этой реализации:

  • Установите ширину и высоту вашего изображения
  • Проверить поддержку браузера. Ваш браузер может не поддерживать атрибут загрузки.

Реализация №2

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

Эта реализация мне очень нравится. Это очень просто и удобно для начинающих. Его предоставляет репозиторий на GitHub под названием Vanilla LazyLoad. Инструкции находятся в файле README или на личном сайте Андреа.

Это видео удивительно объясняет шаг за шагом, что нужно сделать. Это просто повторение того, что было сказано в файле README GitHub, но простыми словами.

Процесс начинается с импорта скрипта. Поместите его в последнюю строку кода перед закрывающим тегом body.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

Под элементом сценария мы напишем следующий сценарий, представленный в видео.

<script>        
const myLazyLoad = new LazyLoad({            
elements_selector: ".img-container"        
});     
</script>

Обратите внимание на выделенный жирным шрифтом текст. По сути, это селектор класса. Если вы никогда не работали с CSS, просто поставьте точку после имени класса.

.className

Вы можете выбрать свои собственные имена классов. Вы меняете этот селектор класса. Делайте то, что вам нужно сделать.

После загрузки скриптов переходим к изображениям.

<img class = "img-container" data-src="https://images.wsj.net/im-407095?width=1280&size=1" alt="">

Это пример изображения, которое будет загружаться лениво.

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

Далее у нас есть data-src. Это заменяет атрибут src изображения. Он имеет то же функциональное назначение, что и src; однако вы не можете использовать src.

И, наконец, у вас есть стандартный альтернативный текст.

Для фреймов это та же самая общая идея. Убедитесь, что у вас есть соответствующий класс и data-src. Для получения дополнительной информации ознакомьтесь с документацией.

Тестирование

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

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

Вот как вы это делаете.

  1. Просмотрите свою веб-страницу в браузере.
  2. Щелкните правой кнопкой мыши. Нажмите проверить

3. В самом верху нажмите Сеть

4. Отметьте «Отключить кеш»

По сути, когда вы посещаете веб-сайты, ваш браузер может временно сохранять ресурсы. Таким образом, если вы снова посетите веб-сайт, на нем уже будут загружены ресурсы. Ему не нужно будет связываться с сервером, чтобы получить их. Мы хотим отключить это.

5. Выберите изображения

Нам нужно только видеть, как загружаются изображения (сначала и по мере прокрутки).

Теперь мы готовы к работе.

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

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

Кроме того, зеленым цветом выделено количество сделанных запросов, передаваемых данных и количество используемых ресурсов.

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

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

Надеюсь, весь процесс прошел успешно. Теперь вы можете реализовать отложенную загрузку на своих сайтах и ​​улучшить взаимодействие с пользователем!

Дополнительные материалы на plainenglish.io