Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın

Sayfanızda oluşturmayı engelleyen 6 tane CSS kaynağı var. Bu durum, sayfanızın oluşturulmasında gecikmeye neden oluyor.

Sayfanızda ekranın üst kısmındaki içerikten hiçbiri aşağıdaki kaynakların yüklenmesi beklenmeden oluşturulamadı. Engelleyen kaynakları ertelemeyi veya eşzamansız olarak yüklemeyi ya da bu kaynakların önemli miktarda bölümünü doğrudan HTML’de satır içi yapmayı deneyin.

Eğer sizde daha önce bir internet sitesi açtıysanız yukarıdaki hatayı daha önce görmemiş olma olasılığınız çok düşük.
Bugün sizlere bu hatadan kurtulmanın yolunu göstereceğim.

Tarayıcı ile bir siteyi ziyaret ettiğiniz zaman internet tarayıcınız sayfayı ekranda oluşturmadan önce sayfaya dışarıdan çağırılan dosyaları yüklemelidir. Böyle olunca sayfaya çağırılan boyutu ve sayısı yüksek olan CSS ve JavaScript dosyaları ziyaretçinin sayfayı görüntülemek için beklemesi gereken süreyi artırıyor.

Javascript Dosyaları İçin Çözüm

Javascript dosyalarınızı aşağıdaki şekilde çağırarak bu sorunu çözebilirsiniz. Defer özelliği javascript dosyalarının sayfa tamamen yüklendikten sonra yüklenmesini sağlar.

<script type='text/javascript' src='jquery.min.js' defer='defer'>

veya

<script type='text/javascript' src='jquery.min.js' defer>

WordPress için

Aşağıdaki kodu temanızın functions.php (tema işlevleri) dosyasına ekleyin.

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

CSS Dosyaları için Çözüm

CSS dosyalarınız çağrıldığı kod bölümünü <noscript> etiketleri içine almalısınız.

Örnek:

<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="stil.css"/>
</noscript>

daha sonra sayfanızın alt bölümüne aşağıdaki javascript kodlarını ekleyin.

<script>
    var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function() {
        window.setTimeout(loadDeferredStyles, 0);
    });
    else window.addEventListener('load', loadDeferredStyles);
</script>

Bu kod sayesinde ilk önce sayfa yüklenecek daha sonra sayfaya çağrılan dosyalar yüklenecek en sonunda ise CSS kodları ile sayfanın görüntüsü oluşturulacak.

Pagespeed Puanını Yükseltmek İçin Öneriler

  • Gereksiz Javascript kodlarını kaldırın.
  • Gereksiz CSS kodlarını kaldırın.
  • Resim formatı olarak WEBP tercih edin.
  • Animasyon ve efektler sayfanın oluşturulma süresini uzatır, gerekli olmadıkça kullanmayın.
  • Kullandığınız sisteme özel cache eklentileri varsa kullanın.
  • WordPress için mümkün olduğunca az eklenti kullanmaya çalışın.
  • Cloudflare kullanabilirsiniz (Cache ve sıkıştırma için).
  • Hem kodlama hem tasarım açısından sade temalar genel olarak daha hızlı çalışır. Sitemde kullandığım temanın linki -> https://github.com/sekizgen/cleanblog

WordPress Hızlandırmak İçin 9 İpucu

WordPress Veritabanı Temizleme

WordPress Remove Query Strings From Static Resource Çözümü