IntersectionObserveの遅延読み込みライブラリのLozad.jsを紹介する - Qiita
この記事は 「DeNA IPプラットフォーム事業部 Advent Calendar 2017」 13日目の記事です。 こんにちは。 @yukagil です。 マンガボックスという、スマホ向け電子書籍サービスのサーバーサイド/フロントエンドの担当をしています。 前回は「Perlの行列演算モジュールを用いた推薦システムの実装」の紹介をしたのですが、 今回は「要素の画面内判定をどのようにして行うか」という話を中心に、個人的にもっと知られてほしいと思っているLozad.jsの紹介をします。 はじめに Webサイトの実装(特にスマホ)をする際に、「ある要素が画面内にあるかどうか」の判定が必要になる場面って結構あるかと思います。 ユースケースとしては、 LoadMore(無限スクロール) LazyLoad(遅延読み込み) Log(全体の何％読まれたか等) 画面内に入ったタイミングでアニメーションを実行
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
How to 速度改善 ーWebパフォーマンスについて知っておきたいこと7選ー - Qiita
今回のテーマ Webパフォーマンスを改善する上で知っておきたい知識をまとめてみました。 前回の記事では使わなかった（使えなかった）技術や方法なども含めて記載します。 また、ブラウザのレンダリングなどについても書きたいと思います。 (2019年5月23日追記) 過去の記事はこちら How to 速度改善 ー計測・知識編ー How to 速度改善 ー原因調査編ー How to 速度改善 ー実装&技術調査編1ー 1. ブラウザレンダリングの仕組み 推測するな、計測せよ という言葉にあるように、闇雲にチューニングを初めても良い結果は出ません。まずはブラウザレンダリングの仕組みからみていきましょう。 ブラウザレンダリングの流れ レンダリングの大まかな流れは Loading→Scripting→Rendering→Painting（これでページが表示される） となっています。 この処理の内容をフレーム
noscript内のコンテンツをGoogleは無視するが画像は例外的にインデックスする
[レベル: 中級] <noscript> タグ内のコンテンツを Google はインデックスしません。 しかし画像は例外です。 <noscript> の中であっても <img> タグの要素はインデックス対象になります。 スパム対策のため <noscript> は無視される <noscript> タグは、スパムに利用されてきた経緯があります。 （JavaScript を実行する）ブラウザでは画面に表示されないものの、HTML コード内には存在するため検索エンジンには認識されます。 隠しテキストや隠しリンクとしての悪用が可能でした。 そのため、かなり以前から <noscript> 内のコンテンツを Google は無視するようになっています。 Lazyload 画像対応の noscript は例外 Lazyload で遅延読込みさせる画像をインデックスさせるために、Google は次の2つの方
puppeteerを使ってlazyloadがSEOフレンドリーかどうか確認する - Qiita
Google、SEOに適したLazyloadの仕様を公開 | 海外SEO情報ブログ に 検索エンジンフレンドリーな Lazyload が実装できているかどうかをテストします。 検証方法の1つとして、ヘッドレスブラウザの Puppeteer を利用したスクリプトを Google は準備しています。 とあったのでさっそく試してみました scriptのダウンロード ❯ cd puppeteer-examples ❯ yarn add puppeteer yarn add v1.10.1 [1/5] 🔍 Validating package.json... [2/5] 🔍 Resolving packages... [3/5] 🚚 Fetching packages... [4/5] 🔗 Linking dependencies... [5/5] 📃 Building fresh pac
Lazy Load画像をSEO対応させる2つの方法――noscriptと構造化データ #io18 #io18jp
[レベル: 上級] Lazy Load で読み込ませる画像を SEO に対応させる、言い換えれば、検索エンジンにインデックスさせるための方法として、次の2つを Google の John Mueller（ジョン・ミューラー）氏は Google I/O 2018 のセッションで推奨しました。 <noscript> タグ 構造化データ Lazy Load 画像は SEO に不向き Lazy Load で読み込ませる画像が SEO に不向きな理由は以前にも説明したことがありますが、もう一度簡単におさらいしておきます。 そんなの知ってるよという方はここは読み飛ばして構いません。 Lazy Load（レイジー ロード）とは、遅延読み込みのことです。 画像の表示によく使われます。 ページを表示した段階では画像を読み込ません。 スクロールして、ユーザーの見えるエリアに画像（が表示されるべき場所）が入った
WordPress でスクロールにより画像を遅延読み込みするプラグイン Lazy Load
画像ファイルは容量が大きいため、Web ページのデータ転送量に直接影響を与えます。もし、画面のスクロールに応じて、表示に必要な画像だけを後追いで読み込めば、次のようなメリットがあります。 サイト転送量の80%は画像ファイル僕のサイトの場合、Web サイト内の転送データの 8割強が png や jpg の画像ファイルです。通常はページの閲覧途中で離脱しても、ページ内の画像は全てダウンロードされ、ブラウザにキャッシュされます。 全ての人が表示したページを最後までスクロールするわけではないため、かなり無駄なデータ転送が発生している現実があります。サーバーによっては一日あたりの転送上限が決められているので、可能ならば無駄な転送は抑えたいのが正直なところではないでしょうか。 転送量が減ればサーバーへの負荷が減るメリットがある一方で、サイト閲覧者も無駄なデータ取得がなくなるため、トータルでサイト表示の
これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス
高解像度画像を後読みするjQueryライブラリ [lazy-out.js] • Teletakt
lazy-out.js というスクリプトを作りました。 スクロールによる”Lazy Load”を簡単に実装できます。 “Lazy Load”というのはあらかじめ低解像度画像(Lazy-image)を読み込んで置いて、スクロールで可視範囲に入った時などに高解像度画像に置き換えるというものです。 サイズを縮小した低解像度画像を読み込んで都度置き換えていくので、ページ自体のリソースを少なくすることができます。 ちなみに僕みたいな素人が書きました。JS歴は10年ぐらいなんですが、自分で一回もまともに書いたことありません。 仕組みとして、jQueryで<img> の srcをイベントによって書き換えています。 GitHubにおいてありますので、どうにでもこうにでもしてください。 kurogedelic / lazy-out.js DEMOも置いてあります。 DEMO 使い方 まず<body>タグの終
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
imagesLoadedを使って画像の読み込みタイミングを管理する | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ:D＜わあい 今回はですね、画像の読みこみの管理ができるimagesLoadedをご紹介します:D 導入方法 npmからはこちらからインストール npm install imagesloaded Bowerからはこちらからインストール bower install imagesloaded –save ファイルからのDLはこちらからも可能です。 基本的な使用方法 jQueryからも、Vanilla.jsからも使用することができます。 jQueryからの使用方法 $('#container').imagesLoaded( function() { // 画像が読みこみ終わった時の処理 }); Vanilla.jsからの使用方法 imagesLoaded( document.querySelector('#container'), function( instance
LP高速化のために5つの画像の遅延読み込みライブラリを比較した - Qiita
ベーシックアドベントカレンダー22日目です。 8日ぶり3回目の@tkhrです。 画像の遅延読み込みライブラリ比較の話です。 LPの高速化のために遅延読み込みを導入します。 対象になるLPは広告からの流入で表示するページになります。 なのでユーザの熱を冷まさせない工夫が必要ですね。 そのための工夫の一つとして今回は画像の遅延読み込みに対応します。 画像ならキャッシュがあるじゃん。と言えるかもしれませんが、広告LPなので初めてのユーザが大半なのでアテにできませんね。 なので遅延読み込みによってファーストビューが表示されるまでの時間を短縮することが狙いとなります。 遅延読み込みとは ページにアクセスした時には画像の読み込みはせず、必要になった時に画像を読み込みます。 必要になった時というのは、その画像が表示される時ですね。 それによってページにアクセスした時の読み込み時間を短縮できるので、ユーザ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ApoorvSaxena/lozad.js: 🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more
GitHub - fhopeman/justlazy: lightweight javascript plugin for image lazy loading
lazySizesでレスポンシブイメージの遅延読み込み(lazy load)をWordPressに組み込む