52 комментария

  • +4

    1) Вот тут инсрукция, как сконвертировать все изображения в webp, подходит на старте для интеграции данного решения - https://support.webasyst.ru/forum/31271/otlozhennaya-zagruzka-izobrazheniy-na-stranitsakh-temy-kak-luchshe-organizovat/

     Крон не подходит под эту утилиту, только единожды, потому что большая нагрузка на сервер! 

    поэтому - 

    2) Реализовано должно быть из коробки, потому что webp - это приказ Гугл Пейдж Спид уже как несколько месяцев, поэтому все остальные задачи по сравнению с этой(за исключением безопасности и дыр) не в приоритете(Она даже не должна выноситься на голосование, а делаться срочно-срочно - потому что хреновая выдача в Гугл из-за этого) - У нас у всех сайтов на Вебасист из-за этого плохие БАЛЫ в Гугл по сравнению с конкурирующими CMS, кто это уже реализовал! САЙТЫ НЕ КОНКУРИРУЮТ, особенно в мобильной версии.

    3) В приложении shop-script и блог.

    Должны появится дополнительные поля под webp, чтобы после их включения и полной конвертации(можно закрыть первую генерацию всех фоток инструкцией - ссылка выше) они генерировались автоматом при добавлении фоток. Пока что самая популярная утилита на Линукс серверах "cwebp" - в ссылке выше все рассказано и показано.

    4) Внедрить в smarty данный функционал, тоже указано по ссылке выше:

    <picture>
      <source type="image/webp" srcset="image.webp">
      <img src="image.jpg">
    </picture>

    Чтобы упростить код из 4 строчек на выводе до 1, примерно такого смысла(сделать {$wa->isBrowserUseWebp()}, по подобию {$wa->isMobile()}):

    {if $wa->isBrowserUseWebp() == 'true'}
        <img src="{$wa_static_url_photo}.webp">
    {else}
        <img src="{$wa_static_url_photo}.jpg">
    {/if}

    5)  Вы подумает, откуда, такая логика, что ссылка на фото в 4 пункте

    {$wa_static_url_photo}

    Все ссылки на фотографии - сайтов (shop-script, blog, слайдеры и т.п. приложения) могли подтягиваться по AJAX - такой же приказ в новой версии Гугл пейдж спид(теперь - это не рекомендация, а приказ), который значительно влияет на балы сайтов, поэтому это должно быть в коробке или в плагине или приложении, которое будет разработано главной командой CMS Webasyst.

     Сейчас подниму дополнительную тему AJAX ссылки на фотки и залинкую.

    • -1

      Проблема AJAX тут, тоже двигаем в ТОП - эту пересекающуюся тему.

      https://support.webasyst.ru/fo...

    • 0

      Ах, да в третий пункт в настройки добавить чекбокс - "Сжатие все изображения jpeg по старому стандарту Google Page Speed", а то как сжимает сейчас ужасно выглядит.

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

       Хоть этого сжатия теперь и не достаточно по новым требованиям Гугл, если нет webp формата. Люди которые знают, все равно жадничают и не рассказывают, где найти это сжатие, ну правильно, Вы же их конкурент)))).

      Вот Вам мой подарок, держите, Гугл ранее сжимал фотки вот этой командой и поковал далее все в архив:

      $ jpegoptim -m 85 --strip-all --all-progressive *.jpg
      $ optipng -o7 *.png

      С Вас, за этот неплохой подарок плюсы в этих двух Важных темах!

       С разработчиков Чекбоксы на эти команды в настройки сжатия в shop-script.

    • +3

      Если с приходом весны у вас в голове начинают слышаться приказы гугла, то надо на пару недель съездить на курорт, отдохнуть, развеяться, отвлечься от работы, перестать волноваться.

      • 0

        Я и так живу под пальмами и солнцем на курортах с бирюзовой водой. https://www.youtube.com/channel/UCNM8ASYVIkMBKpEGC5CZ32Q
        Судя с прошлого Вашего поста понимаю в СЕО явно получше Вашей команды.))) -

         На курортах живу, потому что адекватно реагирую на ситуацию и красную зону воспринимаю красной зоной(приказом), а не рекомендацией или "а мне насрать, я в танке, все равно бизнес не мой, ЗП капает, солдат спит, служба идет". Если Вы конечно этого не понимаете, то будет получать палкой по голове от Гугл. Если же Вы все понимаете слова буквально, то печально.))) Будет намного хуже, Ваш бизнес прогорит, если не будете обращать внимание на мелочи, то к старости Вы обнищаете, потом   бомжом будете стоять с протянутой рукой в метрополитене. Вполне реальная картина для России и она будет только усугубляться. Как Вам такой - реальный расклад жизни? ))))

        • +2
          Antonio Antonio 30 марта 2019 00:09 #

          Бред какой-то. Перегрелся наверное на солнце, оторвался от реальности. С таким контентом никакое СЕО не поможет. 

          • +5
            replicant replicant 30 марта 2019 11:45 #

            Если я всё правильно понял, то просто оставлю это здесь.


            • 0

              Даже на сравнении видно что webp пересжато и качество хуже.

              • +3

                Гена, тут два jpg же :)

              • +3
                replicant replicant 30 марта 2019 17:52 #

                Это не webp. Это к тому, что как минимум из существующей графики автора ранее опубликованного потока сознания можно выбить 30% жира без особых напрягов. Просто специально сильно пережал этот jpg, чтобы уменьшить почти в 4!!! раза. А если сделать на выходе 120-130 кБ, то артефактов не будет (с лупой по экрану лазить надо как в СК России делают, чтобы увидеть). Если же делать вывод этого полотна 1150х550 масштабируя немного вниз до 1000 точек, то глубоко по барабану даже на jpg-фарш. Поскольку шевеляшка-баннер в слайдере на сайте не произведение искусства, то в принципе начхать на него даже в размере 89 кБ. Там весь акцент пойдет на бабу правее надписи, которой на этом фото не видно. Буковки читаются и отлично.

              • 0

                Что-то я не особо вижу разницы в сжатии jpg. В Гугл подобрали идеальное сжатие на мой взгляд.

                Гена, если Вы вообще про webp, есть опция регулировки сжатия, попробуйте разные проценты, подобрав идеальный для Вас. Выше в посте была ссылка - https://support.webasyst.ru/fo...

                Вот выжимка с того поста и нужные команды: 

                #cwebp -q 80 SOURCE.png -o RESULT.webp
                #cwebp -q 80 SOURCEJPG.jpg -o RESULT.webp
                Пример массовая конвертации:
                #list=`find . -name '*.jpg'`; for file in $list ; do cwebp -q 80 $file -o "${file%.jpg}.webp" ; done

                • 0

                  Очепятка. Имел ввиду разницы в качестве картинки после сжатия не вижу..

                  • +3

                    Если Гугл такой идеальный, то в чем проблема настроить PageSpeed Module? Пусть то, что нравится Гугл делает сам Гугл. Он если надо и отложенную загрузку картинок сделает и сконвертирует и пережмёт. Зачем свой велосипед? 

                    • +2

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

                       На хостингах пока не в состоянии установить это решение.

                      Что-то я не нашел, где там отложенная загрузка изображений по  AJAX? (Хотя бы на VPS и серверах, сделать, вдруг достаточно будет просто установить модуль - люблю халяву))))

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

                      Вот ответ одного передового хостинга именно по этому сборнику модулей, переписывался еще в Октябре 2018:


                      Служба технической поддержки 09.10.18 Здравствуйте. К сожалению установка модулей Apache невозможна на виртуальном хостинге. Вам подойдет наша услуга VPS, вы сможете самостоятельно установить и настроить необходимое для вас ПО. Дело в том, что в рамках виртуального хостинга установка данного модуля требует компиляции вместе с исходниками веб-сервера, отдельного тестирования, упаковки в контейнер с веб-сервером и выкатывания на всех серверах хостинга. На это потребуется, возможно несколько месяцев в наших масштабах. Большую часть работы по сжатию контента уже выполняет со своей стороны nginx. Оптимизация картинок доступна вам такими средствами, как jpegoptim или optipng. Если вам нужен данный модуль в срочном порядке, то вы можете воспользоваться выделенным сервером, либо VPS.

                      Вот уговорить любой хостинг установить утилиту "cwebp", если ее там до сих пор нет уже проблем не составит.

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

                      Всем удачи в решении данных вопросов.

                    • +2
                      replicant replicant 31 марта 2019 12:51 #

                      Если нет разницы, то зачем на сайте выводится версия на 336 кБ, когда можно вывести 89 кБ и облегчить всем жизнь даже без "вожделенного webp"?

                      Вебмастера или кто там картинки делает для сайта за такое выгнать без выдачи ЗП и выходного пособия - это первое, что надо было бы сделать!

                    • +1

                      Разницу ты не видишь потому что ты не дизайнер, дизайнер сразу увидит разницу, она действительно есть.

                      • -1

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

                      • +1
                        replicant replicant 31 марта 2019 17:41 #

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

                        Можно молиться на спасительный webp и "Гугловское сжатие" (открыли, блин, Америку), а можно просто взять и делать нормальную графику прямо сейчас и ничто и никто этому не мешает.

                        Мне Гугл ничего не советует. Молчит в тряпочку и все ОК. Обычно это 93-95 мобильных попугаев и загрузка около 2 сек и 97-99 ПК попугаев и загрузка от 0.7 до 1.2 сек. Если мой сайт грузится дольше 1.5 сек, то я где-то плохо сработал. И тут уже не виноваты ни Гугл, ни отсутствие webp, ни козни разработчиков WA. Никто, кроме меня, не виноват!

                        98 баллов в тесте Гугла набирает главная страница на которой выводится 23 товарных баннера слайдера, 96 категорий, 20 логотипов категорий, 24 товарных карточки, меню, новости и прочая обвязка из скриптов и стилей. Каюсь в том, что главная у меня самая тормозная. Товарные карточки обычно на 20-25% быстрее грузятся.

                        • +1
                          Eldar Eldar 31 марта 2019 19:57 #

                          Может я что-то не понимаю, но вроде сегодня отличное качество картинки уже не освобождает от формата webp?

                        • +1

                          Вот именно про это примерно и говорю.

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

                          Видите, replicant Вам уже наверно не первый говорит, что 99 попугаев, да легко и без потери качества.

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

                          Я же верно понял, что данная ветка "Идеи и предложения" создана для всех Ваших магазинов, а не для отлова багов разработчиками плагинов Ваших недоработок под их личную монетизацию? Или вы по пути "заблудились в деталях" и забыли первостепенные цели сообщества?

                          Мне кажется, Вы не понимает, что такое сайт и его суть сегодня.

                          Я понимаю так:

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

                          2) Только во вторую очередь, сайт - это его реальные страницы, фото, тексты оптимизация, бла, бла-бла, бла-бла, бла. Короче. Второй пункт - это фигня, если не выполнена работа по первому.


                          ВЫВОД: Сайт - это проиндексированные страницы, для РУ сегмента - это Яндекс и Гугл.

                          Я Вам напомнил, на кого Вы работаете и все мы работаем и чьи задачи мы обязаны Выполнять в первую очередь. Мне вот ясно, что это Яндекс и Гугл в Ру сегменте, причем они оба откровенны в своих пожеланиях и задачи Вам поставили.(первостепенные) Или Вам нужна только прямая раздача денег в руки, чтобы понять, кто диктует правила рынку поисковых систем?

                          Вот спрашивается, какого хрена Вы поднимаете эту ветку "Идеи и предложения", если Вы до сих пор не закрыли задачи, которые Вам в первую очередь дал Ваш прямой работодатель - в данном случае Гугл?

                          Закройте ее всю нафиг, Вы первостепенные задачи по созданию сайтов(CMS) не выполнили, сайт - это индексация для привлечения целевого трафа, все остальное, это второстепенно, ну за исключением безопасности, чтобы не украли наработанную базу клиентов.

                          Еще раз, чтобы заучили))) Сайт - это проиндексированные страницы в ПС, а не сам сайт, который где-то лежит на хостинге. Или Вам нужно все разжевывать и постоянно напоминать о реальности, какой сегодня мир и какие в нем правила игры...

                          • +4

                            Гражданин Joker X && Eldar в одном лице, хорош уже сам с собой переписываться! Ников можно мульён придумать и зарегистрировать, но стилистику и орфографию куда девать??? ))))))

                            • 0
                              Eldar Eldar 31 марта 2019 20:16 #

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

                               И посмотрим, на чью сторону они встанут)))))) Давайте спросим у них, нужно им заработать деньги на сайте или нет?

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

                              • +3

                                Какой топик работодателя? В какой перёд вы там смотрите? )) Заканчивайте уже, выходные закончились, пора в рабочее русло возвращаться! =)

                                • +1
                                  Eldar Eldar 31 марта 2019 22:29 #

                                  Окс, и правда кончились. Да лень мне рассылки такие делать, есть чем заняться. ))))

                                  Хорошо, пусть это останется на Вашей совести.)))

                                   А впереди все просто, рынок Вебасист снизится под давлением других CMS, а как следствие продажи плагинов упадут.

                                • +3

                                  Есть решение, вот тут работает, все автоматизировано. Работает по тому же принципу, как и генерация миниатюр, только в двух режимах - локально, и по API на моем сервере. 

                                • +2
                                  Nikolai Nikolai 19 ноября 2018 09:05 #

                                  Согласен. Поддержка нужна - гугл pagespeed очень любит этот формат в отличии от jpg и png.

                                • +2
                                  vvedik vvedik 9 января 2019 13:49 #

                                  Яндекс маркет, поддерживает этот формат. Google pagespeed тоже рекомендукт

                                • +2

                                  1. конвертировать второе изображение в формат .webp (пару строк, можно в кроне)

                                  2. если браузер поддерживает webp отдавать его, если нет - jpg (пара строк в nginx)

                                • +1
                                  Кирилл Фирсов Кирилл Фирсов 1 февраля 2019 18:36 #

                                  Поделитесь, как вы это делаете при помощи .htaccess. Пробую не чего не получется. Где что исправить\изменить. Пытаюсь https://github.com/vincentorba... не получается.

                                  • +1
                                    Алексей Алексей Webasyst 1 февраля 2019 18:56 #

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

                                  • +1
                                    Кирилл Фирсов Кирилл Фирсов 1 февраля 2019 21:16 #

                                    <FilesMatch "\.md5$">
                                    Deny from all
                                    </FilesMatch>
                                    AddDefaultCharset utf-8
                                    DirectoryIndex index.php
                                    Options -Indexes
                                    # Comment the following line, if option Multiviews not allowed here
                                    Options -MultiViews
                                    <IfModule mod_setenvif.c>
                                    # Vary: Accept for all the requests to jpeg and png
                                    SetEnvIf Request_URI "\.(jpeg|png)$" REQUEST_image
                                    </IfModule>
                                    <ifModule mod_rewrite.c>
                                    RewriteEngine On
                                    # Check if browser supports WebP images
                                    RewriteCond %{HTTP_ACCEPT} image/webp
                                    # Check if WebP replacement image exists
                                    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
                                    # Serve WebP image instead
                                    RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
                                    RewriteCond %{HTTPS} off
                                    RewriteCond %{HTTP:X-Forwarded-Proto} !https
                                    RewriteCond %{REQUEST_URI} !robots.txt
                                    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
                                    # Uncomment the following line, if you are having trouble
                                    #RewriteBase /
                                    RewriteCond %{REQUEST_URI} !\.(js|css|jpg|jpeg|gif|png)$ [or]
                                    RewriteCond %{REQUEST_URI} apple-touch-icon\.png$
                                    RewriteCond %{REQUEST_FILENAME} !-f
                                    RewriteCond %{REQUEST_FILENAME} !-d
                                    RewriteRule ^(.*)$ index.php [L,QSA]
                                    php_flag session.auto_start 0
                                    </ifModule>
                                    <ifModule mod_headers.c>
                                    # New format
                                    Header append Vary Accept env=REQUEST_image
                                    # One year for image files
                                    <filesMatch ".(jpg|jpeg|png|gif|ico)$">
                                    Header set Cache-Control "max-age=31536000, public"
                                    </filesMatch>
                                    # One month for css and js
                                    <filesMatch ".(css|js)$">
                                    Header set Cache-Control "max-age=2628000, public"
                                    </filesMatch>
                                    </ifModule>
                                    # сжатие text, html, javascript, css, xml:
                                    <ifModule mod_deflate.c>
                                    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
                                    </ifModule>
                                    <IfModule mod_mime.c>
                                    AddType image/webp .webp
                                    AddType application/javascript .js
                                    AddType image/bmp .bmp
                                    AddType image/x-icon .cur .ico
                                    AddType application/font-woff .woff
                                    AddType application/font-woff2 .woff2
                                    AddType application/vnd.ms-fontobject .eot
                                    AddType application/x-font-ttf .ttc .ttf
                                    AddType font/opentype .otf
                                    </IfModule>
                                    # кеш браузера
                                    <ifModule mod_expires.c>
                                    ExpiresActive On
                                    #по умолчанию кеш в 3 день
                                    ExpiresDefault "access plus 3 days"
                                    # Включаем кэширование изображений и флэш на месяц
                                    ExpiresByType image/x-icon "access plus 1 month"
                                    ExpiresByType image/jpeg "access plus 4 weeks"
                                    ExpiresByType image/png "access plus 30 days"
                                    ExpiresByType image/gif "access plus 43829 minutes"
                                    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
                                    # Включаем кэширование css, javascript и текстовых файлов на одну неделю
                                    ExpiresByType text/css "access plus 604800 seconds"
                                    ExpiresByType text/javascript "access plus 604800 seconds"
                                    ExpiresByType application/javascript "access plus 604800 seconds"
                                    ExpiresByType application/x-javascript "access plus 604800 seconds"
                                    # Включаем кэширование html и htm файлов на один день
                                    ExpiresByType text/html "access plus 43200 seconds"
                                    # Включаем кэширование xml файлов на десять минут
                                    ExpiresByType application/xhtml+xml "access plus 600 seconds"
                                    # Нестандартные шрифты сайта
                                    ExpiresByType font/eot "access plus 1 month"
                                    ExpiresByType application/x-font-ttf "access plus 1 month"
                                    ExpiresByType font/opentype "access plus 1 month"
                                    ExpiresByType application/x-font-woff "access plus 1 month"
                                    ExpiresByType image/svg+xml "access plus 1 month"
                                    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
                                    </ifModule>

                                  • +1
                                    Кирилл Фирсов Кирилл Фирсов 2 февраля 2019 10:21 #

                                    так и не запусилось

                                  • +1
                                    Александр Каякин Александр Каякин 8 июня 2019 19:18 #

                                    И что никто плагина не сделает блин. ((

                                  • +1
                                    Nikolai Nikolai 17 июня 2019 16:23 #

                                    Статус "принято" означает, что в ближайшем будущем формат будет добавлен в коробку?

                                    • +1

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

                                    • 0
                                      Алексей Алексей Webasyst 26 февраля 2018 18:05 #

                                      Пока очень слабая поддержка браузерами - https://caniuse.com/#search=webp

                                      • +1
                                        Bostich Bostich 23 марта 2019 20:48 #

                                        похоже Apple будет до последнего морозиться с поддержкой....

                                        • +1
                                          Eldar Eldar 26 марта 2019 18:07 #

                                          Конечно будет, Гугл прямой конкурент на рынке техники)))

                                        • +5

                                          А как Вам такой расклад, про слабую поддержку? 

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

                                          • -1
                                            Алексей Алексей Webasyst 30 марта 2019 17:12 #

                                            И поддержка этого формата браузерами все еще не улучшилась. Для обратной совместимости придется использовать 2 формата для хранения, поэтому из 20GB картинок получаем как минимум 30+.

                                            Рекомендация по использованию webp, jpg2000 и тд имеет всего лишь средний приоритет, поэтому никакого смысла нет добиваться полного выполнения этих пунктов. Помимо этого есть еще и AMP и Scheme и еще куча других параметров.

                                            FYI: У Cloudflare есть функция оптимизации на лету только изображений, которые от этого выиграют: Если сформированный webp больше исходного изображения, то отдаётся оригинал.

                                            • +1

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

                                              Я раскрою Вам картину предметно и цифрами, с точки зрения Вашего прямого заказчика, кто несет деньги в Вебасист сообщество, ведь от их финансового успеха и продаж, зависит Ваш.

                                              Открываем Яндекс Вебвизор, смотрим на вскидку на примере одного сайта ориентировочное количество браузеров использующих данный формат.(Даже учитывая тот момент, как часто обновляет ОС, а кто сидит на древних без обновлений.) Могу с уверенностью сказать за элитный сегмент, хотя и основная доля у моих пользователей это Макбуки, айфоны, айосы, сафари и т.п. В худшем случае поддержка данного формата уже сегодня 40% в моем сегменте. К сожалению у меня нет статистики магазина для обычного обывателя, но смею предположить, что у большинства магазинов именно такой портрет покупателя - это далеко не элитный сегмент и там поддержка данного формата уже в худшем случае 60%! Не забывайте, что андроид на мобильниках - это тоже продукт Гугл. Если Яблочные еще отказываются принять данный формат и пытаются конкурировать в данном направлении с Гугл, то Винда нет, да и там основной браузер у пользователя - это хром.

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

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

                                              О вопросе к дополнительному трафику. В англоязычном сегменте я обратил внимание, что фотографии формата webp двигаются в ТОП по запросам намного лучше, в плоть до попадания в ТОП 3-5, а следовательно под запрос в ТОП ПС на главную страницу. Понятно дело, что РУ, как обычно отстает, но кто будет первый тот и в дамках. Логично предположить, что страницы с данным форматом будут продвигаться в поиске так же лучше, такова политика раздачи плюшек у Гугл.

                                              Если рассмотреть раздачу балов в Google Page Speed - всегда было так, за фотографии дается больше всего балов, если это не так, то поправьте.))) Это помимо увеличения скорости сайтов минимум в 2, если включить webp c AJAX.

                                              Следовательно, если Вы хотите помочь клиенту, нужно в первую очередь заниматься вопросом графики на сайтах, а именно верную раздачу форматов и подгрузку этих изображений, не моментально через HTML код, а через AJAX.

                                              Никто от Вас не просит моментального решения, но уже даже сегодня приступать решать данную задачу немного поздновато. Не забывайте, так как Вы не приступили к выполнению этой задачи, как вышла новая версия правил у Гугл, Вы лишили Ваши сайты 30% трафика в худшем случае и их карманы опустели на эту сумму. Потом, когда это реализуют другие CMS плюшек не будет, новые ТОПы уже устояться. Поэтому лучше оказаться там первыми.

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

                                            • +3

                                              Вот тут написал инструкцию интеграции JavaScript плагина ленивой подгрузки картинок.

                                               Плюс подхода, который сделал - он не привязан к jQuery версии и поэтому не мешает другому коду.

                                              От Вас осталось лишь дописать метод вставки картинок в товарах и ему подобные вставки картинок, чтобы не править код хелпера или не разрабатывать под это дело плагины.

                                              {$wa->shop->productImgHtml($product, $size, $attributes = array())}

                                              Проблема его в том, что не может в теге img заменить значение src на data-src, в ссылке выше показано, зачем это нужно, так же там показано, как это сделать с форматом webp. Поэтому, когда будете делать  формат webp, то данный способ ленивой подгрузки было бы уже реализовать просто, ну или хотя бы дать Вашим клиентам такую возможность. Сейчас ее в нормальном виде нету.

                                              • +1

                                                Ах, да. Еще одно слабое место вспомнил.

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

                                              • -1

                                                Уже полностью интегрировал на один сайт в ленивую подгрузку даже каталог.

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

                                                .badge-wrapper {
                                                    min-height: 277px;
                                                }
                                                .product-list img.lazyload {
                                                    opacity: 0;
                                                }

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

                                                1) Это лик(фантом) или квадратик изображения, особенно он виден в каталоге, пока изображение не подгрузилось. Тупо через CCS ставим прозрачность в 0 на эти элементы, потом после отработки скрипта силектор меняется.

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

                                                or at least add a min-height (and min-width) to minimize content jumps:

                                                3) Сильная сторона плагина это гибки scr параметы, поэтому очень хочеться нармального расширения под все возможности. (не тока scr, но и srcset и т.д.)

                                                Вот тут кратко описаны узкие и широкие места JS плагина

                                                https://github.com/aFarkas/lazysizes#tip-specifying-image-dimensions-minimizing-reflows-and-avoiding-page-jumps

                                                • 0

                                                  Напоминалка самому себе

                                                  Смарти:

                                                  {$wa->shop->productImgHtml($p, '0x300', ['itemprop' => 'image', 'alt' => $p.name, 'class' => 'lazyload', 'src' => 'data-src', 'default' => "`$wa_theme_url`img/dummy200.png"])}

                                                  Правильный фрагмент из Вьюив Хелпер.

                                                    public function imgHtml($image, $size, $attributes = array())
                                                      {
                                                      	$src = 'src';
                                                          if (!$image || empty($image['id'])) {
                                                              if (!empty($attributes['default'])) {
                                                                  return '<img $src="'.$attributes['default'].'">';
                                                              }
                                                              return '';
                                                          }
                                                          if (!empty($image['description']) && !isset($attributes['alt'])) {
                                                              $attributes['alt'] = htmlspecialchars($image['description']);
                                                          }
                                                          if (!empty($image['description']) && !isset($attributes['title'])) {
                                                              $attributes['title'] = htmlspecialchars($image['description']);
                                                          }
                                                          $html = '<img';
                                                          foreach ($attributes as $k => $v) {
                                                              if ($k != 'default') {
                                                              	 	if ($k == $src) {
                                                  									$src = $v;
                                                  									continue;
                                                  								}
                                                                  $html .= ' '.$k.'="'.$v.'"';
                                                              }
                                                          }
                                                          $html .= ' '. $src.'="'.$this->imgUrl($image, $size).'">';
                                                          return $html;
                                                      }

                                                • 0
                                                  Андрей Сверкунов Андрей Сверкунов 8 ноября 2019 12:35 #

                                                  Товарищи разработчики, уже пора внедрять! Хотим грузить картинки в формате webp. Поддержка браузерами достаточная.

                                                  • +1
                                                    Nikolai Nikolai 8 ноября 2019 14:00 #

                                                    Так сделали же плагин отдельный.

                                                    • +1
                                                      Андрей Сверкунов Андрей Сверкунов 8 ноября 2019 19:26 #

                                                      Речь об импорте фотографий к товару.

                                                      • +1
                                                        Nikolai Nikolai 8 ноября 2019 20:00 #

                                                        такой себе план. Вы отмените так всех клиентов, у которых браузер не поддерживает webp (а таких много), т.к. у системы не будет варианта в другом формате.

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

                                                        Чтобы добавить комментарий, зарегистрируйтесь или войдите