非AMPページでもamp-imgタグで画像の読み込みを高速化させてみる

どうもふうやです。

今日大学の講義中面白そうな記事を見つけました!!

参考 今の時代、ウェブページは一瞬で表示するべき! 画像の遅延読込に役立つamp-imgの使い方ICS MEDIA

この記事には非AMPページのPCやスマホでもamp-imgを利用して画像の読み込みを高速化出来ますよ(AMPプロジェクトの内AMP JSというライブラリの使用)と書かれていました。

従来のLazy Loadではダミー画像(容量の小さい画像)を先に読み込み、画面上に画像が来るタイミングでcustom属性から元の画像を読み込む手法で用いられていました。

amp-imgの場合はデフォルトで遅延ロードをサポートしていますので、ダミー画像の読み込みも必要ありません。

そのamp-imgを利用することによって高速化を図れるみたいなので5分足らずでサクッとコードを書きました!

WordPressの非AMPページでもamp-imgを利用して画像の高速表示を図ってみる

きっかけ

 

コード

PHP

function img_to_amp_img($the_content){
  $the_content = preg_replace('/<img/i', '<amp-img', $the_content);
  return $the_content;
}
add_filter('the_content','img_to_amp_img', 999999999);

function add_amp_js_header() {
  echo '<script async src="https://cdn.ampproject.org/v0.js"></script>';
}
add_action( 'wp_head', 'add_amp_js_header');

貼り付ける場所はfunctions.phpです。

サイト全体の画像をamp-img化となると少々面倒なため、記事内(固定ページも含まれます)の画像のみamp-img化しています。

AMP JSライブラリの読み込みはヘッダー内で非同期で行っています。

注意とお願い

記事内でスライドショーを利用していたり、特殊な形式で画像を読み込んでいる事象を試していないため、不具合が起こってしまった場合は対応できません。

ページの読み込み速度が速くなったよという報告は頂けると嬉しいです♪

まとめ

ページの読み込み速度を1ミリ秒でも速くしたいというブロガーさんであれば是非是非今回のコードを利用してください!

プラグイン化しようと思ったのですが、12行で解決しちゃいました笑

ありがとうございました!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です