Как предотвратить долгую загрузку страниц при использовании пикселя фейсбука

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

Суть проблемы

Фейбук принадлежат Meta, деятельность которой признана в России экстремистской и запрещена. Из-за этого многие провайдеры в России блокируют запросы к Facebook, включая знаменитый пиксель.

Что происходит, когда ваш сайт пытается связаться с пикселем Facebook, но провайдер говорит: «Простите, но нет.»? Запрос зависает и получает статус ERR_CONNECTION_TIMED_OUT. Этим браузер как бы говорит нам: «Друг-дружище, я очень пытался, но никто не ответил».

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

Особенно весело это становится, когда у вас на сайте есть прелоадер. Это такая штука, которая скрывает контент страницы, пока всё не загрузится. Так вот, если один ресурс (тот самый запрос к Facebook) тормозит, то ваш прелоадер будет показывать «загрузку» до бесконечности или до момента, пока браузер не скажет: «Окей, он не отвечает. Его пропускаем.».

Решение

Надо сделать так, чтобы проблемные ресурсы загружались асинхронно. Что это значит? Это значит, что они не будут блокировать загрузку остальной страницы.

Если говорить конкретно о пикселях Facebook, то они отправляют запросы на адрес «www.facebook.com». Сначала загружается скрипт пикселя, а потом этот скрипт подгружает сами пиксели (невидимые картинки).

Решение простое: отловить запросы к Facebook и заставить их загружаться асинхронно. Это не заставит загружаться пиксель, если запрос блокируется, но это ускорит загрузку вашей страницы.

Для этого надо прописать тэгам <script> атрибуты async=true и defer=true, а для изображений — loading=lazy.

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

Как это сделать? Используем MutationObserver, который отследит добавление новых тегов <script> и заранее добавит к ним нужные атрибуты.

С изображениями всё посложнее, так как Facebook создаёт их программно (без добавления на страницу), используя объект Image. Но мы можем переопределить этот дефолтный объект и добавить к нему атрибут loading=lazy до того, как запрос к Facebook будет отправлен. Единственное, что нам нужно будет потом добавить изображение в DOM страницы, чтобы браузер его загрузил.

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

Скрипт, который делает загрузку пикселей фейсбука асинхронной

Этот код добавляется в Настройки аккаунта в самый верх бока HEAD.

<script>
(()=>{
    new MutationObserver((m) => {
      for (let mutation of m) {
        if (mutation.type === 'childList') {
          let addedNodes = mutation.addedNodes;
          for (let i = 0; i < addedNodes.length; i++) {
            let node = addedNodes[i];
            if (node.nodeName === 'SCRIPT' && /([,;])?(\w).async=!0/.test(node.innerHTML) && /fbevents\.js/.test(node.innerHTML)) {
              let newNode = document.createElement('script');
              newNode.innerHTML = node.innerHTML.replace(/([,;])?(\w).async=!0/, '$1$2.defer=true$1$2.async=true');
              node.parentNode.replaceChild(newNode, node);
            }
          }
        }
      }
    }).observe(document, { childList: true, subtree: true });
    const OriginalImage = Image;
    function CustomImage(...args) {
      const img = new OriginalImage(...args);
      Object.defineProperty(img, 'src', {
        set: function(value) {
          if (value.includes('www.facebook.com')) {
            this.setAttribute('loading', 'lazy');
          }
          this.setAttribute('src', value);
          if(this.src.includes('www.facebook.com')) {
            document.addEventListener("DOMContentLoaded", (event) => {
              img.style="position: absolute;opacity: 0;";
              document.body.prepend(img);
            });
          }
        },
        get: function() {
          return this.getAttribute('src');
        }
      });    
      return img;
    }
    CustomImage.prototype = OriginalImage.prototype;
    window.Image = CustomImage;
})();
</script>

Дмитрий Space

Пн 3 Апреля 17:43

Для того чтобы оставить комментарий —
авторизуйтесь

бесплатные_ништяки

Связанные статьи

Доп. скрипты и стили

support@getscript.ru

Политика обработки данных

Оферта