[英]Facebook chat plugin “kills” Pagespeed to 33
我通過從 facebook.com 生成的代碼添加了Facebook 聊天插件
<!-- 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>`
但是,我在 Google Chrome 中運行了 Pagespeed 測試,結果是災難性的。
任何建議如何解決這個問題?
非常感謝你!
同樣的問題。 無論您是否以異步方式初始化它,它都會殺死您網站的頁面速度指數!
這是我為完全解決這場災難而采取的方法。
我在頁面的右下角放置了一個假的 🙄 信使按鈕:
<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>
... aaa 我用 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' });
});
};
});
});
就是這樣! 您的頁面速度指數已恢復正常。
我非常喜歡 Kaloyan 的方法。 謝謝! 它非常有用,有助於提高網站性能,這顯然會變得更好。
我改進了里面有一個小微調器的假按鈕,作為加載指示器 - 只是為了更好的用戶體驗。
還用button
標簽包裝了 SVG(我相信a11y更好),並且不再使用 jQuery。
完整代碼,在頁面末尾掛鈎(可能在頁腳中)。
<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>
#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);
}
}
轉到您在 Facebook 上的頁面:設置 → 消息傳遞 → 將 Messenger 添加到您的網站 → 開始
在那里,最重要的是,您需要放置您的網站域。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.