Wp Site Hızlandırma – Google PageSpeed % 98

% 100 Etkili Site Hızlandırma Tekniği

WordPress Site Hızlandırma Nasıl Yapılır

1- Resimleri Optimize Etme

2- Tarayıcı Önbellekleme (Cache Sistemi)

3- JavaScript, Css ve Html Küçültme

4- Google Page İnsights Optimizasyon Verilerini Kullanma

5- Oluşturmayı Önleyen JavaScript ve CSS Kodlarını Ekranın Üst Kısmındaki İçerikten Kaldırma

Yukarıdaki dört site hızlandırma işlemini aşağıda detaylı olarak anlatacağız. Bu işlemleri uyguladığınız taktirde sitelerinizi maksimum hıza yükselmeniz kesindir. Bu uygulama on farklı sitede uygulanmış ve hem mobil hem de masaüstü kullanımlarda % 98 gibi site hızı oranına ulaşılmıştır. Şimdi sırası ile site hızlandırma işlemlerine başlayabiliriz.

1- Resimleri Optimize Etme

Site hızlandırma için resimlerin optimize edilmesi çok önemli bir kriterdir. Sitenize eklediğiniz resimlerin yüksek boyutta olması sayfa açılış hızını olumsuz yönde etkileyecektir. Elinizden geldiğince sitenizde kullanacağınız resimlerin boyutlarını photoshop yardımı ile küçültün. Küçültün den maksadımız resmin ebatını değil boyunu küçültmenizdir. Photoshopta bir resmi düzenledikten sonra kaydetme aşamasında web için kaydet seçeneğini kullanarak kaydedin. Bu işlemi yaptığınızda 1 mb boyutundaki bir resmi 30 kb kadar düşürebilirsiniz. Yada online resim optimize sitelerinden de resim küçültme işlemi yapabilirsiniz. Aşağıdaki resimde gösterilmiştir.

2- Tarayıcı Önbellekleme (Cache Sistemi)

WordPress siteler için ücretsiz olarak kullanıma sunulan cache eklentileri vardır. Örneğin Wp Fastest Cache eklentisi ile tarayıcı önbelleklemesi yapabilirsiniz. Programı kurmak için Eklentiler> Yeni Ekle yapın. Arama bölümüne Wp Fastest Cache yazın ve aramayı başlatın. Açılan sayfada eklentiyi kur düğmesini tıklayıp kurulumu yaptıktan sonra aktifleştirin. Wp Fastest Cache ayarları için sol menüde bulunan linkini tıklayın ve tüm kutucukları işaretleyerek aktif edin. Bu eklenti sayesinde artık cache sistemi başlatılmış ve önbellekleme devreye alınmış olacaktır. Aşağıdaki resimde gösterilmiştir.

3- JavaScript, Css ve Html Küçültme

Yukarıda önbellekleme yapmak için kurulumunu yaptığınız Wp Fastest Cache eklentisi önbellekleme ile birlikte JavaScript, Css ve Html Küçültme işlemide yapmaktadır. Bu nedenle ekstra bir işlem yapmanıza gerek yoktur.

4- Google Page İnsights Optimizasyon Verilerini Kullanma

Google Page Speed İnsights uygulamasının pek bilinmeyen bir uygulaması var. Sitenizi Google pagespeed’te test ettiğinizde test sonuçları sayfasının en altında sitenizi hızlandırmak için css, javascript ve resimleri otomatik olarak optimize ediyor ve indirilebilir şekilde indirme linki veriyor. Bu optimize edilmiş dosyaları indirip mevcut css,javascript ve resimlerinizle değiştirebilirsiniz. Site hızınızı test etmek için bu linke tıklayarak hem sitenizin eksiklerini hemde optimize edilmiş dosyalarını indirebilirsiniz. Aşağıdaki resim örneğinde olduğu gibi.

Dikkat etmeniz gereken nokta ise Google page speed’den indirdiğiniz optimize edilmiş dosyalarını mevcut dosyalarınız ile değiştirirken dosya isimlerini aynı tutmanız olacaktır. Örneğin sitenizin mevcut css dosyası stil.css ise indireceğiniz css dosyası stil123.css olabilir. Bu nedenle çok dikkatli olmanız gerekiyor.

5- Oluşturmayı Önleyen JavaScript ve CSS Kodlarını Ekranın Üst Kısmındaki İçerikten Kaldırma 

Site açılış hızını en çok etkileyen sorunlardan biride oluşturmayı önleyen JavaScript ve CSS Kodlarını ekranın üst kısmından kaldırıp alt kısma yerleştirmektir. Bu işlem çok basittir aslında. Fakat bu işlemi doğrudan yapmanız sitenizin görünümünü bozacaktır. Aşağıda kendi deneyimlerimizle kullandığımız bir işlem sayesinde site tasarımı bozulmadan ziyaretçilerinize site normal bir şekilde gösterebilirsiniz. Bunun içinde henüz site açılmadan “Lütfen bekleyin” veya “Sayfa Yükleniyor” resimli mesajı ile ziyaretçimi karşılıyoruz. Yaklaşık 5 saniye sürüyor veya süreyi değiştirebiliyoruz da. Bu teknik sayesinde css ve javascript dosyaları ikinci plana atılıyor ve site hızı özellikle mobil kullanıcılar için daha hızlı bir hale geliyor.

Bu İşlem Nasıl Yapılır

Bu düzenlemeleri yapmak için tema dosyalarından header.php sayfasını düzenlememiz gerekiyor. <head> </head> tagları arasında bulunan ve temanın css ve javascript kodlarını barındıran bu <?php wp_head(); ?> satırı sağ tıklayıp kes dedikten sonra yeni bir sekmede footer.php sayfasını açıyoruz ve </footer> satırının hemen öncesine yapıştırıp footer php sayfasını kaydediyoruz.

Gelelim header php ye. header.php sayfasından <?php wp_head(); ?> bu satırı silmiştik. Şimdi bu satırın yerine alttaki kodları ekliyoruz.

Header.php <head> </head> arasına eklenecek kod:

---

<style type=”text/css”>div.hbcne{position:fixed;z-index:4000;}div.hgchd{top:0px;left:0px;} div.hbcne{_position:absolute;}div.hgchd{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight – 52+”px”) );}</style><div id=”koddostuyuk” style=”background-color:#ffffff;width:100%;height:100%;padding-top:20%;” class=”hbcne hgchd”>
<center><a style=”font-family:Arial;font-size:19px;color:#ff0000;”></a><br/><br/>
<a target=”_blank” href=”http://seodersleri.xyz/” style=”background-color:transparent;border:none;padding:0px;margin:0px;”><img style=”padding:0px;margin:0px;background-color:transparent;border:none;width:200px;height:150px;” src=”http://seodersleri.xyz/wp-content/uploads/2016/01/loading.gif” alt=”seo dersleri” width”200px” height”150px”/></a></center></div>
<script type=”text/javascript”>
document.addEventListener(“DOMContentLoaded”, function() {setTimeout(‘document.getElementById(“koddostuyuk”).style.display=”none”‘, 100);});
</script>

---

Not: Kırmızı renkli alanları sitenize göre değiştirmeyi unutmayın. Arkadaşlar yukarıda verdiğim script kodu eksik veya hatalıysa eğer. Sağ tıklayıp kaynağı görüntüle yaparak headerdaki kodu alıp kullanabilirsiniz.

Yukarıdaki kodları header.php sayfasına ekledikten sonra sayfayı kaydedip çıkabilirsiniz. Bu işlemden sonra tekrar Google Page Speed (Google Pagespeed İnsights) sayfasına gidin ve sitenizin hızını yeniden test edin. En baştan beri aktardığımız site hızlandırma tekniklerini doğru bir şekilde uyguladığınız takdirde yüksek bir site hızı elde edeceksiniz. Bu teknik yaklaşık 10 farklı sitede denenmiş ve site hızları % 98 gibi değerlere çıkarılmıştır. Genel wordpress seo ayarları makalemizi de incelemenizi tavsiye ediyoruz.