ワードプレスのページ速度を改善する方法

著者 Nora
日付
カテゴリー カスタマイズ
タグ ,,

ページのロードに時間が掛かるページってイライラしますよね。

僕自身実際にテーマを作成するまでどうやって改善できるか悩んでいましたし、大抵画像ファイルだったり、サーバーの設定で何とかするもんだと思っていましたが、自分でテーマを作成してみると、限度はありますが「PageSpeed Insights」のスコアでもグリーンスコアを叩き出せるテーマを作成できました。

ページ速度 PageSpeed Insights モバイル
ページ速度 PageSpeed Insights モバイル
ページ速度 PageSpeed Insights パソコン
ページ速度 PageSpeed Insights パソコン

当サイトの現在のページ速度がちょっと気になる方は「PageSpeed Insights」でチェックしてみてください。テーマ「ShapeShifter」を使用していますが、大体どのページでも90点くらいになっていると思います。

「ページ速度改善のプラグインは一切使用していない」と言いたいところですが、画像最適化プラグイン「EWWW Image Optimizer」だけは使用しています。ここまで便利な無料のプラグインはそうありません。オススメです。

また僕が作成したプラグイン「Magic Inliner」を有効化すれば、95点くらいにはなると思います。ええ、「テーマのみ（+EWWW Image Optimizer）」の速度ディスプレイ用に敢えて停止しています。

僕も自分のが最善策だとは思えないのですが、テーマの設定のみでページ速度のスコアが改善されるよう、当サイトで配布しているテーマ「ShapeShifter」でも取り入れているページ速度の改善術を紹介していきます。

ただ、あくまでもテーマやプラグインの作成に取り入れられることですので、コードを編集できないと難しいと思いますが、テーマや子テーマの作成に興味がある人はぜひ実践してみてください。ここでは主にワードプレスを使用することを前提に紹介していきます。

  • Table of Contents

「.htaccess」で圧縮

まず、「.htaccess」というファイルが恐らくルート・ディレクトリにあると思いますが、これを編集することでページ速度を改善することが出来ます。

テーマの設定じゃないんですが、影響が大きいのでこれは必須項目です。どのテーマだろうと関係なく、「.htaccess」の編集は必要ですので、先にこれを済ませておきます。

テーマ「ShapeShifter」では、管理画面の「外観」->「ファイルを編集」ページで編集できます。

テーマ「ShapeShifter」 「ファイルを編集」ページ
テーマ「ShapeShifter」 「ファイルを編集」ページ

速度への影響が非常に大きく、絶対しておくべき項目ですので、まだ、何も編集していない状態でしたら、取り敢えず以下のテキストを「.htaccess」にコピペしてみてください。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

圧縮の設定なんですが、これだけでかなり改善される筈です。

また、ブラウザキャッシュに関しては以下のような感じです。

ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresDefault "modification plus 1 month"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

ワードプレスの設定ではないのですが、「.htaccess」の編集はページ速度改善にはほぼ必須項目です。

僕はこれだけは「.htaccess」に追記していますので、テーマにもコピペ用に上記のテキストを載せておこうかと。

イメージの出力

次にイメージの出力でページ速度が遅くなる問題です。ページにイメージを出力するとどうしてもその分速度が落ちてしまいます。「PageSpeed Insights」でも改善案として「画像を最適化する」といった項目を目にしたことがあるんじゃないでしょうか？　

これは主に出力されている画像ファイルのサイズが、表示されているサイズよりも大きい場合などに表れます。縦横の幅を表示サイズに合わせたりすると「○○％削減されます」といった改善案ですが、実際はTwitterやFacebookのウィジェットなど、サイトの外にあるリソースを使用している場合もありますので、テーマで出力される部分のみ改善していく形となります。

まぁ大きいサイズを出力する場合は、テーマの設定だけではどうしようもないと思いますけどね。

なるべく背景イメージとして出力する

IMGタグを使用してイメージを出力させるのと、CSSの背景イメージ（background-image）として出力するのでは、ページ速度が全然異なりました。ただ、全体の背景に大きな画像を設定するなどすると、大きく速度が落ちてしまうんですけどね。

div#image-box1 {
  width: 300px;
  height: 225px;
  background-image: url( PATH/TO/YOUR/IMAGE_FILE );
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

背景として出力する際、DIVタグが扱いにくいと感じる場合は、HTML5より導入されているCANVASタグを使用するのがベターです。

canvas#image-box2 {
  width: 300px;
  height: 225px;
  background-image: url( PATH/TO/YOUR/IMAGE_FILE2 );
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

DIVタグだと要素が何も無いように、他の要素が重なってしまうこともありますが、CANVASタグだとちゃんとそこにある要素として認識され、例えば「float:left」などで横に並べても重なりません。

サムネイルを出力する関数を使用すると、IMGタグで出力されますが、フィルターフック「post_thumbnail」を使用すれば、これらを別の要素（DIVタグやCANVASタグなど）に変換することが可能ですので、全てのイメージを背景として出力するようテーマを編集することが可能です。

メインコンテンツはIMGタグを使用

注意書きとして、上記の方法で全てのイメージを出力するのも良いのですが、例外としてメインコンテンツのイメージはIMGタグで出力するようにしましょう。

こちらはクローラーなどがコンテンツの一部であるイメージだったり、その代替テキストとして認識するそうですから、IMGタグのまま出力させる方がSEO的にはベターだと判断しています。

メインコンテンツでは背景出力はしない方が良いので、次の遅延化という方法を取ることで改善されます。

読み込みの遅延化

「読み込みの遅延化」と書いていますが、恐らく誰もが知っている基本中の基本、いわゆる「Lazyload」です。

ワードプレスのプラグインでもIMGタグにLazyload化させるものが存在しますので、それを使用するのも手段の1つです。

ただ、jQueryやJavaScriptを扱える人なら、自分でコードを書いてみるのも良いと思います。というのは、上記に挙げた背景イメージとして出力する改善案がありましたが、遅延化の仕組みって思っている以上に簡単で、背景イメージでも遅延化は可能だからです。

遅延化の仕組みはJavaScript（jQuery）で要素の属性値を操作し、必要なタイミング（スクロールしてウィンドウの下部の位置などを条件に）で値を変更するだけですので、シンプルな遅延化コードであれば、jQueryで簡単に作成できてしまいます。

また、サードパーティ製を使用する場合でも、イメージ読み込みの遅延化プロパティが用意されているものが多いので、なるべく使用できるものを選ぶようにしましょう。例えば、テーマ「ShapeShifter」では、ウィジェット「Slide Gallary」のスライダー機能に「Slider-Pro」を使用しており、IMGタグの属性値を読み取り、自動でイメージの読み込みを遅延化してくれます。

なるべくCSSアイコン

小さなイメージを使用する場合は出来るだけCSSのアイコンを使用します。

「FontAwesome」や「Icomoon」など、CSSアイコン用の便利なサードパーティがあり、僕はこの２つをテーマ「ShapeShifter」に使用しています。

非常に小さいサイズはBase64で

テーマ「ShapeShifter」でこれを使う機会はまだ無いのですが、例えば、キャンセル用の「バツ印」など、とても小さなアイコンがありますよね。そういったものは「Base64」というテキスト形式を使えば、ファイルを読むことなく直接出力できます。当然大きければテキスト量も増えますので、マイナスになってしまいますが、本当に小さなアイコンには最適の方法です。

目安として1KB以下の画像をCSSスプライト繰り返し使わない部分です。まぁ小さいイメージ限定ですので、使いどころはかなり限られますけどね。

小さなイメージを使用するならアプリ「ImageToBase64」が便利で紹介したアプリ「ImageToBase64」はMac用のものですが、恐らく「Base64」で探せば、他にも同様のアプリが見つかるんじゃないでしょうか。

上部が表示されるまで

これは特にモバイルだとそうなのですが、ページをロードした時に最初にウィンドウに表示される部分までの処理が多すぎると、ページ速度がガクッと落ちます。

テーマ「ShapeShifter」に用意しているオプショナルのウィジェットエリア「ヘッダー後」の位置は、モバイルでは出力されないようにしていますが、実はそこにウィジェットをいくつか出力するだけで、ページ速度が極端に落ちてしまうことが原因としてあるからです。これが原因でヘッダーイメージの後にウィジェットを置くことが難しいと判断しましたので、テーマ「ShapeShifter」では上部はすっきりしているんです。

簡単に理由を書くと、ウィンドウに表示されるための処理は、一定のデータ量毎に行われ、その一定の量を超えると2回分の処理が行われることになってしまうんです。

「PageSpeed Insights」でも指摘されますので、興味のある方は一度沢山出力してみると分かると思います。

モバイルとの差別化

レスポンシブデザインが推奨されていますので、小さい横幅の場合のスタイルをCSSのメディアクエリを使用して設定している場合もあると思います。例えば、モバイルで非表示のものはCSSで「display:none」や「visibility:hidden」などのプロパティを設定して、見えなくしてしまうという方法です。

ただ、この場合、出力はされていますので、どうしても処理が遅くなってしまいがちです。特にモバイル端末の処理能力はパソコンには劣りますから（最近のは速いですけどね）、パソコンと同じものを出力していると、やはりモバイルでは速度が落ちてしまいます。

出力しなくても良い要素は非表示ではなく出力しないようにしましょう。また、CSS・JSファイルは複数読み込まず、1つにまとめてしまいましょう。HTTPリクエストの数だけ速度が遅くなってしまいます。

分岐のコツ

ワードプレスに用意されている分岐用の関数「wp_is_mobile」を使うことも考えられますが、テーマ「ShapeShifter」ではサードパーティの「Mobile Detect」を使用しています。

使い方はリンク先のページで確認してください。非常に簡単です。

また、ワードプレス関数で行える条件はこんな具合です。

if( is_admin ) {

  // 管理画面で行う処理

}

if( is_customize_preview() ) {

  // テーマカスタマイザーで行う処理

}


// 以下、公開側のページ
if ( is_front_page() && is_home() ) {

  // デフォルトホームページ

} elseif ( is_front_page() ) {

  // 固定ペーシを使ったホームページ

} elseif ( is_home() ) {

  // ブログページ

} elseif( is_archive() ) {

  // アーカイブページ

  if( is_category() ) {
    // カテゴリー別アーカイブ
  } elseif( is_tag() ) {
    // タグ別アーカイブ
  } elseif( is_author() ) {
    // 作成者別アーカイブ
  } elseif( is_date() ) {

    // 日付別アーカイブ

    if( is_year() ) {
      // 年別アーカイブ
    } elseif( is_month() ) {
      // 月別アーカイブ
    } elseif( is_time() ) {
      // 時間別アーカイブ
    }

  }

} elseif( is_singular() ) {

  //コンテンツページ

  if( is_single() ) {
    // 投稿ページ
  } elseif( is_page() ) {
    // 固定ページ
  } else {
    // その他
  }

} elseif( is_search() ) {
  // 検索結果ページ
} elseif( is_404() ) {
  // 404エラーページ
} else {
  // その他
}

大体こんな感じになるんじゃないでしょうか？

余計なファイルを読ませないようにするには、これらを上手く使用していく必要がありますので、公開側のページでは必要最低限にしておくと改善される筈です。

CSS・JSファイルのエンキュー

CSSファイルは「非同期読み込み」という属性はありませんので、基本的にはファイル内のコードを圧縮してしまう以外にありません。ネットにもツールが幾つか見つかると思います。

僕はMacのアプリ「s.press」を使っていて、CSS・JSファイルはこれで小さくしています。

また、JSファイルはSCRIPTタグの属性に「async」を持たせることが出来ます。「async」は非同期読み込みを行う属性で、タグの出力位置に関係なくファイルが読まれます。他のJSファイルなどに依存しないファイル（例えば「jQuery」など）を先に同期型で読ませ、それ以降はフッターに非同期（async）付きで出力させることで速度は改善されます。つまり、依存するファイルをなるべく同期型でヘッダーに出力し、依存するファイルは非同期型にしてフッターに出力するのがコツです。

ただし、非同期の読み込みはその他の出力にも関係する事が多いので、自分のページでちゃんと読まれているかチェックしながら非同期にするかどうか判断する必要があります。

フィルターフック「style_loader_tag」「script_loader_tag」を使用すれば、「wp_enqueue_style」や「wp_enqueue_script」で出力されるタグにフィルターを掛けることが出来るので、オススメの方法です。

add_action( 'wp_enqueue_scripts', 'wp_enqueue_srcs' );
function wp_enqueue_srcs() {

  // CSS
  wp_enqueue_style( 'style_css', get_template_directory_uri() . 'style.min.css' );

  // JS
    // jQuery
    wp_enqueue_script( 
      'jquery', // ハンドル
      YOUR_JQUERY, // ファイルURL
    );
    // jQueryに依存するJSファイル
    wp_enqueue_script( 
      'your_js', // ハンドル
      DEPENDS_ON_JQUERY, // ファイルURL
      array( 'jquery' ), // 「wp_enqueue_script」で出力される、このファイルが依存するJSファイルのハンドル
      false, // ワードプレスのバージョンは「false」、不要なら「null」
      true // ヘッダーに出力する場合は「false」、フッターに出力する場合は「true」
    );
  
}

add_filter(
  'script_loader_tag'
  function( $tag, $handle, $src  ) {
    
    if( is_customize_preview() )
      return $tag;

    // 非同期
    if( IS_ASYNC_ON ) { 
      if( ! preg_match( '/]+><\/script>/i', $tag ) )
        return $tag;
      if( is_array( $no_async_script_handles_array ) ) {
        if( in_array( $handle, $no_async_script_handles_array ) ) {
          return $tag;
        }
      } elseif ( $no_async_script_handles_array == $handle || strpos( $tag, 'async' ) !== false ) {
        return $tag;
      }
      return str_replace( ' src', ' id="' . $handle . '-js" async defer src', $tag );
    }
    return $tag;
  },
  10, // フィルターの優先度（10が標準）
  3 // パラメーターの数
);

といった感じでしょうか。「IS_ASYNC_ON」は真偽値を使い、「$no_async_script_handles_array」も非同期対象から外すハンドルの配列を設定などから取得することで使用できます。まぁあくまでも使用例としての提案です。

究極の選択肢「Magic Inliner」

ええ、宣伝しておきます。

もしもCSS・JSファイルの出力でフィルターをかけるのが面倒くさいと感じるようなら、プラグイン「Magic Inliner」をご利用ください。CSS・JSファイルを全部インラインで出力しますので、HTTPリクエストのやり取りがなくなりますし、JSファイルの依存関係も保たれます。設定項目は一切なく、有効化するだけで機能します。

基本的には問題なく使用できると思いますが、もし他のテーマやプラグインがフィルターフック「script_loader_tag」などを使用している場合は、インラインで出力されるコードを編集してしまう可能性がありますので、万が一使ってみてエラーが起こるようならご報告いただけると幸いです。

優先度を更に下げるなど、何かしら対策を講じてみます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。