Плагин чата Facebook «убивает» Pagespeed до 33

Я добавил Плагин чата Facebook с помощью этого кода, сгенерированного на facebook.com

<!-- Load Facebook SDK for JavaScript -->
<div id = "fb-root"></div>
<script>(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/en_US/sdk/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class = "fb-customerchat"
  attribution=setup_tool
  page_id = "124030157608968">
</div>`

Однако я провожу тест Pagespeed в Google Chrome, и результаты ужасны.

Есть предложения, как решить эту проблему?

Большое тебе спасибо!

Плагин чата Facebook «убивает» Pagespeed до 33

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

— 27.11.2018 15:04

facebook seo facebook-javascript-sdk chat pagespeed

27.11.2018 13:54

Почему Facebook остановился на PHP

PHP имеет долгую историю с Facebook, и это был основной язык программирования, использовавшийся для создания сайта в первые годы его существования....

2 965

Ответы 3

Поместите весь код в самый низ исходного кода
Сохраните https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js локально, реализуйте его оттуда с помощью defer.

Не могли бы вы пояснить, что вы имеете в виду, говоря: «реализовать это оттуда»? - Я так понял копировать скрипт locall, что тогда в js.src = помещать?

— 22.03.2019 19:10

Вы сохраняете этот файл https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js локально. Затем вы меняете его URL-адрес во фрагменте кода на https://your-domain.com/xfbml.customerchat.js или на место, где вы его сохранили.

— 25.03.2019 14:08

Я пробовал это, и это не сильно увеличивает скорость страницы. Основная причина этого снижения скорости страницы в основном связана с файлом PHP и этим пакетом множества файлов js, запускаемых этим кодом js, а не размером самого js. Кроме того, похоже, что анализ страницы Google игнорирует defer и async, поскольку они не внесли никаких изменений в мою оценку страницы.

— 07.12.2020 08:33

30.11.2018 15:21

Та же проблема. Независимо от того, инициализируете ли вы его асинхронно или нет, он буквально убивает индекс скорости страницы вашего сайта!

Вот подход, который я применил, чтобы полностью обойти эту катастрофу.

Я разместил фальшивую кнопку ? Сообщения в правом нижнем углу страницы:

<svg id = "fb-messanger-fake-button" width = "60px" height = "60px" viewBox = "0 0 60 60" cursor = "pointer">
    <g stroke = "none" stroke-width = "1" fill = "none" fill-rule = "evenodd">
        <g>
        <circle fill = "#00B2FF" cx = "30" cy = "30" r = "30"></circle><svg x = "10" y = "10">
            <g transform = "translate(0.000000, -10.000000)" fill = "#FFFFFF">
            <g id = "logo" transform = "translate(0.000000, 10.000000)">
                <path
                d = "M20,0 C31.2666,0 40,8.2528 40,19.4 C40,30.5472 31.2666,38.8 20,38.8 C17.9763,38.8 16.0348,38.5327 14.2106,38.0311 C13.856,37.9335 13.4789,37.9612 13.1424,38.1098 L9.1727,39.8621 C8.1343,40.3205 6.9621,39.5819 6.9273,38.4474 L6.8184,34.8894 C6.805,34.4513 6.6078,34.0414 6.2811,33.7492 C2.3896,30.2691 0,25.2307 0,19.4 C0,8.2528 8.7334,0 20,0 Z M7.99009,25.07344 C7.42629,25.96794 8.52579,26.97594 9.36809,26.33674 L15.67879,21.54734 C16.10569,21.22334 16.69559,21.22164 17.12429,21.54314 L21.79709,25.04774 C23.19919,26.09944 25.20039,25.73014 26.13499,24.24744 L32.00999,14.92654 C32.57369,14.03204 31.47419,13.02404 30.63189,13.66324 L24.32119,18.45264 C23.89429,18.77664 23.30439,18.77834 22.87569,18.45674 L18.20299,14.95224 C16.80079,13.90064 14.79959,14.26984 13.86509,15.75264 L7.99009,25.07344 Z">
                </path>
            </g>
            </g>
        </svg>
        </g>
    </g>
</svg>

... аааи я разместил его с помощью CSS в правом нижнем углу, ТОЧНО там, где появится настоящая кнопка Messanger (в зависимости от вашей конфигурации):

#fb-messanger-fake-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    transition: opacity 0.3s;
}

Используя jQuery (в моем случае) или просто JavaScript (если хотите), реализуйте логику, которая вводит Facebook SDK и запускает плагин Messanger ТОЛЬКО, когда пользователь нажимает на нашу поддельную кнопку Messanger:

// Facebook SDK for JavaScript inject code
function injectFbSdkAsync(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/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
};

$(function() {
    const $fbMessangerFakeButton = $('#fb-messanger-fake-button');
    $fbMessangerFakeButton.on('click', function(){
        // Fades out the fake button a bit, to indicate "loading"
        $fbMessangerFakeButton.css({ opacity: 0.4 });
        // Inject the Facebook SDK in async manner:
        injectFbSdkAsync(document, 'script', 'facebook-jssdk');

        // Callback on Facebook SDK init, that fires up the Messanger plugin
        window.fbAsyncInit = function() {
            FB.init({ xfbml: true, version: 'v8.0' });

            // Callback when Facebook SDK finish up with rendering
            FB.Event.subscribe('xfbml.render', function(){
                // Immediately toggle opening the Facebook Messanger,
                // as if the user clicked the real Messanger button.
                FB.CustomerChat.show(true);

                // Hide the fake button, so that only the real one remains!
                $fbMessangerFakeButton.css({ display: 'none' });
            });
        };
    });
});

И это все! Индекс скорости вашей страницы вернулся к норме.

25.10.2020 19:28

Мне очень нравится подход Калояна. Спасибо! Это очень полезно и помогает в веб-сайте представление, который становится заметно лучше.

Я улучшил фальшивую кнопку с небольшим счетчиком внутри в качестве индикатора загрузки - просто для лучшего UX.

Также обернут SVG тегом button (я полагаю, для лучшего a11y) и больше не использовать jQuery.

Поддельная кнопка Messenger

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

<button id = "fb-messenger-fake-button">
<svg xmlns = "http://www.w3.org/2000/svg" width = "60" height = "60" viewBox = "0 0 1024 1024" aria-hidden = "true">
    <circle fill = "#00B2FF" style = "fill: var(--msgr-color, #00B2FF)" cx = "512" cy = "512" r = "512"/>
    <g id = "spinner" fill = "#fff"><circle cx = "512" cy = "239" r = "47"/><circle cx = "375" cy = "275" r = "47" fill-opacity = "0.9"/><circle cx = "275" cy = "375" r = "47" fill-opacity = "0.8"/><circle cx = "239" cy = "512" r = "47" fill-opacity = "0.7"/><circle cx = "275" cy = "649" r = "47" fill-opacity = "0.6"/><circle cx = "375" cy = "749" r = "47" fill-opacity = "0.5"/><circle cx = "512" cy = "785" r = "47" fill-opacity = "0.4"/><circle cx = "649" cy = "749" r = "47" fill-opacity = "0.3"/><circle cx = "749" cy = "649" r = "47" fill-opacity = "0.2"/><circle cx = "785" cy = "512" r = "47" fill-opacity = "0.1"/></g>
    <path id = "logo" fill = "#fff" d = "M512 171c192 0 341 141 341 331S704 833 512 833c-35 0-68-5-99-13-6-2-12-1-18 1l-68 30c-17 8-37-5-38-24l-2-61c0-7-4-14-9-19a324 324 0 01-107-245c0-190 149-331 341-331zM307 599c-10 15 9 32 24 21l107-82c8-5 18-5 25 0l80 60c24 18 58 12 74-14l100-159c10-15-9-32-24-21l-107 82c-8 5-18 5-25 0l-80-60a51 51 0 00-74 13L307 599z"/>
</svg><span class = "screen-reader-text">Enable chat via Messenger</span>
</button>

<!-- Messenger Chat plugin Code -->
<div id = "fb-root"></div>
<!-- Your Chat Plugin code -->
<!-- Put the ID of your page on Facebook, at least -->
<div class = "fb-customerchat"
 attribution=setup_tool
 page_id = "000000000000000"
 theme_color = "#00B2FF"
 logged_in_greeting = "Hi! How can I help you?"
 logged_out_greeting = "Hi! How can I help you?">
</div>

<script>
// Facebook SDK for JavaScript inject code
// Change language part to yours, e.g.: en_US > pl_PL
function injectFbSdkAsync(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/en_US/sdk/xfbml.customerchat.js";
  fjs.parentNode.insertBefore(js, fjs);
}

var fbMessengerFakeButton = document.getElementById('fb-messenger-fake-button');
fbMessengerFakeButton.addEventListener('click', function() {
    
  // Once #fb-messenger-fake-button is clicked triggers animated spinner inside it 
  // See CSS, and SVG structure inside the button
  this.classList.add('active');
    
  // Inject the Facebook SDK in async manner:
  injectFbSdkAsync(document, "script", "facebook-jssdk");

  // Callback on Facebook SDK init, that fires up the Messenger plugin
  window.fbAsyncInit = function () {
    FB.init({ xfbml: true, version: "v10.0" });

    // Callback when Facebook SDK finish up with rendering
    FB.Event.subscribe("xfbml.render", function () {
      // Opening the Facebook Messenger
      FB.CustomerChat.show(true);
            
      // Hide the fake button, so that only the real one remains!
      fbMessengerFakeButton.style.display = 'none';
    });
  };
});
</script>

CSS

#fb-messenger-fake-button {
    position: fixed;
    z-index: 100;
    bottom: 24px;
    right: 24px;
    padding: 0 !important;
    border-radius: 50%;
    /* you may use a color of your theme */
    --msgr-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s;
}
#fb-messenger-fake-button svg {
    display: block;
}
#fb-messenger-fake-button.active #logo {
    opacity: 0;
}
#fb-messenger-fake-button.active #spinner {
    animation: spin 3s linear infinite;
    transform-origin: center;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}