Здорово, что вы нашли полезной статью о прогрессивной загрузке изображений. Всегда интересно видеть, как сайты предлагают варианты использования и получают хорошие результаты.
Я ознакомился с различными версиями сайта, которые вы пробовали. Я ожидал, что отложенная загрузка еще больше сократит время загрузки, предполагая, что она не будет загружать изображения, находящиеся за пределами области просмотра. Однако, похоже, что браузер все еще запрашивает их, поэтому вы не получаете никакой выгоды от его использования. Я не углублялся в реализацию плагина и его параметры, но похоже, что его можно улучшить.
Что касается метода «прогрессивной загрузки изображений», если вы уже лениво загружаете свои изображения, это не должно увеличивать время загрузки. На самом деле он используется для улучшения воспринимаемого времени загрузки сайта за счет размещения некоторого контента в заполнителях вместо пустой области. На самом деле, при его реализации у вас возникнут дополнительные запросы на заполнители, что должно привести к увеличению времени загрузки.
Используя событие загрузки jQuery, вы измеряете, когда все ресурсы загружены. Это включает изображения, включенные в начальную разметку. В вашем случае вы включаете полные изображения в разметку как на странице по умолчанию, так и на странице с отложенной загрузкой, но гораздо меньшее изображение в качестве миниатюры в версии pil.
Лучший способ оценить эффективность вашей страницы — спросить себя, что вы хотите измерить. В вашем случае это, вероятно, содержимое выше сгиба. Для этой веб-страницы тест очень полезен, так как вы можете использовать просмотр диафильма, чтобы увидеть количество отображаемого контента.
Я запускал разные версии через webpagetest:
В наши дни SpeedIndex считается одним из лучших способов оценки производительности страницы. На время загрузки страницы может влиять контент, который загружается ниже сгиба, что дает вам больше времени, даже если все видимые элементы в области просмотра уже там.
