Takahashi現在のWebサイトにはスピードが求められます。画像の遅延読み込みを有用な要素としています。本稿では、画像の遅延読み込みの技術的な詳細と具体的な実装方法をテーマ開発者の方に向けて紹介します。画像の遅延読み込みとはWebサイトが表示されるまでに、ブラウザは次のような処理を行います。URLにあるサーバーへリクエストを送る。サーバーからHTMLを受け取る。HTMLの文中に必要なリソース(CSS、JavaScript、画像などのアセット)がある場合はそれをダウンロードする。画像などのアセットに関していえば、以下の点が問題になります。スクロールしなければ表示されない領域にある画像がダウンロードの帯域を使用する。したがって、Googleでは画像の遅延読み込みを推奨しているというわけです。Insightsというツールを公開しており、重要視している」ということを理解しています。したがって、何も対応しなかった場合、そのユーザーはあなたのデモサイトを診断して「質が低い」と判断するかもしれません。Insightsのサンプルです。遅延読み込みにはいくつかの種類があります。JavaScriptで画像を置換する処理。具体的には次のような処理になります。/>これは古くからあるやり方で、多くの遅延読み込みライブラリがこの手法を取っています。画像を無意味なものにすると、SEO対策として問題があるという不安から、JavaScriptの実行タイミングなどで工夫をしているライブラリに人気があります。Chromeが先行実装しているloading属性による読み込み方法の指定で、ほとんどの処理をブラウザが行ってくれます。現在はChromeでしか有効になりませんが、Firefoxも対応を表明していますし、Safariも非公式ですが開発者向けプレビュー版で実装しています。ブラウザで広くサポートされるようになるでしょう。WordPressもコアで対応する予定ですので、デファクト・スタンダードになると思われます。Insightsでも判定されます。プラグインによる対応WordPressにはいくつかの高速化用プラグインがあります。テーマの利用者に向けて、これらのプラグインの対応をアピールすると、ユーザーは高速化のための一歩を踏み出せます。Googleが提供するプラグインです。レビュー点数はそれほど高くありませんが、Googleの抱えるWordPress専門チームが開発しているので安心感があります。DEVがリリースしているプラグイン。画像の最適化処理もついています。Smushと同様、画像の最適化も行ってくれるプラグイン。他にも多くありますが、画像の遅延読み込みだけを行うものと、色々と含めて最適化をしてくれるものがあり、後者の方が人気です。テーマでプラグイン対応を謳う場合は必ずテストを行い、問題が起きないかを確認しましょう。場合、テンプレートが出力する画像を一括置換します。次のようなフックを含めます。出力バッファを開始します。imgタグをすべて置換。出力された内容をすべて取得します。すべての画像タグを置換します。loading属性が指定されていたらスキップ。出力バッファをクリア。imgタグを置換したHTMLを出力。);置換処理の部分は次のようにテーマ独自の判定を入れてもいいかもしれません。投稿ページのアイキャッチ画像やロゴ画像はファーストビューに入っているので、置換しない。このフック自体にオプションを用意するのも良いアイデアです。ユーザーはあなたのテーマをなんらかの最適化プラグインと共に使うかもしれません。その機能とバッティングするのを避けるために、テーマカスタマイザーなどに「画像を遅延読み込みして高速化する」という項目を儲けましょう。);}以上でテーマによる画像の遅延読み込みについて紹介しました。ご意見・ご質問などありましたら、サポートフォーラムまでお願いいたします。INCこの投稿は制限されています。INCこの投稿は制限されています。Kunoichiのサポートチームにお問い合わせください。ログインしてサポートを受けるメールマガジンメールマガジンを購読して最新情報を受け取りましょう。検索お好みの言語を選んでください。