【Blogを作る#13】ページ読み込みスピードを改善する(使用していない CSS の削減)

おはようございます。ひよこです。
最近ページ読み込みスピードの改善をサボっていたので再開します。

前回はJavaScript周りをなんとかし、51→77まで改善しました。

今回は、CSSに取り組みます。
と、その前に、プラグイン追加などしているので、関連するjsをFlying Scriptsに登録。

使用していないCSSの削減

Google PageSpeed Insights

画像を見ていただくとわかりますが、ここが遅い。

https://fonts.googleapis.com/css?display=swap&family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900

このWebフォントの読み込みが遅いらしい。

対策

URLに「font-display:swap」を付与すればいいらしいです。
font-display:swapはWebフォントを読み込むまでの間、フォントを適用しないまま文字列を表示する方式らしいです。

とはいえ、WordPressのどこを変更すればいいのやら。
WordPressって変更しても、アップデートで元に戻ったりするから嫌。

プラグインも嫌だけど、便利そうなプラグインがあったのでこれで対処。

Swap Google Fonts Display

以下の通り、Googleフォントにdisplay=swapを入れてくれるだけなプラグイン。

Inject display=swap to Google Fonts

再計測

早速インストールして計測してみると。
91点!!

Google PageSpeed Insights

と思ったら。
変わってない。どっちが正解なの?
「短縮できる時間(推定)」だから、こっちの数値がだいたいな感じなのかな。

Google PageSpeed Insights

まぁ、改善されたっぽいので良しとします。

と、思ったんですが、どうもGoogle Adsenseの自動広告が表示されるタイミングとカチあうと、50点台になってしまうようです。

これは、ググってみた感じ、自動をやめて手動で設定するなどの対策があるそうなんですが、Google Adsenseを導入している意味がなくなってしまうので、一旦ある程度のスコア低下は許容することにします。

また書きます。

ブログ村, 人気ブログランキングに登録しました!応援よろしくお願いします!

ひよこロゴ

ひよこ

こちらからクリックお願いします!
  にほんブログ村 その他生活ブログ 老後資金へ
にほんブログ村

blog
最新情報をチェックしよう!