Jump to content

Улучшаем GooglePageSpeed | ImageCompressor своими руками за пять минут и общие советы по приведению изображений в порядок.

Sign in to follow this  
Yoda

2,941 views

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

Но мы не про шаблоны, а про оптимизацию изображений.

 

Как вы все уже знаете, Гугл обновил алгоритм оценки скорости работы сайтов и начал учитывать  массу новых факторов, и повысил требование к старым.
Одним из наиболее важных критериев оценки является размер, количество и вес изображений.


Одним из способов облегчить этот процесс является технология LazyLoad - это просто и утилитарно, благо есть прекрасная библиотека на гитхабе для этой реализации, а если вам нужен lazyload в каруселях, то owl-карусель умеет это с пеленок.

 

Также, необходимо обратить внимание, что картинки должны соответствовать физическому размеру на экране, поэтому как раньше отдать баннер шириной 1920 точек на экран мобильника с физическим размером в 480 точек не получится. Точнее отобразить то вы можете, но Гуглу это не нравится, и правильным вариантом будет использование либо библиотеки mobile_detect, которая будет определять тип устройства и в зависимости от типа вы уже сможете включить в верстку мобильной версии уменьшенное изображение, либо использование Responsive Image разметки и атрибута srcset и опять же изначальной подготовки нескольких превью под разные типы экрана. 

 

 

Lazy - это хорошо, но что делать с физическим размером изображений, ведь увеличение сжатия картинок в стандартной библиотеке opencart  существенно снижает качество изображений. Выхода два. Либо покупать какой нибудь ОООЧЕНЬ ПОЛЕЗНЫЙ МОДУЛЬ, от которого будет больше вреда чем пользы, так как все подобные модули работают "на лету", тем самым тратят ценнейшие ресурсы для генерации страницы. Либо же все сделать своими руками за 10 минут, при условии, что у вас на хостинге установлены библиотеки jpegoptim и optipng.
Если таковые не установлены, поинтересуйтесь, может ли хостер вам их установить, а если у вас свой VPS, то самостоятельно они устанавливаются из консоли в два счета.

 

Установка для Debian/Ubuntu 


 

sudo apt-get install jpegoptim

sudo apt-get install optipng

 

Для RH/Centos


 

yum install jpegoptim

yum install optipng


После этого необходимо запустить консольные команды, которые сожмут все существующие изображение  в кеше.

Путь к папке с изображениями вы можете увидеть в config.php файле.

find {полный путь к вашей папке с изображениями}cache/ -type f  -iname "*.jpg" -exec jpegoptim --strip-all --max=80 -P --all-progressive {} \;

find {полный путь к вашей папке с изображениями}cache/ -type f -iname "*.png" -exec optipng -o7  -preserve -strip all {} \;


И после этого уже добавить в cron команды для выполнения в ночное время с периодичностью раз в день и разницей во времени в пару часов.

find {полный путь к вашей папке с изображениями}cache/ -type f -mtime -1 -iname "*.jpg" -exec jpegoptim --strip-all --max=80 -P --all-progressive {} \;

find {полный путь к вашей папке с изображениями}cache/ -type f -mtime -1 -iname "*.png" -exec optipng -o7  -preserve -strip all {} \;

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

 

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

 

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

 

И напоследок развеем еще один миф про Webp стандарт изображений. В нескольких ветках с пеной у рта, определенные люди рассказывают что это круто и вот тут будет поддержка.

Webp - это может быть и круто, но использование его в магазине на сегодня - это не очень. И тому есть очень важная причина. Кроме хрома, нормально, этот стандарт не поддерживают другие бразуеры! До момента нормальной нативной поддержки может пройти еще очень много времени. Структура модулей и кеширования модулей магазина такова, что зачастую невозможно даже определяя поддержку браузера этого типа изображений отдать корректно контент без риска показать покупателю пустые страницы без изображений.

Оптимизации изображений вышеприведенными в статье методами на 100% достаточно, для того чтобы выполнить требования гугла. Рисковать внедрением экспериментальных технологий, пусть и шибко разрекламированных - это так же как пытаться лечить смертельные болезни экспериментальынми средствами, может помочь, а может и убить.

 

На этом на сегодня все, и да пребудут с вами зеленые попугаи!

 

Небольшой апдейт. Тут пошли вопросы в личку типа: "и что, у нас будет все хорошо после этого"?

Нет - сразу не будет - приведение в порядок изображений - это лишь  малая часть, манипуляций, которые необходимо внедрить для получения высокой оценки PageSpeed на мобайл-устройствах.

  • +1 13
Sign in to follow this  


14 Comments


Recommended Comments

Подскажите пожалуйста, Путь к папке с изображениями вы можете увидеть в config.php файле.

Спойлер

// DIR
$dir = dirname(__FILE__);
define('DIR_APPLICATION', $dir.'/catalog/');
define('DIR_SYSTEM', $dir.'/system/');
define('DIR_LANGUAGE', $dir.'/catalog/language/');
define('DIR_TEMPLATE', $dir.'/catalog/view/theme/');
define('DIR_CONFIG', $dir.'/system/config/');
define('DIR_IMAGE', $dir.'/image/');
define('DIR_CACHE', $dir.'/system/storage/cache/');
define('DIR_DOWNLOAD', $dir.'/system/storage/download/');
define('DIR_LOGS', $dir.'/system/storage/logs/');
define('DIR_MODIFICATION', $dir.'/system/storage/modification/');
define('DIR_UPLOAD', $dir.'/system/storage/upload/');

 

Если взять мой... какой будет полный путь?

 

P.S. No such file or directory

Edited by Torvael

Share this comment


Link to comment

Уберите пожалуйста наныр из комментария.

Ваш путь вы можете узнать двумя способами, либо посмотреть в php_info();

Либо сделать просто скрипт 
 

<?

$dir = dirname(__FILE__);

echo($dir.'/image/');

 

Share this comment


Link to comment
11 минут назад, kolchenko сказал:

Огооооонь! Спасибо большое мастер за наводку тебе! Получилось)

А сколько было, сколько стало ?

Share this comment


Link to comment

Если вопрос о весе файлов, то на фото видно существенную разницу. Если про google pagespeed, то тоже все ровно) + пару тройку пунктов к оценке.

Снимок экрана (6)_LI.jpg

Снимок экрана (6).png

Снимок экрана (7).png

Share this comment


Link to comment

Подскажите новичку, как установить Lazyload с GitHub? Архив вроде скачал, а что дальше делать с ним?

Share this comment


Link to comment
47 минут назад, johngalt1 сказал:

Подскажите новичку, как установить Lazyload с GitHub? Архив вроде скачал, а что дальше делать с ним?

 

Извините, но банально учить программирование.
в 99% случаев если вы задаете такие вопросы, у вас ничего не получится.


Да и внедрение lazy, чтобы не потерять индексацию изображений в поисковиках - та еще задача.

Share this comment


Link to comment
В 17.12.2018 в 14:54, Yoda сказал:

Да и внедрение lazy, чтобы не потерять индексацию изображений в поисковиках - та еще задача

https://github.com/verlok/lazyload

Не теряются, ссылку могу в личку скинуть если это понадобиться =)

Хотя задача да, еще та =)

Share this comment


Link to comment
4 часа назад, pimur сказал:

https://github.com/verlok/lazyload

Не теряются, ссылку могу в личку скинуть если это понадобиться =)

Хотя задача да, еще та =)

 

Черт, как вы плохо про меня думаете.

Я специально не давал ссылку ни нак какие библиотеки, чтобы не было соблазна у начинающих начать творить.

 

Что касается набюдений по Lazy в целом.

Во первых, когда у вас допустим 3-4мб изображений и 200 штук на странице, пытаетесь из все обернуть в lazy - получите еще больший лаг при инициализации слушателей на элементах чем, сделали бы это просто так. Во вторых,  я же вижу часто как это реализовывают. По моему из героев-спициализдов, никто ни разу не сделал нормальный те <noscript>.

Share this comment


Link to comment
8 часов назад, Yoda сказал:

у вас допустим 3-4мб изображений и 200 штук на странице

вот http://prntscr.com/mz1ssg поставил лимит на 10000, хотя в категории сейчас 508, а значит показываем 508

в итоге если прокрутили до конца, страницуа весит 10 мб.

Пруф прогрузки без лагов ссылка

Share this comment


Link to comment

Я незнаю почему @markimax не пришьет эту библиотеку к своему джеткешу. Потому что она на сколько я помню, единственная - которая работает адекватно. Если мне не изменяет память, на момент внедрения. Я вроде много времени потратил на изучения и знакомства, перед выбором lazy.

Share this comment


Link to comment

Кстати спасибо за пост, пригодиться для своего на будущее.

Share this comment


Link to comment

Если честно, кроме того что какой-то неуч не может сам ничего толкового придумать в своих поделках, смысла в остальном тексте я не понял. 

580 картинок десять мегабайт. Это к чему? 

Тут каждый второй автор типа быстрого шаблона показывает демо с зелененькими цифрами, забывая что магазин это не голый шаблон. А когда на боевом магазине десяток сторонних скриптов подвешивает себя на весь DOM вот эти фокусы с lazy могут вылиться а очень нелицеприятные последствия. И именно поэтому я вскользь упомянул эту тему, не раскрывая её подробно. 

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

  • +1 1

Share this comment


Link to comment
1 минуту назад, Yoda сказал:

А когда на боевом магазине десяток сторонних скриптов подвешивает себя на весь DOM вот эти фокусы с lazy могут вылиться а очень нелицеприятные последствия.

Ах да, про это не подумал. Ну тут ничего не поможет на самом деле. От всего лишнего лучше избавляться.

 

3 минуты назад, Yoda сказал:

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

ну эт ни так, так как ссылка

Все переделывпается сейчас. В топку готовые модули, все только под потребности.

Share this comment


Link to comment
Guest
You are posting as a guest. If you have an account, please sign in.
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.