Чат с клиентами Facebook замедляет работу вашего сайта? Нашли решение обмануть Google PageSpeed ​​Insights

Сегодня я столкнулся с проблемой с Facebook SDK. Чат клиентов Facebook резко снизил мою оценку в Google PageSpeed ​​Insights более чем на 40 баллов ... Я не нашел никаких ответов в стеке, поэтому я придумал решение, которым решил поделиться с вами.

Это не самый красивый вариант, и он не решает проблему с медленным SDK для Facebook. Просто обманите оценку Google PageSpeed ​​Insights!

Мое решение - поместить раздел в setTimeout () и подождать (в моем случае) 5 секунд. Это дает время Google Speed ​​Checker для измерения времени отклика и выставления баллов.

Надеюсь, я кому-то помог!

const facebookChat = () => {
    window.fbAsyncInit = function() {
        FB.init({
            xfbml            : true,
            version          : 'v9.0'
        });
    };

    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/pl_PL/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

}

setTimeout(facebookChat, 5000);

facebook performance pagespeed-insights google-pagespeed facebook-customer-chat
person TybuRak    schedule 03.12.2020    source источник
comment
Я бы рекомендовал загружать по запросу - после нажатия фальшивой кнопки. См. мою улучшенную версию решения Калояна Косева.   -  person Rafiozoo    schedule 16.04.2021

Ответы (1)


arrow_upward
0
arrow_downward

Загрузка с задержкой больше не является хорошей идеей в большинстве случаев

Добавление скрипта после задержки - это ничего нового и Я выразил озабоченность / проблемы с очень похожим решением использования задержки в скрипте до.

Теперь, после моего первого ответа, я перечислил здесь все сильно изменилось, и я бы больше не советовал использовать setTimeout для задержки скриптов из-за огромной изменчивости скорости соединения в реальном мире.

Google Page Speed ​​Insights теперь гораздо более актуален благодаря введению Web Vitals с огромным обновление алгоритма поиска Google, которое будет реализовано в следующем году на основе этих показателей.

Эти показатели измеряются в реальном мире, поэтому хаки больше не собираются их сокращать.

Лучший способ - загрузка по намерению

Таким образом, гораздо лучший подход - загрузить мессенджер facebook по намерению.

Под этим я подразумеваю:

  1. Добавьте скрипт facebook messenger как самый последний элемент для загрузки, убедитесь, что он имеет атрибут async или defer. не инициализировать скрипт
  2. добавьте пользовательскую кнопку мессенджера facebook на свою страницу.
  3. когда пользователь нажимает эту кнопку, инициализирует мессенджер.
  4. замените пользовательскую кнопку на кнопку чата facebook (она должна появиться автоматически, просто скройте кнопку).

Многие проблемы с мессенджером связаны с огромным раздутием кода и большим временем выполнения этого кода ЦП.

Если вы реализуете это таким образом, вы не откладываете какой-либо рендеринг (из-за async или defer в теге скрипта), и вам не нужно беспокоиться о накладных расходах на инициализацию мессенджера, пока пользователь не нажмет вашу кнопку.

Расширенный способ определить, когда включать раздутые скрипты

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

Скорость сети

К счастью, в настоящее время мы можем довольно надежно рассчитать скорость сети и сделать приличное предположение о скорости процессора.

Скорость сети можно рассчитать с помощью performanceObserver.

Вы смотрите на первые 10 запросов на странице (используя entryType == resource), и исходя из них мы можем рассчитать сетевую задержку и скорость загрузки.

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

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

Скорость процессора

Что касается ЦП - если браузер поддерживает его, мы можем определить, сколько ядер у процессора, используя window.navigator.hardwareConcurrency, 4 или меньше мы предполагаем, что он медленнее, 5 или более мы предполагаем, что он быстрее. Это не очень точно, но может быть хорошим дополнением к описанному выше методу точной настройки.

В качестве альтернативы для расчета загрузки ЦП вы можете снова использовать performanceObserver для прослушивания longtask элементов. Если в течение X секунд не было длинных задач, включите скрипт facebook.

Этого можно достичь, установив таймер на x секунд, а затем прослушав entryType== "longtask", а затем сбросив таймер, если происходит запись longtask.

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

Последние мысли

В конце концов, все зависит от того, насколько важен Facebook Messenger (или любая сторонняя библиотека), когда вы ее загружаете и как вы с ней справляетесь.

Использование библиотеки web Vitals для измерения реальных показателей пользователя (RUM) намного лучше для принятия таких решений, как это, чем произвольное добавление задержки, вы можете обнаружить, что большинство ваших пользователей не испытывают проблемы.

person Graham Ritchie    schedule 04.12.2020
comment
Отличная идея загружать его, только если пользователь нажимает на него. Не думал о ти. Большое спасибо! - person TybuRak; 05.12.2020
comment
Рад, что помог, удачи в проекте. - person Graham Ritchie; 05.12.2020