Defer Parsing Javascript Çözümü – Javascript Ayrıştırma Erteleme

Aralık 10, 2016 | Seo

Defer Parsing Javascript Sounu ve Çözümü

Defer Parsing Javascript uyarısıyla her site hız testi yapan arkadaşlar karşılaşmıştır.  Site hızını önemli derecede etkileyen bu faktör için google aramalarında bir çok konu başlığı bulunuyor ancak neredeyse tümünü denememe rağmen bir sonuç alamadım ve son olarak bazı seo uyumlu temaları inceleyerek bu sorunu nasıl çözdüklerini kavramaya çalıştım. Aslında bu sorunu çözmek için bir değil bir kaç etkili yöntem var ve her birini deneyerek en mantıklı javascript ayrıştırmasını hangisinin yaptığını tespit ederek kendi sitenizde uygulayabilirsiniz.

Seo açısından şimdilerde daha da önemi artan site hızları için mutlaka optimizasyon yapmalıyız ve bu optimizasyonların içinde en önemli noktalardan biride javacsriptlerin sayfa yüklenirken değil sayfa içeriklerinin yüklenmesinden sonra çözümlenmesidir.

Kendi sitemde seo eklentisi ve smtp ayarı için kullandığım bir eklenti haricinde başka bir eklenti kullanmıyorum. Aslında müşterilerim için yaptığım tüm web tasarım projelenrinde de minimum eklenti kullanmaya çalışırım. Hem güvenlik açısından hemde site hızının olumsuz etkilenmemesi için ne kadar az eklenti kullanırsak o kadar iyidir. Unutmayın eklenti demek sorgu demek. Sorgu demek yavaşlık demektir.Özellikle wordpress  kullanıcılarının ücretsiz eklentileri hoyratça kullanması, en basit işlemler için eklenti kurması sonucu çoğu wordpress sitelerde onlarca eklenti görebilirsiniz. WordPress tabanlı sitelerin bu kadar çok hacklenme ve virüs bulaşma sorununun sebeplerinden biride budur.

Kendi sitem (onurtepe.com) için uyguladığım ve en başarılı sonucu aldığım yöntemi ilk sırada göstereceğim ardından diğer yöntemleri listeleyeceğim. Siz, kendi sitenizde bu yöntemleri sıra sıra uygulayarak sizin için çalışan yöntemi bulabilirsiniz.

Örneğin bootstrap ile bir site tasarladık ve eklenti kullanmadık diyelim, bootstrap ‘ ı sitemize entegre ettiğimizde birer adet css ve js dosyası kullanırız.

bootstrap.min.css ve bootstrap.min.js

Öncelikle hiçbir style yada javascript kodunu header ‘a yada footer ‘ a entegre etmemeliyiz. Bu dosyaları functions dosyasında çözümlemeliyiz.

 


function load_theme_styles(){
                wp_register_style('style',  get_stylesheet_directory_uri() . '/style.css');
                wp_register_style('bootstrap.min',  get_stylesheet_directory_uri() . '/css/bootstrap.min.css');
                // Flex Slider
                wp_enqueue_style('style');
                // enqueue Swipe Box styles
                wp_enqueue_style('bootstrap.min');
    }
add_action('wp_enqueue_scripts', 'load_theme_styles');
	
function my_scripts_method() {
	wp_register_script('google-map-api', get_template_directory_uri() . '/js/jquery-1.12.4.min.js', array( 'jquery' ), '1.12.4', true );
	wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '4.4.2', true );
	
}    
add_action('wp_enqueue_scripts', 'my_scripts_method');

Functions dosyasında bu şekilde entegre ettiğimiz javascriptlerin başarılı bir şekilde içeriklerden sonra yüklenmesi için sürümlerini yazmamız gerekir.

defer parsing js

Kontrol etmek için sitemizde ctrl + U tuş kombinasyonu ile sayfa kaynağını görüntülediğimizde bu işlemi yaptığımız tüm javascriptlerin footerda çözümlendiğini göreceksiniz.

Kendi sitem için Gtmetrix sonuçları;

javascript ayrıştırma erteleme  Defer Parsing Javascript

 

Diğer yöntemler için;

Functions dosyasına aşağıda ki kodu ekleyerek tüm javascriptler için otomatik ayrıştırma erteleme uygulayabilirsiniz.
1-


// Defer Javascripts
// Defer jQuery Parsing using the HTML5 defer property
if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        // return "$url' defer ";
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

2- Header yada footer a eklenen javascript kodları için defer özelliğini kullanma ( Benim tecrübelerimde işe yaramadı )


< script type="text/javascript" defer="defer" src="YOUR_SOURCE_HERE">

3- Functions dosyasına eklenecek kod;


if(!is_admin()) {
    // Move all JS from header to footer
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 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);
}

4- Contact form 7 eklentisinin javascriptlerini erteleme kodu;


// Defer JS for Contact Form 7

! defined( 'ABSPATH' ) and exit;

if ( ! function_exists( 'add_defer_to_cf7' ) )
{
function add_defer_to_cf7( $url )
{
if ( // comment the following line out add 'defer' to all scripts
// FALSE === strpos( $url, 'contact-form-7' ) or
FALSE === strpos( $url, '.js' )
)
{ // not our file
return $url;
}
// Must be a ', not "!
return "$url' defer='defer";
}
add_filter( 'clean_url', 'add_defer_to_cf7', 11, 1 );
}

Sizin için hangi yöntem işe yaradı? Paylaşırsanız sevinirim.