Oluşturmayı önleyen JavaScript ve CSS kodları çözümü

Web Tasarım, Wordpress

10 Kasım 2018

Bu hata nerdeyse bolca css ve js dosyası kullanan her sitede ortaya çıkar. Önceden çok uğraşırdım dosyaları sıkıştırırdım falan ama genelde hep js dosyalarında sıkıntı yaşardım ama buna şöyle bir çözüm var.

Javascript Dosyaları İçin Çözüm

Genelde herkes js dosyalarını çağırırken

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

şöyle çağırır ama bu kodu şöyle

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

defer özelliğini ekleyip çağırırsanız js dosyalarınız sayfalarınız tamamen yüklendiğinde yüklenir. Önceliği sitenin açılması olur gecikme vs olmaz.

WordPress kullanıcıları

aşağıdaki kodu temanızın functions.php dosyasına ekleyip kullanabilir.

/*
 * 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ü önce <noscript> etiketleri içine almanız gerekiyor.

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

Daha sonra js dosyalarınızı çağırdığınız bölüme 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. Tabi bu durum siteye ilk girenlere biraz sorun çıkartabilir…