Tabla de contenidos
この3つが何なのかはっきりしない人のために、最初に定義しておきます。
Lazy Load（レイジーロード
レイジーローディングは、使用しないかもしれないオブジェクトの不要なプリロードを避けるために、使用する適切なタイミングまでオブジェクトのロードまたはレンダリングを遅らせるために使用されるデザインパターンです。画像に最も多く使用され、読み込み時間の短縮と帯域幅の節約に貢献します。
各画像のレンダリングは必要な時まで遅延され、ビューポートをスクロールしながら読み込まれます。
ビューポート
ビューポートplaceholderは、正確な訳語はないが、「グラフィカルウィンドウ」と呼ばれることが多く、2007年にアップルがiPhone用に作ったもので、ノキアがミニマップ用にデザインしたものと同様の仮想ウィンドウであった。これは、昔も今も、ウェブページがモバイルブラウザにページをどのように表示させたいかを伝えるためのメタタグである。
このメタタグがない場合、iPhoneではウェブページが横980pxのウィンドウで表示され、ユーザーはそれを拡大・縮小しなければなりませんでした。このメタタグを使うと、ページを実際の大きさで表示し、モバイルブラウザで見たときに期待通りのページが表示されるようにレイアウトを調整することができます。やがて、ほとんどのデバイスでサポートされる標準的なメタタグとなり、現在ではレスポンシブデザインと呼ばれるものに使用されているものである。
Litespeedキャッシュ
LiteSpeed Web Serverは、Webサーバーソフトウェアであり LiteSpeed Cachefor WordPress（LSCWP）は、同社のオールインワンサイト高速化プラグインで、WordPressを使用し、このソフトウェアの下で動作するサーバーでホストされているページに対して、独自のサーバーワイドキャッシュと最適化機能集を備えています。
画像の読み込み
理想的には、ページが最初にロードされたときにすでにビューポートにあるもの、つまり、スクロールする前に画面に一目で表示されるものを除いて、すべての画像のロードは延期されるべきです。
これには問題がある。動きがなくなるまで画像が表示されず、表示された最初の2～3枚を除外しなければならないため、最初の読み込み時にページが醜く見えることがあります。
WordPressはバージョン5.5からネイティブな遅延ロードを備えており、以下のような他の多くのプラグインでこれを行うことができます。 パーフマターズビューポートコントロールで、特に表示したい画像とそうでない画像を制限することは、それほど簡単ではありません。例えば、表示したい画像の遅延ロードを行わないように指示することはできますが、表示したい画像を設定したり除外したりすることはできませんから。 甲乙丙丁が、ページごとに特定の画像を設定したり除外したりすることは簡単にはできず、そのためには まとめて.
仮想パス識別子
7月25日、ライトスピードはプラグインの5.0バージョンアップで、VPI（Viewport Images）と呼ぶ、この問題を解決する柔軟なオプションを追加した。
VPIサービスは、URLを調べ、デスクトップ表示の場合は1300×900ピクセルの画面で、モバイル表示の場合は480×800の画面でどの画像が見えるかを判断する。その画像のリストをLiteSpeedプラグインに返すと、LiteSpeedプラグインは次にそのURLをキャッシュするときに、それらの画像を低速読み込みから除外するのです。
その結果、折りたたみページより上にある画像は完全に表示され、折りたたみページより下にある画像は以前と同じように表示されるようになりました。ページスピードのスコアは維持され、訪問者は最初のフルスクリーンのコンテンツに遭遇します。
コンフィギュレーション
この新サービスを利用するには、当然ながらアクティベーションが必要です。 Lazy Load（レイジーロードをプラグインに追加しました。
その構成は非常にシンプルで、起動するだけで、スイッチは2つだけです。
ビューポートイメージ（以下VPI）を有効にし、cronをONに設定すると、cronベースのキューを経由してVPI画像がバックグラウンドで生成されます。
cronを有効にしない場合は、VPIキューを手動で処理する必要があります。これは、キューにURLがあるときに表示される「Manually run VPI queue」ボタンから、またはメインダッシュボードから「Force cron」オプションから行うことができます。
この新しいオプションの面白くて本当に便利な点は、クラシックエディタとGutenbergの両方で、各投稿とページにLiteSpeedオプションの新しいボックスがあり、このオプションを完全に無効にして、ビューポートから画像を削除して好みに合わせて微調整できる点です。
これらのボックスに表示される画像は、遅延ロードされません。
入力がまだ VPI 処理されていない場合、両方のボックスが空欄で表示されますが、手動で画像を追加したり、両方のボックスから画像を削除して VPI の再計算を強制的に実行したりすることができます。
良いものとそうでないもの
間違いなく、ライトスピードのVPIの大きな利点は、遅延ロードを適用したくない特定の画像を気まぐれで素早く簡単に決定し、各ページに手動で設定できることです。
このオプションは、他のWordPress最適化サービスに加えて、以下のサービスを提供します。 QUIC.クラウドCritical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP), Image Optimisation など、限られた無料料金で提供されていますが、必ずしも十分とは言えず、その後はクレジットを購入しなければなりませんが、このような場合は、以下のようになります。 てかがみ.
WordPress CoreやPerfmattersのネイティブLazy Load（数量ごとに固定除外）と結果を比較するためにテストすることにしましたが、今のところ、すでに残っていたわずかなマージンの中で改善が見受けられます。
の色を変えるだけなので、最終的な見た目の結果はPerfmattersで実現したものと全く同じです。 プレースホルダーをグレーから白に変更し、「フェードイン」効果の持続時間をこのCSSで調整します。
/* Fade para Lazy Load de Litespeed - PART 1 - Before Lazy Load */
img[data-lazyloaded]{
opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}
