Страницы-штраф за использование srcset

Отображение сетчатки и не сетчатки на соответствующих устройствах, например:

<picture>
   <source srcset="non-retina.jpg, retina.jpg 2x">
   <img src="non-retina.jpg">
</picture>

Работает. Но Google Pagespeed Insight сообщает, что он не может отобразить это, пока CSS не загружен, и мы получаем за это штраф. Однако только в мобильном представлении - это единственный случай, когда Pagespeed Insights все равно визуализирует Retina-изображения.

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

Однако этот код работает без каких-либо претензий со стороны Pagespeed Insights.

<picture>
  <img src="non-retina.jpg">
</picture>

Что нам не хватает? Есть ли какая-то зависимость от того, что браузер должен читать правила стиля, прежде чем узнает, какой источник / srcset-image взять?

Тестовый набор:

Вот его тестовая страница: http://pagespeed-srcset-nopicturefill.slople.com/ ... и вот его результаты: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&tab=mobile


css pagespeed google-pagespeed srcset
person Raphael Jeger    schedule 09.09.2016    source источник
comment
вы используете полифил для поддержки тега изображения в старом браузере?   -  person kaosmos    schedule 09.09.2016
comment
Нет. То же самое происходит, когда вы просто делаете ‹img src = non-retina.jpg srcset = non-retina.jpg, retina.jpg 2x›   -  person Raphael Jeger    schedule 09.09.2016
comment
согласно scottjehl.github.io/picturefill/#support кажется некоторым браузером, который не не полностью поддерживает спецификацию picture / srcset, есть проблемы с HTTP-запросами. Я не знаю, влияет ли эта проблема на результаты скорости страницы, хотя   -  person kaosmos    schedule 09.09.2016
comment
Кроме того, я использую изображение / srcset в ряде готовых к производству электронных магазинов, и я не вижу никаких жалоб на это по скорости страницы: developers.google.com/speed/pagespeed/insights/ (pagespeed жалуется на другие проблемы). Я использую полифил Picturefill, о котором упоминал выше, теперь я использую смартфон, и я не могу провести никакой тест, чтобы проверить, имеет ли это значение или нет   -  person kaosmos    schedule 09.09.2016
comment
посмотрите еще раз, Pagespeed жалуется на блокировку рендеринга css / js на вашей странице. У нас не будет этого на нашей странице (оценка 100/100), если мы удалим srcset.   -  person Raphael Jeger    schedule 09.09.2016
comment
Спасибо, что указали на это, я посмотрю на это поближе, как только смогу. Ваш вопрос поднимает интересный момент, так как скрипты блокировки, которые перечисляют скорость страницы, не участвуют напрямую в рендеринге изображения, я никогда не понимал, что это может повлиять на производительность.   -  person kaosmos    schedule 09.09.2016
comment
Я получаю 100/100 баллов для мобильных устройств с той же разметкой, что и в вашем примере, и с файлом CSS, загруженным в нижний колонтитул: developers.google.com/speed/pagespeed/insights/ Можете ли вы предоставить ссылку на затронутую веб-страницу или сокращенный тестовый пример, который показывает проблему со скоростью страницы?   -  person ausi    schedule 10.09.2016
comment
Есть обновления по этому поводу? Получение такого же штрафа.   -  person oligofren    schedule 29.09.2016
comment
@ausi наша затронутая страница - www.desirio.com ... иногда она есть, иногда нет   -  person Raphael Jeger    schedule 24.02.2017
comment
Вы ничего не упускаете; Pagespeed неправильно предполагает, что ваши изображения можно оптимизировать, сравнивая размеры визуализированного изображения с разрешением файла. Я бы не рекомендовал сосредотачиваться на самой оценке, а скорее на реальных показателях: критический путь рендеринга, время до интерактивности и тесты на медленных соединениях и устройствах низкого уровня, происходит ли значимая отрисовка в течение первых 3 секунд в 3G? Есть ли FOIT? Оценка Pagespeed не должна существенно влиять на результаты поиска, поэтому я не считаю это наказанием.   -  person Tigran Petrossian    schedule 08.07.2017
comment
Думаю, вы можете найти ответ здесь: разработчики .google.com / web / basicals / design-and-ux / responsive /.   -  person MaGiO    schedule 19.03.2020

Ответы (3)


arrow_upward
1
arrow_downward

Добавьте свой css в заголовок и используйте атрибут defer в теге ссылки. Это позволит сначала загрузить css на стороне клиента, но прочитать его после загрузки всего документа.

person Nikhil Kumar    schedule 20.06.2020

arrow_upward
0
arrow_downward

Отказ от ответственности: это может не относиться к исходному вопросу, так как он был опубликован в 2016 году.

TL; DR: Обратите внимание на версию Lighthouse, которая обычно указывается в конце отчета! В зависимости от того, какой инструмент вы используете для измерения показателей производительности, ваши результаты могут сильно отличаться!

Судя по всему, алгоритм Google Lighthouse различается между версиями довольно сильно. Например, на момент написания статьи, 19 мая 2021 года, я написал веб-сайт и провел на нем различные тесты, чтобы увидеть оценку производительности Lighthouse. Вот таблица для сравнения:

device 7.2.0 7.3.0 7.5.0
desktop 94 94 95
mobile 92 72 95

Чтобы не усложнять:

  • Я показываю только результативность (это ваша общая ценность)
  • Я провел тесты 3 раза и усреднил их, чтобы учесть незначительные колебания.

На момент написания:

  • Lighthouse 7.2.0 поставлялся на MacOS Google Chrome
  • Lighthouse 7.3.0 используется PageSpeed ​​Insights
  • Lighthouse 7.5.0 будет отправлен в течение 2 недель на PageSpeed ​​Insights < em> и Google Chrome 92
person Alexander Kucheryuk    schedule 19.05.2021

arrow_upward
-2
arrow_downward

Я не уверен, что это решит вашу проблему, но вот что:

<picture>
   <source srcset="non-retina.jpg, retina.jpg 2x">
   <img src="non-retina.jpg">
</picture>

Эквивалентно этому:

<img src="non-retina.jpg" srcset="retina.jpg 2x">

Может это поможет?

person Mattijs    schedule 29.11.2017
comment
Я не думаю, что это эквивалентно. - person Stephen M Irving; 07.01.2020
comment
Почему нет? Мне кажется, что обе версии должны отображать версию без сетчатки в среде с низким разрешением и в браузерах, которые не поддерживают picture или srcset, а также версию с сетчаткой в ​​среде с высоким разрешением и совместимыми браузерами. - person Pharaoh; 11.01.2020
comment
Не эквивалентно, ‹picture› создает резервное изображение, а ‹img src srcset› не - person Antonio Morales; 27.05.2020