WPサイトの表示速度を改善した記録 | WEB制作の備忘録めもミフネWEB

先日WordPressで作ったホームページのSEO改善を依頼されたので、その一環で速度表示の改善を行いました。

WordPressサイトの表示速度を改善する

WordPressはテーマやプラグインをインストールするだけで、自分でコードを書かなくても様々な機能が利用できる非常に便利なものなのですが、機能を追加しすぎるとサイト表示速度が遅くなってしまうのが悩ましいところです。

今回はどのプラグインを外したらどのように速度が変化するかを逐一記録してみたので、WordPressの表示速度を気にされている方はご参考になさってください

INDEX

プラグインの有無でどのように速度は変わるかテスト
とりあえず画像をどうにかする
Webフォントを止めてみる
不要なcss jsの読み込みが無いか確認してみる
1. function.phpをいじる
ひとまずここで終了

プラグインの有無でどのように速度は変わるかテスト

まずは現在の状況をPage Speed Insightで計測してみます。

モバイルの点数がなかなか低いです。

まぁGoogleMapとYoutubeの埋め込みがあり、プラグインでイベントカレンダーや外部レビューも表示しているしなので覚悟はしていましたが遅いです。

さて、これをどこまで改善できるか。。

とりあえず画像をどうにかする

まずは画像ファイルの処理を確認してみます。すでに画像圧縮用のプラグインは入っていたので、入ってなかったLazyload系の機能を追加。

もし画像圧縮系のプラグインがまだ入っていないのならSmush(https://ja.wordpress.org/plugins/wp-smushit/)がおすすめです。圧縮・最適化・lazy loading・webPフォーマット（Pro版のみ）を全て行ってくれます。

画像の処理終わった時点での速度テストが以下。

一応再最適化もしてみたのですが案の定変化なかったので、実際はLazyload処理したぐらいです。多少改善したものの大きな変化はみられませんでした。

Webフォントを止めてみる

テーマの機能でGoogle Web Fontが使用されていたのですが、聞いてみると特にこだわりは無いというので潔く無効化して定番のfont-family 設定に変えてみました。

一気に改善しました。制作のご依頼などでWebフォントはたまに使うので、「Webフォントがここまで影響するか？」という疑問が正直ありますが、実際数字が変わったので記録しておきました。

WEBフォントを使用しつつ、表示速度を落とさない方法は別記事「Webフォント読み込みによる表示速度の遅れを改善する」をご参照ください。

不要なcss jsの読み込みが無いか確認してみる

プラグインの中には、必要ないページにまで出しゃばってソースファイルを読み込ませているものがあります。

お問い合わせフォームで有名なcontact form7などがそうです。

なのでページが何を読み込んでいるか確認しておきます。

function.phpをいじる

DigiPress様の説明が分かりやすかったのでそのまま紹介させていただきます。コードの意味とか具体的な手順を知りたい方は是非DigiPress様のページでご確認ください。

function.php に以下を追記

   // ここから追記
　　 function dp_display_pluginhandles() {
      $wp_styles = wp_styles();
      $wp_scripts = wp_scripts();
      $handlename = '<dl><dt>Queuing scripts</dt><dd><ul>';
      foreach( $wp_styles->queue as $handle ) :
        $handlename .=  '<li>' . $handle .'</li>';
      endforeach;
      $handlename .= '</ul></dd>';
      $handlename .= '<dt>Queuing styles</dt><dd><ul>';
      foreach( $wp_scripts->queue as $handle ) :
        $handlename .=  '<li>' . $handle .'</li>';
      endforeach;
      $handlename .= '</ul></dd></dl>';
      return $handlename;
    }
    add_shortcode( 'pluginhandles', 'dp_display_pluginhandles');