Оптимизация изображений на WordPress. Оптимизация скорости сайта

Приветствую Вас!

Сегодня поднимаю тему: Оптимизация скорости сайта. Оптимизация изображений уменьшает нагрузку на блог WordPress и улучшает  скорость загрузки сайта.

оптимизация изображений на WordPress

Тема по оптимизации WordPress поднималась на моем блоге, вы можете посмотреть здесь. С тех пор много чего изменилось. Есть много способов оптимизировать изображения на сайте, в этот раз я использовала плагины, о них рассказываю в в видео.

Посмотрите видео:

Плагин Imsanity - бесплатный плагин, автоматически изменяет размер при загрузке.

Плагин EWWW Image Optimizer - автоматически оптимизирует изображения при загрузке, так и ранее загруженные.

Если у Вас есть эффективные способы по оптимизации, поделитесь в комментариях.

Вам может быть интересно:

Создай блог самостоятельно

Мои услуги

Узнай как создать бизнес через интернет и автоматизировать

 

Узнай, как создать бизнес в интернет и автоматизировать с ежемесячным доходом 1000$



Обсуждение (1)
  1. Igor:

    Хочу поделиться своим опытом 2018 года. Решил оптимизировать изобржения на сайтах, которые я поддерживаю. Купил платный плагин EWWW Image optimizer. Закинул в него $100, посчитал что должно хватить с запасом. Включил оптимизацию. Процесс на первом сайте дошел до 40% и заглох. Я начал разбираться, оказывается деньги закончились. Плагин берет деньги за оптимизацию кожного thumbnail. А у меня их по десять штук на одно изображения. Поставил WP Smush, бесплатную версию. Оптимизирует за бесплатно 50 изображений, а потом нужно кнопку клацнуть в админке. Почитал я исходники, и написал скрипт который сам кнопку клацает. И так оптимизировал все изображения. Зашел в Google Pagespeed, а он все равно показывает, что изображения не оптимизированы. Если до этого было на 30-40% больше нормы, то после на 10-15%. Решил я все изображения выгрузить по ftp и оптимизировать консолью с помощью кодека Mozilla MozJpeg. Пробовал несколько раз, пока не добился того что Google Pagespeed перестал примахиваться к изображениям. Но качество изображений стало очень плохое. У упущу все эмоции и перейду дальше.

    После изучения темы в интернете оказалось что в сентябре 2017 года Google Pagespeed поменял алгоритм, теперь он хочет чтобы все изображения были меньше webp q75 + 9%. Webp в среднем сжимает на 40% лучше чем Jpeg. То есть добиться такого размера от Jpeg и сберечь качество изображения нереально. То есть свалу нет, придется использовать Webp. Но Webp поддерживается только Chrom и Opera. Firefox и Safari их не понимают. Просто пере конвертировать изображения в Webp не поможет. Но есть такой трюк. Можно создать по два файла для каждого изображения. Нормальный и wepb. И выдавать браузерам поддерживающим webp — webp, а не поддерживающим — нормальный файл. Выбор файла выполняется Apache mod_rewrite. Нужно в .htaccess добавить такой код.

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_URI} .*(jpe?g|png|gif)$
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule (.*) $1.webp [T=image/webp,E=accept:1]
    </IfModule>
    <IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
    </IfModule>
    AddType image/webp .webp

    Для генерации webp файлов нашел бесплатный плагин Opti MozJpeg Guetzli WebP. Он очень интересно сделан, чтобы не устанавливать кодеки изображений на сервер (а у меня хостинг и туда они и не поставляться) можно скачать с сайта плагина виртуальную машину для Oracle Virtual Box. В ней стоит Linux, ssh сервер и кодеки изображений (MozJpeg, Guetzli, WebP). Нужно запустить виртуальную машину у себя на компе, подключить плагин к ней по ssh. И плагин будет по ssh ганять изображения и оптимизировать их в виртуальной машине. То есть я как бы сам для себя облако. Вот этим немного извратным способом я таки оптимизировал изображения и создал для них webp дубликаты. Google Pagespeed полностью снял все претензии к изображениям.

    [Ответить]

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Остались вопросы? Пишите в личку. Контакты найдете на странице "Контакты"