Google Page Speed Insightsの点数を上げてみる

スマホで撮った画像が100枚を超えるサイトで試してみました。

スタート時点

  • 結果
SP:0
PC:0
  • Load timings (ms)
計測不能

JSにasync defer

http://www.tagindex.com/html5/page/script_method.html

  • async
文書の読み込み中に、そのスクリプトが利用可能になった時点で実行されます。
  • defer
文書の読み込みが完了した時点で、そのスクリプトが実行されます。
  • 結果
SP:18
PC:37

※+18

  • Load timings (ms)
1.51秒
Event When How long Sum
Redirect 0 0 0
DNS 2 0 0
Connect 2 21 21
Request 23 277 298
Response 300 2 300
DOM 303 1149 1449
Interactive 424 0 -
Content loaded 424 0 -
Load event 1453 59 1508

画像の最適化

PageSpeed Insights
採点後にこちらから最適化された画像をダウンロードして、使用する

SP:63
PC:82

※+45点
※画像の大きさ、量により異なります。

CSS,JS,画像にCache-Controlヘッダーを設定する

SP:67
PC:86

※+4点
※Expiresの方がサポートが広いため推奨されているようです

html,js,cssを圧縮する

HTML Minifier
CSS Minifier
JSCompress: Minify Javascript Online / Online JavaScript Compression