カテゴリー: Server

[WordPressのSEO対策]PageSpeed Insightsのスコアを上げる方法

1 はじめに
2 現状のスコアと改善点を確認する
3 ブラウザキャッシュを活用する
4 圧縮を有効にする
5 HTML/CCS/JavaScriptを縮小する
6 画像を最適化する
7 レンダリングをブロックしているJavaScript/CSSを排除
8 サーバーの応答時間を短縮する（WordPress）
9 その他
10 さいごに

はじめに

WordPressでプログを公開し始めて、もう半年以上も経ちますが、SEO対策はほとんどやっていませんでした。

さすがに少しぐらいはSEO対策をやろうと思い、エンジニアリングでできそうなところとして、GoogleのPageSpeed Insightsのスコアを上げる対策をしてみました。

基本的なことですが、下記の対応をするだけこのブログサイトのスコアは常時80以上のスコアをキープできるようになりました。ぜひ、参考にしていただければと思います。

現状のスコアと改善点を確認する

何はともあれ、現在のスコアと改善を確認するところからですね。

こちらのサイトで計測したいウェブページのURLを入力して、分析ボタンを押してください。

暫くすると現状の「スコア」と「適用可能な最適化のリスト」が表示されます。この「適用可能な最適化」を一つずつ改善していけばスコアは上がります。

とはいえ、一つずつ見ていくのは大変と思いますので、下記に代表的な対策例を紹介していきます。

ブラウザキャッシュを活用する

Googleのサイトでも改善方法が記載されていますが、nginxをご利用であれば下記をnginx.confに追加していただくだけで一気に改善されます。

ポイントは、expiresを7日以上にすることです。もちろん、指定した期間はブラウザにキャッシュされてしまいますので、もし画像を差し替える場合は注意が必要です。ファイル名を変更して、公開をし直すなどが必要になります。

http {
    ...省略
    server {
        ...省略
        location ~* \.(html|jpeg|jpg|gif|png|css|js|ico|woff|woff2)$ {
             access_log off;
             expires 7d;
             break;
        }
        ...省略
    }
    ...省略
}

圧縮を有効にする

ページ上の圧縮可能なリソース（HTML / CSS / JavaScriptなど）をgzip圧縮で圧縮することでリソースのダウンロードの時間を短縮します。これも下記をnginx.confに追加するだけです。

ポイントは、gzip_typesにcss / javascriptを追加することです。何も追加しないとtext/htmlだけの圧縮になります。

http {
    ...省略
    gzip　　　　　　　　　　　　　　on;
    gzip_types　　text/css text/javascript application/javascript;
    ...省略
}

HTML/CCS/JavaScriptを縮小する

HTML/CSS/JavaScriptなどのアセットをMinifyするツールをかなりありますので、ご自身で使い慣れているものがあればそれを利用しても良いと思います。

WordPressをご利用の型であれば、やはりプラグインを活用するのが簡単だと思います。オススメは、「Fast Velocity Minify」です。WordPress管理画面にログインして、[プラグイン]-[新規追加]からインストールし、有効にするだけです。

画像を最適化する

Googleのサイトにもありますが、画像圧縮ツールを使用するのが簡単です。WordPressのプラグインもあるようですが、現在ある画像を一気に圧縮させる方法を紹介します。月に1回程度に夜間などにcronで定期実行するのも良いと思います。注意点としては、下記のようにGoogle推奨のツールで圧縮しても、GoogleのPageSpeed toolsでまだ最適化が不足していると指摘されることもありますが、それはある程度許容するしかないですね。

# jpeg圧縮ツールのインストール
sudo yum install libjpeg-turbo-utils
# png圧縮ツールのインストール
sudo yum install optipng
# uploadsディレクトリ以下の全てのjpgファイルを圧縮する
find /var/www/wp-content/uploads/ -name "*.jpg" -type f -exec jpegtran -copy none -optimize -progressive -outfile {} {} \;
# uploadsディレクトリ以下の全てのpngファイルを圧縮する
find /var/www/wp-content/uploads/ -name "*.png" -print | xargs optipng

レンダリングをブロックしているJavaScript/CSSを排除

次の対応としては、JavaScript/CSSの読み込みをbody終了タグの直前に移動させることです。我々のブログでは、「STINGER8」テーマをカスタマイズしているので、修正箇所は「STINGER8」となっていますが、他のテーマでも同様に対応できると思います。

修正ファイルは「wp-content/themes/stinger8/functions.php」となります。WordPress管理画面にログインして、[外観]-[テーマの編集]-[functions.php]を選択して編集できます。

下記の「wp_enqueue_script」という関数の第5引数をtrueにすることで、body終了タグの前に配置されます。

注意点としては、body終了タグの直前などに読み込みを遅らせるため、依存しているJavaScriptが先に読み込まれるとエラーになるので、依存しているJavaScriptも下部に移動させる必要があります。

if ( !function_exists( 'st_enqueue_scripts' ) ) {
    /**
     * スクリプトをキューへ追加
     */    function st_enqueue_scripts() {

        wp_deregister_script( 'jquery' );

        wp_enqueue_script(
            'jquery',
            '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
            array(),
            '1.11.3',
            true
        );

        wp_enqueue_script( 'base', get_template_directory_uri() . '/js/base.js', array( 'jquery' ), false, true );

        wp_enqueue_script(
            'scroll',
            get_template_directory_uri() . '/js/scroll.js',
            array( 'jquery' ),
            false,
            true
        );

    }
}

サーバーの応答時間を短縮する（WordPress）

この対応は、最新のWordPressでは改善済みかもしれませんが、私たちのブログでは若干効果がありましたので対応しました。

記事の抜粋を表示させる「the_expect()」という関数が遅いので、結果が同じになるように下記のように書き換えをしました。

<?php the_excerpt(); ?>

↓

<p><?php echo get_the_excerpt(); //抜粋文 ?></p>

「STINGER8」テーマの場合は、「wp-content/themes/stinger8/itiran.php」「wp-content/themes/stinger8/kanren.php」「wp-content/themes/stinger8/newpost.php」となります。こちらも管理画面からも編集できます。