最近、WEBの速度改善することが多いので、
忘備録として。
IntersectionObserver
速度改善の定番の手法として、
「画像の遅延読み込み」がある
いろんな遅延読み込みのライブラリが世の中にはあるが、
IntersectionObserver APIを用いた方法が、Google推奨しているため
なるべくそれを使いたい。
Googleの見解：
https://developers.google.com/search/docs/guides/lazy-loading
<img class="lazyload" src="dummy.png" data-src="hoge.png">
上記の書き方で、画面外時にはdummyを表示し、
画面内になったら、hoge.pngをロードし、表示する、ということが可能。
APIを使う側の記述は省略。
iframeの遅延読み込み
上のIntersectionObserverを叩く側をちょっと改良すれば
imgタグだけでなく、iframeタグでも遅延読み込みを利用できる。
PageSpeed Insightsのスコアを見る限り、
画像の3倍くらい効いてくる。
iframeはyoutube埋め込みとかで、
メチャンコ重たくなっているケースが多い。
画像とiframeの遅延読み込みを整備するだけで
スコアがグンとあがることがあるのでオススメ。
TinyPngしてみる
画像がバカでかい時があるので。
半分くらいのサイズになることが多いです。
画像の鮮明さと速度のトレードオフで悩むことはあるけど
あんまり考えないで、ツールに解を出してもらうほうが効率的だと思います。
jQuery
jQuery関連は読込の順番変えると動かなくなったり
そもそも最初に読むライブラリが重かったりで、
速度上、不利。あんまり使わない方がいい、、、
けど、使わざるを得ない状況も多いので。
acync で気持ちマシになるかも
CSS
重要じゃないCSSは遅延させたほうがいいらしい。
Insightでも毎回指摘されるポイント。
けど、CSSはどれも重要、という状況も多く、あんまり解決にならない。
WordPress
遅延読み込み系のプラグインは多数ある。
ありすぎて、どれがイイかわかんなくなる。
JetPackでも遅延読み込み化することができるみたいだけど、
ぼくは a3 Lazy Load を使ってみている。
画像もiframeも遅延読み込みできるし
そこそこスコア改善できたので。
もっといいプラグインがあるかもしれないし、
結局は、WP（とjQuery）が重すぎて
ハイスコアは狙えない、となってしまうことも。
最適解見つけられてないです。
追記：
CSSの遅延読込みを実現する最もシンプルな方法
レンダリングをブロックしてしまう要因として
CSSは結構デカい。
単にこれを導入するだけでモバイルスコアが10くらいあがることも。
印刷用のCSSと指定して、ロードが完了したら、
スクリーンにも適用する、的な処理をonloadで用意している。
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
※2/27追記
CSSが先にロードされていること前提で書かれているjsコードがあれば
CSS遅延させると不具合が発生したりしなかったりする。危険。
一括でCSSを遅延読み込みさせる場合は十分な動作確認しないと痛い目みます。
jsの遅延読み込みdefer
同じくレンダリングを大きくブロックしてしまう要因としての、js
Javascript、とくにjQuery関連は
ロードの順番が大事なことがあるので
入念な動作検証が必要。
deferとasyncがあるが、実行順番を考慮すると
全部一括でdeferにするのが良いと思われる。
deferもasyncもつけていないと、
結構なレンダリングブロック時間が生じてしまうので、結構重要
そもそも、モバイルスコアは評価が厳しすぎる？
以下のサイトらによると、、、
https://webtan.impress.co.jp/e/2018/12/21/31382
ただし残念ながら現状のPageSpeed Insightsによるモバイルのパフォーマンス測定は、日本のサイトに関しては信頼できる数値になっていない。計測が米国から行われているからだ。
https://boundworks.net/pagespeed-insights/
2018年11月に入ってからスコアの判定方法が変更になり、3G回線時の通信速度をベースとした、より厳格な基準となっています。
これが本当だとすると、
「アメリカから、3G回線」での評価になるので、
これをこのまま「日本国内から国内に4GやWi-Fiでアクセス」する
現代のモバイル事情に当てはめると、
若干厳しすぎるのかもしれません。
少なくとも、一概に「Pagespeed insights スコア90以上を目指せー！」
とは言えないかと思います。