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.
merhaba hocam. ben wordpres’te sizin dediğiniz gibi yapmaya çalıştım fakat site hata verdi. hangi sitede denediysem aynı hataları aldım. sizin yazdığınız head yerine gelen kodu da inceledim düzelttim ama siteye girince sadece sizin gif dönüyor. içerik görünmüyor. bununla ilgili olarak yardımcı olabilirseniz cidden çok sevinirim. yapmasam da olur fakat kafayı taktım bir kere. mobil hızım 75 masaüstü hızım 91. dediğinizi yapıp maksimum sonuç almak istiyorum.
Merhabalar site adresiniz nedir. Bakabilir miyim. Bir sorun olmaması lazım gelir.
İyi günler sizin siteniz de şuan aynı hatalar alınmakta Pagespeed testinde özellikle mobil testte ekranın üst kısmından kaldırın uyarısı var ve puanı dusuk
Tema değişikliğinden sonra düzenleme yapılmamıştı. Şimdi düzeltildi.
Merhaba. Dediklerinizi uygulayarak site hızımı yükselttim. Çok teşekkürler. Size bir sorum olacak. Siteme mobilden giriş yapanlara farklı bir anasayfa açılsın istiyorum. Ama farklı bir alan adı kullanmadan. Bunu nasıl yapabilirim?
Merhaba Emrah bey,
yazınızdaki bir çok maddeyi uyguluyordum ve gerçekten çok faydasını gördüm. Sadece js erteleme işi hep sorun oluyordu. Şimdi de sayenizde onu da hallettik. Çok daha iyi oldu ama eklediğimiz js kodundan sonra anasayfa’daki slider (revolution slider) çalışmaz oldu.
Site adresim: http://kayserievtemizligi.com
kodu kaldırmak istemiyorum. Nasıl düzeltebilirim?
Merhabalar bende yeni farkettim bu çalışma malesef bir çok sliderin çalışmasını engelliyor. Konu hakkında araştırma yapacağım. Bir çaresini bulursam konuda belirteceğim.
Tekrar Merhaba,
Sorunu çözdüm. Aynı sorunu yaşayanlar için lazım olur düşüncesi ile paylaşmak istiyorum müsaadenizle..
ÇÖZÜM:
Revolution Slider içindeki “Global Settings” ayarlarından “Insert JavaScript Into Footer:” bülümü off olarak ayarlı “on” yaparsanız sorun çözülüyor.
Tekrar teşekkür ederim Emrah bey.
İsminizi yanlış yazmışım hocam, kusura bakmayın. Düzeltme seçeneği olmadığı için sizden rica edebilir miyim?
Sizi fazla meşgul ettim ama iletişim bölümüne eklediğim maps’de çalışmaz olmuş. Sanırım çakışma var. Benim gibi sorun yaşayan veya çözümü bilen var mı?
JavaScript ve CSS Kodlarını ekranın üst kısmından kaldırıp alt kısma yerleştirme işi site içinde gezinirken diğer sayfalara erişimi geciktiriyor, her sayfa açılışında loading işaretinin çıkması da rahatsız ediyor maalesef.
Öncelikle paylaşımınız için teşekkürler gerçekten etkileyici sonuçlar veriyor.. Fakat eklemek istediğim bir şey var; wp_head(); fonksiyonunu footer.php nin içine yapıştırmak sayfanın üst kısımda bulunması gereken bir çok şeyi de beraberinde footer a alıyor. (En basitiyle sayfa iconu, eğer bir seo eklentisi kullanıyorsanız comment feed vs.) Bu can sıkıcı durumun çözümü için şu kodları function.php dosyasının en alt bölümüne ekleyip wp_head.php wp_footer.php dosyalarına müdahale etmeksizin aynı işlemi kusursuz yapabilirsiniz..
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
remove_action(‘wp_head’, ‘wp_enqueue_style’, 1);
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_style’, 5);
Kaynak: https://wordpress.org/support/topic/load-css-and-js-in-footer
Verdiğiniz bilgiler için teşekkür ederim.
Sadık Bey dediğiniz kodu ekleyince siteiçerisindeki reklamların ayarı bozuluyor. Bulundukları alanlardan taşıyorlar yarısı görünüyor yarısı görünmüyor gibi durumlar oluyor.
Bu sorun nasıl aşılır.
Merhabalar,
remove_action(‘wp_head’, ‘wp_enqueue_style’, 1);
add_action(‘wp_footer’, ‘wp_enqueue_style’, 5);
Bu satırları silip tekrar dener misiniz.
Verdiğiniz bilgiler çok faydalı olmuş teşekkürler
Başarılı, Teşekkürler.
Anlatımınız muazzam olmuş gerçekten
20 gündür bunu arıyorum inşallah olacaktır deneyeceğim
adobe muse ile yaptığım sitemde ( OLUŞTURMAYI ÖNLEYEN JAVASCRİPT VE CSS KODLARINI EKRANIN ÜST KISMINDAKİ İÇERİKTEN KALDIRMA ) bu işlemi nasıl yapabilirim ? Kodlarla aram hiç iyi değil, hatta bu kod olayını hiç bilmiyorum. web sitemin adresi http://www.alininsayfasi.com
Beklenmedik bir hata oluştu. WordPress.org’da veya bu sunucunun yapılandırmasında bir şeyler yanlış olabilir.
hatası alıyorum eklenti ekleyemiyorum. Tek bir çözüm yolu var oda bende işe yaramadı ne yapmam gerekiyor.
Bu işlemleri yapmama rağmen değişen birşey olmadı ne yapmalıyım sizce?
biduysan.com
Merhaba dediklerinizi yaptım fakat sitede kaymalar gerçekleşti düzelttim. Mobil hızı arttıramadım teşekkürler. http://www.sancaknakliyat.com
Faydalı Bir yazı olmuş teşekkürler
Eline sağlık kardeşim… oyazio.com sitemizde dediklerini uygulayınca şöyle bir sonuç aldım:) Gerçi mobil biraz düşük kaldı ama sanırım o da sunucu kaynaklı…
https://oyazio.com/wp-content/themes/boombox/images/pagespeed.jpg
merhaba verdiğinizkodları header.php ye ekleyince üst kısım da ciddi bir boşluk oluştu bunu nasıl düzeltebiliriz? tese yapınca mobil hız %90 ları gecti. üst kısım konusunda yardımcı olurmusunuz.
Nasıl bir boşlık oluştu acaba. Normalde böyle bir sorun vermemesi lazım.
Bir ekran görüntüsü verirmisiniz.
üst kısım da aşağı doğru genişleme oldu. Şuanda durum aynı bakmak için
http://tuccartilki.com/
Acaba header.php ye ekleyeceğim kodları yanlış yere mi ekledim?
Üst kısımda bir bşluk göremiyorum.
Bu da mobilden grüntü
http://tuccartilki.com/wp-content/uploads/2017/01/unnamed.png
loading.gif de çalışmıyor
kardeşim yanlış yere eklemişsin admin gönderirseniz yapayım.
işlemleri tekrar yaptım masa üstü versiyonlarda sorun yok sadece loading.gif çalışmıyor.Mobil versiyonda ise o boşluk hala mevcut.
admini nerden gönderiyim size ? e-postaylamı
iletişim formundan gönderdim.
Tamam kardeşim bilgiler geldi düzeltip haber vericem buradan.
merhaba ben yaptım fakat kırmızı olan yerlere kendi sitemi yazdım sadece bozulan kısım header ust kısımda boş bır alan oluştu yardımcı olurmuzunuz.
bu arada diğer revulatıon slider arkadaşın dediği gibi yapınca çalışıyor
Kardeşim sitenizi kontrol ettim. Kodlarla alakalı bir sıkıntı görünmüyor.
Sitenizin en üst kısmında e ticaret bannere var onu nereden eklemişsiniz bulamadım. Onu kaldırdığınızda site düzgün açılıyor.
Yapabileceğim başka bir şey yok.
Bu arada çok fazla eklenti kullanıyorsunuz. Hızınıza etki edecektir.
o banner
header.php içine eklenen:src=”http://tuccartilki.com/2017/01/loading.gif” alt=”e-ticaret” bu koddan geliyor.sizin sitenizde çalışan loading gif çalışmıyor yolu doğru yazdım sanırım.
İlginize çok teşekkürler.şimdi header.php ve footer.php yi yedek ten geri yükledim.Tekrar deneyeceğim.Sonucu yazarım.
Kardeşin sen gifi yanlış eklemiştin.
Şu an ben düzelttim dene bakalım.
Birde sitede değişiklik yaptıktan sonra önbelleği temizleki son halini görebilesin.
kardeşim eline sağlık evet gifin yolunu yanlış yazıyormuşum.Sayende kaçgündür uğraştığım sorundan kurtuldum.
Merhaba Hocam bunu bi şekilde cözemedim bi yerde hata yapiorum site header de buyuk bi boşluk oluştu site ustunde yardım ci olursaniz sevinirim…
teşekkürlerr
Şu headerın footera taşınması gerçekten ihtiyacım olan bir şeydi. Şu an müsait değilim ama birazdan kendi sitemde uygulayacağım. Umarım günceldir.
mrb ben OLUŞTURMAYI ÖNLEYEN JAVASCRİPT VE CSS KODLARINI EKRANIN ÜST KISMINDAKİ İÇERİKTEN KALDIRMA konusunda dediğiniz herşeyi yaptım ama sitenin ekranı tamamen gitti sadece ortada birtane gözükmeyen resim acaba yanlış yeremi ekledim cevap verirseniz sevinirim http://www.avrasyaevdenevenakliyat.com/
Bilgilendirme için çok teşekkürler 🙂
hocam teşekkürler faydalı makale olmuş yalnız son işlemle ilgili bir sorum olacaktı o koda bağlı diğer kodları da alacakmıyız?
Değerli Yetkili,
Dedikleriniz yaptım site deki sayfalar açılmıyor.
Lütfen çok acil yardımınıza ihtiyacım var.
Üstad hallettim Allaha şükür.
OLUŞTURMAYI ÖNLEYEN JAVASCRİPT VE CSS KODLARINI EKRANIN ÜST KISMINDAKİ İÇERİKTEN KALDIRMA Hocam bu anlatım hiçbir yerde yok çok teşekkürler ellerinize sağlık
Teşekkür ederiz baya bir fark etti
lütfen yardım edin dedğiniz sekılde yaptım ama ust kısımda boşluk oldu mailde attım sıze sanırım ulaşmadı iletişimden