WordPressサイトで画像の読み込みを高速化する方法

画像の読み込みを速くしたいですか？

まあ、私はぐずぐずしません。 良いものに飛び込みましょう！

WordPress で画像の読み込みを高速化するには、次の 3 つの方法があります。

• サイズ変更
• 圧縮する
• 遅延ロード

この投稿では、これらの各手法がどのように機能するか、およびそれらがサイトの読み込みを高速化する理由について説明します。 また、手動のソリューションとプラグインの推奨事項の両方を使用して、各戦術を実装する方法も示します。

この最初のテクニックは非常にシンプルですが、WordPress の初心者には見落とされがちです。

WordPress で画像を最適化する方法

画像のサイズを変更する

画像の読み込みを高速化する最も簡単な方法は、画像のサイズを変更することです。 説明させてください。

リサイズとは？

「サイズ変更」とは、画像のサイズを変更することを意味します。この場合、大きすぎる画像のサイズを縮小する必要があります。

たとえば、ブロガーは携帯電話やデジタル カメラで写真を撮り、ブログにアップロードすることがあります。 写真の未編集のコピーは、幅が 5,000 ピクセルにもなる可能性があります。 これについて考えてみてください…

サイトの投稿セクションの幅は、おそらく 800px 以下です。 あなたが今読んでいるテキストは、ページ全体で約 700 ピクセルしかないので、ここに幅 5,000 ピクセルの画像を追加することを想像してください。 必要以上に大きくなり、ページに合わせて縮小されますが、読み込まれた画像ファイルは依然として巨大で非常に無駄です。 その理由は…

サイズが大きい画像は、ファイル サイズも大きくなります。

パフォーマンスと画像の読み込みを高速化することに関して言えば、画像のサイズを小さくすることは、ファイル サイズを大幅に縮小する優れた方法であり、これにより画像の読み込みが高速化されます。

私の例に戻って、画像の幅と高さが 5,000px であると仮定しましょう。 5,000 ピクセルからわずか 700 ピクセルに縮小すると、実際には画像で使用されるピクセルが 99% 少なくなります。 つまり、ファイル サイズは約 99% 減少します。 画像が 5 MB の場合、最終的には 50 KB になり、サイトでの読み込みが 99% 速くなります。

画像のサイズを慎重に変更するつもりがない場合は、ほぼ確実にいくつかの利点があります。

サイトにぴったり合うように画像のサイズを変更する方法はいくつかあります。

画像のサイズを手動で変更する

新しい画像をサイトにアップロードする前に、コンピュータに組み込まれている画像編集ツールを使用して手動でサイズを変更してください。

私の例のように非常に大きな画像がある場合、これはすぐに大きな違いになります。 画像のサイズを変更したら、メディア ライブラリにアップロードできます。

画像をライトボックスまたはスライダーで使用する場合でも、通常、2,000 ピクセルよりも幅が広くなる理由はありません。 画像が投稿またはページのコンテンツ領域に配置される場合は、画像の幅が 800px でうまくいく可能性があります。

画像のサイズを変更するこの方法は問題なく機能しますが、既にサイトにアップロードされている画像には役に立ちません。 既存の画像の簡単なテクニックは、単純に別のサイズを選択することです。

小さいサイズを使用する

画像をメディア ライブラリにアップロードすると、WordPress は最大 3 つの追加バージョン (サムネイル、中、大) を作成します。

メディア設定ページにアクセスすると、ここでサイズを選択できることがわかります。

設定を変更することはできますが、デフォルトの大サイズは 1024px で、無駄がなく投稿に使用するのに十分な大きさです。 このサイズは、投稿に含めるすべての画像に使用できます。

投稿に追加した画像のサイズを切り替えるには、エディターで画像をクリックすると、右側のサイドバーに [画像サイズ] ドロップダウンが表示されます。

「大」サイズを選択し、投稿を更新します。 大きすぎる画像がある場合、この手法を使用すると、元の画像を再アップロードして置き換えることなく、より高速に読み込まれる、より適切なサイズをすばやく提供できます。

とはいえ、何十もの画像を含む何十もの投稿がある場合、これは非常に面倒です。 さらに迅速で効果的な方法があります。

プラグインによる自動リサイズ

画像のサイズを自分で変更する代わりに、プラグインに自動的に変更させることができます。 自動画像サイズ変更に関しては、 Optimoleプラグインに勝るものはありません。

期待どおりに動作しません。

メディア ライブラリ内の画像を編集する代わりに、Optimole は独自の画像のコピーを保持し、高性能 CD​​N からそれらを提供します。 このようにして、オリジナルが変更されることはありません。

さらに、画像に使用する単一のサイズを Optimole に指定する必要はありません。 むしろ、訪問者の画面のサイズを取得し、その場で各画像の最適なサイズのバージョンを生成します。 つまり、モバイル デバイスを使用しているユーザーが 400 ピクセル バージョンの画像を読み込み、ラップトップを使用している別の訪問者が同じ画像の 700 ピクセル バージョンを取得する可能性があります。

このサイズ変更方法は、実装がはるかに簡単で、モバイル デバイスでより効果的です。モバイル ユーザーは接続速度が遅いことが多いため、これは特に重要です。

Optimole の使用方法を知りたい場合は、完全なウォークスルー ビデオに従ってください。

最初にサイズ変更することをお勧めします。手動で行うか、プラグインを使用して自動化するかに関係なく、簡単で大きなメリットが得られるからです。

画像がすでにサイトに適したサイズになっている場合でも、圧縮によってサイトのパフォーマンスをさらに向上させることができます。

画像を圧縮する

圧縮は、画像のサイズを変更せずに画像のファイル サイズを縮小する方法です。

利用可能な画像圧縮には 2 種類あります。

最初のタイプの画像圧縮は、「ロスレス」圧縮と呼ばれます。

無損失圧縮

ロスレス最適化では、画像自体は実際には編集されません。 むしろ、この手法では、画像ファイルに保存されているすべてのメタデータが削除されます。 たとえば、画像には、画像の撮影に使用されたデバイスの名前、写真が撮影された日付、場合によってはショットの GPS 座標が保存されることがよくあります。

通常、このデータはかなり限られているため、ロスレス最適化によって画像のサイズが 1 ～ 5% しか縮小されない場合がありますが、画質に影響がないため、使用しない理由はありません。

真の利益は、非可逆最適化から得られます。

非可逆圧縮

ご想像のとおり、非可逆圧縮は画像自体を最適化するため、品質が低下します。 しかし、これが問題です…

最近の圧縮アルゴリズムは非常に優れているため、多くの場合、画像のファイル サイズを 50 ～ 70% 削減できますが、目に見える違いはありません。 あなたがプロの写真家で、4k モニターで画像を完全に鮮明にする必要がない限り、品質の低下に気付くことさえありません。

画像を圧縮する方法

画像をアップロードする前に、TinyPNGなどのツールを使用して画像を手動で圧縮するか、プラグインを使用して自動化することができます。

ShortPixelは、サイトの画像を最適化するための優れたプラグインです。 アップロード時にすぐに最適化し、メディア ライブラリに既にあるすべての画像を一括最適化できます。

画像のサイズ変更には Optimole をお勧めします。画像も非常に効果的に圧縮されます。 繰り返しになりますが、メディア ライブラリに保存されているオリジナルを最適化するのではなく、訪問者に提供するコピーを圧縮します。

ここで、さらにいくつかの画像最適化プラグインを見つけることができます。

画像のサイズを変更して圧縮すると、サイトの読み込みが大幅に速くなりますが、画像を最適化する最後の方法があります。

遅延読み込みを実装する

遅延読み込みは、画像をさらに最適化する非常に賢い方法です。

12 個の画像を含むブログ投稿があるとします。 誰かがあなたのサイトにアクセスしたとき、すべての画像がすぐに画面に表示されるわけではありません。 それらのほとんどを表示するには、さらに下にスクロールする必要があります。 では、なぜ 12 個すべてをすぐにロードするのでしょうか。

遅延読み込みでは、画面に表示される画像のみが読み込まれます。 12 枚の画像が読み込まれる代わりに、おそらく 2 ～ 3 枚だけが読み込まれます。 次に、訪問者がページを下にスクロールすると、残りの画像が画面に表示されるときに読み込まれます。 これは、初期読み込みがはるかに高速であることを意味します。また、ほとんどの訪問者はページを最後までスクロールしないため、多くの画像が読み込まれることがなく、貴重なサーバー リソースを節約できます。

このビデオには、遅延読み込みがどのように機能するかをより明確に理解したい場合に、より適切に説明する視覚化があります。

概念が理解できたので、サイトに遅延読み込みを実装する方法を次に示します。

遅延読み込みの使用方法

繰り返しになりますが、このパフォーマンス最適化手法は、プラグインを使用して WordPress に簡単に追加できます。

無料のオプションを探している場合は、Optimole または a3 Lazy Load を試してください。

Optimole を使用すると、遅延読み込みが自動的にオンになり、a3 プラグインは簡単に構成できます。

さらに、支払いを気にしない場合は、 WP Rocketをチェックしてください。 高性能キャッシングやその他のさまざまな高速化ツールを備えています。

WP Rocket で遅延読み込みをオンにするには、このスイッチを切り替えるだけです。

とても簡単です。

より高速な画像の読み込みをお楽しみください

今学んだことを要約すると…

サイトにアップロードされた特大の画像は非常に遅くなります。 これらの画像の 1 つだけで、サイトが急停止する可能性があります。

画像を高速化するためにできる最も重要なことは、大きすぎる画像のサイズを変更して、サイトに適したサイズにすることです。 これは手動で行うことも、Optimole を使用して自動化することもできます。

次に、画像圧縮アルゴリズムは長い道のりを歩んできました。最近では、品質に大きな影響を与えることなく、画像のファイル サイズを 50 ～ 70% 縮小できます。 これは簡単なことではありません。 ShortPixel または Optimole を使用して、サイト上のすべての画像を圧縮します。

最後に、遅延読み込みは、画像を選択的に読み込む優れた方法です。 Optimole、a3 Lazy Load、または WP Rocket を使用して、サイトに遅延読み込みを即座に実装できます。

これらの手法をまったく使用していない場合、実装すると、サイトの読み込みが劇的に速くなります。 それはあなたを吹き飛ばします。

この記事の概念とテクニックについて質問はありますか? 共有する別のヒントがありますか? 下のコメント欄に投稿してください！

あなたも好きかも、

遅いWordPressサイトと管理パネルを（永続的に）修正する方法