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




5 Answers

तुम कोशिश कर सकते हो

$(window).load(function() {

के बजाय

$(document).ready(function() {

तो यह आपकी छवियों के बाद तक इंतजार करेगा और सब कुछ लोड हो गया है।

अगर इससे मदद नहीं मिलती है, तो मैं सुझाव दूंगा कि उन्हें केवल होवर पर दिखाई दे। स्थैतिक छवियों / सीएसएस स्प्राइट्स का एक गुच्छा है, जो उपयोगकर्ता को उनके ऊपर घूमते समय बदल दिया जाता है।

यदि आप उस अतिरिक्त चरण को नहीं चाहते हैं, और आपके पास मॉड्यूल स्थापित करने के लिए सर्वर पहुंच है, तो आप https://developers.google.com/speed/pagespeed/module/filter-js-defer लिए जावास्क्रिप्ट को स्थगित करने के लिए Google के mod पृष्ठों को आजमा सकते हैं। https://developers.google.com/speed/pagespeed/module/filter-js-defer

यदि आपके पास सर्वर का उपयोग नहीं है तो आप सीडीएन रूट का प्रयास कर सकते हैं, क्लाउडफ्लारे का रॉकेट लोडर बहुत रोचक है, मैं इसी कारण से मिनट में इसका परीक्षण कर रहा हूं, और ~ 33% गति वृद्धि http://www.cloudflare.com/features-optimizer

यदि इससे मदद नहीं मिलती है तो आप पृष्ठ के निचले भाग में बटन चिपकाने और सीएसएस के साथ पुनर्स्थापित करने के पुराने पसंदीदा को आजमा सकते हैं ताकि वे ऊंचे दिखाई दें; इस तरह आप उन्हें प्राप्त कर सकते हैं जहां आप उन्हें चाहते हैं लेकिन वे पेज लोड समय में हस्तक्षेप नहीं कर रहे हैं।

आप यहां जैसे पुराने पुरानेस्कूल विकल्पों को आजमा सकते हैं http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

या देखें कि http://www.addthis.com/ या http://www.sharethis.com/ जैसी सेवा आपके लिए तेज़ी से काम करती है या नहीं

बेशक इस बिंदु पर कमरे में हाथी यह है कि पृष्ठ पर 3 मुख्य सोशल मीडिया बटन हैं, और इसके लिए केवल आपको एक सेकंड खर्च करना है - दुख की बात है कि काफी अच्छा लगता है! वे भ्रामक रूप से जटिल बटन हैं जो अच्छी तरह से अनुकूलित नहीं लगते हैं, Google पेजस्पेड अंतर्दृष्टि उन सभी के साथ शिकायत करने के लिए कुछ पाता है Iirc

चूंकि आप 100% + स्पीड हिट ले रहे हैं, इसलिए मैं कुछ ए / बी परीक्षण का सुझाव दूंगा कि आपको वास्तव में उनकी आवश्यकता है या नहीं, यानी आपकी साइट धीमी गति से यातायात कम कर रही है? क्या शेयर बटन होने से उनकी उपस्थिति वारंट करने के लिए अधिक यातायात लाता है?

मैं एक सरल और तेज़ वेबसाइट बना रहा हूं, और मैं जितना संभव हो उतना साइट को अनुकूलित करने की कोशिश कर रहा हूं। मैंने देखा कि सोशल मीडिया बटन वेबसाइट को बहुत धीमा कर रहे हैं। मैं फेसबुक जैसे बटन, ट्विटर बटन और 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 एस:




हालांकि यह सवाल पुराना है और संभवतः पूछने वाले व्यक्ति को मेरी प्रतिक्रिया नहीं दिखाई देगी, यहां एक ही मुद्दे वाले किसी के लिए एक विकल्प है - जब तक आप पसंद / शेयर / आदि की संख्या दिखाने के लिए बलिदान नहीं करते हैं।

आप बस ऐसे लिंक जोड़ सकते हैं जो विज़िटर को वास्तविक सोशल नेटवर्क पर भेजते हैं और प्री-भरे यूआरएल और विवरण के साथ एक साझाकरण विंडो खोलते हैं।

कोड बहुत आसान है और आप अपनी इच्छित छवि या टेक्स्ट का उपयोग कर सकते हैं, जिससे आपकी साइट के डिज़ाइन के साथ बटन फिट करना आसान हो जाएगा।

<a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">Share on Facebook</a>
<a href="https://twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>
<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>

बस एक संक्षिप्त विवरण के साथ यूआरएल वेबसाइट और टेक्स्ट के यूआरएल के साथ यूआरएल को प्रतिस्थापित करें

इस समाधान के लिए कोई जावास्क्रिप्ट की आवश्यकता नहीं है और इसलिए यह बेहद हल्का है। आप लोगो, आइकन फ़ॉन्ट, सरल टेक्स्ट ("फेसबुक पर साझा करें") का उपयोग कर सकते हैं।

मैंने एक ब्लॉग पोस्ट भी लिखा जिसमें कई अन्य सोशल नेटवर्क्स शामिल हैं




सोशल मीडिया को लोड करने वाली स्क्रिप्ट के अंदर, उनमें "defer" डालें।

<script defer src="http://api.facebook.com/....."></script>



अधिकांश प्रमुख सोशल मीडिया बटन उनके जावास्क्रिप्ट का असीमित संस्करण प्रदान करते हैं। आपको आधिकारिक दस्तावेज़ीकरण पृष्ठों पर थोड़ा और नीचे स्क्रॉल करना होगा।




यदि आप समाधान ढूंढने के लिए यहां आए हैं तो फेसबुक सोशल प्लगइन्स को तेज़ी से कैसे लोड किया जाए - उदाहरण के लिए उन्हें विंडो से पहले कैसे प्रस्तुत करना है। () (घटना) (घटना पर वाईफाई / बड़ी छवि पर धीमी नेटवर्क की वजह से) ... आप मेरे समाधान का प्रयास कर सकते हैं :

window.fbAsyncInit = function () {
    dispatchEvent(new Event('load'));
}

fbAsyncInit को जल्द ही फेसबुक एसडीके जेएस फ़ाइल लोड किया जाता है (उदाहरण के लिए तेज़) और आप कस्टम लोड इवेंट प्रेषण का उपयोग कर पहले प्रस्तुत करने के लिए नकली सोशल बटन (छवियों जैसे अन्य संसाधनों से पहले) प्रस्तुत कर सकते हैं। परिणामों के बारे में जागरूक रहें जब आप अपने अन्य जावास्क्रिप्ट कोड / पुस्तकालयों के आधार पर पहले लोड () घटना को आग लगाते हैं।

एक और समाधान आईएसआरएएम में एसडीके लोडिंग के साथ अपनी सोशल प्लगइन को लपेटना है। एफबी एपीआई विंडो के लिए इंतजार नहीं करेगा। पैरेंट विंडो का अधिभार और पहले सोशल प्लगइन्स प्रस्तुत करेगा।




Related

javascript html facebook-social-plugins google-plus-one twitter-button