[javascript] सोशल मीडिया बटन वेबसाइट लोड समय धीमा करते हैं



Answers

सामाजिक विजेट्स को आपके लोड समय को बहुत धीमा नहीं करना चाहिए, जब तक कि वे अधिक महत्वपूर्ण स्क्रिप्ट को अवरुद्ध नहीं कर रहे हैं जो पृष्ठ को लोड करने के लिए प्रतीक्षा कर रहे हैं। जो कोड आप उपयोग कर रहे हैं वह असीमित है, जो मदद करता है, लेकिन अधिकांश ब्राउज़रों में यह अभी भी window.onload अवरोधित करेगा। Iframes का उपयोग करके गैर-अवरुद्ध तरीके से जेएस एसडीके लोड करने के तरीके के बारे में जानकारी के लिए यहां स्टॉयन की पोस्ट देखें।

यदि यह बहुत अधिक है, और आप एसडीके डाउनलोड या चलने में देरी करना चाहते हैं (और इसे चलाने के बाद इसे तेज करें), मेरी सिफारिश यहां दी गई है:

सबसे पहले, या तो jQuery जैसी लाइब्रेरी का उपयोग करें जो एक क्रॉस-प्लेटफ़ॉर्म फैशन में तैयार होने वाले डोम में हुक करने का एक तरीका प्रदान करता है। यहां एक कार्यान्वयन है । एक बार जब आपका "डोम तैयार हैंडलर" हो, तो आपको निम्न दो चीजों में से एक करना चाहिए:

  1. जेएस एसडीके लोडिंग कोड को अपने डोम तैयार हैंडलर में ले जाएं।

  2. Xfbml लें: FB.init (...) से सच है, यदि आपके पास है (इस मामले में, आप नहीं करते हैं), और एसडीके यूआरएल से xfbml = 1 ले लें। यह सामाजिक विजेट को पार्स किए जाने से रोकता है और तुरंत प्रारंभ किया जाता है। फिर, अपने डोम तैयार हैंडलर में FB.XFBML.parse () को कॉल करें। उस विधि के लिए यहां दस्तावेज़ देखें । प्रदर्शन के लिए सबसे अच्छी बात यह है कि विशेष रूप से FB.XFBML.parse(document.getElementById('')) को कॉल करना होगा ताकि एसडीके पूरे डोम पर जाने का समय बर्बाद न करे।

Question

मैं एक सरल और तेज़ वेबसाइट बना रहा हूं, और मैं जितना संभव हो उतना साइट को अनुकूलित करने की कोशिश कर रहा हूं। मैंने देखा कि सोशल मीडिया बटन वेबसाइट को बहुत धीमा कर रहे हैं। मैं फेसबुक जैसे बटन, ट्विटर बटन और Google+ बटन सहित हूं। तो मैंने कुछ परीक्षण चलाए:

सोशल मीडिया बटन के बिना वेबसाइट, समय 0.24s लोड हो रहा है:

सोशल मीडिया बटन के साथ वेबसाइट, लोड समय 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>

तो मैंने वेबसाइट लोड लोड समय धीमा किए बिना इन सोशल बटनों को लोड करने के लिए कुछ चीजों की कोशिश की।

जावास्क्रिप्ट के माध्यम से एक सेकंड देरी के बाद बटन लोड हो रहा है:

setInterval(function(){
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);

इससे मदद नहीं मिली, बटन ठीक से लोड नहीं हुए और वे bugging थे।

दस्तावेज़ के बाद बटन लोड हो रहा है:

$(document).ready(function() {
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});

यह या तो मदद नहीं करता था। बटन बस ठीक लोड हो गए लेकिन वेबसाइट लोड समय अभी भी> 1.00 सेकंड था।

मैं विचारों से बाहर चला रहा हूँ। वेबसाइट को धीमा किए बिना उन्हें लोड करने का कोई तरीका?

पुनश्च। उन परीक्षणों में क्रोम के लिए प्रयुक्त पृष्ठ लोड टाइम प्लगइन

उपाय:

कोडमॉन्की के जवाब के लिए धन्यवाद, मैंने अंततः पूरे पृष्ठ लोड होने के बाद सोशल बटन लोड करके इस समस्या को हल किया। मैंने अपना HTML / मार्कअप थोड़ा सा क्लीनर बनाने के लिए एक अलग फ़ाइल में आवश्यक जावास्क्रिप्ट कोड (सोशल मीडिया बटन के लिए) को स्थानांतरित कर दिया।

जेएस (एक अलग फ़ाइल में, 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 एस:




प्लगइन (सोशल मीडिया बटन) लोड समय कई कारकों के आधार पर अलग-अलग होंगे, जिनमें (लेकिन इस तक सीमित नहीं है):

  • आपके सर्वर का प्रतिक्रिया समय (प्लगइन्स तब तक लोड नहीं होते जब तक कि आपका कोड उन्हें भी न बताए।)
  • उपयोगकर्ता की इंटरनेट गति (इस मामले में, आपका)
  • सोशल मीडिया वेबसाइट के सर्वर की दूरी (उदाहरण के लिए, फेसबुक का सर्वर महाद्वीप के दूसरी तरफ स्थित हो सकता है, विलंबता बना सकता है)
  • सोशल मीडिया वेबसाइट का भार समय पूरी तरह से

इसका मतलब है कि जितना संभव हो उतना अनुकूलित करने के लिए अपना कोड बनाने के अलावा आप इतना कुछ नहीं कर सकते हैं।

साथ ही, दस्तावेज़ तैयार होने के बाद अपने जावास्क्रिप्ट प्लगइन्स को चलाने के लिए यह अच्छा अभ्यास है, जब तक अन्यथा प्लगइन दस्तावेज़ द्वारा निर्दिष्ट नहीं किया जाता है। SetInterval एक अच्छा दृष्टिकोण नहीं है, क्योंकि यह नहीं जानता कि सभी पृष्ठ संशोधित करने के लिए तैयार हैं या नहीं। तो कृपया पेज सामग्री को संशोधित करने वाले कुछ भी करने के लिए $(document).ready() दृष्टिकोण का उपयोग करना सुनिश्चित करें।




अपने जैसे बटन को पुन: प्रयोज्य iframe में डालने का प्रयास करें और यूआरएल को पसंद करें।

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fphys.org" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe> 



सामाजिक init स्क्रिप्ट के लिए async लोडिंग का उपयोग करने का प्रयास करें:

<script async="async">...</script>



Related