WordPressのテーマ【JIN】の特徴として、画像で見せるが故にサイト表示速度が遅くなるという欠点があります。
私の場合、画像は全て外部URLで入れているのですが、画像読み込みを遅延させる事で、更にサイト表示を速くしようという試みです。
※このサイトは極力画像使わない方針です(^_^;)
画像読み込み遅延を導入するにあたって
まず知っておかなければならないのは、画像読み込み遅延はGoogleに認識されづらいという事です。
画像検索で検索に引っかからない欠点があるのですが、当サイトは元々外部URLを使っているため画像検索は捨てています。
画像検索を捨てるとSEO的に不利と言われていますが、今はサイト表示速度の方が圧倒的に検索順位に関わっていることを考えると、サイト表示速度と画像検索のどちらを取るか？という事になります。
画像読み込み遅延を導入する際は、上記を考えましょう。
画像読み込み遅延ライブラリーに求めるもの
まず画像読み込み遅延ライブラリーを選ぶにあたって考慮した事があります。
jQueryに依存しない
WordPressの新エディターGutenbergがReactを採用した事で、今後WordPress本体も徐々にjQueryからReactに移行していくと睨んでいます。
そこで、万が一移行した時に面倒臭くならないようにjQueryに依存しないライブラリーを使う事にしました。
シンプルで軽量なライブラリー
画像読み込み遅延のライブラリーのjavascript自身が重いと、サイト表示速度に関わってくるのでライブラリー自身が軽量化である事が重要です。
画像読み込み遅延のライブラリーを探すと、色々な便利な機能がありますが、余計な機能があるとそれだけファイルが重くなるので、本来サイト表示速度を速くするのが目的なのにそれ自身が重くなっては本末転倒です。
機能は出来るだけシンプルで、目的を達成させられればOKです。
導入した画像読み込み遅延ライブラリー、echo.js
画像読み込み遅延ライブラリーを探した結果、ehco.jsを導入しました。
ファイルも2KBと軽く、jQueryに依存せずに単体で動作します。
詳しい情報はjQuery不要の軽量レイジーロード！echo.jsの使い方に掲載されています。
オプション設定の説明など詳細に書かれているので、導入する際は一度目を通してください。
JINテーマにecho.jsを導入する
私の場合、JINテーマの画像部分をカスタマイズして1箇所に纏めました。
後はランキング画像や細々とした前の記事や次の記事の画像部分などをカスタマイズすれば良かったです。
デフォルトでJINテーマを使っている方は、ファイルが複数に及ぶので厄介かもしれません?
まずehco.jsからファイルをダウンロードして、dist→echo.min.jsをテーマファイルのjsフォルダ内に入れます。
fanctions.phpに下記のソースを記載します。
wp_enqueue_script('echo', get_stylesheet_directory_uri() . '/js/echo.min.js',array(),false,false);
src=""の部分にプリロード画像のURLを記載し、imgタグ内に新たにdata-echo="表示したい画像URL"を記載します。
<img src="プリロード画像URL" data-echo="<?php get_jin_noimage_url(); ?>">大体下記のソースを目安に探してみてください。
bloginfo('template_url'); ?>/img/noimg
get_jin_noimage_url();次にその下に下記のソースを追加します。
function echojs() {
echo '<script>echo.init({offset:100,throttle:250,});</script>';
}
add_action( 'wp_footer', 'echojs', 100 );これで終わりです。
最後に…画像周りを1つに纏めてしまったほうが管理がラクです。
