如何解决多个文件的“消除上面的呈现阻塞的JavaScript和CSS”的内容?

时间:2015-05-25 作者:Riffaz Starr

我在google insight中查看我的网站时发现:

google insight

还行吧?但我仍在考虑修复Eliminate render-blocking JavaScript and CSS in above-the-fold content 在手机上也能取得好的效果。

我正在使用以下代码添加CSS、JS文件:

/* loading the default styles of the theme */
function theme_style_sheets() {
    wp_enqueue_style( \'google-font\', \'http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800\', \'\', \'1.0.0\'  );   
    wp_enqueue_style( \'theme-style\', get_template_directory_uri() . \'style.css\', \'\', \'1.0.0\'  );   
    wp_enqueue_style( \'bootstrap\', get_template_directory_uri() . \'/css/bootstrap.css\', \'\', \'1.0.0\'  );   
    wp_enqueue_style( \'bootstrap-responsive\', get_template_directory_uri() . \'/css/bootstrap-responsive.css\', \'\', \'1.0.0\' );
    wp_enqueue_style( \'camera\', get_template_directory_uri() . \'/css/camera.css\', \'\', \'1.0.0\' );
    wp_enqueue_style( \'docs\', get_template_directory_uri() . \'/css/docs.css\', \'\', \'1.0.0\' );
    wp_enqueue_style( \'prettyphoto\', get_template_directory_uri() . \'/css/prettyPhoto.css\', \'\', \'1.0.0\' );
    wp_enqueue_style( \'theme\', get_template_directory_uri() . \'/css/theme.css\', \'\', \'1.0.0\' );
    wp_enqueue_style( \'tango-skin\', get_template_directory_uri() . \'/css/skins/tango/skin.css\', \'\', \'1.0.0\' );
}
add_action( \'wp_enqueue_scripts\', \'theme_style_sheets\' );

/**
 * loading the default scripts of the theme
 */
function theme_scripts() {      
    wp_enqueue_script( \'jquer-easing\', get_template_directory_uri() . \'/js/jquery.easing.1.3.js\', array(), \'1.0.0\', true );
    wp_enqueue_script( \'jquer-mobile\', get_template_directory_uri() . \'/js/jquery.mobile.customized.min.js\', array(), \'1.0.0\', true );
    wp_enqueue_script( \'camera\', get_template_directory_uri() . \'/js/camera.js\', array(), \'1.0.0\', true );
    wp_enqueue_script( \'bootstrap\', get_template_directory_uri() . \'/js/bootstrap.js\', array(), \'1.0.0\', true );
    wp_enqueue_script( \'superfish\', get_template_directory_uri() . \'/js/superfish.js\', array(), \'1.0.0\', true );
    wp_enqueue_script( \'jquer-prettyphoto\', get_template_directory_uri() . \'/js/jquery.prettyPhoto.js\', array(), \'1.0.0\', true );
    wp_enqueue_script( \'jquer-jcarousel\', get_template_directory_uri() . \'/js/jquery.jcarousel.js\', array(), \'1.0.0\', true );
    wp_enqueue_script( \'jquer-tweet\', get_template_directory_uri() . \'/js/jquery.tweet.js\', array(), \'1.0.0\', true );
    wp_enqueue_script( \'myscript\', get_template_directory_uri() . \'/js/myscript.js\', array(), \'1.0.0\', true );  
}
add_action( \'wp_enqueue_scripts\', \'theme_scripts\' );

function load_external_jQuery() { // load external file  
    wp_deregister_script( \'jquery\' ); // deregisters the default WordPress jQuery  
    wp_register_script(\'jquery\', ("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"), false);   
    wp_enqueue_script(\'jquery\');    
}  
add_action(\'wp_enqueue_scripts\', \'load_external_jQuery\');
因此,根据上面的代码,JS文件应该加载到页脚中,而那些正在加载到页脚中的文件。但谷歌仍将这些文件包括在Eliminate render-blocking JavaScript and CSS in above-the-fold content 为什么?

我也尝试过不同的方法,如:http://moz.com/community/q/fixing-render-blocking-javascript-and-css-in-the-above-the-fold-content但产量保持不变。

同样,在该方法中,我必须组合所有JS/CSS文件。我不想将所有文件合并为一个文件。

我还尝试了其他一些片段来区分多个文件。输出也是一样的。

现在google insight显示:

Google insight 2

不使用任何插件,我如何解决这个问题。????

有很多插件可以做到这一点。但我在我目前的网站上没有使用任何插件,我喜欢避免使用插件。

1 个回复
SO网友:Qaiser

将此代码放在函数末尾。php

add_action(\'customize_register\', \'customizer\');
function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, \'.js\' ) ) return $url;
    if ( strpos( $url, \'jquery.js\' ) ) return $url;
    return "$url\' defer ";
}
add_filter( \'clean_url\', \'defer_parsing_of_js\', 11, 1 );

结束