Webサイトの表示速度を速くするためのにしておきたい。JS、CSSの読み込み制御

Webサイト（ホームページ）やブログの表示スピードが遅いとユーザーがちょっとイライラしたりするので改善しておきたい。また、Googleのアルゴリズムで表示速度が検索順位に左右されるってもんですから気になる人は気になりますよね。

いろいろな対策できる中で今回はJSやCSSファイルの読み込みについてのお話し。

JSやCSSのファイルを大量に読み込んでいたりすると、Webサイトのページ表示スピードが遅くなります。サーバに「あのファイルちょうだい」「このファイルちょうだい」と注文するラリーが発生するんですよ。
ここはHTTPリクエスト数は減らしておきたいところ。

また、CSSファイルが複数ある場合は一つにまとめるといったことをしても良いですが、2000行、3000行と記述がされていてファイルサイズが大きいのも読み込みに時間がかかります。

Webサイトの構成によって様々ですが、TOPページでしか必要のないスクリプトが下層ページでも読み込まれる。逆に下層ページでは必要だけどTOPページには読み込まなくてもいいってことがあるのでファイルの読み込みを制御してあげるのがいいですね。

HTTPリクエスト数を減らす方法が良いかな。

多くのWebサイトがWordPressで制作されていると思うので、ここではWordPressで構築しているWebサイトを対象にお話しします。
静的ページの場合はファイルごとに読み込みを変更すればいいですね。

ということで以下のようにfunctions.phpで制御できます。

ちょっとした例です。

functions.php

if (!is_admin()) {
 
    function register_script(){
        wp_register_script('jquery', get_bloginfo('template_directory').'/js/jquery-1.8.3.min.js', array(), NULL, true);
        wp_register_script('main', get_bloginfo('template_directory').'/js/main.js', array(), NULL, true);
        wp_register_script('front', get_bloginfo('template_directory').'/js/front.js', array(), NULL, true);
        wp_register_script('about', get_bloginfo('template_directory').'/js/about.js', array(), NULL, true);
    }
 
    function add_script() {
 
        register_script();
            wp_enqueue_script('jquery');
            wp_enqueue_script('main');
        if (is_home() || is_front_page()) {
            wp_enqueue_script('front');
        }        
        elseif (is_page(array('about'))) {
            wp_enqueue_script('about');
        }
 
    }
 
    function register_style() {
        wp_register_style('responsive', get_bloginfo('template_directory').'/responsive.css');
        wp_register_style('font-awesome', get_bloginfo('template_directory').'/css/font-awesome.min.css');
    }
 
    function add_stylesheet() {
 
        register_style();
            wp_enqueue_style('responsive');
        if (is_home() || is_front_page()) {
            wp_enqueue_style('font-awesome');
        }
    }
 
    add_action('wp_print_scripts', 'add_script');
    add_action('wp_print_styles', 'add_stylesheet');
 
}

JSはregister_script()、CSSはregister_style()に必要なファイルを記述。
add_script()、add_stylesheet()の部分で、条件分岐でhome、frontページだけとかを記述します。

例えば、TOPページだけに写真のスライドショーがあるサイトは、スライドショーを実装するスクリプトは下層ページに必要ないですから、いちいち読み込まなくてもいいですね。

wp_register_scriptの値はJSファイルの読み込みと、もしjQueryに依存している場合にarray()内にjQueryを記述、その次はバージョンの記述ですが特に必要なければNULLを指定します。
最後は読み込み場所の指定になります。ページの末尾に読み込むならtrue、header内ならfalseを指定します。
Webサイトを表示させる時のレンダリングにも影響して表示スピードが遅くならないように、JSファイルはなるべくページの末尾で読み込むようにしましょう。

これで少しはスピードが速くなりますよ。