Libiros

Как повлияет на быстродействие создание дополнительных DOM-элементов на странице?

Рекомендованные сообщения

Решил использовать .webp для изображений на сайте, а также оптимизировать его через рекомендации google audits.

Таким образом получилось следующее:

<img src="image.webp" srcset="image-480.webp 480w, image-768.webp 768w, image-1024.webp 1024w" alt="alt" titile="title"/>

Так как webp не поддерживается некоторыми браузерами, было решено использовать решение WebPJS.

Теперь есть следующая проблема: решение заменяет атрибут src, но не трогает srcset. То есть изображения остаются неизменными и не отображаются.

Есть следующая идея, но я, полагаю, это будет очень затратно в плане ресурсов, а также неизвестно, как это будет влиять на SEO (может, спасут теги <nofollow>?).

  1. Распарсить атрибут srcset
  2. Создать столько img-элементов, сколько указано изображений в атрибуте
  3. Зацепить у каждого измененный атрибут src
  4. Составить новый атрибут srcset и заменить его на первом img
  5. Остальные img будут помещены под тег nofollow с классом display:none;

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
18 минут назад, Libiros сказал:

Но не уверен, так ли это.

Ответьте себе на пару вопросов.

22 минуты назад, Libiros сказал:

Создать столько img-элементов, сколько указано изображений в атрибуте

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

Что такое nofollow и для чего он предназначен?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, AlexZaw сказал:

Ответьте себе на пару вопросов.

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

Что такое nofollow и для чего он предназначен?

Очевидно, происходит, раз у нас появляется новый dom-элемент с изображением.

nofollow для сокрытия от индексации.

Ваша очередь.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
3 минуты назад, Libiros сказал:

Очевидно, происходит, раз у нас появляется новый dom-элемент с изображением.

А раз происходит загрузка то что отправляется на сервер?

4 минуты назад, Libiros сказал:

nofollow для сокрытия от индексации.

Начало хорошее. А что это такое и может ли оно помочь в вашем случае?

Ваша очередь 🙂

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
4 минуты назад, AlexZaw сказал:

А раз происходит загрузка то что отправляется на сервер?

Начало хорошее. А что это такое и может ли оно помочь в вашем случае?

Ваша очередь 🙂

На сервер отправляется запрос.

nofollow сможет не индексировать картинки.

Так что по быстродействию?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
3 минуты назад, Libiros сказал:

На сервер отправляется запрос.

Вот и ответ на ваш вопрос. Не так уж и сложно оказалось 🙂 

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

nofollow сможет не индексировать картинки

Путаете с noindex да и как вы собираетесь индексировать картинки?

13 минут назад, Libiros сказал:

Так что по быстродействию?

Ответ на этот вопрос вытекает из предыдущего. Чем больше запросов к серверу - тем хуже быстродействие. Ну и сайт из-за обилия картинок будет грузиться дольше. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Прихожу к решению сделать base64 encode. Но это тоже костыльное решение. Но пока ничего другого.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

а вы не думали сделать простецкий скрипт
скажем у вас есть на сервере список webp для разных разрешений
image-480.webp 480w,
image-768.webp 768w
image-1024.webp 1024w
<img src="loading.gif" srcset="image.webp">
дальше скрипт отправляет разрешение и srcset, сервер вам отдает data: данного файла нужного разрешения и вы его вставляете в src соответствующего img.
один запрос - одна нужная картинка, не встроенная в верстку

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
7 минут назад, Switch74 сказал:

а вы не думали сделать простецкий скрипт
скажем у вас есть на сервере список webp для разных разрешений
image-480.webp 480w,
image-768.webp 768w
image-1024.webp 1024w
<img src="loading.gif" srcset="image.webp">
дальше скрипт отправляет разрешение и srcset, сервер вам отдает data: данного файла нужного разрешения и вы его вставляете в src соответствующего img.
один запрос - одна нужная картинка, не встроенная в верстку

Думал такое, но для WebPJS нужна подгрузка картинки.

 

Вообще получается, что WebPJS делает base64 encode для картинок, если браузер не поддерживает .webp.

Выходит, даже если браузер отдает только одну картинку пользователю, в моей задаче нужно переделать весь srcset! На моем сайте минимум 10 изображений и для каждого по 5 srcset'ов. То есть скрипт должен обработать в base64 50 изображений. Из них 40 не отобразятся, а место я сожру побольше, чем занимают сами картинки, даже путем экономии запросов к серверу.

Отказаться от .webp вообще я тоже не планирую.

Одно из окончательных решений, которые пришли мне в голову - определить заранее, поддерживает ли браузер .webp, и если нет, то отдавать пользователю .jpg. И не использовать разные костыли, типа .webp или кодирования в base64 на уровне сервера в .htaccess.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: AlexanderLebedev
      Имеется слайдер, "//" если удалить эти строки , то все работает. Там collapse от bootstrap, скрыть и показать блок.
      А когда всё на месте, с скрытием, то он показывает так
      Помогите исправить, сложно найти рабочий подобный слайдер. Есть мнение что конфликтуют JS, но как их поставить чтоб всё норм было.
      <!-- Наружная реклама --> <div id="collapse_1" class="collapse" aria-labelledby="heading_1" data-parent="#accordionExample"> // ЭТА УДАЛИТЬ НАДО ЧТОБ РАБОТАЛО <div class="container header"> <div class="row align-items-center"> <div class="card-body card align-items-center bg-lightgrey"> <h5> <img src="http://www.cyberforum.ru/images/header/nar.png" width="105" height="80"> Наружное и внутреннее оформление </h5> </div> </div> <!-- Слайдер --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <!-- Конец слайдера --> </div> </div> // ЭТА УДАЛИТЬ ЧТОБ РАБОТАЛО НАДО <!-- Конец наружной рекламы --> СКРИПТЫ В КОНЦЕ BODY
      <!-- Скрипты --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="js/slider.js"></script> <script type="text/javascript"> var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, loop: false, loopFillGroupWithBlank: false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); </script> <script src="js/bootstrap.js"></script> <!-- Конец скрипты -->  
      После уменьшении или увеличении страницы всё работает как надо. Что за логика ?
    • Автор: umid99
      Доброго времени суток, возникла проблема при подключении слика , сделал все как по инструкции (Jqwery до slick.js , main.js после slick.js ) но все равно выдает ошибку :
      Uncaught TypeError: Cannot read property 'add' of null
          at c.b.initADA (slick.min.js:17)
          at c.b.init (slick.min.js:17)
          at new c (slick.min.js:17)
          at w.fn.init.a.fn.slick (slick.min.js:18)
          at HTMLDocument.<anonymous> (VM778 main.js:8)
          at l (jquery.min.js:2)
          at c (jquery.min.js:2)
      подскажите решение , уже все перерыл и не у одного меня такое , но решения так и не нашел .
    • Автор: umid99
      Доброго всем времени суток,  нужна ваша помощь .  Нужно сделать небольшое всплывающее окно на лэндинг которое показывает сообщения типа "Сейчас марина купила товара на сумму ххх " или "Осталось товара по акции;5шт" , по ссылке пример. Желательно сделать 1в1 . всех благодарю за помощь !