こんばんは。マッチです。
今回はWordPressブログの高速化について書いていきます。
ブログの表示スピードが遅いと検索エンジンからの評価が下がってしまいます。
なぜならGoogleは、サイト表示に5秒以上の時間がかかると読者の直帰率が約90%に増えるというデータを下記のサイトで発表しているからです。
https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
直帰率が下がるということは、読者がきちんとブログを回遊してくれず、すぐに離脱してしまうことを意味してます。
すると、検索エンジンはこのブログは読者からあまり重要視されていないと判断し、サイトの評価を下げてしまうのです。
なので、サイトスピードの改善はSEO対策という意味でも超重要な項目になってきます。
この記事では実際にボクがGoogle pagespeed insightsというサイトスピードを測るサイトでスコア100を達成した方法について解説していきます。
施策前の速度スコア
PageSpeed Insight
https://developers.google.com/speed/pagespeed/insights/
サイトのスコア測定は上記のサイトで行い、下記の画像の結果となりました。
モバイル
パソコン
サイトスピード改善前のGoogle pagespeed insightsでのスコアはモバイルで79点。パソコンで88点という結果でした。
このスコアを100にするためにボクがおこなった施策をこれから解説していきますので順に見ていきましょう。
WordPressプラグインでおこなった高速化対策
EWWW Image Optimizer
1つ目にEWWW Image Optimizerというプラグインを取り入れました。
このプラグインはサイトの表示スピードを遅くしがちな画像のサイズを圧縮してくれるものです。
画像サイズを圧縮することによってファイルサイズが軽くなり、より読み込みスピードが上がりサイト表示が速くなるということですね。
このプラグインを取り入れたことによって劇的にスコアが上がった訳では無いですが、サイト表示を速くするためにも画像圧縮は必ず必要になります。
なのでこのプラグインは必ず有効化して、画像ファイルサイズをこまめに圧縮していくようにしましょう。
Autoptimize
2つ目にAutoptimizeというプラグインを追加しました。
このプラグインはボクが使用している「JIN」というWordPressテーマの公式サイトで高速化のために導入すべきと解説されていたので、取り入れました。
AutoptimizeはCSSやJSなどのリソースを軽量・最適化してくれるプラグインで、不要なコード等を圧縮しサイトの表示速度をアップさせる効果があります。
ただ、WordPressテーマによってはデザイン面やサイトレイアウトに干渉して、崩れてしまう可能性もあるので必ずバックアップをおこなってからの設定をおすすめします。
その他のプラグイン
サイト表示を上げるためによく使用されるプラグインは他にも色々あります。
WP Super Cache
記事が開かれるたびに動的HTMLでサイトを読み込むのではなく、静的HTMLファイルを自動で作成してサイト表示スピードを上げるキャッシュ系プラグイン
a3 Lazy Load
スマホやPCに表示されていない画像の読み込みを遅らせることによって、サイト表示を速くするプラグイン
上記のプラグインもあらゆるサイトで紹介されている素晴らしいプラグインですが、今回おこなった高速化対策ではあまり効果を発揮しなかったので、採用しないこととしました。
ボクのブログでは今回は使用しませんでしたが、あなたの環境下では絶大な効果を発揮する場合もありますので、機会があれば試してみて下さい。そして、試す際は必ずバックアップを取ることを忘れずに。
function.phpへのコード追加
YUKI.WORLDさんのブログで紹介されていた「WordPressテーマJIN」のfunction.phpへのJavaScriptの読み込み遅延処理を追加してみました。
https://yuki.world/jin-mobile-accelerate/
このコード追加が今回一番効果があった改善点となりました。これかこのコードの追加方法を解説していきます。
「WordPressテーマJIN」の外観→テーマエディター→テーマのための関数（function.php）内の一番下の「?>」の前に下記のソースコードを追加しました。
- // js 非同期読み込み
- if (!(is_admin() )) {
- function add_async_to_enqueue_script( $url ) {
- if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外
- if ( strpos( $url, 'jquery.min.js' ) ) return $url; //'jquery.min.js'は、asyc対象外
- return "$url' async charset='UTF-8"; // async属性を付与
- }
- add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
- }
上記のソースコードを貼り付けると下記の画像のようになります。
このソースコードを挿入する前に必ずブログのバックアップを取ることを間違いなくおこなって下さい。
もしくはFTP環境を整えて、サイトが表示されなくなっても修正できるようにしておきましょう。
高速化施策後のサイト表示スコアの結果
モバイル
パソコン
pagespeed insightsのスコアをモバイルで79→94、パソコンで88→100にまで上げることができました。
ここまでスコアを上げることができれば、サイト表示も速くなり、読者の離脱を防ぐことが可能になります。
WordPressの高速化施策は間違いなくSEOの観点から見ても重要な項目なので、あなたも必ずpagespeed insights等のサイトを使って、サイト表示スピードを速くしていきましょう。
最後までお読みいただきありがとうございました！
