Jump to content
  • 0

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


Libiros
 Share

Question

Решил использовать .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-элементов. Но не уверен, так ли это.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
18 минут назад, Libiros сказал:

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0
1 час назад, AlexZaw сказал:

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0
4 минуты назад, AlexZaw сказал:

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   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.

 Share

  • Similar Content

    • By ilya1203
      Прошу помочь с заданием:
      Написать файл скрипта, который генерирует три числа, соответствующие значениям высоты, длины и ширины комнаты. Отобразить в консоли:
      a.Площадь стен комнаты
      b.Объём комнаты
      c.*Объём комнаты за вычетом случайно сгенерированного количества чисел, которые определяет объёмы случайно зашедших в комнату людей.
      (в итоге запустит скрипт последством консоли)
      (заранее огромное спасибо)
    • By Yurich
      Всем привет, у меня такой вот вопрос, делаю сайт через react и при изменении расширения что-то идёт не так и какой-то бред получается, подскажите как решить данную проблему. Я вообще не понимаю из-за чего это происходит, по этому не могу нормально объяснить 😅.

    • By bromble
      Всем привет!
      Может ли кто-нибудь сказать как реализована такая каруселька у элементов каталога?
      MyVideo_55.mp4
    • By IsayR
      Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 1 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 1</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 2 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 2</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 3 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 3</div> </div> </div> </div> .div{ border: 1px solid #3A444E; border-radius: 10px; width: 300px; height: 64px; overflow: hidden; } .div.open { height: auto; background: #000; color: #fff; } .window-one { display: flex; align-items: center; justify-content: space-between; } .title { margin-bottom: 20px; } .arrow-test { content: ''; background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } .arrow-test.open { content: ''; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } $('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});  
    • By IsayR
      Всем привет, подскажите, пожалуйста, как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук? У меня есть кнопка и несколько ее копий на странице, и я хочу, чтобы если пользователь захотел нажать на кнопку, только на другом месте страницы, открывалась та же самая форма. Но, к сожалению, ее открывает, только самая первая кнопка, подскажите, пожалуйста, решение! Спасибо!
      <body> <button class="btn-modal" id="open">Отправить заявку</button> <button class="btn-modal" id="open">Отправить заявку</button> <button class="btn-modal" id="open">Отправить заявку</button> <div class="wrapper-modal" id="wrapperModal"> <div class="overlay-modal" id="overlayModal"></div> <div class="form-modal__item" id="formModal"> <form action="#" id="formModalBody" class="form-modal__body"> <h4 class="form-modal__title"> Оставьте заявку </h4> <span class="close" id="close"> <div class="form-modal__item"> <label for="formName" class="form-modal__label"> Имя: </label> <input id="formName" type="text" name="name" class="form-modal__input" placeholder="Ваше имя *"> </div> <div class="form-modal__item"> <label for="formTel" class="form-modal__label"> Номер телефона: </label> <input id="formTel" type="tel" name="length" class="form-modal__input" placeholder="+7 (___) ___ - __ - __ *"> </div> <div class="form-modal__item"> <label for="formEmail" class="form-modal__label"> Email: </label> <input id="formEmail" type="text" name="width" class="form-modal__input" placeholder="Введите e-mail *"> </div> <button class="form-modal__button" id="open">Отправить</button> </form> </div> </div> </body> #wrapperModal { display: none; position: fixed; width: 100%; height: 100%; z-index: 3; top: 8%; left: 20%; } #wrapperModal.active { display: block; } #overlayModal { position: absolute; top: -8%; left: -20%; width: 100%; height: 100%; z-index: 0; background-color: grey; opacity: 0.5; } .form-modal__body { width: 270px; min-height: 200px; background: #363A4D; border-radius: 20px; padding: 48px 51px 41px 50px; position: relative; } .form-modal__title { font-size: 24px; margin-bottom: 23px; } .close:before, .close:after { position: absolute; content: ' '; right: 28px; top: 16px; height: 18px; width: 2px; background-color: #7E839A; cursor: pointer; border-radius: 5px; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } .form-modal__label { margin-bottom: 6px; } const btnForm = document.getElementById('open'); const modal = document.getElementById('wrapperModal'); const overlay = document.getElementById('overlayModal'); const close = document.getElementById('close'); btnForm.addEventListener('click', (e) => { e.preventDefault() modal.classList.add('active'); }); const closeModal = () => { modal.classList.remove('active'); } overlay.addEventListener('click',closeModal); close.addEventListener('click',closeModal);  
  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy