Webサイトの画像の遅延読み込みを解除する方法

とあるページを見ていて、画面スクロール時に画像が直ぐに表示されない、または読み込みが遅いな～、なんて思ったことはありませんか？

もしかすると、そのWebサイトは画像の読み込みをわざと遅らせているのかもしれません。

本記事では、画像遅延読み込みの概要と、その解除方法について簡単に説明します。

なぜ、読み込みを「わざと」遅延させているのか？

ページの表示を少しでも早くするためです。

最初に表示する画面の部分だけを読み込み、見えていない画面下部の方は、スクロールするまで表示しないようにしています。（コンテンツをダウンロードしない）

全て読み込むよりも、断然早く表示されるので、ユーザにとってもストレスがなくなります。

しかし、それはインターネット回線が速い場合に限ります。

回線が混雑していたり、公衆無線LAN等の低速回線に接続している場合は、画面上部で記事を読んでいる間に、見えていない画面下部の情報も読み込んでおくほうが快適に閲覧出来ることが多いです。

どんなに高性能なPC、スマホを使っていても、スクロールしたときに初めてコンテンツを読み込むのでは、回線速度がボトルネックとなって表示されるのに時間がかかってしまいます。

快適さを求めて追加した処理が、逆に不快になっては本末転倒です。

では、どうすれば先読みしておいてくれるのでしょうか？

多少強引な方法ではありますが、その方法を下記で解説していきます。

ブックマークを押して遅延読み込みを解除

ブックマーク（お気に入り）を押す事で、javascriptを実行する方法です。

例として、ブラウザはGoogle Chromeで説明しますが、昨今のブラウザであれば、どれを使っても同じような事ができます。

step
1ブックマークに登録

ブラウザの右上辺りに「☆」マークのボタンがありますので、それを押してブックマークに登録して下さい。

ブックマークの名前は何でも構いません。

どのページでブックマークを追加しても構いません。（次のSTEPでブックマーク遷移先のURLを変更するため。）

フォルダは「ブックマークバー」にするのが、分かりやすくてオススメです。

スマホの場合は上記画像を参考に登録して下さい。

step
2登録したブックマークを編集

先程登録したブックマークを「右クリック」→「編集」→「ブックマークを編集」と進み、「URL」欄に下記のコードをコピペして登録して下さい。

javascript:(function(){ const imgs=document.getElementsByTagName("img");for(const elm of imgs)elm.setAttribute("loading","eager"),elm.hasAttribute("data-src")&&elm.setAttribute("src",elm.getAttribute("data-src"));const iframes=document.getElementsByTagName("iframe");for(const elm of iframes)elm.setAttribute("loading","eager"); })();

[スマホ版]

準備作業自体はこれで完了です。

俗に言う「ブックマークレット」というやつです。

step
3登録したブックマークをクリック

遅延読み込みが発生しているWebサイトに移動して、作成したブックマークをクリックすると、遅延読み込みを解除して、全てのコンテンツの読み込みを開始します。

PCでブックマークバーに設定した場合はワンクリックで起動出来ますが、スマホの場合はスマホ画面右上の[︙]➔[ブックマーク]➔[登録したブックマーク名]と、3ステップ以上の動作が必要となるので結構面倒くさいです。

遅延読み込みを自動的に解除する

ブックマークを押すのも面倒くさい人用に、ブックマークを押さなくても、自動的に遅延読み込みを解除する方法を解説します。

step
1拡張機能をインストール

上記リンクをクリック後、

「Chromeに追加」ボタンをクリック。

確認ダイアログが出ますので、「拡張機能を追加」ボタンをクリック。

step
2Tampermonkey 拡張機能に新規スクリプトを追加

右上の「拡張機能」ボタンから「Tampermonkey」をクリック。

「新規スクリプトを追加」をクリック。

「＜新規 UserScript＞」の編集画面が表示されます。

step
3スクリプトを編集

＜新規 UserScript＞の内容を、全て削除し以下のコードを貼り付けます。

コピー＆貼付け後、6行目の 「// @match」以降のURL部分「www.example.com」を、遅延読み込み解除したいWebサイトのURLに変更します。

// @match        *://www.example.com/*

// @match        *://www.hogehoge.com/*

全サイトで実行したい場合は、以下の様に変更すれば良いです。

ただし、どのサイトでも毎回実行されるので、推奨はできません。

// @match        *://*/*

複数のWebサイトを指定する場合は、下記の通りです。

// @match        *://www.example1.com/*
// @match        *://www.example2.co.jp/*
// @match        *://example.com/*

step
4編集内容を保存

[ファイル]➔[保存]、またはCtrl＋Sで保存すれば作業は完了です。

ちなみにスマホではこの方法は使えません。（スマホのGoogle Chromeには拡張機能が無いため）

ただし、以下のブラウザはスマホでも拡張機能をインストール可能なので、出来るかもしれません。（Tampermonkeyはインストール出来たのですが、スマホだと開発者ツールが使いにくすぎたので動作未確認です。）

このスクリプトは何をしてるのか？

容量の軽いダミー画像を、本来参照すべき重い画像に戻しているだけです。

特に変な事はしていないつもりではありますが、本スクリプトを利用することで生じた、いかなるトラブル、被害、損失、損害、等に対して、一切その責任を負いません。

あらかじめご了承ください。