Photo by
yokoasone
LCP改善方法～preload属性をHeroイメージに設定～
こんにちは、横井Kです。
8月上旬と1か月経ってしまいましたが、 Largest Contentful Paint（LCP）改善方法としてGoogle社員のAddy Osmaniさんが自身のブログで紹介していた方法をお話しします。
Preload属性を設定する
以下のように画像にpreload属性を設定してHeadタグ内で先読みするとの方法です。その後のページのレンダリングで必要な時には、すぐに利用できるようになるため、LCPが早くなるとのこと。
<link rel="preload" as="image" href="hero-image.jpg">Addyさん曰く4G環境においてLCPが1秒早くなるとのこと。かなり効果大きいですね。
本記事の元ネタはこちら
preload属性についてはMDN Web Docsに詳しいです。詳細知りたい方はお読みください。
この記事が気に入ったらサポートをしてみませんか？