Ленивая загрузка изображений

Всем привет в Новом 2021 году! Надеюсь он несет в себе больше позитивных моментов нежели прошедший ураганом 2020-ый!

Вообще мне нужно было в декабре опубликовать 4 поста из серии “ограниченный контент”, а сейчас стоило бы подводить итоги прошедшего года.
Но так получилось что декабрь был очень суетной и я в блоге так ничего и не опубликовал. А сейчас вот открыл свою тудушечку и увидел что
давно запланировал добавить lazy-loading для картинок в этом блоге.

Сперва я хотел заюзать атрибут loading, но лень (каламбур!) взяла свое и
я просто установил плагин для Hexo под названием hexo-lazyload-image

Перед деплоем я замерил скорость загрузки страниц через Pagespeed Insights, а затем померил еще раз.

Получил вот такие результаты:

Before

After

Прирост составил:

• 61 => 87 для мобильных
• 90 => 97 для десктопа

Надеюсь что это поможет сэкономить немного трафика у посетителeй сайта (у тех кто свалит не доскроллив страницу до конца, лол).

Есть правда и побочные эффекты - если быстро скроллить страницу то приходится еще ждать пока подтянутся изображения. Но в целом решение вроде ок.

Возможно нативное браузерное решение будет лучше. Возможно попробую и его.