画像を遅延読み込みする方法 [HTML/JavaScript]

関連ページ

比較

参考：

LP高速化のために5つの画像の遅延読み込みライブラリを比較した – Qiita

まとめ

参考：

今さら聞けない！画像最適化の鉄板テクニック6つまとめ | PhotoshopVIP

vanilla-lazyload

参考：

verlok/vanilla-lazyload: LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain “vanilla” JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading. – GitHub

yall.js

参考：

malchata/yall.js: A fast, flexible, and small SEO-friendly lazy loader – GitHub

lazysizes.js

参考：

aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration. – GitHub

背景画像も遅延読み込み可能／万能 Lazyloader、lazysizes の使い方 | WEMO

Lazy Load Remastered

旧 jQuery Lazy Load (lazyload.js)

参考：

tuupola/lazyload: Vanilla JavaScript plugin for lazyloading images – GitHub

Lazy Load Remastered | Mika Tuupola

jquery.lazyload.js の使い方まとめ | cly7796.net

Lazy Load (画像の遅延読み込み) を実装する方法 | SYNCER

遅延読み込みで Web ページを高速化！jQuery Lazy Load の使い方 | ALAKI

amp-img

参考：

amp-img | amp.dev [公式]

今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つ amp-img の使い方 | ICS MEDIA

assets-loader

参考：

ianmcgregor/assets-loader: A simple batch assets loader – GitHub

assets-loader – npm

assets-loader Examples | ianmcgregor.me

記事をシェアする：
タグ：

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

Protected by reCAPTCHA
Privacy - Terms