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

Блоггер / Блог 2017 год

RSS лента новостей, Подписка по Email

      Как получить 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% до ширины экрана.
         Вот такая вот противоречивая адаптивная верстка выходит.