आपकी साइट पर सोशल मीडिया "जैसे" और "+1" बटन जोड़ने का सबसे प्रभावी तरीका क्या है?

Question

कार्य तुच्छ लगता है लेकिन मेरे साथ भालू।

• गूगल (+1)
• फेसबुक (जैसा)
• ट्विटर (ट्वीट)
• लिंक्डइन (शेयर)

:

ये बटन के साथ मैं काम कर रहा हूँ कर रहे हैं

webpagetest.org पर एक छोटे से परीक्षण के साथ मैंने पाया कि यह अविश्वसनीय रूप से अक्षम है यदि आप इन बटनों में से प्रत्येक को स्निपेट लेते हैं ताकि इन बटनों को आपके पास रखा जा सके। पृष्ठ। छवियों के अलावा स्वयं आप कई जावास्क्रिप्ट फ़ाइलों को प्रभावी ढंग से डाउनलोड कर रहे हैं (कुछ मामलों में केवल एक बटन के लिए कई जावास्क्रिप्ट फाइलें)। फेसबुक लाइक बटन और उसके संबंधित संसाधनों के लिए कुल लोड समय डीएसएल कनेक्शन पर 2.5 सेकंड तक हो सकता है।

अब ShareThis जैसी सेवा का उपयोग करना बेहतर है क्योंकि आप एक स्रोत से कई बटन प्राप्त कर सकते हैं। हालांकि, उनके पास Google +1 के लिए उचित समर्थन नहीं है। अगर आपको Google +1 बटन के लिए कोड प्राप्त होता है, तो यह अभी भी उन सभी संसाधनों को Google से खींच रहा है।

मेरे पास एक ऐसा विचार है जिसमें सभी बटन लोड करना शामिल होता है जब एक सामान्य दिखने वाला "साझा करें" बटन क्लिक किया जाता है। इस तरह यह पेज लोड समय में नहीं जोड़ रहा है। मुझे लगता है कि इसे शुरुआती बिंदु के रूप में here वर्णित कोड का उपयोग करके पूरा किया जा सकता है। यह शायद एक अच्छा समाधान होगा लेकिन मुझे लगा कि मैं उस सड़क पर जाने से पहले यहां पूछूंगा।

Answer 1

मुझे इसके बारे में चिंता नहीं होगी, और यहां क्यों है: यदि प्रश्नों वाली वेबसाइटों ने अपने संसाधनों को सही ढंग से प्रबंधित किया है - और, आओ, यह Google और Facebook, आदि है ... - ब्राउज़र को पहले के बाद उन्हें कैश करना चाहिए निवेदन। आप उस सेवा में प्रभाव देख सकते हैं जहां कैश छोटा या अक्षम है, लेकिन, सभी संभावनाओं में, आपके सभी क्लाइंट पहले से ही आपके पृष्ठ तक पहुंचने से पहले उन संसाधनों को अपने कैश में रखेंगे।

और, सिर्फ इसलिए कि मैं उत्सुक था, यहाँ एक और तरीका है:

यहाँ StackOverflow के फेसबुक शेयर जावास्क्रिप्ट से प्रासंगिक कोड का स्निपेट है:

facebook:function(c,k,j){k=a(k,"sfb=1");c.click(function(){e("http://www.facebook.com/sharer.php?u="+k+"&ref=fbshare&t="+j,"sharefacebook","toolbar=1,status=1,resizable=1,scrollbars=1,width=626,height=436")})}}}(); 

Minified, क्योंकि हे, मैं परेशान नहीं किया कोड को फिर से काम करने के लिए।

ऐसा लगता है कि स्टैक ओवरफ्लो इंजीनियरों बस क्लिक पर पेज को कॉल कर रहे हैं। इसका मतलब यह है कि जब तक आप इसे क्लिक नहीं करते हैं, तब तक यह केवल पाठ होता है, जो गतिशील रूप से सब कुछ खींचता है।

Answer 2

यदि आपको इन बटनों के गतिशील पहलू की परवाह नहीं है तो मुझे एक संभावित समाधान मिला। दूसरे शब्दों में, आप को दिखाने के लिए कितने लोगों को +1 किया था या अपने पेज पसंद आया परवाह करता है, तो नहीं है, तुम सिर्फ इन लिंक का उपयोग कर सकते हैं ...

https://plusone.google.com/_/+1/confirm?hl=en&url={URL} 
http://www.facebook.com/share.php?u={URL} 
http://twitter.com/home/?status={STATUS} 
http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={TITLE}&summary={SUMMARY}&source={SOURCE} 

तुम बस उचित डालने के लिए होगा मापदंडों। यह उससे कहीं अधिक सरल या हल्का नहीं मिलता है। मैं अभी भी पाठ्यक्रम के प्रत्येक बटन के लिए आइकन का उपयोग करता हूं, लेकिन मैं वास्तव में और भी बचत के लिए इस मामले में सीएसएस स्प्राइट्स का उपयोग कर सकता हूं। मैं वास्तव में इस मार्ग पर जा सकता हूं।

---

अद्यतन

मैं इस बदलाव को लागू किया और पृष्ठ लोड समय पर 1.5 एमबीपीएस डीएसएल 3.9 सेकंड के लिए 4.9 सेकंड से चला गया। और अनुरोधों की संख्या 82 से 63 हो गई।

मेरे पास कुछ और फ्रंट-एंड ऑप्टिमाइज़ेशन हैं, लेकिन यह सही दिशा में एक बड़ा कदम था।