【即効性あり】Pagespeed Insightsの評価を上げる

【即効性あり】Pagespeed Insightsの評価を上げる WordPress

こんにちは、mickです。

11年間のプログラマ系SEとして勤務。

WordPressを使っていると、ブログページの表示速度がどれくらなのか気になります。

Googleが出しているPagespeed InsightsというサービスでWordPressの表示速度を調べることができます。

ここでは、その評価を上げるためにしていることを記事にしています。

高速サーバーを使う>mixhost

WordPressの高速化には、サーバーのmixhostを使います。

WordPressは、サーバー上で動くのでサーバー性能は無視できません。

サーバーの性能を見る上で大切なことのひとつが、記憶媒体がSSDかどうか。

mixhostは、これを満たしています。本ブログでは、mixhostを利用しています。

サーバー選定のとき、同じSSDのサーバーを持つ、ConoHa WINGとも悩みました。

悩んだときは、どちらを選んでも失敗することは稀。最後には、エイヤッ、とmixhostに決めています。

運営を始めて日は浅いですが、いまのところ困っていません。快適です。

⇒ mixhost公式

⇒ ConoHa WING公式

高速化を意識したテーマを使う>Cocoon

WordPressのテーマには、高速化を考慮しているCocoonを使います。

リアルタイムにブログページを生成するWordPressでは、テーマが高速化に影響します。

本サイトでは、このCocoonテーマをカスタマイズして利用しています。

なお、WordPressのサイトヘルスステータスでは停止中のテーマを削除するようでてきます。

イメージ画像

なので使わないテーマは、削除しておきましょう。

⇒ Cocoon配布サイト

画像サイズを節約する>ImageOptim

JPEG、PNG、GIFといった画像ファイルは、ImageOptimを使って画像サイズを節約します。

どんぶり勘定ですが、画像ファイル全体のサイズが半分になれば、表示速度は倍になります。

ImageOptimは、無料で利用できて、画像サイズを気にならない程度に減らすことができます。

デフォルトの設定のままでも、十分にファイルサイズを減らしてくれます。

私は、カスタマイズ設定で次のように設定しています。

JPEG 96%
PNG 90%
GIF 90%

ImageOptimを使うとき、注意点が2つあります。

ひとつは、圧縮の際はオリジナルの画像ファイルに上書きされるということです。

なので必ずバックアップを取ってから操作を行うことをオススメします。

もうひとつは、アプリはMac版しかないということです。

それでもImageOptimの公式では、WindowsやLinuxでも使える画像圧縮ツールの紹介をしてくれています。

⇒ ImageOptim公式

高速化のプラグインを使う>Autoptimize

高速化のプラグインには、まずAutoptimizeを使うで間違いないと思います。

チェックボックスで該当項目にチェックするという簡単なお仕事です。

チェックする該当項目は、この通り。

  1. JavaScript コードの最適化
  2. JS ファイルを連結する
  3. CSS コードを最適化
  4. CSS ファイルを連結する
  5. インラインの CSS を連結
  6. CSS のインライン化と遅延
  7. HTML コードを最適化
  8. 連結されたスクリプト / CSS を静的ファイルとして保存
  9. 除外されたCSSファイルとJSファイルを縮小する
  10. 画像を最適化

プラグインのバージョンによって、項目名が変わったり増えたり減ったりすることがあります。

唯一「CSS のインライン化と遅延」の設定は、少し手間がかかります。

テキストの入力には、Critical Path CSS Generatorで作成した文字列を貼り付けます。

  1. 「URL」に、ブログサイトのアドレスを入力
  2. 「FULL CSS」に、ブログサイトの「style.css」をすべて記述
  3. 「Create Critical Path CSS」をクリック
  4. 「Critical Path CSS」のテキストボックスがテキストとともに表れるので、コピペ
  5. 「CSS のインライン化と遅延」のテキストに貼り付ける

記事の時点では、「バージョン 2.7.3」のAutoptimizeです。

mixhost などのLiteSpeed系サーバーのレンタルサーバーを使っている場合は、LiteSpeed Cache をオススメしています(追記 2020/09/17)。

まとめ。

本ブログは、記事の数もこれからです。

それにテーマのカスタマイズやプラグインの利用など、やることはたくさんあります。

なので、本サイトの現在(2020/06/19)でのPagespeed Insightsの評価は、参考程度にとどめていただければと思います(記事の最後に添付しています)。

今後も定期的にPagespeed Insightsの評価を確認し、カスタマイズは続けていきたいと思います。

以上、みなさまの助けなれば幸いです。

初稿 2020/06/19

パソコン版の評価
モバイル版の評価