Устраняем пункт Оптимизируйте изображения” в PageSpeed Insights

Приветствую на wpsovet.ru. Как и обещал сейчас буду разбирать следующий пункт PageSpeed Insights, который гласит так “Оптимизируйте изображения, правильный формат и сжатие изображений позволяет сократить их объем.” Я думаю из названия все понятно, ваши графические элементы на сайте слишком много занимают места, а соответственно и дольше загружаются браузерами пользователей.

Последствия

Чем для вас грозит эта проблема:

1. Просто посетители будут от вас уходить, не дождавшись ответа сайта.
2. Понижение в выдаче поисковиков. Если к вам пришел посетитель из поиска, то у роботов яндекса и гугла включается режим наблюдения, они смотрят как ведет себя человек на вашем сайте, и если он просто закрывает страницу не дождавшись даже загрузки, то это просто минус минусов.
3. Место на хостинге не резиновое, у кого-то вообще 500 мб, и такое расточительство не простительно.

И это еще не полный список всех проблем, а всего-то надо на пять минут подольше посидеть, и все будет отлично. У меня для вас четыре метода, но приоритетный только один, но он будет в самом конце статьи, так что читайте дальше.

Способы угодить правилам

1. Плагины, я посмотрел много из них, мало того что сам факт его наличия на блоге, так еще и сами по себе хреново работают. Я нашел штук наверное пять, и не остался в восторге. Многие просят зарегистрироваться, и получить свой API ключ, конечно бесплатный, но в последствии могут запросить денежку. Степень сжатия вообще никакая, я сам увеличиваю результат в разы. Короче, если вы не привыкли запариваться, то это для вас, я ничего советовать не буду, так как достойных не нашел, не для меня.
2. Сервисы, тут я вам помогу, у меня есть один в загашнике, он очень крутой, название у него очень длинное просто вот вам статья, там ничего сложного, все расписано и на мой взгляд стоит внимания.
3. Третий пункт неоднозначный 50/50, тут решение предлагает сам PageSpeed Insights, он предоставляет уже сжатый вариант собственного приготовления. Смотрите на скриншот ниже, будет все понятнее.
   
   Если у вас что-то не в порядке, то гугл сам предоставит все оптимизированное содержимое, только пользуйтесь. Что качается JS и CSS, то там все в порядке, но об этом позже, а вот картинки, придется посмотреть и проверить. Нажимайте на ссылку  “изображения, ресурсы JavaScript и CSS” и к вам на компьютер автоматом будут загружены все неудовлетворяющие файлы, уже в исправленном формате, запакованные в архив. Далее открываем, и там три папки и один html документ.
   
   С директориями CSS и js разберемся попозже, в других постах, нас сейчас интересует image, открываем ее (предварительно распаковать архив), и видим там уже оптимизированные картинки. Я не буду приводить скриншот, там вы ничего нового не увидите. Но без подсказки разобраться будет трудно, и наш друг google даже сделал нам специальный файл с путями расположения всех интересующих нас изображений. Открываем “MANIFEST”, хоть через сам браузер, в нем все пути где лежат “не очень хорошие объекты”.
   
   Как видно из снимка, то все расписано очень подробно. Если вас устраивает качество, то смело заменяйте оригиналы на скаченное из PageSpeed Insights, тем более адреса у вас есть.

   Делайте обязательно резервные копии, вдруг что, бывает всякое. Но вообще гугл молодец, настолько все продумать, и даже предоставить готовый пример, я снимаю шляпу и аплодирую.

4. Ну вот и добрались, до моего последнего раздела, и самого важного. Не буду оригинален, если вы следите за блогом, то моя прошлая запись была про программу RIOT, вот она нам и пригодится, никто из приведенного списка не дотягивают до нее. Все про этот полезный софт написано здесь. Там все есть, и где скачать и как пользоваться, и достоинства и недостатки Говорю сразу же, все остальное так для разогрева, а этот пункт самое главное. Все что сжималось в этой программе никогда не попадало в игнор правил pagespeed’а, а качество просто на высоте.

Вывод.

На этом у меня все, мои итоги таковы, плагины не стоят внимания вообще, интернет ресурсы хорошо (может быть и лучше), сам google справляется на половину, а вот стационарный софт справляется просто супер.

P.S. А теперь вы скажите какой из примеров лучше всего подходит вам, и помогла ли вам статья?