Sitenize sosyal medya "beğen" ve "+1" düğmelerini eklemenin en etkili yolu nedir?

Question

Görev önemsiz gibi geliyor ama benimle birlikte.

• tarihinde (1)
• Facebook (Beğen)
• Heyecan (Tweet)
• LinkedIn (Pay)

:

Bunlar

ben çalışıyorum düğmelerdir

Webpagetest.org üzerinde biraz test yaparken, bu düğmeleri yerleştirmek için bu hizmetlerin her ikisinden de snippet'i aldığınızda inanılmaz derecede verimsiz olduğunu buldum. sayfa. Görüntülere ek olarak, birkaç JavaScript dosyasını da etkili bir şekilde indiriyorsunuz (bazı durumlarda sadece tek bir tuş için birden fazla JavaScript dosyası). Facebook Beğen düğmesi ve ilişkili kaynakları için toplam yükleme süresi, DSL bağlantısında 2,5 saniye kadar uzun olabilir.

Tek bir kaynaktan birden fazla düğme alabileceğiniz için ShareThis gibi bir hizmeti kullanmak biraz daha iyi. Ancak, Google + 1 için uygun desteğe sahip değiller. Google +1 düğmesi için onlardan kod alırsanız, bu kaynakların tümünü Google'dan çekmeye devam eder.

Genel bir "Paylaş" düğmesi tıklandığında tüm düğmeleri yükleyen bir fikrim var. Bu şekilde sayfa yükleme süresine eklenmiyor. Bunun bir başlangıç ​​noktası olarak here tarif edilen kod kullanılarak gerçekleştirilebileceğini düşünüyorum. Bu muhtemelen iyi bir çözüm olurdu ama bu yolda gitmeden önce buraya sormam gerektiğini düşündüm.

Answer 1

Bunun için endişelenmeyeceğim, ve işte bu yüzden: eğer söz konusu web siteleri kaynaklarını düzgün bir şekilde yönetdiyse - ve hadi, Google ve Facebook, vs.-- - tarayıcı ilk önce istek. Önbelleğin küçük olduğu veya devre dışı bırakıldığı bir hizmette bu etkiyi görebilirsiniz, ancak muhtemelen tüm müşterileriniz bu kaynaklara, sayfanıza ulaşmadan önce önbelleklerinde zaten sahip olacaktır.

Ve, merak ediyorum, sırf burada başka bir yol: Burada

StackOverflow'daki facebook payı javascript alakalı kod bloğu var:

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, hey, ben rahatsız etmedi, çünkü Kodu yeniden işlemek için.

StackOverflow mühendisleri sadece tıklatılan sayfayı çağırıyor gibi görünüyor. Bu, onu tıklayana kadar sadece metin olduğu anlamına gelir, bu da herşeyi dinamik bir şekilde çeker.

Answer 2

Bu düğmelerin dinamik yönünü umursamıyorsanız olası bir çözüm buldum. Başka bir deyişle,

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} 

Sadece uygun eklemek zorunda kalacak ... sadece bu bağlantıları kullanabilirsiniz + 1'lediği veya sayfanızı sevdim kaç kişi göstermek umursamazsak parametreleri. Bundan daha basit ya da hafif değil. Tabii ki, her bir düğme için simgeleri kullanırım, ama bu durumda CSS spritelarını daha fazla tasarruf için kullanabilirdim. Aslında bu rotaya gidebilirim.

---

GÜNCELLEME Ben bu değişikliği uygulanan ve sayfa yükleme süresi 1.5 Mbps DSL 3.9 saniyeye 4.9 saniye arasında gitti. Ve istek sayısı 82'den 63'e çıktı.

Yapacak birkaç ön uç optimizasyonum var ama bu doğru yönde büyük bir adımdı.