【高速化】ページ表示速度を高速化する

皆さんこんにちは。
ブログカフェChromaの色です。

今回は、当ブログページの表示速度向上にあくせくした話を書きたいと思います。
Webフォントの遅延読み込みや、使用していないプラグインの削除など
紹介しますので、参考になる部分があれば幸いです。

結果とやったことまとめ

当ブログは、現在レイアウト見直し作業の最中です。

そんな中、ページ表示速度がどのくらいなのか気になって、
PageSpeed InsightsというGoogleのツールにて計測してみました。

すると、スコアはなんと驚愕の38(モバイル)！
PCでのスコアも81と、あまりよろしい結果ではありませんでした。

ページ表示速度が遅いと、それだけでユーザに不快な印象を与えてしまいます。
私も読み込みに時間がかかるページはあまり積極的に見ようとは思いません。

ということで、どうにかページ表示速度を改善することにしました。

当ブログでは、JetPackというプラグインを導入していました。

しかし、導入理由は
Markdownで書いた下書きをビジュアルエディタ形式に変換するため
という少し本来の用途とは外れたものでした。

つまりそのほかの機能は全く使用していなかったということです。

このプラグインは、アクセス解析など様々なことが出来る代わりに、
結構重いと随所でささやかれています。
(もちろん設定に依るでしょうが)

そこで、記事作成をビジュアルエディタに絞り、
JetPackは削除することにしました。

そもそもMarkdownで書く ⇒ 記事作成エディタに貼り付け ⇒ ビジュアルエディタに変換
が結構手間だということに早く気付くべきでした…

正直これがかなり速度に影響していた気がします。

当ブログでは、最近Webフォント「Noto Sans」を導入しました。
理由は個人的に視認性がよく英字の形が好みだからです（笑）

Webフォントは、ページ読み込みの際にインターネット上に
フォント情報を参照しに行くことで表示されます。

日本語のような漢字など文字の多い言語の場合、
フォント情報も大きくなり、参照に時間がかかります。

そのせいで、ページ自体の表示も遅くなってしまうわけです。

回避策として、
一旦暫定のフォントでページを表示を表示し、
Webフォントを後から読み込むというものがあります。

これにより、ページ表示の高速化を図り、
ユーザエクスペリエンスを向上させることが出来ます。

当サイトで利用しているテーマ「Cocoon」では、
設定画面からWebフォントの遅延読み込みを有効化できます。

ダッシュボードの「Cocoon設定」配下の「高速化」を選択し、
「Googleフォントの非同期読み込みを有効にする」にチェックを入れるだけです。

これにより、Googleフォントはページロード後に
読み込まれるようになり、ページ表示自体は高速化されます。

上記改善の結果、PageSpeed Insightsのスコアが、下記のように向上しました。

まあまあ向上しました。
しかし、モバイルに関してはお世辞にも早いとは言えないので、
引き続き改善検討していきたいと思います。