おはようございます。ひよこです。
最近ページ読み込みスピードの改善をサボっていたので再開します。
前回はJavaScript周りをなんとかし、51→77まで改善しました。
今回は、CSSに取り組みます。
と、その前に、プラグイン追加などしているので、関連するjsをFlying Scriptsに登録。
使用していないCSSの削減
画像を見ていただくとわかりますが、ここが遅い。
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 Adsenseの自動広告が表示されるタイミングとカチあうと、50点台になってしまうようです。
これは、ググってみた感じ、自動をやめて手動で設定するなどの対策があるそうなんですが、Google Adsenseを導入している意味がなくなってしまうので、一旦ある程度のスコア低下は許容することにします。
また書きます。