ウェブサイトのページ読み込み速度に影響を与え、トラフィックを消費しているのは誰か。

ウェブサイトのページの読み込み速度に影響を与えているのは誰でしょうか?

ウェブサイト制作の過程では、企業イメージの向上やユーザーへの企業・製品の理解促進を目的として、関連性の高い画像を多数追加することがよくあります。画像の使用が適切でない場合（画像が多すぎる、画像サイズが大きすぎるなど）、読み込み時にシステムリソースを大量に消費し、ページ全体の読み込み時間に影響を及ぼします。そのため、画像の最適化を徹底することが非常に重要です。

では、画像をどのように修正し最適化するのでしょうか?

1. 画像サイズを制御する

（１）ローカル画像の場合

ウェブページに配置された画像はプログラムパッケージに直接パッケージ化されるため、画像が大きすぎるとパッケージサイズが大きくなり、読み込み時間が長くなります。また、レンダリング時間も長くなるため、制作者は画像サイズを可能な限り圧縮する必要があります。

作成者は次の方法で画像を最適化および変更できます。

•透明な形式を必要としない画像の場合は、PNG 形式ではなく JPEG 形式を使用することをお勧めします。

• PCでもモバイルでも、WebP画像形式を使用してください。非可逆圧縮の場合、圧縮前後の変化は肉眼では分かりにくいものの、サイズは大幅に削減できます。（注：WebPは2010年にGoogleが発表した新世代の画像形式で、圧縮率の面では現在のJPEG形式よりも優れています。同じ画質であれば、WebP形式の画像のサイズはJPEG形式の画像よりも40%小さくなります。ウェブサイトの画像にWebP形式を使用すると、ウェブサイトの読み込み速度が大幅に向上します。）

（2）ウェブサイトでWebP画像形式を有効にする方法

1) ワンクリックで WebP を有効にする手順: http://help.eyingbao.com/products/webp.html

2) Webp画像形式を有効にした後、一部の画像が鮮明でない場合はどうすればいいですか？画像コントロールプロパティで画像の品質を変更できますが、画質を高くすると画像サイズが大きくなり、ウェブサイトの起動が遅くなることに注意してください。

操作手順は次のとおりです： http://help.eyingbao.com/products/wangzhanshangtupianbuqingxizenmechuli.html

注記：

• Web ページに冗長で無駄な画像リソースがないことを確認します。

•スライダー、アコーディオン、画像ギャラリーなど、デフォルトで読み込まれるが、その後レンダリングされない可能性のある画像に注意してください。

•主要な画像のレンダリングに必要な時間を短縮するために、Yiyingbao システムは重要度の低い画像を遅延読み込みします。

（3）画像CDN処理の高速化

Yiyingbaoウェブサイト構築システムでは、アイコン画像を除き、すべての画像はCDN上に配置されます。ネットワーク画像は圧縮する必要はありません。

(4) 画像の遅延読み込み

Yiyingbao ウェブサイト構築プラットフォームの画像コンポーネントは遅延読み込みテクノロジーを提供し、画像はデフォルトで遅延読み込み機能を使用します。

2. ウェブページ上の大きな画像を素早く確認する

開発者ツール「Network」を使用して、画像の読み込み時間とサイズを確認できます。具体的な操作は以下のとおりです。

(1) すべてのブラウザには開発者向けデバッグモードがあります。Chromeを例に挙げましょう。ページを開いた後、Ctrl+Shift+Iを押すか、右クリックメニューの「検証」をクリックして開発者モードに入ります。「ネットワーク」タブをクリックします。

（2） 「画像」をクリックし、リスト内の「サイズ」をクリックして画像サイズを並べ替えます。50KBを超える画像は主に最適化し、画像処理ツールを用いて最適化します。

3. 画像を最適化し、公開用に再アップロードする

最適化された画像を再アップロードして公開すると、機能が完了します。また、ウェブサイト管理バックエンドでワンクリックでWebP機能を直接有効化することもできます。

上記は、ウェブサイトのページ画像を最適化して読み込み速度を向上させるための主な解決策です。もしあなたのウェブサイトのページでも画像が大きすぎるという問題を抱えているなら、上記の方法に従って最適化してみてください。