話題の人物YouTubeまとめ&雑記雑感雑多ログ

画像遅延スクリプト「echo.js」でページ表示の体感速度を上げる。

アクセスして3秒以上表示されないサイトは離脱率が高いとして、ページの表示速度は、SEO対策のひとつとして重要な要件となっています。

ページ表示速度を手っとり早く上げるには、画像の表示を最適化するもそのひとつ。

いわゆる画像を遅延して表示させるスクリプトとして、高機能な「lazyload」が有名ですが「jQuery」に依存することから、他のスクリプトと干渉することがあったり、そもそもライブラリ自身が重かったりしてページ表示速度を上げるためのものが逆に足かせになるなど本末転倒。

探してみると、結構たくさんの画像遅延スクリプトが見つかりますが、そんな中で「echo.js」が最も軽快に動作するようです。

jQueryに依存することなく単体で動作しますし、スクリプト自身も2KB以下(echo.min.js)と、超軽量です。

設置方法

まずは、GitHubからスクリプトをダウンロードします。

echo.jsをダウンロード

解凍すると、たくさんのフォルダやファイルが同梱されていますが、使用するのは【disc/echo.js】か【disc/echo.min.js】のみです。

<head>~</head>内、または、</body>直前に以下を記述します。

<script src="保存ディレクトリ/echo.min.js">
<script>
echo.init({
offset:200,//何ピクセルまで画像に近づいた時点で読み込みを開始
throttle:1000,//スクロールを止めて1秒(1,000ミリ秒)後に読み込み開始
//debounce:false,//throttleを無効にする場合先頭の//削除
});
</script>

.init()(options) でエフェクト等の表示オプションが設定できます。

画像タグに適用させる場合。

<img data-echo="imgファイル" src="dummy.png">

背景画像に適用させる場合。

<span data-echo-background="imgファイル"></span>

関連記事

HTMLの静的ファイルにパラメータ(引数)を受け渡す最短スクリプトコード 2018.05.01 jqueryで親要素の幅を取得(padding含めずに) 2018.05.01 画像ファイルが見つからない場合に代替画像を表示 2018.05.01 テキストエリアのカーソル位置にボタンクリックで指定文字を挿入 2018.05.01 複数のアイテムをランダム表示(重複なし)する方法 2018.05.01

雑記雑感雑多ログ

タイ・シルバーの新芽2本目を確認 2018.05.12 画像遅延スクリプト「echo.js」でページ表示の体感速度を上げる。 2018.05.11 格闘技イベント「RIZIN」での衝撃KOシーン!堀口恭司vsイアン・マッコール 2018.05.09 広告収入で賄う無料タクシー「nommoc/ノモック」とは!? 2018.05.08 これって…そのためのTシャツ!?ポケットティッシュをスマートに出せるアイデアTシャツ 2018.05.07 ゴールデンウィーク明けの仮想通貨動向 2018.05.07 プロレスの登場シーンをかっこ良く決めるつもりが、張り切り過ぎてしまった結果・・・ズッコケ名シーン。 2018.05.05 新サイト「CCindex/仮想通貨・暗号通貨まとめ」リリース! 2018.05.04 指定ディレクトリ(フォルダ)内の画像ファイルを抽出してランダム(重複なし)に表示させる最短コード 2018.05.01 最低覚えておきたいチャートの見方 2018.05.01