loading=”lazy” 属性について

概要

先日リリースされた、Google Chrome 76において、loading 属性を追加するだけで、画像とiframeの遅延読込を可能にする機能がサポートされました。

あまり詳しくない方にとっては、「遅延読込」とだけを聞くと、ブラウザ動作が遅くなるのでは?と思ってしまうかもしれませんね。

何か?という答えを、簡単に言うとすれば、これまでページを開いた際にページにある画像やiframeの中身を同じタイミングで読み込みしていたのを、loading=”lazy” 属性を付けることで、遅延させてページスクロール後に読み込ませることができるというものです。

「なにがうれしいか」というと、画像の多いページでは全体が表示されるまでに時間がかかっていたページを、まずページ上部の画像を表示させることを優先させて、ページ下部の画像はスクロール後から読み込ませることができます。

読込が遅く、ページがなかなか表示されなかっことにより、ユーザーの途中離脱が行われていたページ等に効果が出てきます。
これは今までも、JavaScriptなどのプログラムで実現できていましたが、画像のHTMLタグに属性として付けられることにより、HTMLをいじれる環境であれば簡単に実現できるようになりました。

考察

商品一覧ページや観光サイトなどで画像が多く表示されるページ等に有効かもしれませんね。

Googleの検索エンジンのロボットには、スクロールという概念がないため直接的なSEO効果はないものの、ユーザーの直帰率の軽減やページを開いてすぐの離脱がすくなくなり、ユーザー本意のページとなることでSEO効果も出てくるでしょう。

ウェブサイトの管理CMSとして使われることの多い、Wordpressにも「Native Lazyload」というGoogle製のプラグインも出ています。

現在は、Google Chromeのみのサポートですが、近くMicrosoft Edge、Safari、Firefoxなどのその他のブラウザでのサポートも進むと思われます。

この際に、たくさん画像があるページやサイトでは「loading=”lazy” 」属性の使用について検討してみてはいかがでしょうか?

使用方法

<img src="image.png" loading="lazy" alt="" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>

下記の値が loading 属性ではサポートされています:

  • auto: デフォルトのブラウザ遅延読込動作で、属性を含めないのと動作は同じ。
  • lazy: Viewportから「計算された距離」に達するまで、リソースの読込を延期する動作。
  • eager: リソースがどこにあるかに関係なく、すぐにリソースを読み込む動作。

パワーポイントイラスト_列車アイコン001

列車アイコン001

概要

パワーポイントの図形で作成したイラスト集
今回は有名な列車のアイコンです。
正直、どこまでデフォルメするのが正解なのかわかりませんし、専門の人に言わせてみたらこういうアイコンはどうなのか?という意見もあるのかなと思っています。

利用について

利用については、利用規約に同意の上ご利用ください。

内容

  • 700系以降の新幹線風アイコン
  • 0系の新幹線風アイコン

ダウンロード

列車アイコン001

列車アイコン001
列車アイコン001

あとがき

0系のは、緑にすれば東北新幹線風にもなります。

パワーポイントイラスト_Software003

コマンドプロンプト風画面

概要

パワーポイントの図形で作成したイラスト集
今回はソフトウェアの画面(一つのアプリの画面)をアップします。
説明などに利用できるかと考えています。
特に画面ダンプを取れば良いかもしれませんが、ディレクトリ等の再現やバージョンの再現などが難しいときにこのパワーポイントを編集すれば説明画面が作成できると思います。

利用について

利用については、利用規約に同意の上ご利用ください。

内容

  • Windows 10 コマンドプロンプト風画面

ダウンロード

Software003

コマンドプロンプト風画面
Software003_コマンドプロンプト風画面

あとがき

PowerShell、Bash(WSLX)等もあると良いかなと準備しています。

パワーポイントイラスト_食器001

食器001

パワーポイントの図形で作成したイラスト集
今回は食器などのイラストです。家庭にあるようなものを意識してみました。
喫茶店やカフェなどの説明資料やPOPなどにどうでしょうか?

利用については、利用規約に同意の上ご利用ください。

内容

  • カップ
  • ナイフ
  • フォーク
  • スプーン
  • 皿(木目調)

ダウンロード

食器001

食器001
食器001

その他の食器も今後作る予定です

パワーポイントイラスト_shop機器001

shop機器001(レジ・クレジットカード読み取り機)

パワーポイントの図形で作成したイラスト集
今回は、レジとクレジットカード読み取り機をアップします。
昨今の軽減税率の説明資料などに利用できると思います。

利用については、利用規約に同意の上ご利用ください。

内容

  • レジ(レジスター)
  • クレジットカード読み取り機(クレジットカード決済機器)

ダウンロード

shop機器001

shop機器001(レジ・クレジットカード読み取り機)
shop機器001(レジ・クレジットカード読み取り機)

バーコードリーダー等も作成予定ですが、10月の税率アップまで間に合わないかもしれません。

パワーポイントイラスト_Software002

MacOS_Mojave風イラストSoftware002

パワーポイントの図形で作成したイラスト集
前回に引き続き、ソフトウェアの画面をアップします。
画面での説明などに利用できるかと考えています。

利用については、利用規約に同意の上ご利用ください。

内容

  • MacOS Mojave(10.14)風のデスクトップ画面

ダウンロード

Software002

MacOS_Mojave風イラストSoftware002
MacOS_Mojave風イラストSoftware002

アイコンもそれっぽく作ってありますが、100%同じではありません。

パワーポイントイラスト_Software001

Windows10風画面

パワーポイントの図形で作成したイラスト集
今回はソフトウェアの画面をアップします。
画面での説明などに利用できるかと考えています。

利用については、利用規約に同意の上ご利用ください。

内容

  • Windows 10 風のデスクトップ画面

ダウンロード

Software001

Windows10風画面
Software001_Windows10風画面

Windows7風のものや、他のOSも作成したいと思っています。