Web サイトを高速化する #2 チューニング

PageSpeed Insights のスコアアップを目指し、前回、サーバをスペックアップしましたがほとんど効果が見られませんでした。

今回は、PageSpeed Insights からの分析結果に応じた対応を進めてみます。

1. PageSpeed Insights からの分析結果

1.1. パソコン

以下のスクリーンショットは”パソコン”に関するPageSpeed Insights の分析結果です。 スコア自体は80点台と速くもなく遅くも無くです。

“コンテンツの初回ペイント”は0.6秒なのに対して、”速度インデックス”と”インタラクティブになるまでの時間”が1.9秒、3.7秒とのことなので、アクセスした人からすると4秒待たないといけないわけです。(体感ではそのようなこともないのですが。キャッシュされているからかもですが)

改善できる項目に3点ほど、画像のサイズ縮小や遅延読み込みなど、リコメンドがありますが併せて1秒ちょっとの改善にしかならないようです。 診断にあるメインスレッド処理の最小化の3.6秒とJavaScriptの実行にかかる時間の削減の1.7秒が大きいのでこの2つを改善出来るとよさそうです。

1.2. モバイル

モバイルの分析結果ですが、スコアが30点台ということもあり赤色文字のオンパレードです。

パソコンでは0.6秒だった”コンテンツの初回ペイント”が2.6秒、インタラクティブになるまでの時間はパソコンの3.7秒から13秒と約10秒も時間がかかっています。

リコメンドされているオフスクリーン画像の遅延読み込みは3.7秒の改善効果とこれは実施するべきものとなりそうです。 また、パソコンの分析結果でもあったメインスレッド処理の最小化とJavaScriptの実行にかかる時間の削減も低スコアの大きな要因になっていそうです。

1.3. チューニングの方針

分析の結果からチューニングの方針を考えます。 

  1. 画像読み込みを高速化する
    • 画像のサイズを小さくする
    • 遅延読み込みを有効化する
  2. メインスレッド処理とJavaScript 実行を高速化する
    • WordPress テーマ に応じたチューニング
    • 不要なプラグインなどの見直し

大きく2つあげましたが、②の ”メインスレッド処理とJavaScript 実行を高速化する ”が処理時間が長いことから、ここを重点的に進める必要がありそうです。

2. 画像読み込みを高速化する

2.1. 画像のサイズを小さくする

すでにWordpressのプラグイン”EWWW Image Optimizer” を導入していたのですがこれが有効に機能しているかどうかから調べることにします。 

WordPress のメディアライブラリから見る限り、有効に機能し、最適化もされています。 より改善を求めるとするとPNGの圧縮率を変える(有償化が必要な場合も)、PNGをやめて違う形式にする(対応するWebブラウザが必要)など、手間と労力と効果があまり見合わないように思われます。 対応の優先度を下げることにします。

2.2. 遅延読み込みを有効にする

プラグイン”Autoptimize”から遅延読み込みを有効にします。

こちら効果は確認できました。   PageSpeed Insights にてオフスクリーン画像の遅延読み込みに関するリコメンドはなくなりました。 ただ、スコアは数点レベルのアップにとどまっていました。

3. メインスレッド処理とJavaScript 実行を高速化する

3.1. テーマ提供元推奨のチューニング

とりあえず、本ブログで使用しているテーマの提供元で紹介されている高速化の方法を試していきます。

施策実施した内容効果
プラグインの見直し不要なプラグインの停止小(不要なプラグインがなかった)
PHP 7の使用元々PHP 7を使用小(元々 PHP 7 を使用)
サーバーの見直し実施
1CPU → 2CPU
1GBメモリ →4GB
小(スコアアップほぼなし)
キャッシュ系プラグインの適用未実施
※パーマリンクの構成上適用出来ず
未実施
余計なリビジョンデータなどの削除Optimize Database after Deleting Revisions を利用し最適化 小(スコアアップほぼなし)
画像の容量を小さくする ”EWWW Image Optimizer” で実施 小(元々有効化)
画像の読み込みを遅延“Autoptimize” から実施 小(ちょっとスコアアップ)
ブラウザキャッシュ設定 小(スコアアップほぼなし)
コードを圧縮 “Autoptimize” から実施小(元々有効化)
JavaScriptをフッターで読み込む未実施(PageSpeed Insightsからリコメンドがなかったため)未実施
Youtube動画の最適化未実施(非対象) 未実施(非対象)
余計なものを除く未実施未実施

一通り実施してみましたが、目を見張る効果は出ませんでした。上の対応を行って全体でスコアが数点アップした位。。。

最後の望みは、上記12点の改善方法の最後にある”余計なものを除く”を進めてみます。

3.2. 余計なものを除く

余計とは思ってはいなかったのですが、速度アップに繋がりそうな”除く”を試してみます。

  • 人気記事ウィジェットを削除
  • トップページの既定の記事表示数を10→5

結果、パソコンは緑色レンジへ(84→91)到達しました。

モバイルは以前赤色レンジで(37→46)です。 こちらはまだまだですね。 自分のスマートフォンで見ている限りはそれほど遅くは感じないのですけど。

4. まとめ

PageSpeed Insights のスコアアップを目指して色々やってみたのですが、一番効果があったのは表示される記事数とウィジェットを減らすことでした。 逆にサーバのスペックアップなどはほとんど効果が出ませんでした。

もちろん、Webコンテンツやサーバ環境(WebサーバやDB、スクリプトなどの実行環境)によりますのでこのサイトについて言える話だとは思います。

しかし、モバイルのスコアが低すぎるのが気になるところ。 ここは引き続きスコアアップにチャレンジしたいところです。