【サイト高速化】ページ表示速度を向上させる「lazysizes.js」の使い方
2035 ワード
lazysizes.jsとは
アクセス時にブラウザの表示領域外の画像の遅延読み込みをするライブラリです。
特に画像が多いページでは表示速度に大きく差が出るので、使用をおすすめします。
※画像の遅延読み込みとは
ブラウザの表示領域の画像のみを読み込み、領域外の画像は読み込み待ち状態となることです。
lazysizes.jsを使用するメリット
ユーザビリティの向上
ページ表示速度を向上させることでユーザーにストレスなく、Webサイトを閲覧してもらえるので、ユーザビリティの向上に繋がります。
SEO対策
Googleによりページ表示速度を向上させることはSEO上有効とされています。
使用方法
1.ファイルを読み込む
GitHubから「lazysizes.js」または「lazysizes.min.js」をダウンロードしてhtmlのhead内で読み込みます。
※「lazysizes.min.js」はファイルサイズを縮小した圧縮版です。
<head>
<script src="lazysizes.min.js"></script>
</head>
2.data-srcとlazyloadクラスをつける
<img data-src="パス" class="lazyload">
date-srcでパスを読み込み、classにlazyloadを追加します。
これで遅延読み込みができるようになります。
iframeにも対応
<iframe data-src="パス" class="lazyload"></iframe>
iframeも使用方法は同じです。
Author And Source
この問題について(【サイト高速化】ページ表示速度を向上させる「lazysizes.js」の使い方), 我々は、より多くの情報をここで見つけました https://qiita.com/solidstate/items/da98a7eb11af6490d37d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .