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

Форум поддержки » Вопросы и ответы

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

 Гугл требовательный. ))) Хочет отложенную загрузку изображений в теме. Он намекает на AJAX в гугл пейд спид.

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

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

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

И того нужно решить шесть правил: jpg картинка, jpg картинка товара, css jpg бэкграунд картинка или возможность подгрузки по ситуации webp картинка, webp картинка товара, css webp бэкграунд картинка?

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

P.S. Может уже есть пример кода в какой нибудь бесплатной версии, какой нибудь темы? Ну чтобы и в каталоге фотки тоже так подтягивались, а не только на страницах карточек товара.

8 ответов

  • 3
    Quasar Партнер-разработчик 26 марта 2019 13:39 #

    У меня есть готовый плагин для WebP, работает уже месяца три на боевом магазине, и почти готов под инсталлер, но руки не дойдут его туда опубликовать. Работает через облако (мой сервер по API конвертирует), или через энкодер установленный на сервере. Разница в весе картинок -75% где-то, если картинки обычные и не сжатые через tinypng. У этого формата есть ещё несколько преимуществ, он грузится не блокируя рендеринг и не вызывая перерисовку страниц, т.к. размер картинки передается в хидере файла. 


    Ленивую подгрузку картинок легко реализовать самому, тут работает уже как года 3.

    Под отложенную загрузку картинок можно использовать Intersection Observer API.

    ответить
    • +1
      ММК ММК 25 мая 2019 15:02 #

      "Легко реализовать самому" - каким образом, если не секрет?

      ответить
  • 2
    Eldar 26 марта 2019 14:24 #

    В данном случае Google имеет ввиду не линивую подгрузку картинок, а чтобы картинка, а вернее её ссылка на картинку, погружалась в HTML через ajax. Если я что-то неправильно понимаю то поправьте. 

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

    ответить
  • 5
    Eldar 29 марта 2019 11:52 #

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

    Хотите, чтобы Ваш сайт был по нормальному в Выдаче Гугл?

    Поднимаем даннуд тему в ТОП - https://support.webasyst.ru/fo...

     Уже даже в gulp данная штука используется во всю, может кому-то пригодиться полезная ссылка на тему webp, уже даже на русском языке - https://iamdroid.net/ru/blog/i...

    В топку сторонние платные сервисы! Конвертация определенной фотографии(png, jpg) на Linux сервере из консоли делается командами:

    1) 

    #cwebp -q 80 SOURCE.png -o RESULT.webp

    2)

    #cwebp -q 80 SOURCEJPG.jpg -o RESULT.webp

    3) Списался с хостингом и спросил, как лучше сделать массовую конвертацию всех существующих фотографий средствами сервера из консоли одной командой. Приведенная ниже команда на примере хостинга Бегит в СПб, на других можно будет сделать тоже самое, главное попросить установить пакет "cwebp", если он вдруг не установлен, ну либо самим, если у Вас серверное решение от VDS/VPS/Server или выше. Есть еще одна утилита(консольный пакет), который сможет выполнить эту задачу - "convert", может она Вам тоже пригодится.

    Здравствуйте. Предлагаем такую команду для массового перекодирования файлов jpg в webp: 
    #list=`find . -name '*.jpg'`; for file in $list ; do cwebp -q 80 $file -o "${file%.jpg}.webp" ; done

    jpeg и png расширения делаются по аналогии.

    Вопрос к разработчикам CMS Webasyst:
    Итак, вопрос с конвертацией фоток прямо на сервере решен. Остается вопрос интеграции линка на фотку в симбиозе с AJAX, можно как-то сделать, чтобы именно ссылка на фотку  подставлялась средствами темы, без написания дополнительных плагинов? 

    а) на странице каталога 

    б) на странице карточки товара 

    в) просто на html странице или блога.

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

    Дополнительный вопрос к разработчика Вебасист. Есть ли метод в движке, который средствами обращения через SMARTY сможет определить, - умеет ли использовать браузер посетителя расширение "webp"? Чтобы упростить код из 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}

    ответить
  • 2
    РУБЛЕВ 3 апреля 2019 21:50 #

    Я вот только сегодня озадачился аналогичным вопросом - картинки есть, эскизы есть, а поисковики не видят. Плохо получается однако. Хочу, чтобы меня видно было....

    Гружу картинки прогрессивные, а эскизы получаю обычные - плохо однако, хочу эскизы прогрессивные. Хочу легкий сайт, хочу в индексироваться по этому параметру.... Позиций дофига надо продавать, а в картинках меня всего 2 штуки+)))) Я знал что будут косяки и прикупил продление лицензии (кстати - если изюма SS будет для нас делать, так я и дальше буду подписку продлевать))))), так что ожидаю плюшек+))))) Далее цитата "ОБИДНО СЛУШАЙ"+)) Всем добра!

    ответить

Добавить ответ

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