Disqus yorumları kullandığım ve uzun zamandır ilgilenemediğim sitemi gözden geçiriyordum. Bir dönemler hız konusunda verimli olsa da yeni güncellemelerle birlikte hız performansı yerlerdeydi.
Buna kullandığım Disqus yorum sisteminin sebep olduğunu gördüm. Masaüstü performansında nispeten kabul edilebilir bir hız düşmesi olsa da mobil sürümde hızı muazzam etkiliyordu.
Şöyle söyleyeyim Disqusu optimize etmeden evvel google pagespeed puanı 33-40 iken birazdan paylaşacağım düzenleme ile sayfa sayfa 91-98 seviyelerine çıkarmış oldum. Masaüstü hızı ise tüm sayfalarda 100e sabitlenmiş oldu :)
Ne yapacağız?
Disqusu sayfada direkt değil birçok sitede yenice kullanılmaya başlandığı gibi "Yorumları göster" gibi bir metinle ve tıklama sonrasında yükleteceğiz. Bunu jquery ile yapacağız.
İlk aşamada Disqus bizlere sitemize eklememiz için 2 şey vermektedir.
ve js kodları olarak
<script>
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://epvpserverler.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
divi, disqusu görüntülemeyi istediğimiz yere ekliyoruz js kodunu ise sayfanın sonuna ekleyebiliriz. Aynı yere eklememiz şart değil yani.
Burada https://epvpserverler.disqus.com/embed.js dosyasını otomatik olarak dışarıdan çağırmakta ve sayfaya yüklemektedir.
Yorumları Göster
adında bir div daha oluşturalım ve disqus_thread ın hemen üzerine ekleyelim.
Şimdi jquery ile tıklandıktan sonra yorumların yüklenmesini sağlayalım:
$(document).ready(function(){
$("#disqus_show").on("click", function(){
var jsDisqus = "https://epvpserverler.disqus.com/embed.js";
(function() {
var d = document, s = d.createElement('script');
s.src = jsDisqus;
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
$("#disqus_show").hide();
});
});
disqus_show idli dive tıklandığında fonksiyonumuz çalışacak ve disqus kodlarımız sayfamıza yüklenecektir son olarakta Yorumları Göster yazan divimizi hide() ile gizledik.
Tek düzenlemeniz gereken yer s.src nin karşısında yer alan değeri jsDisqus un içerisinde ki değerle değitirmek
Kodların son hali:
Disqusun görünmesini istediğiniz yere bu kodları ekleyin:
Yorumları göster
Sayfanın sonuna body etiketinden önce de bu js kodları yükleyin (jquery kullandığımız için jquery srcsinden sonra ekleyin)
$(document).ready(function(){
$("#disqus_show").on("click", function(){
var jsDisqus = "https://epvpserverler.disqus.com/embed.js";
(function() {
var d = document, s = d.createElement('script');
s.src = jsDisqus;
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
$("#disqus_show").hide();
});
});
Örnek olarak bir link bırakıyorum: https://www.epvpserverler.com/metin2-pet-sistemi-kilavuzu-179-blog.html
Alternatif kullanım yerleri:
* Film sitelerinin kesinlikle kullanmasını tavsiye ettiğim bir yöntemdir. Video embedlerini direkt sayfa yüklenirken eklemek yerine sayfa yüklendikten sonra video önü reklam varsa eğer Reklamı Geç butonuyla tetikleyip sonrasında sayfaya dahil etmek hız konusunda oldukça etkili olabilir.
