アークウェブのブログ

開発のきっかけ

画像がページ内にたくさん配置されている場合、ページの読み込みに時間がかかってユーザの印象を悪くしたり、最悪離脱してしまう恐れがあります。 有効な対策の1つに、Lazy-load（遅延読み込み）といって画像の読み込みタイミングを調整することで体感的な表示速度を改善する手法があります。

実装方法は複数ありますが、最近の注目はネイティブ Lazy-load です。imgタグに loading="lazy" 性を追加するだけの手軽さで実現でき、JavaScriptを必要としません。

現時点(2020年6月）では 主要ブラウザのサポート状況が出そろったわけではありません が、Web標準化されており、最近 Googleの推奨方法に正式に追加 され、WordPressでも公式プラグイン化されるなど、デファクトスタンダード目前です。

Google、遅延読み込みの推奨方法にネイティブLazy-loadを追加 | 海外SEO情報ブログ
https://www.suzukikenichi.com/blog/google-added-native-lazy-loading-to-lists-of-recommended-lazy-loading/

アークウェブでは、海外SEO情報ブログ 鈴木謙一さんの上記記事に刺激をうけて、
「じゃぁ、MovableType版プラグインも欲しいよね」と、プラグイン開発することになった次第です。

MT NativeLazyLoadでできること

img タグにloading 属性(loading="lazy")を自動追加するというシンプルな機能のプラグインです。

• 再構築のタイミングで、img タグにloading 属性(loading="lazy")を自動追加します。
• コンテンツ投稿者が、loading属性を明示的に記述している場合は、そちらが優先され、二重に追加されることはありません。
• ブロックタグないしはグローバルモディファイアにより、処理対象をきめ細かく指定できます。
• スタティックパブリッシングに対応。
  ダイナミックパブリッシングは未対応ですが、ご要望が多ければ将来対応します。
• MT7以降に対応しています。

使い方

GitHubのREADMEをご参照ください。

• 使い方: ブロックタグ mt:NativeLazyLoad

• 使い方: グローバルモディファイアnative_lazyload="1"

ダウンロード、インストール方法

• ダウンロード https://github.com/ARK-Web/mt-plugin-NativeLazyLoad
• インストール方法:
  zipを解凍して MTNativeLazyLoad フォルダーごと、MT設置ディレクトリー /plugins にアップロードします。

是非ご活用いただきフィードバックをお寄せください

プラグインは無償です。
是非ご活用いただき、よかったらフィードバックをお寄せください。

よろしくお願いいたします。