ムーバブルタイプ（MovableType）

NativeLazyLoadで画像の遅延読み込みをするようにしました、これでホームページ閲覧の体感速度は向上したでしょうか

2020.07.20
この記事は約3分で読めます。

nativelazyload200.jpgGoogleChromeは昨年から画像の遅延読み込みであるLazy-loadをサポートしています。JavaScriptを使わないので簡単に実装できます。ホームページを閲覧するユーザーにとって快適な速度感が出せるのでかなり有効な対策ですね。
具体的にはimgタグに「loading=”lazy“」を挿入するだけです。ワードプレスにはプラグインがあるようですが、MT7にもやっとプラグインがでました。さっそく試してみました。

Movable Typeのプラグインを設定する

画像のネイティブLazy-loadをサポートするMT7用プラグイン「Native LazyLoad」
https://github.com/ARK-Web/mt-plugin-NativeLazyLoad

上記からプラグインをダウンロードします。
解凍したファイルをMTのプラグインフォルダにFTPソフトでアップロードするだけでOKです。

このタグ内のimgタグについて以下の処理が行われます。

  • imgタグに「loading=”lazy”」が追加される。
  • ただし、すでにloading属性が存在するときは何もしない。

処理は再構築のタイミングで行われ、出力結果に対して属性追加がされます。元の投稿内容には変更を加えません。

この仕様だと、普段どおりに記事を書くだけでよいので便利そうです。

Movable Typeのテンプレートをカスタマイズする

ブロックタグ形式を使用しました。

<mt:NativeLazyLoad>と</mt:NativeLazyLoad>で挟まれたソース内のimgタグには、自動的に「loading=”lazy“」を挿入してくれるとのことです。

なので、エントリーテンプレートとウェブページテンプレートの本文の前後にタグを挿入しました。

▼エントリーテンプレート
lazyloadmt7.jpg

エントリーテンプレートの該当部分

<div class=”entry-content asset-content” itemprop=”articleBody”>
<mt:NativeLazyLoad>
<$mt:EntryBody$>
<$mt:EntryMore$>
</mt:NativeLazyLoad>
</div>

ウェブページテンプレートの該当部分

<div itemprop=”text”>
<mt:NativeLazyLoad>
<$mt:PageBody$>
<$mt:PageMore$>
</mt:NativeLazyLoad>
</div>

これで再構築すると、imgタグにはすべて「loading=”lazy“」が挿入されていました。

<img
↓
<img loading=”lazy“

という置き換えがされているという感じです。

ページ読み込み速度の改善は？

https://developers.google.com/speed/pagespeed/insights/
でテストしてみました。

pagespeed20200720.jpg

６０点まで上がりましたが、まだまだですね。他にもやることがいっぱいありますから。

WordPressの場合は「Lazy Load – Optimize Images」

ちなみに、WordPressではimgタグに「loading=”lazy”」を挿入してくれるだけなら多数のプラグインがあります。

現在は
https://ja.wordpress.org/plugins/rocket-lazy-load/
を使用しています。