Blogger Hızlandırma Yöntemleri | Bloğunuzu Hızlandırın!

Blogger blog hızlandırma yöntemleri denildiğinde birçok bloggerın aklına hemen şunlar gelecektir:

◼ Responsive blog temasına sahip olmak

◼ İyi bir hosting firmasından barındırma hizmeti satın almak

◼ CDN kullanmak

Evet, yukarıdaki 3 madde de aslında doğru bloğunuzun hızını etkileyebilecek yerinde ve doğru atılmış adımlar ancak maalesef Blogger hızlandırmak için tam olarak yeterli sayılmazlar.

Blog hızlandırmak için yapabileceğimiz çok daha detaylı, doğrudan Blogger kodlarına ve içerik hazırlama sürecimize müdahale ederek yapabileceğimiz bazı Blogger blog hızlandırma yöntemleri de bulunmaktadır. Ben de bu yazımda sizlere bu yöntemleri ayrıntılı olarak anlatarak yardımcı olmayı amaçladım. İsterseniz bloğumuzu hızlandırmamıza ve Google sonuçlarında daha iyi bir noktaya gelmemize yardımcı olabilecek bu blog hızlandırma yöntemlerine hep birlikte bakalım.

Bu arada eğer bloğunuza daha önce hız ve performans testi yapmadıysanız, benim de sık kullandığım çevrimiçi ve ücretsiz bir platform olan GTmetrix web sitesini kullanabilirsiniz. Bu testi yaparak bloğunuzun güçlü ve zayıf kısımlarını görebilirsiniz.

Fotoğraflarınızı Sıkıştırın

Blog yazılarımızın içerisinde hepimiz bol miktarda görsel kullanıyoruz. Kullandığımız görseller hem yazımız hem de ziyaretçiler için oldukça yararlıdır. Ancak görsellerimizi sıkıştırmadan orijinal boyutlarıyla bloğumuzda yayınlarsak, bu durum sayfa yüklenme hızımızı ciddi biçimde yavaşlatacaktır.

Sayfa yüklenme hızı ise Google için en önemli noktalarda biridir. Şayet bloğumuz görsellerimizin boyutlarının büyüklüğünden dolayı yavaşsa, Google botları bunu hemen fark edeceklerdir. Bu da zamanla arama sonuçlarında bloğumuzun daha aşağılarda çıkmasına yol açan önemli etkenlerden biridir.

Peki bloğumuzda kullanacağımız görselleri nerede sıkıştırabiliriz? Ben bunun için uzun süredir Tinypngsitesini kullanıyorum ve sizlere de rahatlıkla önerebilirim.

Lazy Loading Eklentisini Kurun

Lazy Loading eklentisinin bir diğer adı da “Tembel Yüklenme” olarak geçmektedir. Adından da anlaşılacağı gibi bloğunuzdaki görsellerin yavaş yüklenmesinin önüne geçmek için yapılmış bir eklenti olan Lazy Loading eklentisi, ziyaretçi faresini aşağı kaydırdıkça bloğunuza ait görselleri yükler. Yani tüm görselleri ziyaretçiye göstermek yerine sadece o an ziyaretçinin gördüğü kısımlardaki görselleri yükler. Böylece bloğunuzun yüklenme hızı ciddi biçimde artar. Ayrıca Lazy Loading kodu sayesinde bloğunuzun SEO performansı da yükselecektir. Zira Google Geliştirici kılavuzunda da Lazy Load kodlarının kullanılması kullanıcılara tavsiye edilmektedir.

Lazy Load Eklentisi Blogger’a Nasıl Eklenir?

Öncelikle her zaman olduğu gibi oluşabilecek herhangi bir tersliğe karşı mutlaka bloğumuzun bir yedeğini almalıyız. Siz de lütfen bu adımı atlamayın!

Daha sonra bloğumuzun panelinden Tema> HTML’yi Düzenle bölümüne yani bloğumuza ait kodların olduğu alana giriyoruz.

Burada CTRL + F tuşuna basarak arama alanını açıyoruz ve arama alanına </body> yazarak bunu aratıyoruz. Hemen ardından </body> etiketinin bir satır üstüne aşağıdaki kodları yapıştırıyoruz.

<script type='text/javascript'> //<![CDATA[
// Fast Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-iRyj0Ufj_nhOF3sieWWG_9NnrgrEiA771M76RhUuo8zLOqneO18EVU_HgR-5xdSiNnvi9BOBKFn0DUg2YNMUHMdsIuw4fFNCIpDhwk73RizEtJpTSFg5tH2dRdYgIUq2aFVFFPAhyov/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]>
</script>

Son olarak ise sağ üst köşeden “Kaydet” butonuna basarak Blogger paneline geri dönüyoruz.

Peki, kodların çalışıp çalışmadığını nasıl anlayacağız? Bunu anlamak çok basit aslında. Bloğunuzun ana sayfasına gelin. Sayfayı yenileyin ve yavaşça mouse ile yukarıdan aşağıya doğru kaydırın. Ana sayfanızdaki görsellerin göz kırpar gibi yüklendiğini göreceksiniz.

Ana Sayfanızdaki Gönderi Sayısını Sınırlandırın

Bir ziyaretçi bloğumuza ilk girdiğinde ana sayfamız yüklenir. Ana sayfamızın yüklenme hızı ise Google metrikleri tarafından ilk ölçülen yerdir. Ana sayfa hızımız ne kadar yüksekse Google için de bu o kadar iyi demektir. Tabi bloğumuzu ziyaret eden kişi için de bu çok iyidir. Çünkü kimse yavaş yüklenen bir sayfanın yüklenmesini beklemek istemez.

Blog ana sayfamızın olabildiğince hızlı yüklenebilmesi için ana sayfamızdaki gönderi sayımızın 4’ü geçmemesi gerekir. Unutmamalıyız ki ana sayfada ne kadar çok gönderi varsa sayfa o kadar geç yüklenecektir.

Ana sayfadaki gönderi sayımızı sınırlandırmak için Blogger panelinden “Düzen” sekmesine girelim. Ardından da “Blog Yayınları” bölümünün sağ alt köşesindeki “Düzenle” yazısını tıklayalım.

Açılan Pencerede “Ana Sayfadaki Kayıt Sayısı” bölümünü 4 yapalım ve kaydettikten sonra çıkalım.

Görselleriniz İçin Google Fotoğrafları Kullanın

Görselleriniz için Google fotoğrafları kullanın derken ne mi demek istiyorum? Burada söylemek istediğim şey, aslında bloğunuzdaki yazılarınız için kullandığınız fotoğrafların barındırılmasıyla, bloğunuzun barındırılmasını birbirinden ayırmanız gerektiğidir.

Bu sayede blog yazılarınız Blogger’ın kendi barındırma hizmetinden açılırken; fotoğraf ve videolarımız “Google Fotoğraflar” barındırma hizmetinden açılacaktır. Bu da doğal olarak bloğumuzun sayfa yüklenme hızını arttıracaktır.

İşlemi daha net anlamanız için aşağıdaki görseller yardımcı olacaktır👇

Fotoğraflarınızı Google Fotoğraflara Yükleyin

Görselleriniz İçin Google Fotoğrafları Kullanın

Sosyal Medya Widget’larınızı Azaltın

Bildiğiniz gibi Blogger bir blog içerisinde sosyal medya butonları koyabilmeniz için bazı hazır olarak hazırlanmış widget’ler bulunmaktadır. Birçok blog sahibi de bunlardan yararlanmaktadır. Ancak bloğumuza eklediğimiz her bir sosyal medya ikonu ve bağlantısı, bloğumuzun daha yavaş yüklenmesine neden olmaktadır.

İşte tam olarak bu yüzden sık kullanmadığınız sosyal medya bağlantı ve ikonlarını bloğunuzdan kaldırmalısınız. Bu sayede bloğunuzun sayfa yüklenme süresi kısalabilir.

Html/Javascript Gadget’larınızın Sayısını Azaltın

Bloğumuzu özelleştirmek için gerçekten çok kullanışlı bir yöntem olsalar da gereğinden fazla Gadget kullanmak, bloğumuzdaki kod yükünü arttıracağı için, bloğumuzun yüklenme süresini ciddi biçimde arttıracaktır. Bu nedenle kullandığımız Gadget’larımızdan zorunlu olmayanlar kaldırmalıyız.

Bunun yanı sıra kullanmak zorunda olduğumuz Gadget’larımızı da Blogger panelimizin “Düzen” bölümünden bloğumuzun en alt bölümü olan footer alanına taşımalıyız. Bunun nedeni ise şu: Bloğumuz yüklenirken kodlar yukarıdan aşağıya doğru açılırlar. Gadget’larımızı bloğumuzun en alt bölümü olan footer alanına taşıyarak, bloğumuzun üst bölümündeki kod yoğunluğunu azaltabilir ve daha hızlı bir yüklenme sağlayabiliriz.

Blog Arka Plan ve Header Görselinizin Boyutlarını Azaltın

Bir üst maddede de söylediğimiz gibi tüm web siteleri ve bloglar yukarıdan aşağıya doğru yüklenirler. Eğer bloğumuzun header alanında kullandığımız görselin boyutu 1 mb ve üstündeyse bu durum bloğumuzun daha yavaş olmasına yol açacaktır.

Bu yüzden yapmamız gereken header bölümünde kullandığımız görselin boyutunun maksimum 400kb olmasına dikkat etmemiz gerekmektedir.

Bir diğer önemli nokta ise bloğumuzun arka plan resmidir. Kullandığımız yüksek boyutlu (2k, 4k gibi) arka plan resimleri bloğumuzu ciddi anlamda yavaşlatacaktır. Bu yüzden blog arka plan görsellerimizi yine 1mb altında boyutlarda ve desensiz, yani düz renklerde, seçmemiz gerekir.

Header ve blog arka plan görsellerimizin maksimum 400kb civarı boyutlarda olması bloğumuzun çok daha hızlı yüklenmesini sağlayacaktır.

Blogger blog hızlandırma ile ilgili olarak şu an için sizlere aktarabileceklerim bunlardan ibaret. Ancak ilerleyen zamanlarda ben de yeni bilgiler edindikçe bunları sizlerle paylaşmaya devam edeceğim. O zaman dek hepinizi saygılar, sevgiler.