Тест скорости страницы Google считает, что я должен оптимизировать свои изображения больше, чем размер изображения в настоящее время

Я действительно смущен этим, потому что это кажется невозможным.

Когда я запускаю свой сайт через GTMetrix, я отлично справляюсь, но благодаря анализу скорости страницы Google он настаивает, что мои изображения можно оптимизировать, например:

Сжатие и изменение размера mysite.com/…ets/img/homepage/my_image.jpg может сэкономить 78,5 КБ (уменьшение 94%).

Размер рассматриваемого изображения составляет 65 КБ, поэтому я не знаю, как Google думает, что я могу сократить его еще на 78,5.

Я использую jquery unveil и использую на нем функцию retina, может ли это быть проблемой?

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

Действительно запутался, любая помощь будет оценена по достоинству.

Спасибо


image-optimization pagespeed google-pagespeed
person cshelswell    schedule 22.01.2017    source источник
comment
Без ссылки на сайт я ничего не могу поделать. Я уверен, что посещаю более непристойные сайты, чем ваш. Поместите ссылку в комментарий. Не забудьте указать меня в комментарии, чтобы я получил уведомление.   -  person Misunderstood    schedule 14.02.2017

Ответы (2)


arrow_upward
0
arrow_downward

Перед тем, как приступить к оптимизации изображений для Google Page Speed, вам нужно различить несколько вещей.

  1. Изображения оптимизированы для разных платформ (Desktop и Mobile)
  2. Изображения оптимизированы по физическому размеру.
  3. Отчеты для изображений могут быть только «Сжатие и изменение размера» и «Сжатие». Сжатие означает, что вам нужно выполнить часть сжатия, с другой стороны, сжатие и изменение размера означает, что вам нужно использовать изображение подходящего размера для соответствующей платформы.

В зависимости от просматриваемого отчета (настольного или мобильного) ваш элемент «Сжатие и изменение размера mysite.com/…ets/img/homepage/my_image.jpg может сэкономить 78,5 КБ (уменьшение на 94%)». должен быть меньше по размеру и сжатию или просто меньше по размеру. Маржа для изменения размера изображения с помощью CSS составляет около 20%, поэтому, если у вас есть изображение 100x100 пикселей, вы можете изменить его размер примерно до 120x120 пикселей с помощью CSS, не получая отчета по этому элементу (то есть, если вы также оптимизировали его физически). Чтобы проверить это в Chrome, проверьте изображение и отметьте «Естественный» размер в селекторе элементов.

Вы можете справиться с этим несколькими способами:

  1. Медиа-запрос (обратите внимание, что в этом случае вы должны использовать фоновое изображение)
  2. Srssets
  3. JS
person Marko Manojlovic    schedule 14.02.2017
comment
Хорошо, это звучит интересно, спасибо. Я еще не слышал об этом ракурсе. Как только у меня будет возможность, я попробую это - спасибо! - person cshelswell; 19.02.2017

arrow_upward
-1
arrow_downward

В зависимости от используемого пакета сжатия изображений вы можете получить разные результаты сжатия. Я заметил, что иногда Google Page Speed ​​может оптимизировать изображение дальше, чем я мог (а иногда и нет!)

У вас есть действующий URL-адрес вашей веб-страницы? Или даже изображение? Это помогает увидеть это вживую и сравнить!

person Deano    schedule 22.01.2017
comment
Это сайт электронной коммерции более взрослого характера, поэтому подумал, что лучше не добавлять URL-адрес, но может, если это поможет. Но дело не в том, что у Google сжатие лучше. Google просто уменьшает масштаб изображения, чтобы сделать его меньше. Я могу сделать это сам довольно легко, но из-за этого мой сайт будет плохо выглядеть. - person cshelswell; 22.01.2017