defer.js - ?JS、CSS、画像、iframeを遅延読み込みするための超小型のネイティブパフォーマンスライブラリ...ウェブサイトを簡単に高速化します。

(?A super tiny, native performant library for lazy-loading JS, CSS, images, iframes... Easily speed up your website.)

Created at: 2019-02-14 20:59:35
Language: HTML
License: MIT

@ shinsenter / defer.js

🥇 JS、CSS、画像、iframeを遅延読み込みするための非常に小さなネイティブパフォーマンスライブラリ...ほとんどすべてを延期し、Webサイトを簡単に高速化します。

GitHub GitHubのリリース日

CodeFactor GitHubの問題 GitHubリポジトリのLibraries.io依存関係ステータス 問題を投稿する

npm npmバンドルサイズ jsDelivrヒット(GitHub)

GooglePageSpeedテストで100/100を獲得

目次

延期/非同期スクリプトタグは十分ではありません

実際には、JQueryなどの多くのJavaScriptライブラリを使用してページを拡張し、インタラクティブ機能、アニメーション、その他の効果を追加します。残念ながら、サードパーティのスクリプトは、ページのそれ以降のすべてのリソースのロードをブロックしていました。

Google PageSpeed Insightsの記事によると

最初のページレンダリングに必要のないスクリプトのロードと実行は、最初のレンダリングまたはページの他の重要な部分のロードが完了するまで延期される場合があります。そうすることで、リソースの競合を減らし、パフォーマンスを向上させることができます。

使用する

<script src="https://raw.githubusercontent.com/shinsenter/defer.js/master/.." async defer>
(またはJSから実行する場合は、
script.async = true
割り当てる前に設定する
src
)か、スクリプトをページの一番下に配置して、ページのできるだけ多くが読み込まれ、レンダリングされるようにする必要がある一般的な知識があります。ユーザー、できるだけ早く。

JavaScriptの読み込みを延期する

ページがJavaScriptで拡張された単なるHTMLページである場合は、

<script async>
だけで十分ですブラウザがこれらのスクリプトを解析して実行するのに時間がかかり、UIを変更するたびにレイアウトがリフローし、読み込み速度が遅くなり、空白の白いページを見つめるのが好きな人は誰もいません。ユーザーは焦り、すぐに離れます。

さまざまなケースで、deferまたはdeferscriptよりも速いページ速度を使用

async
または
defer
提供しません

コンテンツの遅延読み込み

他の遅延読み込みライブラリは、遅延読み込みが必要な要素のスクロールイベントに接続します。このアプローチでは、ブラウザがページを再レイアウトする必要があり、非常に遅くなります。

ここに、defer.jsはプレーンJavaScriptで記述されているため、遅延読み込みがより効率的でパフォーマンスが高くなります。このライブラリは、最近追加されたIntersection Observer使用しており、ネイティブのパフォーマンスが大幅に向上しています。

  • ⚡️ ネイティブAPI、非常に高速
  • 👍🏻レガシーブラウザのサポート(IE9 +)
  • 🥇 SEOフレンドリー
  • 非常に使いやすい
  • 💯 依存関係なし、jQueryなし
  • 🤝 お気に入りのフレームワークでうまく機能します
  • 🧩用途API IntersectionObserver最適化されたCPU使用率について
  • 🏞レスポンシブ画像、
    srcset
    および
    sizes
    属性の両方のサポート

ブラウザのサポート

最新のブラウザで利用できます。このライブラリは、Internet Explorer9以降でも完全に機能します。

あなたのページにインストール

CDN介してライブラリをロードし、

<head>
ページの開始タグの直後に含めることができます。

<head>
    <title>My awesome page</title>
    <script src="//cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer_plus.min.js"></script>
    <!-- And other HTML tags from here -->
</head>

💡 ベストプラクティス:縮小バージョンは非常に小さい(1KB未満)ため、そのコンテンツをHTMLドキュメントに直接インライン化して、ネットワーク要求を回避できます。

または、npmを使用してdefer.jsパッケージインストールできます

npm install @shinsenter/defer.js

基本的な使い方

JavaScriptの読み込みを延期する

JavaScriptの実行、特に視覚的な変更を大幅に引き起こすものは、アプリケーションのパフォーマンスを低下させる可能性があります。

サイトでのJavaScriptのほとんどの読み込みと実行を遅らせると、ページのレンダリングプロセスが遅くなる時間が最小限に抑えられます。あなたのサイトはウェブサイトの速度テストでより高いスコアを取得します。

JavaScriptを延期する最も簡単な方法

<script>
サイト上の既存のタグの実行を遅らせる最も簡単な方法
type
は、タグ属性をに変更することです
deferjs
defer_plus.min.jsまたはdefer.min.jsを含むものを除く)。

例:このような2つのスクリプトタグがある場合。

<script type="text/javascript">/* my inline script */</script>
<script type="text/javascript" src="path/to/my/script.js"></script>

次のようにに変更

type="text/javascript"
するだけ
type="deferjs"
です。

<script type="deferjs">/* my inline script */</script>
<script type="deferjs" src="path/to/my/script.js"></script>

注:この方法は、バージョン1.1.5以降でのみ使用できます。

JavaScriptを動的にロードして実行する

ここで行う必要があるのは、すべてのコードを

defer()
関数でラップすることだけです。

<script type="text/javascript">
    // This will defer showing an alert message after 2 seconds
    defer(function() {
        alert("This message is shown after 2 seconds after the 'load' event.");
    }, 2000);

    // Append a HTML content to the <body> tag using jQuery
    defer(function () {
        $('body').html('<p>Your awesome content</p>');
    }, 500);
</script>

または、

deferscript()
関数を使用して外部スクリプトのロードと実行を延期します。

<script type="text/javascript">
    // Alternative way to lazy load Google Tag Manager script
    deferscript('//www.googletagmanager.com/gtag/js?id=UA-34520609-2', 'google-tag', 500, function() {
        // Run extra code right after the script has been loaded
        (window.dataLayer = window.dataLayer || []).push('config', 'UA-34520609-2');
    });
</script>

遅延ロードスタイルシート

遅延JavaScriptに加えて、ドキュメントの大きなCSSファイルを遅延ロードすることは理にかなっています。低速接続では、ユーザーがCSSファイルのロードを最大5〜6秒待つ場合があるためです。

CSSファイルがロードされている間、Webサイトはまだ空白です。ブラウザがCSSファイルの読み込みに時間がかかる場合、ユーザーは戻るボタンを押す可能性があります。あなただけの潜在的な加入者を失いました

幸いなことに、次のように、ユーザーがまだ必要としない可能性のあるCSSファイルを延期することもできます。

<script type="text/javascript">
    // This will lzay-load FontAwesome icons
    deferstyle('//use.fontawesome.com/releases/v5.7.2/css/all.css', 'fontawesome-css', 1000);
</script>

遅延ロードメディア

コンテンツを遅延ロードする

data-
には、実際の属性の代わりにいくつかの属性を使用する必要があります。以下の例を参照してください。

💡ベストプラクティス:IE9などのサポートされていないブラウザーでネイティブのIntersectionObserver APIをポリフィルするには、の直後に以下のスクリプトを含める必要がある場合があります

defer_plus.min.js

<script src="//cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer_plus.min.js"></script>
<script>
    deferscript('//cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/polyfill.min.js', 'polyfill-js', 1);
</script>

怠惰な画像やビデオ

このスクリプトを

<body>
タグ内の任意の場所に配置します

<script>deferimg('img[data-src],picture,video,audio')</script>
基本的なHTMLマークアップ
<img alt="A lazy image" data-src="lazy.jpg">
低品質のプレースホルダーで画像を怠惰にする
<img alt="A lazy image" src="low-resolution.jpg" data-src="lazy.jpg">
srcset属性とsizes属性を使用したレスポンシブ画像の遅延
<img alt="A lazy image"
     data-src="lazy.jpg" data-sizes="100w"
     data-srcset="lazy-360.jpg 360w, lazy-640.jpg 640w">
柔軟なフォーマット選択を備えた怠惰なレスポンシブ画像
<picture>
    <source type="image/webp" data-sizes="100w"
            data-srcset="lazy-360.webp 360w, lazy-640.webp 640w">
    <img alt="A lazy image"
         data-src="lazy.jpg" data-sizes="100w"
         data-srcset="lazy-360.jpg 360w, lazy-640.jpg 640w">
</picture>
網膜またはHi-DPIをサポートする怠惰なレスポンシブ画像
<picture>
    <source media="(min-width: 800px)"
            data-srcset="lazy-800.jpg 1x, lazy-1600.jpg 2x">
    <source media="(min-width: 640px)"
            data-srcset="lazy-640.jpg 1x, lazy-1280.jpg 2x">
    <img alt="A lazy image" data-src="lazy.jpg">
</picture>
怠惰なビデオ
<video class="lazy" controls width="720" data-src="lazy.mp4" poster="lazy.jpg">
    <source type="video/mp4" data-src="lazy.mp4">
    <source type="video/ogg" data-src="lazy.ogg">
    <source type="video/avi" data-src="lazy.avi">
</video>

怠惰なiframe

このスクリプトを

<body>
タグ内の任意の場所に配置します

<script>deferiframe('iframe[data-src],[data-style]')</script>
基本的なHTMLマークアップ
<iframe src="about:blank"
        data-src="lazy-frame.html"
        data-style="background: transparent url(lazy.jpg) 50% 50% / cover no-repeat;"></iframe>
怠惰なYoutubeビデオ
<iframe src="about:blank"
        data-src="https://www.youtube.com/embed/<youtube-video-id>"
        data-style="background: transparent url(https://img.youtube.com/vi/<youtube-video-id>/hqdefault.jpg) 50% 50% / cover no-repeat;"
        frameborder="0" width="560" height="315" allowfullscreen
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
怠惰なFacebookの投稿
<iframe src="about:blank"
        data-src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fappseeds%2Fposts%2F1502937099839267&width=500&show_text=true&height=500"
        width="500" height="500"
        data-style="border:none;overflow:hidden"
        scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

最小バージョン

JavaScriptの遅延読み込みに

defer()
deferscript()
関数のみが必要な場合は、次のように、超超コンパクトバージョン(500バイト未満)を使用できます。

<head>
    <title>My awesome page</title>
    <script src="//cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer.min.js"></script>
</head>

はい。ページ速度のパフォーマンスを向上させるために、スクリプト全体をHTMLドキュメントにインライン化できます。

ヒントとコツ

ビデオ/画像のアスペクト比を維持する

コアコンセプトは、幅に基づいたパーセンテージでのパディングです。

それは奇妙です:

padding-top
そして
padding-bottom
要素の幅に基づいています。したがって
padding-top
、56.25%の場合、16:9の完全な比率になります。(9/16 = 0.5625)。そして
padding-top
100%で、私たちは完璧な正方形を持っています。

そこで、一般的なアスペクト比をサポートするCSSクラスのセットを作成します。

div.aspect {
    margin: 0;
    padding-top: 75%; /* default is 4:3 ratio */
    max-width: 100%;
    height: 0;
    overflow: hidden;
    position: relative;
}

div.aspect.wide {
    padding-top: 56.25%;
}

div.aspect.square {
    padding-top: 100%;
}

padding-top
すべてを押し下げている場合、どのようにコンテンツを内部に配置しますか?

ボックス内のコンテンツをで非表示にし

overflow: hidden
ました。絶対位置を指定するには、内側のラッパーが必要です。以下のCSSで具体的に見てみましょう。

div.aspect > * {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: top;
    z-index: 2;
}

次に

<img>
上記のCSSの概念を
<video>
<iframe>
タグに適用して、独自のアスペクト比を維持しながら流動的な幅にします。

<!-- Here is another image with 4:3 ratio -->
<div class="aspect">
    <img alt="A lazy image" data-src="lazy.jpg">
</div>

<!-- And this will be a video with 16:9 ratio -->
<div class="aspect wide">
    <video class="lazy" controls data-src="lazy.mp4" poster="lazy.jpg">
        <source type="video/mp4" data-src="lazy.mp4">
        <source type="video/ogg" data-src="lazy.ogg">
        <source type="video/avi" data-src="lazy.avi">
    </video>
</div>

<!-- Or even a Youtube video in a iframe -->
<div class="aspect wide">
    <iframe src="about:blank"
        data-src="https://www.youtube.com/embed/<youtube-video-id>"
        frameborder="0" allowfullscreen
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

完全に読み込まれると、ビデオ/画像がフェードインします

画像が完全に読み込まれると、画像に簡単な効果を追加できます。

この例では、

fade
クラス名を持つimageタグとiframeタグにフェードイン効果を追加しますこれは次のように実行できます。

<style type="text/css">
/* hide the element with opacity is set to 0 */
.fade {
    transition: opacity 500ms ease-in-out;
    opacity: 0;
}

/* show it with the 'shown' class */
.fade.shown {
    opacity: 1;
    background: 0 0;
}
</style>


<script type="text/javascript">
    // We define a callback function
    // to add a 'shown' class into the element when it is loaded
    var media_loaded = function (media) {
        media.className += ' shown';
    }

    // Then call the deferimg and deferiframe methods
    deferimg('img.fade', 300, 'lazied', media_loaded);
    deferiframe('iframe.fade', 300, 'lazied', media_loaded);
</script>


<!-- Simple <img> tag with 'fade' class -->
<div class="fade aspect">
    <img alt="A lazy image" data-src="lazy.jpg">
</div>


<!-- I added a placeholder background image in the <div> tag -->
<div class="fade aspect wide"
    data-style="background: transparent url(https://img.youtube.com/vi/<youtube-video-id>/hqdefault.jpg) 50% 50% / cover no-repeat;">
    <iframe src="about:blank"
        data-src="https://www.youtube.com/embed/<youtube-video-id>"
        frameborder="0" allowfullscreen
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

高度な使用法

これは、defer.jsの各メソッドの詳細な使用法を見つけることができるセクションです。

落ち着いて、あなたが望むすべてを延期してください。行こう!

延期

defer(func [, delay ])

これが私たちのヒーローです:

defer
機能。これにより、関数
func
が遅延時間とともにキューにプッシュされます。ブラウザの
load
イベントが発生した場合、関数が実行されます。

引数 タイプ 説明
func 関数 延期される関数。
ディレイ 整数 (オプション)関数の実行を開始するための遅延時間(ミリ秒単位)。デフォルト:80。

deferscript

deferscript(src [, id [, delay [, callback ]]])

この関数は、

src
引数指定されたURLからスクリプトを遅延ロードします。タグIDと遅延時間を設定することができ
id
、および
delay
引数。
callback
ファイルのロード時に関数を呼び出す場合があります

引数 タイプ 説明
src ストリング .jsファイルのURL。
id 文字列または
false
(オプション)
id
<script>タグ属性。
ディレイ 整数 (オプション).jsファイルのダウンロードと実行を開始するまでの遅延時間(ミリ秒単位)。デフォルト:80。
折り返し電話 関数 (オプション).jsファイルがロードされて実行された後のコールバック関数。

deferstyle

deferstyle(src, id [, delay [, callback ]])

この関数は、

src
引数指定されたURLからスタイルシートを遅延ロードします。タグIDと遅延時間を設定することができ
id
、および
delay
引数。
callback
ファイルのロード時に関数を呼び出す場合があります

引数 タイプ 説明
src ストリング .cssファイルのURL。
id 文字列または
false
(オプション)
id
<link>タグ属性。
ディレイ 整数 (オプション).cssファイルのダウンロードと解析を開始するための遅延時間(ミリ秒単位)。デフォルト:80。
折り返し電話 関数 (オプション).cssファイルがロードされて実行された後のコールバック関数。

deferimg

deferimg(query_selector [, delay [, load_class [, callback ]]])
引数 タイプ 説明
query_selector ストリング クエリセルクター。デフォルト:「img.lazy」。
ディレイ 整数 (オプション)画像の遅延読み込みをトリガーする遅延時間(ミリ秒単位)。デフォルト:80。
load_class ストリング (オプション)イメージが実際にスワップされるときのクラス名
src
デフォルト:「遅延」。
折り返し電話 関数 (オプション)画像がロードされたときのコールバック関数。
オプション オブジェクト (オプション)交差オブザーバーオプション

this
中には、
callback
ターゲットへの参照である
<img>
DOM要素。

deferiframe

deferiframe(query_selector [, delay [, load_class [, callback ]]])
引数 タイプ 説明
query_selector ストリング クエリセルクター。デフォルト:「iframe.lazy」。
ディレイ 整数 (オプション)iframeで遅延読み込みをトリガーするための遅延時間(ミリ秒単位)。デフォルト:80。
load_class ストリング (オプション)iframeが実際にスワップされるときのクラス名
src
デフォルト:「遅延」。
折り返し電話 関数 (オプション)iframeがロードされたときのコールバック関数。
オプション オブジェクト (オプション)交差オブザーバーオプション

this
中には、
callback
ターゲットへの参照である
<iframe>
DOM要素。

拡張機能

私はdefer.jsをあなたのウェブサイトに統合するために他の素晴らしい拡張機能を構築しています。

defer.php

defer.phpは、PHP Webサイト用のPHPヘルパークラスです(Laravel、CodeIgniter ...と互換性があります)。

延期-ワードプレス

WordPressは、これまで最も人気のあるCMSプラットフォームの1つです。これはWordPressプラグインです。皆さんが気に入ってくれることを願っています。

デモ

以下のリンクでdefer.jsの使用の完全なデモを見ることができます。

https://appseeds.net/defer.js/demo.html

こちらのGooglePagespeedInsightsのテスト結果をご覧ください

連絡を取り合う

Paypal経由で寄付する

スポンサーになる


MITライセンスの下でリリースされました。 https://appseeds.net/defer.js/LICENSE

Copyright(c)2019 Mai Nhut Tan < shin@shin.company >。

ベトナムから 🇻🇳 愛を込めて。