Pagespeed insights高速化まとめ

21.05.25

ウェブデザイン備忘録

1 Pagespeed insights高速化に必要なプラグイン
2 Lazy Load
3 a3 Lazy Load
4 EWWW Image Optimizer
5 autoptimize
6 WebP Express
7 Pagespeed insightsにでる改善できる項目とその対応
8 レンダリングを妨げるリソースの除外
9 Largest Contentful Paint の画像のプリロード
10 オフスクリーン画像の遅延読み込み
11 次世代フォーマットでの画像の配信

Pagespeed insights高速化に必要なプラグイン

Pagespeed insightsでサイトを高速化するのに必要な主なプラグインは以下です。

Lazy Load
a3 Lazy Load
EWWW Image Optimizer
autoptimize
WebP Express

Lazy Load

画像やiframeなどを遅延表示してサイトを軽くするプラグインです。
有効化したら、設定で「image」「Iframes & Videos」にチェックを入れて保存します。

a3 Lazy Load

こちらもLazyLoadと同じ遅延表示プラグインですが、youtubeなどのiframeの効きがよさそうなので、普通のLazyLoadで効果が表れにくい場合は試してもいかもしれません。
設定で「Lazy Load Videos and iframes 」でONにします。もし画像を遅延表示させない場合は「Lazy Load Images 」をOFFにしましょう。

EWWW Image Optimizer

画像の最適化をするプラグインです。画像サイズの最適化を行いサイトを軽くします。メディアに入れた画像だけでなく、FFFTPで入れた画像も最適化できるため、トップページをカスタマイズされているデザイナーにも重宝します。次世代の画像形式webPに自動で変換してくれます。
設定→基本タグ→webPに変換の「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェックを入れます。そして同項目にある「一括最適化」をクリックして画像の最適化をします。
再度、設定→基本タブの、WebP の配信方法にある「リライト～」をクリックして右下の赤い「PNG」が緑の「WEBP」に変化するようにします。
基本タブの下あたりにある「Enable Ludicrous Mode 」をクリックするとタブが増えるので、必要に応じて応用することもできます。

autoptimize

html css jsデータの空白を消して1行に連結したり読み込む位置を変えたりすることで、データを読み込む速度をあげるプラグインです。
Js css&Htmlタグで各js css htmlにチェックを入れることで最適化をします。cssを連結するとディベロッパーツールも1行で表示されてデザインするときに不便なので私はcssだけチェックを外しています。
その他オプションの「404 フォールバックの使用」だけチェック外すと良いようです。
画像タグでは「画像の遅延読み込み (Lazy-load) を利用」にチェックを入れるとここでも画像の遅延表示をしてくれます。
追加タグ「Google フォント」でGoogle フォントを使わない場合は削除しましょう。

WebP Express

画像を自動的に次世代の画像形式webPに自動で変換してくれます。
プラグインを有効化したらsettingをクリックします。薄緑背景のWelcome!という画面に出る青いボタン「Save settigs」をクリックして完了です。

Pagespeed insightsにでる改善できる項目とその対応

ワードプレスであればプラグインを発動させることでPagespeed insightsにでる改善できる項目はほとんどが改善していきます。これからPagespeed insightsにでる改善できる項目ごとの対応をしていきましょう。

レンダリングを妨げるリソースの除外

「レンダリングを妨げるリソースの除外」とはウェブブラウザは、コードの先頭から確認し、上から下へと読み進めます。その際に、CSSやJavaScriptファイルに遭遇すると、それのダウンロードと処理のために、一旦「読み進める」行為が「一時停止」してしまいます。それをスムーズに読み進めるために空白を消したり、CSSやJSの読み込む位置を読みやすい位置に変えたりしてください！といわれているのです。
これはautoptimizeを入れることで改善します。