Устраняем пункт «Оптимизируйте изображения» в 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. А теперь вы скажите какой из примеров лучше всего подходит вам, и помогла ли вам статья?

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(7 голосов, в среднем: 3.9 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Петр

    Ну мне в принципе этот пункт не особо мешает. Но полезно было узнать как его удалить в PageSpeed Insights.

  • Дмитрий

    Статья помогла. Давно хотел уже удалить этот пункт. Огромное спасибо за ценную информацию.

  • Игорь

    Опять таки, проще сразу сжимать изображения в Microsoft Office Manager, которые будут самого минимального размера. Можно выбрать пункт «для электронной почты» и загружаться такие изображения будут быстро.

  • Александр

    Неплохая статья, хорошо расписано. Мне больше TinyPNG понравился, меньше заметны потери качества изображений

  • Александр

    Кстати этим методом пользуюсь, после каждой новой статьи проверяю, иногда приходится по рекомендации гугл картинку сжатую скачивать и закидывать. Лучше уделить 5 минут на эту процедуру, чем блог будет впоследствии все дольше и дольше грузится=))

    • Лифанов Валентин

      Только надо проверять качество картинок которые выдает гугл.

  • witos1

    Проверяю на сжатие уже все сжато ни хрена пишит сожмите сжимаю по новой 0% сжатия уже не куда пишит сажмите что за хрень.

    • Лифанов Валентин

      В какой из страниц такое встречается?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.