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

Дата: / Автор поста:
Рубрика:

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

Последствия.

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

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

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

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

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