Webmaster

WordPress Google Page Speed “JavaScript ve CSS Kaldırılsın” Uyarısı

WordPress Google Page Speed “JavaScript ve CSS Kaldırılsın” Uyarısı Editör Puanı: 5 Üzerinden 4.9

Google Page Speed‘de “Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın” uyarısından bıktınız mı?

Herkese Merhaba.

Biliyoruz ki her site sahibinin genel bir sorunu olan, çıkan sonuçlar da bitmek bilmeyen bir hatanın veya uyarının nasıl kaldırılacağını bugün bu yazımız da aktaracağım. Biliyorum ki birçoğumuz önceden bu hata veya uyarı ile ilgili Google çeşitli aramalarda bulunmuştur. Bulduğumuz bazı yöntemler ise işe yaramamış ve hepimizi bıktırmıştır.

Öncelikle bu uyarıyı biraz incelediğimiz de kaldırılması çok basit. Ancak o zaman site de şablon, tema da diye bir şey gözükmez. Temanızın header veya footer kısmında bulunan .CSS veya .JS uzantılarını sildiğiniz de uyarı kalkacaktır. Ancak sanırım Google‘nin pek tema zevki bulunmuyor.

Her neyse…

Aşağıda sizler ile paylaşacağım fonksiyonları doğru yerleştirmeniz taktirde kullandığınız tema bozulmadan bu uyarı veya hata dan kurtulabilirsiniz. Ancak bu konu ile ilgili bilmeniz gerekenler var.

#1 Bu fonksiyonları kullanmak istediğiniz site veya tema üzerinde kesinlikle cache (önbellekleme) özelliği bulunmaması gerekiyor. Eğer Google‘nin verdiği uyarı veya hata dan kurtulmak istiyorsanız cache kullanmamanız gerekli. Yoksa fonksiyonlar çalışmamakta.

#2 Bu fonksiyonları etkin ettiğinizde, sitenize giren ziyaretçi ilk yarım veya 1 saniye içeresin de beyaz ekran ve yazılar görüyor, tema ise söylediğim süre sonunda aktif oluyor.

#3 Eğer büyük bir siteniz mevcut ise ve cache özelliğinden kesinlikle faydalanmanız gerekiyor ise sırf bu uyarıdan dolayı cache’den vazgeçmeyin! 

İkinci madde tabi ki kullandığınız temanın boyutuna göre kullanılan dosya büyüklüklerine göre değişir. Daha stabil ve hafif tema kullanırsanız, temanın açılış süresi kısalır. Ancak işlem sonunda uyarı kalkıyor ve temanız düzgün görüntüleniyor.

Şimdi başlayalım…

Öncelikle aşağıdaki fonksiyonu temanızın functions.php dosyasını açıyoruz ve <?php satırından hemen sonra ekleyerek kaydediyoruz.

add_filter( 'clean_url', function( $url )
{
if ( FALSE === strpos( $url, '.js' ) )
{
return $url;
}
return "$url' defer='defer";
}, 11, 1 );

Daha sonra aşağıdaki Script kodlarını da temanızın uygun alanına ekleyin.

<script type="text/javascript">
var loadDeferredStyles=function(){var e=document.getElementById("deferred-styles"),t=document.createElement("div");t.innerHTML=e.textContent,document.body.appendChild(t),e.parentElement.removeChild(e)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(function(){window.setTimeout(loadDeferredStyles,0)}):window.addEventListener("load",loadDeferredStyles);
</script>

Daha sonra temanızın header kısmında .CSS dosyalarının çağrıldığı satırları bulun. Örneğin:

<link rel="stylesheet" type="text/css" media="all" href="../tema/style.css">

Bulduğunuz bu satırların başına veya sonuna <noscript id=”deferred-styles”> ve </noscript> getirin. Örneğin:

<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" media="all" href="../tema/style.css">
</noscript>

Doğru şekilde uyguladığınız taktir de Google Page Speed‘de test yaptığınız zaman uyarının kalkacağını göreceksiniz. Ancak dediğim gibi. İşlem sonrası mutlaka değişiklik için sitenizi bir ziyaretçi gibi giriş sağlayın. Farkındalık sağlarsanız veya hoşnut etmez ise diretmeyin, işlemleri geri alın.

Kolay gelsin…

Bu Yazı İçin Ne Hissediyorsun?
Beğendim Sevindim Komik Şaşırdım Üzgünüm Sinirlendim

Kim Bu Yazar? - RocaniX

Anonim

Uzun süre boyunca bilgisayar ile uğraşarak kendimi geliştirdim. Şuan iyi derece de WordPress, HTML ve CSS ile ilgileniyorum. Aynı zaman da blog üzerinden web tasarım başlığı altında makaleler yazarak, web tasarım merak salmış dostlarıma da az çok yardım ediyorum.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir