シンプルで高速なウェブサイトを作成しています。できるだけサイトを最適化しようとしています。ソーシャルメディアのボタンがウェブサイトをかなり遅くしていることに気づきました。Facebookの「いいね!」ボタン、「Twitter」ボタン、Google +ボタンを含めています。だから私はいくつかのテストを実行しました:
ソーシャルメディアボタンのないウェブサイト、読み込み時間0.24秒:
ウェブサイトとソーシャルメディアボタン、ロード時間は1.38s:
これが私のコードです:
<div id="social">
<!-- FB -->
<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 = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- TWITTER -->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>
<script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
</div>
だから私はこれらのソーシャルボタンをロードするためにいくつかのことを試みましたが、それらはウェブサイトのロード時間を遅くしません
JavaScriptによる1秒の遅延後のボタンの読み込み:
setInterval(function(){
$("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);
これは役に立たず、ボタンが適切に読み込まれず、バグがありました。
ドキュメントの準備ができたらボタンを読み込む:
$(document).ready(function() {
$("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});
これも役に立ちませんでした。ボタンは正常に読み込まれましたが、Webサイトの読み込み時間はまだ> 1.00秒でした。
アイデアが足りません。ウェブサイトを遅くすることなくそれらをロードする方法はありますか?
PS。これらのテストでChromeのページ読み込み時間プラグインを使用
解決:
CodeMonkeyの回答に感謝し、ページ全体が読み込まれた後にソーシャルボタンを読み込むことで、この問題を最終的に解決しました。必要なJavaScriptコード(ソーシャルメディアボタン用)を別のファイルに移動して、HTML /マークアップを少し見やすくしました。
JS(別のファイル、social.js内):
/* Facebook*/
(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 = "//connect.facebook.net/en_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
/* Twitter */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
/* G+ */
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
HTML:
<script>
$(window).bind("load", function() {
$.getScript('js/social.js', function() {});
});
</script>
<!-- FB -->
<div id="fb-root"></div>
<div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- TWITTER -->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>
したがって、この読み込みタイミングが再び正常になった後、0.24秒:
あなたは試すことができます
$(window).load(function() {
の代わりに
$(document).ready(function() {
so it will wait until after your images and everything has loaded.
If that doesn't help, then I would suggest having them only appear on hover. Have a bunch of static images / CSS sprites, that get replaced when the user hovers over them.
If you don't want that extra step, and you have server access to install modules you can try google's mod pagespeed to defer the javascript for you https://developers.google.com/speed/pagespeed/module/filter-js-defer
If you don't have server access you can try the CDN route, Cloudflare's rocket loader is very interesting, I am testing it at the minute for similar reasons, and see ~ 33% speed increase http://www.cloudflare.com/features-optimizer
If that doesn't help you could try the old favourite of sticking the buttons at the bottom of the page and repositioning with CSS so they look higher up; that way you can have them where you want them but they don't seem to interfere with the page load time.
You could try simpler oldschool alternatives like here http://zurb.com/article/883/small-painful-buttons-why-social-media-bu
or see if service like http://www.addthis.com/ or http://www.sharethis.com/ work any faster for you
もちろん、この時点で部屋にいる象は、ページに3つの主要なソーシャルメディアボタンを配置することであり、わずか1秒で済みますが、残念ながら非常に良いようです。彼らは一見、うまく最適化されていないようだボタン複雑さPageSpeed Insightsの評価によるグーグル IIRCそれらのすべてと文句を発見何かを。
あなたは100%+の速度のヒットを受けているので、本当に必要かどうかを確認するためにいくつかのA / Bテストを提案するでしょう。共有ボタンを使用すると、トラフィックを増やしてその存在を保証できますか?
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加