ステッカーがページ表示速度に与える影響と、フォーマットごとの最適化について
- ステッカーは装飾品のように見えるかもしれませんが、ページが処理すべきものです。
- なぜ、多くのステッカーが使用された投稿において、モバイル環境での表示速度が遅くなるのか。
- 最も安全なデフォルト設定は、小さいサイズのWebPとAVIF形式です。
- ステッカーのデザインによって、形式を選択することができます。
- もしキャラクターが動かない場合。
- 動きが必要な場合は。
- 形式を変えるだけで解決すると誤解されることがある。
- 私のステッカーには、何を選ぼうか。
- DecoBlocksを使って、ステッカーと読み順を整理する。
- よくある質問
- Q. WebPとAVIFのどちらか一方だけを選ぶとした場合、どちらが良いでしょうか？
- Q. ステッカーの問題をツールを使って簡単に解決できますか？ どのようなツールを使用すればよいですか？
- Q. 自分のウェブサイトでは、最初に何を確認する必要がありますか？
- 質問：ステッカーが貼られている長い文章の範囲は、どのように区切るのですか？
- WordPress関連のプラグイン
携帯電話で文章を開くと、キャラクターが一つずつ遅れて表示される。文章はすでに表示されているのに、ステッカーが空白の四角形で残っていると、ページ全体が不快に感じられる。
WordPressでは、絵文字やキャラクターステッカーは雰囲気を変えるが、ブラウザが処理しなければならない文字・画像・スクリプトでもある。同じステッカーでも、どの形式で挿入するかによって待ち時間が変わる。
ステッカーは装飾品のように見えるかもしれませんが、ページが処理すべきものです。
一般的な絵文字は、文字のように見える。しかし、WordPressの標準絵文字機能は、絵文字用のスタイルを追加し、ブラウザが正しく表示できるかどうかを確認するローダーを使用する。
キャラクターステッカーを画像として挿入すると、ファイルのダウンロード機能も追加されます。PNG、WebP、AVIF、GIFはそれぞれファイルサイズが異なり、外部サーバーの画像は、サイト外へのリクエストを送信します。
結局、ステッカーの速度の問題は、可愛さの問題ではない。
これは、ブラウザが何を、どれくらいの量で、どこから取得するかという問題である。
なぜ、多くのステッカーが使用された投稿において、モバイル環境での表示速度が遅くなるのか。
スマートフォンで、複数のステッカーを挿入したテキストを開くと、本文よりも画像が表示されるまでに時間がかかる場合があります。速度測定ツールでは、画像のリクエストや絵文字に関連するスクリプトが問題として検出されることもあります。
WordPressのTracには、最新のブラウザでは不要な絵文字スクリプトが読み込まれることで、各ページに約4.7KBのJavaScriptが追加されるという問題が記録されています。この問題は、WordPress 6.2でブラウザの機能を確認する方式が修正されたことによって発生していると記録されています。
絵文字の検出スクリプトやスタイル、および外部の絵文字処理を無効にするプラグインが個別に提供されているのは、このような不便を経験するユーザーが多いためである。
ただし、いくつかの絵文字を使用しているからといって、すぐにその機能を廃止しなければならないという意味ではありません。
最も安全なデフォルト設定は、小さいサイズのWebPとAVIF形式です。
一言で答えると、こうなります。
すべてのステッカーをなくすよりも、静的な小さなステッカーをWebPやAVIFで提供し、アニメーションGIFや外部サーバー依存型のステッカーは本当に必要な場合にのみ使うほうが安全である。
Chrome Lighthouseのドキュメントでは、同じ品質であれば、WebPとAVIFはJPEGやPNGよりも小さなファイルサイズになる可能性があると説明されています。WordPress 6.5の開発者向けドキュメントでも、AVIFは同じ画質であれば、JPEGよりも最大で50%小さくなる可能性があると案内されています。
しかし、ファイル形式を変更するだけでは終わらない。
WordPressのレスポンシブ画像機能、遅延読み込み機能、優先順位設定機能を使用し、適切な表示サイズを選択することで、実際のデータ転送量も削減される.
ステッカーのデザインによって、形式を選択することができます。
もしキャラクターが動かない場合。
本文中に挿入される小さな静止画像は、WebPをデフォルトで使用しやすい。透明な背景が必要な場合でも、WebPは透明度をサポートしており、また、可逆圧縮と非可逆圧縮の両方に対応している。
サーバーと訪問者のブラウザ環境を確認できる場合、AVIFを最初に送信することも可能です。その場合、WebPやPNGのような代替形式も同時に提供する必要があります。
小さくてシンプルなステッカーであれば、選択は容易です。
動きが必要な場合は。
動かない装飾用のGIF画像は、静的なWebPやAVIF形式に変換する方が適しています。どうしても動きが必要な場合は、フレーム数と表示サイズを小さくし、最初に表示される画面以外に配置して遅延読み込みにする方法を検討すべきです。
WordPressブロックエディターのドキュメントによると、アニメーションGIFとWebPは、すべてのフレームを保持したままファイルサイズを小さくする場合、静止画像よりもエンコードに時間がかかり、ファイルサイズが大きくなる可能性がある。長いアニメーションの場合、サイズを小さくしても、元のファイルに近いサイズになることがある。
もし動きが必須ではないのであれば、停止させた方が最も速いでしょう。
形式を変えるだけで解決すると誤解されることがある。
AVIFが常に最も高速であるとは限りません。Lighthouseは、AVIFのブラウザサポートがWebPよりも限定的である可能性があるため、サポートしていないブラウザ向けのPNGまたはJPEGの代替形式が必要になる可能性があると注意しています。
別の注意点として、ファイルが変更されているにもかかわらず、訪問者に古いファイルが配信される場合があります。テーマが直接出力した画像や、テーマの範囲外にある画像は、最新の形式に自動的に変換されない可能性があります。
管理画面でAVIFが生成されたかどうかを確認するだけでは不十分である。
実際にウェブページのHTMLと、ネットワークリクエストでどのようなファイルがダウンロードされるかを確認する必要があります。
直接解決しようとすると、最も困難な点はまさにここです。1つの画像を変更することは可能ですが、テーマに組み込まれた画像や、外部ステッカーの要求、アニメーションファイルなどをまとめて特定することは困難です。
WordPress 7.1は、JPEG、PNG、GIF、WebP、AVIF形式の画像の圧縮、サイズ調整、形式変換をブラウザ上で処理する機能を導入しましたが、ウェブサイト全体の出力方法を自動的に整理するものではありません。
作業の評価は、速度のスコアだけを見てはいけません。
携帯電話において、最初に表示される画面と、画像のリクエスト回数を合わせて確認する必要があります。
私のステッカーには、何を選ぼうか。
- 小さな静止画像の場合：WebPをデフォルトとして選択します。
- AVIF形式の使用が可能：代替形式とともに、優先的に提供します。
- 繰り返される絵文字：画像ではなく、まず基本的なテキスト形式の絵文字を確認する。
- 装飾用GIF：静止画像に変換します。
- 必須アニメーション：フレームサイズを縮小し、最初の画面以外に配置する。
もし、使用する絵文字が少ない一般的なブログであれば、安易に削除するのではなく、まずページソースとネットワークタブで、絵文字互換スクリプトが実際に必要かどうかを確認してください。
反対方向に動くGIFが複数ある場合、または大きなキャラクターを画面の最初に配置している場合は、形式の変更よりも、アニメーションの削除とサイズ縮小を優先すべきである。
重要なのは、ステッカーを貼るかどうかではない。
必要なシーンを、最も小さなファイルサイズで表示する機能です。
DecoBlocksを使って、ステッカーと読み順を整理する。
ステッカーを配置する場所と説明を区別して文章の流れを整理する際には、DecoBlocksを使用できます。Insert Character Stickerは、インストールされたステッカーパックのキャラクターステッカーを文章に挿入し、ブロックエディタとクラシックエディタのショートコードに対応しています。
ステッカーが挿入された案内や注意書きは、Section Box (Solid) を使用して、関連する内容をまとめて表示することができます。長い文章で、H2 および H3 の見出しを基準にして目次を作成したい場合は、Auto Table of Contents を使用できます。ただし、これらの機能は文章の表現や構造を整えるためのものであり、ステッカーファイルの形式、サイズ、または遅延読み込みについては判断しません。
よくある質問
Q. WebPとAVIFのどちらか一方だけを選ぶとした場合、どちらが良いでしょうか？
A. 小さな静止画像ステッカーは、WebPを基本として使用するのが容易です。 AVIFを使用できる場合は、まずAVIFを優先的に提供し、WebPやPNGといった代替形式も併せて提供する方が安全です。
Q. ステッカーの問題をツールを使って簡単に解決できますか？ どのようなツールを使用すればよいですか？
A. 画像の圧縮・変換機能とブラウザの開発者ツールを組み合わせて使用することができます。 変換後には、実際のHTMLとネットワークタブで、訪問者に送信されるファイル形式とサイズを確認する必要があります。
Q. 自分のウェブサイトでは、最初に何を確認する必要がありますか？
A. まず、最初の画面に表示される大きな画像やアニメーションGIFを確認してください。次に、小さな静止画像がWebPまたはAVIF形式で表示されているかを確認し、絵文字の互換性に関するスクリプトが必要かどうか、また外部画像へのリクエストがあるかどうかを確認してください。
質問：ステッカーが貼られている長い文章の範囲は、どのように区切るのですか？
A. DecoBlocksのSection Box (Solid)は、関連する内容を箱の中にまとめて表示し、Insert Character Stickerは、テキストの中にキャラクターステッカーを挿入します。
H2とH3のタイトルに基づいて、自動目次を作成し、長い文章の移動経路を整理することができます。ファイル形式と表示サイズについては、別途確認する必要があります。
