Google Page Insight: 100 баллов для мобильных устройств .. для компьютеров 80 одинаковых изображений

пытался исправить это весь день, но, похоже, я больше не прогрессирую. Я минимизировал все ресурсы, переместил их в конец, асинхронно загрузил javascript, сжал изображения... но все равно оценка рабочего стола всего 83/100, и все из-за изображений.

Мобильная страница получает 100/100 баллов при использовании тех же изображений. Изображения на моем веб-сайте оптимизированы с помощью ImageOptim (для Mac), и я подключил Kraken.io для оптимизации всех изображений с помощью их инструмента. Kraken.io дает наилучшие результаты (сохраняется больше всего КБ), но, тем не менее, рабочий стол не поднимается с 83/100.

Единственный способ повысить оценку — выбрать качество 10% (93/100) или использовать меньше изображений (85/100) на главной странице.

У меня закончились варианты... я говорю о странице https://pendo.nl, если кто-то хочет увидеть результаты.

Заранее спасибо.


google-pagespeed image-compression
person Joshua - Pendo    schedule 20.12.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы ответили на свой вопрос в своем заголовке - важная часть - «те же изображения». Возьмем, к примеру, это изображение. Вы используете его в 320x270px в настольной версии, в то время как исходное изображение имеет размер 800x600px (размер изменен с помощью CSS).

Google Page Insights рассматривает это как загрузку дополнительных байтов без необходимости в этом и предлагает улучшение в отчете (кроме физической оптимизации изображения). В основном вы должны использовать исходное изображение ~ 320x270 для настольной версии.

Существует поле изменения размера CSS, которое позволяет GPI, и я думаю, что это поле составляет около 20% (я никогда не проверял его, но обычно это работает для меня, если у вас исходное изображение шириной 100 пикселей, вы можете изменить его размер с помощью CSS вверх/вниз до 120/ 80px в ширину). Вот почему предупреждение «Сжатие и изменение размера», когда вы делаете отчет, а не просто «Сжатие».

Есть несколько способов справиться с этим.

  1. Media Query (обратите внимание, что в этом случае вы должны использовать фоновое изображение)
  2. Srssets
  3. JS
person Marko Manojlovic    schedule 21.12.2016
comment
Спасибо! Таким образом, я предполагаю, что мобильный телефон использует полное изображение 800x600, поскольку его ширина составляет 100% в мобильном представлении. Думаю, я просто заставлю код генерировать эскизы, чтобы решить проблему, и вернусь сюда, если мне это удастся! - person Joshua - Pendo; 22.12.2016