Google pagespeed-load images без влияния на время рендеринга

У меня есть слайдер и загружаю изображения низкого качества, чтобы облегчить быструю загрузку.Google pagespeed-load images без влияния на время рендеринга

на окне готового я загрузке изображения надлежащего размера

function loadImages(){ 

    var images= document.getElementById('dhadimages').getElementsByClassName("dhadsecondimg"); 
    var index; 
    for (index = 0; index < images.length; ++index) { 
     images[index].src= images[index].dataset.img; 
    } 

} 

window.onload = function() { loadImages(); }

но PageSpeed рассчитывает это как часть времени рендеринга. На данный момент я загружаюсь, когда пользователь нажимает на что-то и, очевидно, это работает, но почему страницы не обнаруживают window.onload и останавливают там измерения? Существуют ли какие-либо методы, связанные с задержкой или любыми последующими событиями, с которыми нужно связываться?

источник

2015-05-15 David

Вместо того, чтобы пытаться обмануть таймер, выполните оптимизацию изображений, чтобы уменьшить размер файла для одноразовых изображений и, по возможности, сделать спрайты коллекций изображений и использовать CSS, чтобы показать их на своей странице. Таким образом, ваши номера скорости страницы действительно отражают то, с чем должен работать пользователь при использовании вашего сайта/приложения. – Kristian

@ Kristian понимает, что вы говорите, но я не считаю, что он обманывает таймер. Изображения оптимизированы, но они состоят из основного изображения и нескольких миниатюр, которые пользователь может щелкнуть, чтобы сделать основной снимок. Меньшие изображения не изменятся до большего размера, поэтому мне нужно загрузить более высокие значения. Я могу сделать это по щелчку, но потом на мобильных устройствах небольшая задержка. – David

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

Добавьте тег async к вашему скрипту (возможно, вам придется сделать это отдельным скриптом, чтобы вы могли это сделать). Браузер выполняет все ваши JS, прежде чем «говорить», что он закончил с DOM. Добавление async в качестве тега к этому скрипту позволяет браузеру продолжить создание DOM, не дожидаясь загрузки изображения.

источник

2015-05-15 18:41:49 kaz

привет спасибо за ваш ответ, к сожалению, google pagespeed подсчитывает время загрузки – David

не следует, если вы это сделаете: '' – kaz

Я согласен, это не должно. То же, что и при загрузке onload, но google pagespeed подсчитывает его по счету в виде страницы. – David

Google pagespeed-load images без влияния на время рендеринга

ответ

Смежные вопросы