HeaderImage

先の記事で、css_bundle_v2.css のインライン化をしました。見事にレンダリングを妨げるリソースっていうのは無くなったのですが、画像の遅延読み込みってのが酷いのでここを対応していきたいと思います。これ、モバイル側だけなんで、将来いらなくなるのかもしれません。ネイティブ Lazy-load っていうので、スクリプトも必要とせず、遅延読み込みされているらしいんですが、モバイル側はまだ取り残されているのかもしれません。それでも、まあ、点数低いってのが気に入らないのでやっておきます。

スクリプトの追加

<head>タグ内にスクリプトを追加します。jQueryは既にあるものとします。 

<script async='async' src='https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js' type='text/javascript'/>

最後の</html>前にスクリプトを追加

<script type='text/javascript'>
  const observer = lozad();
  observer.observe();
</script>
後は、<img>タグで、class=”lozad” を追加。src= を　data-src=　へ変更。
気になったところだけ、たまにやっときますかね。