二宮和也さん公式サイトのWordPress高速化アドバイス

同じ83年生まれとしてWordPress高速化専門の立場から、WordPressを使用して制作された二宮和也さんの新しい公式サイトの表示速度を今よりもっと速くする対策を難易度別にまとめてみました。

本記事で指摘している内容は高速化案件でよくあるパターンです。WordPressはじめ様々なサイトで応用できますのでご参考にしていただければ幸いです。

注意事項

• WebPageTestでサイトを調査した上で、現在の利用テーマ・プラグインを変更しない前提で対策できる内容としています。（高速化現場ではプラグイン整理・変更が実施されることがあります。）
• 阿部寛さんのサイト構造とWordPress及び今回利用されているAstra及びElementorでは読込量に差があり、またHTMLと動的なPHPでは処理性能に違いがあります。ただ最大限近づけることは可能です。
• 掲載内容は読込調査など表から確認可能な部分のみの情報を基に判断しています。具体的なプラグイン設定画面など表面だけの情報では把握できない箇所については考慮していません。

2023/12/18時点の改善状況

本セクションは下記の最新読込に基づいています。

同じ条件で測定した場合、リリース当初トップページ表示が120秒かかってましたが3.4秒まで改善しました。比較動画は下記投稿から確認できます。

難易度：低（基本的に誰でも対策可能な箇所）

画像の最適化

• 画像ファイル名に日本語名を含めないこと（例：背景-1-1-1.png）
• 必要以上に高解像度の画像を使用しないこと
  • top-1-1-1.png
  • n1253-1-1.png
  • 背景-1-1-1.png
• 同じ画像を重複して読み込まないこと

EWWW Image Optimizerが使用されてますが、解像度が大きい画像を自動圧縮させても限度があります。最も効率的に画像サイズを低くするには、アップロード前に画像を適切な形式に変換又はリサイズすることが大事です。

例えばtop-1-1-1.pngは現状3MBですが、PNGからJPGにして画像品質を90%にすると同じ解像度でもファイルサイズは337KBまで減ります。写真の場合はPNGよりJPGが効率的です。

この画像を更に画像最適化ツールで最大限圧縮すると77KBに下がります。これでも過度な画質劣化はないため、ウェブサイト掲載用の品質としては十分です。

なおWordPress側で画像アップロード後に圧縮する場合は、ローカル上の画像（手元の画像）を圧縮しないで使用してください。何度も圧縮ツールを通すと意図しない画質劣化のリスクがあります。

また同プラグインは無料版と有料版で圧縮率が異なります。先ずは元画像を最適な状態にした上でアップロードし、無料版でも使用できるWebP形式に変換するだけでも画像読み込み時間が改善し、表示速度も高速化します。

画像の最適化（2023/12/18追記）

上記の指摘内容は早速改善されましたので

難易度：中（人によって経験者に頼る方が良い対策）

ウェブフォントの読み込み改善

• Googleフォントの使用を停止する
• Googleフォント読み込みをCloudflareで改善する（フォント使用が必要な場合）

まずサイトを軽量化するに最も効率良いのはウェブフォントを使用しないことです。トップページでは53のフォントファイル読み込みがGoogleの配信サーバーからあるので、これを無くせばより表示速度が高速化します。

もしデザイン上Googleフォントが必要であれば、Cloudflareが最近提供を開始したCloudflare Fontsを使用すればWordPress上で細かな調整なく、簡単な画面操作で改善できます。

条件として現在エックスサーバーに設定されているネームサーバーをCloudflare指定の内容に変更する必要がありますが、基本的な機能は無料版でも利用できるので将来的な負荷対策としても特に二宮さんみたいにアクセスの見込めるサイトでは有効です。

CloudflareにはCDNでのキャッシュなど、いくつか適切な調整が必要な箇所があります。慣れた人にお任せするのが安全です。

難易度：高（WordPress高速化経験がないとおすすめできない対策）

サイト構成ファイルの読み込み制御

WordPressではデザインを構成するファイルでも、表示したいページでは不要なデータも読み込まれます。例えばお問い合わせフォームの構成ファイルも、トップページでは必要ありません。

他にもElementorは特に余計な読み込みが多いので、不要なCSSを削除したり、ページ上で必要のないファイル読み込みを制御することでそれぞれのページで表示速度が改善します。

これには専用プラグインを使用しますが慣れてないとレイアウトが崩れたり、本来意図する機能が使えなくなるなど弊害があります。あくまで、もっと高速化する手法があるという例えです。

その他高速化に関する推奨項目

• 海外アクセスを見込み予め海外閲覧者に対しても快適な閲覧環境を提供する。
• CloudflareやCDNを活用しエックスサーバーの処理能力を超えないようにする。
• 著名人なので対策しなくても大丈夫と思いますが、SEOに関係するCore Web Vitals対策を実施する。

もし余裕があればサイトの作り直しが必要ですが、高速化ノウハウを提供しているSWELLテーマを利用することで読み込みの軽量化と表示速度の改善がしやすくなります。

その他高速化以外の推奨項目

• WordPressの定期的なアップデート。
• 不正アクセス、サイト改ざんを防ぐセキュリティ対策の実施。

保守管理作業としての具体例は下記を参考に。