Отложенная загрузка изображений в DLE и PageSpeed Insights
В DLE есть стандартный функционал отложенной загрузки изображений средствами браузера или JS скриптом. Но возникает проблема, когда PageSpeed Insights просит убрать lazyload на первое изображение, т. е. data-src не должно появляться на первом изображении. Однако в DLE это не так! При выводе {short-story} все картинки, если они есть - выводятся с data-src. Вчера этот пункт сделал здесь на блоге…
В помощь пришёл старый хак (на DLE 18.0 работает оже он), который из поля краткой новости удаляет изображение, и текст краткой новости выводится другим тегом.
В результате, вывод краткой новости, вместо
{short-story}стал выглядеть так:
<img src="{image-1}" width="765" height="100%" alt="{title}" style="display:block;margin-left:auto;margin-right:auto;" fetchpriority="high">
{short-story-text}Далее пункт 22 из поста чтобы изображение загружалось сразу.
Итог: первое крупное изображение загружается сразу, удовлетворяет всем требованиям PageSpeed Insights и пункт отрисовки самого крупного элемента на странице — выполнен.