Модуль Image COMPRESSOR & Watermark & WebP & Lazy Load etc. by Sitecreator [Поддержка]

[chukcha]

8 минут назад, PoliteX сказал:

делайте цитату полностью, а не обрезая, в таком случае

 

из этого делаем вывод, что отсутствие  webp, Lazy Load не сильно повлияли на попугаи.

в таком случае, как удалось добиться высоких оценок

как ни странно webp не есть обязательное условие, а можно "хорошо" сжать тот же jpeg
Берете чистую сборку  с демо
https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=http%3A%2F%2Fdemo2302.slasoft.kharkov.ua%2F&tab=mobile

И опа.. что случилось?

https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=http%3A%2F%2Fdemo2302.slasoft.kharkov.ua%2Fcatalog%2Fdesktops%3Flimit%3D50

 

Т.е. а если хорошо ужать картинки... то.. 100 не будет Попугаи начнут ругаться, что не хватает еще чего-то
 

[PoliteX]

как по мне, так попугаи лишь косвенный показатель что с сайтом что-то не так, если их там всего 10. 

 

1 час назад, spectre сказал:

стоит попасть на некешированную страницу и что мы видим 

 

хороший пример.

[sitecreator]

6 часов назад, PoliteX сказал:

если тут ничего не используется от Вашего модуля, зачем сюда это выкладывать? 

 

 

Используется оптимизация (как для снижения веса, так и для более комфортного отображения) белых полей:

 

Водяной знак используется.

В плане сжатия используется mozjpeg + optipng.

 

Просто нужно понимать, что совсем недавно гугл до смены своего алгоритма расчета попугаев только за оптимизацию изображений накидывал 30-50 баллов сразу.

Это было и это факт. Во многих случаях достаточно было лишь оптимизации картинок.

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

Если у вас товары используют картинки в PNG, то общий вес можно снизить в несколько раз за счет WEBP. Немало встречал таких магазинов, для которых поставщики дают изображения только PNG, да еще с прозрачным фоном нередко, а это уже колоссальный вес получается.  За счет WEBP  можно его снизить в 2-7 раз.

 

Сейчас же с приходом нового алгоритма гугла, например, если у вас JS крутится секунд 15, то даже если вы с 10М снизите вес изображений до 1М, то гугл может отделаться добавлением вам 10 попугаев, не смотря на то, что вес загружаемой страницы существенно снизился. Т.е. возросла роль других факторов.

Но это не означает, что реальный пользователь не заметит ускорения страницы за счет снижения веса в несколько раз. Гугл, разумеется, перестает ругаться на картинки при этом.

 

В итоге что?

Рекомендации гугла в плане изображений выполнили? ДА.

Вес изображений снизился и за счет этого страница стала грузиться быстрее? Да.

Гугл оценил это в виде дополнительных баллов?  Если критических проблем нет в других местах, то гугл накидывает, например,  10-30 баллов. Если есть критические места, то над ними нужно также работать, при наличии серьезных проблем (по мнению гугла) он накинет в лучшем случае баллов 10 или вообще ничего

 

Почему автомобиль на новой резине, но с неисправным двигателем медленно едет? Вес изображений == баллы гугла?

Я давно написал эту статью в FAQ.

 

Говорю все как есть. Лишь одна из задач модуля - это оптимизация изображений за счет сжатия.

Если у вас не работает сжатие или не работает создание webp и его вывод, то тогда вопросы ко мне по работе модуля Компрессор.

Если у вас не взлетели баллы с 20 до 90 в гугле - это уже не к модулю Компрессор вопрос. Рекомендации гугла выполнили в плане изображений? Значит, нужна оптимизация остального тоже.

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

[sitecreator]

3 часа назад, spectre сказал:

 

просто быстрый ответ сервера, передергивание фактов и немножко вранья

  

стоит попасть на некешированную страницу и что мы видим 

  



 

Вы правы. Вы немножко соврали.

задали 500 товаров для вывода?

Так таким образом можно любой сайт опустить.

 

При том, что максимально можно выбрать 96.

И при этом удивляться, что некешированная страница на 500 товаров быстро не загружается?

 

Пользователь же просматривает за счет кнопки "показать еще"

 

и не будет в смартфоне набирать в адресной строке limit=500

 

некешированный ответ для 500 товаров на страницу 1.2 сек. даже не знаю к чему вы тут можно докопаться.

 

 

Просто я сообщение писал не столько относящееся к модулю как таковому.

Просто проскочило ранее, что Sitecreator не умеет делать быстрые сайты, да и сайты вообще.

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

Это просто пример моей работы.

[chukcha]

3 часа назад, spectre сказал:

 

просто быстрый ответ сервера, передергивание фактов и немножко вранья

 

стоит попасть на некешированную страницу и что мы видим 

 

а если 100(0) ctrl+f5 ctrl+f5 ctrl+f5 -

[spectre]

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

 

но говносеошники вбили людям в голову что меньше 80 попугаев это уже не сайт 

 

ведь даже 500 товаров открываются медленнее никак не в 4 раза

 

если бы это было важно вы думаете мы бы видели такое? 

 

 

или такое 

 

 

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

 

в данный момент подгон попугаев  pagespeed это стрижка бабла с лохов под соусом "гугл вас полюбит" 

 

 

сайт работает быстро, я его "знаю"

 

могу сказать что говнокода там не видел или его ничтожное количество 

 

возможно это связано с тем что владелец магазина сверхъадекватный человек который правильно ставит задачи, но это уже оффтоп) 

[sitecreator]

2 часа назад, PoliteX сказал:

хороший пример.

 

а что же вы не полностью цитируете?

давайте будем любой сайт проверять принудительно задавая limit=500?

 

Повторюсь.  Я всего лишь показал пример боевого сайта. Просто как пример комплексной работы.

За счет сжатия выигрыш в весе на уровне 30%-40%. Я нигде не писал, что сайт работает быстро по версии гугла лишь благодаря этому.

Когда я делал сайт, то вообще на гугл не смотрел. Просто была задача - сделать быстрый сайт.

Просто был вопрос: а умеет sitecreator делать сайты?

Я отвечал на этот вопрос.

[markimax]

На страницах выдачи баллов pagespeed
Не обращали внимание на "это"?

[sitecreator]

6 минут назад, spectre сказал:

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

 

да это так и есть.

некешированный вариант рассматривать нет смысла.

некешированный будет отдан 1 раз, к примеру, но потом 1000 раз уже кешированный.

И, верно, формально попугаи погоду не делают.

Важна только фактическая скорость и производительность.

 

Нет смысла фанатично смотреть в сторону попугаев. Тут вообще никто и не спорит.

Если заказчик решил, что webp, позволяющий в среднем сжать раза в два (и более), будет полезен в его случае, то пусть использует. В любом случае при этом лишний трафик для смартфонов уменьшится, что будет положительно.  Но если заказчик считает, что не нужен ему webp, то тоже будет прав.

[sitecreator]

В качестве демонстрации как влияют изображения на "мозги" гугла.

Расценивать можно как прикол!

Вот тут гугл глюканул и "забыл" загрузить вообще изображения. И сразу 90+.

Это при совершенно исправном сайте.

Убедительная просьба читать внимательно и не воспринимать как демонстрацию достижений.

 

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

 

[chukcha]

10 минут назад, sitecreator сказал:

Вот тут гугл глюканул и "забыл" загрузить вообще изображения.

а еще и стили
Я подобное проверял под различными впн, греша на доступность
причем на мобильной версии все хорошо, на десктопной - проблема

[sitecreator]

8 минут назад, chukcha сказал:

а еще и стили

 верно.

какой-то непонятный глюк гугла.

 

При желании можно использовать некий прием для обмана гугла, а именно - загружать стили и картинки с определенной задержкой когда гугл уже завершил свой тест.

Разумеется, это будет примитивный обман, не имеющий ни малейшего отношения к реальной производительности. А потому это никому не нужно кроме любителей посмотреть фокус.

[markimax]

34 минуты назад, sitecreator сказал:

 

При желании можно использовать некий прием

 

Почему? Это они называют оптимизация

 

4 часа назад, markimax сказал:

На страницах выдачи баллов pagespeed
Не обращали внимание на "это"?

Я так загружаю метрику и google аналитикс, через ajax с задержкой 1 с  - все отлично загружается и отслеживается (кроме 1 с, а это вообще не критично и меньше процент отказов заодно ) и в учет баллов не попадает (блокировка сторонним кодом, потому что не блокирует уже). Можно так добиться - без единой "ошибки", но не факт что даже без единой ошибки google попугаи greenpeace дадут 100-ню

[shoputils]

17 часов назад, markimax сказал:

 

Почему? Это они называют оптимизация

 

Я так загружаю метрику и google аналитикс, через ajax с задержкой 1 с  - все отлично загружается и отслеживается (кроме 1 с, а это вообще не критично и меньше процент отказов заодно ) и в учет баллов не попадает (блокировка сторонним кодом, потому что не блокирует уже). Можно так добиться - без единой "ошибки", но не факт что даже без единой ошибки google попугаи greenpeace дадут 100-ню

 

Шутка, но...

 

В index.php в самое начало добавить:

if (isset($_SERVER['REMOTE_ADDR']) && ((ip2long($_SERVER['REMOTE_ADDR']) > ip2long('66.249.64.0')) && (ip2long($_SERVER['REMOTE_ADDR']) < ip2long('66.249.95.255')))) {
    die('It`s Worked!');
}

И всегда будет 100 попугаев

 

Но при этом сервис все равно продолжает отжигать

 

Цитата

Постарайтесь уменьшить количество запросов и размеры передаваемых данных - 1 запрос

 

[Justemny]

Здравствуйте, я хочу купить модуль у вас за 2.500 руб, скажите он будет работать корректно на версии opencart 3.0.2.0 с шаблоном FRACTAL? Либо вы можете сделать адаптацию  под этот шаблон? Спасибо.

[sitecreator]

5 часов назад, Justemny сказал:

он будет работать корректно на версии opencart 3.0.2.0 с шаблоном FRACTAL

 

Здравствуйте.

С данным шаблоном проблем не припоминаю.

Но вам нужна версия модуля под 3-ку. Она есть тут на форуме.

 

 

Адаптация возможна для любого шаблона.

Самое сложное, что встречал - это шаблон journal 3. Фактически это уже не шаблон, а переделанный опенкарт.

Но и с этим шаблоном нет проблем если не включать адаптивный ресайз средствами шаблона, а воспользоваться таким ресайзом в самом модуле Компрессор.

Проблемы может вызывать только включенный в шаблоне собственный ресайз.  Но таких шаблонов буквально единицы. И они тоже работают при обозначенном выше условии (отключается в шаблоне свой ресайз).

 

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

 

 

Адаптивный ресайз можно включить в модуле Компрессор.

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

 

 

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

[sitecreator]

Покажу как влияет сжатие изображений JPEG и PNG на общий вес изображений и на баллы гугла.

Возьмем НЕоптимальный способ оптимизации.  Без использования WEBP. И без использования Lazy Load. 

Оптимизация PNG за счет optipng будет довольно вялой по сравнению с оптимизацией за счет WEBP.

Но даже только за счет оптимизации mozjpeg мы снизили общий вес изображений на 34% и получили небольшой прирост баллов гугла pagespeed.

На странице остались довольно большие по весу PNG изображения и их суммарный вес в районе 50% от всех изображений.

 

Кроме того на сайте хватает и других проблем для оптимизации, например, JS и

Цитата

Уменьшите влияние стороннего кода Сторонний код заблокировал основной поток на 860 мс

 

 

 

 

 

Вес изображений ДО и ПОСЛЕ

 

 

 

 

 

 

Несложно посчитать, что снижение веса с 1.15М до 783К привело к снижению веса на 34%.

 

Сравнение попугаев ДО и ПОСЛЕ

 

 

 

 

Много или мало накинул попугаев Гугл?

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

Разумеется, что оптимизация изображений без WEBP и Lazy Load будет неполной. О чем Гугл и пишет в своих рекомендациях.

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

Да, вы не получили 90+ попугаев. И это неудивительно. Ибо я никогда не говорил, что можно "выехать" на одной лишь оптимизации изображений при наличии прочих проблем.

Скажем так, было бы у вас 84 балла, то за счет mozjpeg вы получили бы заветные 90+.

А если бы добавили WEBP и Lazy Load, то могли рассчитывать уже и на 95+.

 

вот это (PNG) можно оптимизировать лишь за счет WEBP. Optipng позволяет в лучшем случае оптимизировать на 20%, а WEBP способен снизить вес PNG в несколько раз.

 

 

 

Я давно написал статьи в FAQ:

 

Как Гугл измеряет скорость загрузки изображений. Чем она отличается от общей оценки Гугла PageSpeed.

 

Почему автомобиль на новой резине, но с неисправным двигателем медленно едет? Вес изображений == баллы гугла?

 

FAQ является неотъемлемой частью описания модуля Компрессор. Именно в нем подробнейшим образом расписаны многие моменты и сделан акцент на разные нюансы.

Я всегда говорил и говорю:

 

Цитата

Не стоит путать попугаев со скоростью загрузки изображений.  Особенно в том случае, когда на сайте не оптимизированы масса других важных моментов.

 

До изменения своего алгоритма оценки Гугл pagespeed insights за оптимизацию лишь изображений накидывал очень много баллов, не смотря на то, что с JS и прочим могли быть большие проблемы. Например, с показанным здесь конкретно сайтом легко могла быть ситуация когда вместо 6 баллов гугл накинул бы 30 или 50 баллов, т.е. сайт оказался бы в зеленой зоне.  Люди, которые занимаются оптимизацией не первый день, могут подтвердить, что именно так было 2 года назад и так было еще в прошлом году до смены алгоритма.

 

Тот, кто умеет читать, думаю, что способен прочитать FAQ к Модулю Компрессор и не задавать вопросов "а почему не 90+ попугаев?".

Прошу заметить, что нигде в описании модуля не указано, что лишь благодаря ему вы достигните 90+  с низкого старта.

 

Читайте FAQ.  Там все с цифрами показано.

 

=============

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

 

[TeleSmile]

Роман, в международные день распродажжж

Дайте огня, дайте СКИДКУЁЁЁЁ!

[sitecreator]

В 11.11.2019 в 12:56, TeleSmile сказал:

Роман, в международные день распродажжж

 

снизил на 600 руб.

 

upd: скидки закончились

[sitecreator]

Поддержка экранов Ретина кому-то интересна?

Если да, то могу добавить.

Как бы узнать голоса, кому это реально нужно?

Видимо, нужно создать голосовалку в отдельном блоге.

 

И купил бы потенциальный заказчик такой модуль, который бы реализовал эту функцию?

Или это из разряда "ну, бесплатно бы поставил, а деньги платить не стану".

 

Версию 1.17 на днях выложу.

Она немного быстрее чем 1.16.*.

Один из дотошных исследователей производительности нашел в 1.16 "узкое место", которое может съедать порядка 20 мс (0.02 сек).

В 1.17 коренным образом переработаны некоторые моменты, влияющие на производительность.

Правда, тут прирост производительности на уровне погрешности измерения, но чисто теоретически можно выиграть 20 мс, правда, глазом это заметить невозможно никак.

Но основное в 1.17 - это Lazy Load с расширенной поддержкой всех форматов и всех браузеров.

[pimur]

Поддержка экранов Ретина кому-то интересна?
Если да, то могу добавить.
Как бы узнать голоса, кому это реально нужно?
Видимо, нужно создать голосовалку в отдельном блоге.
 
И купил бы потенциальный заказчик такой модуль, который бы реализовал эту функцию?
Или это из разряда "ну, бесплатно бы поставил, а деньги платить не стану".
 
Версию 1.17 на днях выложу.
Она немного быстрее чем 1.16.*.
Один из дотошных исследователей производительности нашел в 1.16 "узкое место", которое может съедать порядка 20 мс (0.02 сек).
В 1.17 коренным образом переработаны некоторые моменты, влияющие на производительность.
Правда, тут прирост производительности на уровне погрешности измерения, но чисто теоретически можно выиграть 20 мс, правда, глазом это заметить невозможно никак.
Но основное в 1.17 - это Lazy Load с расширенной поддержкой всех форматов и всех браузеров.

Ром, если презентуешь отправлю начальству, возможно заберут.

Отправлено с моего ZB631KL через Tapatalk

[yastman]

Тоже интересно , но можно подробнее , стоимость , и что означает поддержка экранов ретина ?

[sitecreator]

1 час назад, yastman сказал:

что означает поддержка экранов ретина ?

 

для экранов высокой четкости будет отдаваться в браузер, соответственно, картинка высокой четкости.

Т.е. если для обычных экранов, например, картинка размером 360 х 360, то для экрана Ретина будет загружена 720 х 720, т.е. с двойной плотностью пикселей. При этом вьюпорт для обычного экрана и Ретины будет одинаков, например 360 пикс ширины. Вьюпорт - это условная единица, которая может совпадать с реальной шириной матрицы в пикселях или не совпадать. Картинка 720 х 720 в случае Ретины будет отображена в квадрате 360 х 360 (в единицах вьюпорта).

 

Соответственно, нужно готовить, как минимум, пару картинок вместо одной. Простая и с повышенной плотностью. Если используется webp, то еще пару.

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

 

Т.е. есть и плюсы, и минусы.

Но чего только не сделаешь чтобы пользователь мог получить картинки высокой четкости?

 

Не знаю насколько это может быть востребовано.

К тому же должен быть изначально соответствующего качества исходник.

[sitecreator]

Доступна для скачивания новая версия (на сайте разработчика)

1.17.3

 

Про изменения, касающиеся Lazy Load уже писал.

Также добавил совместимость для ускорителя Nitro pack.

Поскольку для файлов данного ускорителя невозможно применить ocmod, то пользуйтесь инструкцией для действий, которая приведена в файле

sitecreator.webp_output.ocmod.xml

 

Тестировалось совместно с версией

NitroPack 2.5.3

Разумеется, что всяческие оптимизации изображений и Lazy Load нужно отключить в Nitro. Их реализация сильно уступает возможностям модуля Компрессор. Нитро есть смысл использовать как кешер HTML, т.е. для ускорения отклика страницы.

[23keks23]

Привет. Купил модуль для сайта клиента.

Подскажи, почему водяной знак устанавливается на все фотографии, при том, что указаны папки, на которые НЕ действует Watermark.

И еще. Как сделать, что бы настройки картинок были такие, как заданы настройками Opencart. Из-за твоего модуля вся верстка ломается.

 

P.S. Дополню еще тем, что водяной знак не накладывается на основную картинку, а только на миниатюры. Это можно как-то поправить?