Ссылки Поиск Написать В избранное NO

Как получить 100% по PageSpeed Insights за изображения

Элементарно! Использовать на сайте только .pnd, так как Гуглу он нравится практически в любом виде:


(22.05.2017 blogger) Как сделать, чтобы любое изображение проходило проверку скорости от Гугла - На все 100%

Как это тестировалось?

Я взял 2 одинаковых изображения, которые сделал из скриншота экрана.

Размером в 241 000 байт каждое. Сохранено Фотошопом для Веб и устройств.

Ширина 1024px (если сделать 800, ошибок не будет вообще).

И на скриншоте выше отлично видно, что у проверки скорости претензии есть только к .jpg картинке, которую предложено оптимизировать или скачать по ссылке готовый вариант на 79 килобайт. Качество, если честно, ужасное.


Потому скажу в блоге еще раз - инструмент PageSpeed Insights - не очень умный. Обмануть его - как нечего делать. А ориентироваться только на тест скорости Гугла для магазинов (и других сайтов, где красивая картинка товара имеет большое значение) - просто глупо.

Да, можно вот так вот обмануть тест при помощи .png изображений, получив по скорости 100%, но для пользователя это будет намного хуже, так как фотографии, например, получаются просто огромные. И я сейчас правда призываю думать в первую очередь об удобстве польователей.


Да, качественное сжатие и использование разных изображений для разных размеров экрана - отличное решение для адаптивной верстки. Но даже если хоть кто-то просто задумается и начнет сохранять картинки через Фотошоп => Сохранить для Веб, это уже станет хорошим шагом вперед по улучшению сайта.

Особенно, если изображения будут вменяемого размера, а не 6000 на 5000 пикселей. По идее, для полной (и мобильной версии) тех же 1024px хватит за глаза.


Как 1024? В адаптивной верстке нужно же по изображению на каждое разрешение!

А вот так. Можно взять и 1800px и 800. Важно, чтобы картинка на десктопе была не 5000 пикселей с измененным стилями размером, а именно столько, сколько нужно для сайта.

Но с адаптивной версией все становится сложнее, когда мы вдруг натыкаемся на Ретину, «мылящую» маленькие изображения. И для которой нужно, по идее, создавать картинки в 2 раза большего разрешения. Вот и получается, что нашу картинку в 1024 пикселя шириной мы можем спокойно показывать на том же Айпаде и даже Айфоне 6 Плюс, просто ужимая при помощи max-width: 100% до ширины экрана.

Вот такая вот противоречивая адаптивная верстка выходит.