WordPress高速化！モバイル90点を目指す方法【SEO】

前回の記事で書いたSEO対策のひとつ「ページの表示速度」について、当ブログで行った対策を紹介しよう。なかなか向上しない「モバイル」の速度がしっかり上がったので効果間違いなし。

軽量化への道

画像は現在の当ブログの「Page Speed Insights」モバイルスコア。PCスコアは高くて当たり前なので省略。

計測は広告アリの通常運営の状態。スコアを偽装するためにプラグインを外したり、Webフォントを切ったりといった小細工は一切なし。「89」という微妙なスコアだけど、プラグインを全カットすればスコアは30台に落ちることを考えればまあ良い方じゃないかと。

計測する時間帯によってはトラフィックの影響を受けて上下する事はあるかと思うけど、平日17時の計測なので普段の運営から乖離した状態ではないはず。

ここに至るまでたくさんのサイトや記事を見て研究してきたけど、効果があったり無かったりで実際のところどうなの？と思うものがたくさんあった。

その辺りを自分なりに最適化し、取捨選択した上で今の設定に落ち着いた。結果、高速化に使用するプラグインの数はどんどん減っていった。たくさん使うほど効果が上がるワケではないことがハッキリした。当たり前だけど。

自分は専門のエンジニアではないので細かい部分までは分からないけど、結果的に数字を上げることは出来たので考え方としては間違っていないと思う。

使用プラグイン

当ブログの状況

• WordPress 5.8.1（2021/09/28 現在）
• テーマ：Cocoon
• 総プラグイン数12個

速度アップに使用するプラグイン

以前はこの他に「WP-Optimize」をはじめ色々使っていたが効果がないので外した。機能が被るものはひとつに集約して数を減らした方が絶対良い。

その他 常用プラグイン

• Ad Invalid Click Protector
• Broken Link Checker
• Redirection
• Rinker
• SiteGuard WP Plugin
• TaxoPress
• WebSub/PubSubHubbub
• WP Multibyte Patch
• XML Sitemaps

ありがちなのが、多くの人は結果だけを追い求めるあまり「速くなるプラグインはどれ？」という部分だけに拘りがち。

サイト運営は、サーバーが違えばテーマも違うしデザインも使用プラグインも何もかも変わってくる。だから「何のためにそのプラグインが必要なのか」を理解していないと沼にハマる。

難しい用語や専門知識まで勉強する必要はない。あくまでも最低限の心得は持っておいた方がいいよという話。

まずはザックリと解説していくので付いてきてほしい。

見栄えと軽快さはトレードオフ

とりあえず前提として、効果が微妙なものや不要なプラグインはすべて外す。

さらに不要なJavaScriptも切り捨てる。JavaScriptはページ上で動きのあるデザインを作ったり、データを取得するための簡単なプログラムと思っていればいい。ページに何かしらのギミックを付けていれば使われている可能性が高い。

とにかく文章や画像などのメインコンテンツ以外の処理は最小限に抑えるのが鉄則。記事を見せたいのか装飾を見せたいのかハッキリさせよう。

実際、有名サイトやブログなどはとてもシンプルに作られている。ビギナーほどゴテゴテした装飾や動きのあるギミックなどを入れてしまいがち。

「カルーセル」や「スライダー」などのウィジェット類は、一見派手で効果的に見えるが処理は重い。客観的に見て読者がそれを「クリックしたくなるか」よく考えよう。

「読み込み待ち」はNG

表示するデータ（画像など）の最適化を目指そう。あれもこれもと節操なく表示させると、一度に大量のトラフィックが発生する。データがすべて到着するまで「待ち時間」が発生し、ブラウザは手を止めざるを得ない。

酷いサイトは安定するまで10秒以上待たされたりといった経験は誰にでもあると思う。もう離脱率どころの話ではない。そもそも見る気が失せるのでブラウザバック必死。これだけは絶対に避けよう。

Googleの公式発表では、モバイルの表示速度は開いた瞬間、スクロール前の表示で1秒以内とするのが推奨されているらしい。PCよりも遥かに条件が厳しい。今後はモバイルに向けたデザインで作成し、後にPCに最適化する手法がメインになるかもしれない。

とにかく理想は「阿部寛のホームページ」だ。贅肉を削ぎ落とした究極の美しさ。Webサイトの理想形。学べるところは非常に多い。（ホントか？）

前置きはここまで

というわけで、ここから具体的にプラグインとその設定を説明する。

いちおう当サイトの設定をそのまま載せるけど、これを真似れば同じスコアが出るとは限らないので、そこは自分自身の環境と相談しながら読み替えてほしい。

そのためにここまで長い前フリを書いた。

Cocoon設定「高速化」

そもそもCocoonを使えば、高速化に必要な機能はおおよそ搭載されているので必要十分だったりする。

設定に関してはチェックボックスはすべてチェックオンでいい。後述する「WP Fastest Cache」と機能的に被るところが多いので、Cocoon側をオフってWP Fastest Cache側で有効にするのもアリ。

俺はテーマ側で最適化できる部分はテーマ側でやってしまいたい派。

こだわるならそれぞれでテストしてみるのもいい。

WP Fastest Cache

キャッシュ系プラグインでは一番メジャーかもしれない。似たところで「WP-Optimize」などがある。

キャッシュプラグインの目的は、一度表示したページ内容をサーバーで保存しておいて、次回同じリクエストが来た際にそのデータを再利用して送出する。結果、サーバー内の処理を簡略化する。

もうひとつはブラウザ側でも保存しておくことで、同じページを開いた時にブラウザキャッシュから読み込むことで高速化を図る。これらがメインの仕事。

あと補助的な機能としてデータの圧縮・連結（HTML・CSS・JS）がある。

Cocoonと組み合わせる場合、データ圧縮はCocoon側で処理するので WP Fastest Cache の仕事は主にキャッシュ関係のみ。

設定

データ圧縮は被るのですべてチェックオフ。「Gzip 圧縮」だけオン。ウチではこの有無でスコアが2～3変わった。誤差に見えなくもないが、ボリュームのある記事ほど効果が現れるのかもしれない。

「ブラウザキャッシュ」もCocoonと被るのでオフ。テストしてみたが変化が見られないので要らないものはオフ。

あとは画像の通りで問題ない。設定以外のタブは触らなくてOK。

キャッシュ系プラグイン使用上の注意

キャッシュプラグインを導入した際、気をつけるべきことがある。

それは設定を変えたり記事を投稿した際は必ずキャッシュをクリアすること。

これを忘れるとサーバーは保存されている古いキャッシュデータを送信し続けてしまうので、変更が反映されていないように見えてしまう。要注意。

上の画像通りに設定していれば「記事の投稿・更新」時は自動でキャッシュクリアされるが、デザインや設定を弄った際は必ず手動でクリアすること。これはどのキャッシュ系プラグインも共通しているので忘れないように。

キャッシュクリアは WP Fastest Cache の場合、上部バーの「Delete Cache」から「Clear All Cache」でクリアできる。何かを弄った際はクリアするクセを付けよう。

　

EWWW Image Optimizer

これは画像処理に特化したプラグイン。主な働きは、サーバーに保存したあらゆる画像データをリサイズ・圧縮する。上の WP Fastest Cache と並んで、ほとんどの人が入れているプラグインだと思う。

これも画像の通り設定すれば概ね大丈夫かと。「画像のリサイズ」に関しては、自身のサイトで表示するサイズに合わせて調整しよう。ウチの場合、拡大表示しても横1024を越えることはないと思うのでこの数字にしてる。

サーバー容量をケチりたい場合は700や600あたりまで小さくするのもアリだけど、小さい画像を拡大すると劣化が著しくなるので注意。それぐらいケチったところでたいして変わらないと思うので、気になるなら大きめに設定しておけば問題ない。

「遅延読み込み」はCocoon側でオンにしていればこちらはオフ。両方オンにすると衝突して画像が表示されなくなったり不具合が生じるので注意。

あと、次世代画像フォーマット「WebP」は有効にした方がスコア上は有利。JpegやPng画像をより軽いWebPフォーマットで表示してくれる。

ただしWebPを使用するには少々面倒な設定が必要なので、他のすべてを施してもスコアが伸びない場合の「奥の手」としてやるぐらいでいい。

WebPフォーマットを有効にする方法

コードを見つける

設定のいちばん下「WebP 変換」の項目にチェックを入れると下にコードが表示される。このコードをサーバー内の「.htaccess」にコピペする。もしこれを間違えると最悪サイトが表示されなくなるので注意。自信がないなら先に情報をたくさん集めて備えよう。

.htaccess を編集する

.htaccessへのアクセス方法は基本的にFTPを使うか、サーバーに付属のファイルエクスプローラーを利用する。ここでは「ConoHa Wing」での編集方法を紹介する。

「ConoHa Wing」はサーバー管理画面から直接「.htaccess」の編集ができる。便利だけど操作は慎重に。

サーバー管理画面の「サイト管理」→「サイト設定」→「応用設定」タブ→「.htaccess設定」
ここで直接「.htaccess」の編集ができる。まずは編集する前に現在の内容を全選択してコピー、メモ帳などのテキストエディタに貼り付けてバックアップしておこう。最悪間違えてもこれを書き戻せば復旧できる。

コードの貼り付け

用意ができたら、先ほどのEWWW Image Optimizerのコードをコピーして.htaccessの冒頭に貼り付ける。間違いがないことを確認して保存する。

WebP に設定完了

あとはEWWW Image Optimizerの「変更を保存」ボタンを押すと右下の「PNG」という赤いアイコンが「WEBP」という緑のアイコンに変わる。これで設定完了。

以降、アップロードした画像は自動でWebpに変換されて表示されるので特別な操作は必要なし。

なんだけど、過去にアップロードされている画像は自動で変換されないので、手動で変換する必要がある。

過去画像を手動でWebP変換する

WordPressのメニュー「メディア」→「一括最適化」から、「最適化されていない画像をスキャンする」ボタンを押す。

未変換の画像数が表示されるので、右側の「WebP のみ」にチェックを入れ「画像を最適化」ボタンを押せば変換が始まる。

画像の量にもよるけど、初めての場合は結構時間がかかると思うのでしばらく放置して終わるまで見守る。変換後の確認は、メディアの一覧に「WebP」項目が表示されていればOK。

または自身のサイトをブラウザで開いて、画像を右クリック保存した際に拡張子が「.webp」になっていればOK。

Flying Scripts by WP Speed Matters

ハッキリ言って、ここまでの工程は序盤にすぎない。

最後にこのFlying Scriptsを使うことで速度は劇的に向上する。

具体的な働きは、JavaScriptの読み込みを「後回し」にすることで、最低限の要素を先に読み込ませる。つまり「読み込み待ち」を最小限にすることができる。この効果がかなり大きい。

ページを開いてから読者が何らかの操作をするまでJavaScriptの読み込みは待機される。操作をしないまま指定の秒数が経過すると、遅れてJavaScriptの読み込みがスタートする。

ただし注意しないといけないのが、サイトの作りによってはJavaScriptを遅らせることで表示が崩れてしまう場合がある。その場合はそのコードを特定して遅延から除外する必要がある。

うちの場合、手当り次第すべてのJavaScriptを遅延させても表示に影響が無いのでそのまま運用している。

遅延させるJavaScriptを特定

このプラグインの使い方は遅延させるJavaScriptを特定し、それを登録するだけ。やることは簡単。登録すべきJavaScriptを特定するのにコツが必要だけど、理解してしまえば簡単。

まずはPage Speed Insightsの結果を見てみよう。下方にスクロールすると「改善できる項目」がある。その中に「使用していない JavaScript の削減」という項目があるので「▽」を押して開いてみよう。

ここに羅列されたものすべてが表示の足を引っ張っていると思っていい。「*.js」の付く項目を1個ずつコピペしてFlying Scriptsに貼り付ける。

ウチの場合、

• show_ads_impl_fy2019.js
• reactive_library_fy2019.js
• adsbygoogle.js
• jquery.min.js

などがそれ。一項目ずつ設定しては実際にサイトをリロードし、表示がおかしくなっていないか確認する。複数の登録は改行で入力していく。

中身を覗いてみるとほとんどが広告系なんだな・・・　やっぱり広告は表示を重くする。できるだけシェイプアップしよう。

あとCocoonでは、これを施すことでカルーセルの表示がおかしくなった。どうしても表示させたい場合、どのスクリプトがカルーセルに影響を与えているかしっかり調べよう。というかそもそもカルーセルに頼らないデザイン設計を考えた方がいい。

最後に

以上、当ブログで実施したページスピードの最適化はこんな感じ。これでもまだ詰められるところはある。と言ってもWebフォントなどはデザインや読みやすさのためにあえて採用しているので捨てたくはない。

そういった要素をしっかり吟味して「要るもの・要らないもの」を分別し、迷うぐらいなら捨ててしまえ！の精神でサイト表示を軽くしていこう。

それと、これはあくまでもトップページだけの評価なので、記事ページもチェックしながらできるだけ全体の軽量化を維持していこう。

いろんな装飾や機能を付けたい気持ちは分かるけど、結局自己満足でしかないものがほとんど。

読者目線で読みやすいサイト作りを目指そう。