WordPressで画像を最適化する方法(スピード+ SEOの両方)

画像の最適化に関しては、おそらく代替テキストについて十分に聞いたことがあるでしょう。.


画像を最適化する方法は実際には20通りあります(SEOと速度の両方の最適化を含める場合)。これらにより、GTmetrix / Pingdomでより良いスコアが得られ、検索でのランクが高くなり、コンテンツのロードがはるかに速くなります。ロード時間0.5秒で100%のGTmetrixレポートを取得できました。WordPressでの画像の最適化は、その大部分を占めています.

アップロードする前に画像を最適化する – Photoshopなどのプログラムを使用してアップロードする前に画像を最適化すると、多くの作業を節約できます。 EXIFデータのサイズ変更、圧縮、ストリップ、正しい形式(PNG / JPEGなど)での保存、および説明的なファイル名の書き込み(これを使用すると、代替テキストとして自動的に使用されます) 自動画像代替属性プラグイン)。これが6つの最適化です!

高解像度の画像が必要な場合 (写真のウェブサイトなど)、サイズが小さくても品質が低下する可能性があるため、サイズを変更して圧縮しないでください(ステップ3および8)。.

使用する主なツール – 私が使う GIMP 画像のサイズ変更/圧縮(選択した画像エディター), WPロケット 私のキャッシュプラグイン用, 想像する さらにロスレス圧縮+ EXIFデータの削除、両方 クラウドフレア そして StackPath CDN, 自動画像ALT属性プラグイン 画像ファイル名を代替テキストとして自動的に使用する 最適なグラバターキャッシュ Gravatarをコメントにキャッシュします。私が使う WP Review Pro リッチスニペットプラグインとして, より良い検索置換 画像を一括更新する(非常に便利) GTmetrix 私のスピードテストツールとして。ツールの完全なリストを見る.

1.最適化されていない画像を見つける

サイトを実行する GTmetrix これらのアイテムは[Page Speed / YSlow]タブに表示されます. 最初の5つは通常ページ固有です, つまり、GTmetrixは、テストする単一ページの最適化されていない画像のみを表示します. 最後の3つは通常、サイト全体で発生します. もちろん、これらは画像を最適化するための7つの方法にすぎませんが、最も重要なものもあるため、これらを最初に実行します.

  • スケーリングされた画像を提供する:大きな画像を正しいサイズにサイズ変更(ステップ2
  • 画像の寸法を指定する:画像のHTMLまたはCSSで幅/高さを指定します(ステップ3
  • 画像を最適化する –画像を可逆圧縮(ステップ4
  • CSSスプライトを使用して画像を組み合わせる –複数の画像を1つの画像(ステップ5
  • URLリダイレクトを回避する –間違ったwwwまたはhttp(s)バージョンの画像を提供しない(ステップ6
  • コンテンツ配信ネットワークを使用する – CDNから画像/ファイルを提供する(ステップ7
  • ブラウザのキャッシュを利用する –キャッシュプラグインを使用して画像/ファイルをキャッシュする(ステップ8
  • ファビコンを小さくしてキャッシュ可能にする – 16x16pxファビコンを使用してキャッシュします(ステップ9

GTmetrixでの画像の最適化

複数のページに表示される画像を修正することから始めます:ロゴ、サイドバー/フッターの画像など。新しいサイズでサイズ変更/再アップロードする必要がある場合があるため、拡大縮小した画像を配信することから始めます。.

2.スケーリングされた画像を提供する

あなたが見るなら スケーリングされた画像を提供する GTmetrixのエラーは、画像が大きすぎて、正しいサイズに変更する必要があることを意味します(GTmetrixで提供されます)。画像のサイズに関するチートシート(下記参照)に従っている限り、これらのエラーは表示されません。ただし、すでにサイズの大きい画像をアップロードしている場合は、手動でサイズを変更するか、プラグインを使用する必要があります.

サーブスケーリング画像

プラグインを使用した画像の一括サイズ変更 –これの問題は、画像が異なると寸法が異なることです(ウィジェット、スライダー、全幅画像)。ほとんどの画像最適化プラグインには、画像を1つにサイズ変更するオプションがあります シングル 特定のサイズのセットの場合は、アップロードする前に実際にトリミング/サイズ変更する必要があります。プラグインを使用して画像のサイズを変更した場合、結果に満足できない場合に備えて、元の画像のバックアップを保持します(いくつかのテストのみを実行します)。.

大きな画像のサイズを変更する

画像を手動でサイズ変更 – GTmetrixから正しい寸法を取得し、サイズ変更/再アップロードします。 GTmetrixは、テストする単一ページの最適化されていない画像のみを表示することに注意してください.

ウェブサイトの画像サイズのチートシートを作成する
スライダー、ブログのサイドバー、注目の画像、ブログのコンテンツ本文はすべて、画像のサイズを変更する特定の寸法を必要とします。チートシートを作成して、WordPressにアップロードする前にサイズを変更できるようにする. これは、異なる画像サイズを必要とするWebサイトの多くの領域があり、複数のデザイナー/エディターがいる場合に特に役立ちます。.

例:

  • スライダー画像:1900(w)x 400(h)
  • カルーセル画像:115(h)
  • ウィジェット画像:414(w)
  • 全幅のブログ投稿画像:680(w)
  • 注目の画像:250(w)x 250(h)
  • Yoast Facebook OG画像:1200(w)x 628(h)–ステップ11
  • Yoast Twitter OG画像1024(w)x 512(h)–ステップ11

680ピクセル幅の長方形

3.画像の寸法を指定する

つまり、画像のHTMLまたはCSSに幅/高さを追加します。ビジュアルエディターがこれを行います(ただし、ウィジェット、一部のページビルダー、および カスタムHTML しない)。 GTmetrixで数ページをテストする.

GTmetrixは画像のサイズを教えてくれます…

Speciy Image Dimensions GTmetrix

画像のHTMLに幅/高さを追加…

画像の寸法を指定する

4.画像を可逆圧縮

これらはGTmetrixの「画像の最適化」アイテムです。多くのプログラム(PhotoshopやGimpなど)には、エクスポート時に圧縮するオプションがあります。これは素晴らしいスタートですが、画像圧縮プラグインは通常、さらに優れた結果を得ます。私は好む 想像する, クラーケン, ShortPixel, または スマッシュ. 他のプラグインは視覚的に画質を低下させることが知られており、画像にエラーを引き起こす可能性があります.

Imagifyで画像を圧縮する

  1. 申し込みます 想像する
  2. インストール プラグインを想像する
  3. 以下の指示が表示されます:
  4. ImagifyアカウントからAPIキーを入力します
  5. 圧縮レベルを設定します(通常、積極的、超)
  6. Imagif’em all(下の写真)with bulkはサイト上のすべての画像を最適化します
  7. 制限に達したら、4.99ドルを支払うか、来月待って制限をリセットします

想像する

さまざまな圧縮レベルで画像がどのように見えるかをテストします…

圧縮比較を想像する

サインアップしたら、サイトのすべての画像を一括最適化します…

imagify-wordpress-image-optimization

アップロード時に画像を最適化するオプションを設定…

アップロード時に画像を最適化する

5.画像をCSSスプライトに結合する

私のホームページでは、21個のアイコンが表示されているように見えるかもしれませんが、実際には1つの画像です。これは CSSスプライト, 複数の画像を1つの画像に結合します。これにより、画像(およびリクエスト)の数が減るので、私のホームページには10個のリクエストしかありません。 21個の画像をロードする代わりに、1個をロードします。これを行うにはCSSの知識が必要です。または、 CSSスプライトジェネレーター.

CSSスプライト

GTmetrix CSSスプライト

装飾画像にはCSSスプライトのみを使用 – 21の画像を1に結合すると、多くの画像altタグが失われます。コンテンツを説明する重要な画像をCSSスプライトに結合しないでください。私に関しては、私のホームページの速度はSEOよりも重要です…私は多くの場所で私のホームページのGTmetrixレポートを使用しています(そのため、私はそれをきれいに保つ必要があります)、私のホームページは、それを信じるかどうかに関わらず、ターゲットを絞っていません。キーワード。それは私のチュートリアルの概要を示すことであり、高速でロードされます.

6.画像のURLリダイレクトを回避する

HTTPS、wwwバージョンに変更した場合、またはCDNから画像の提供を開始した場合は、次を使用してすべての画像(およびリンク)を一括更新する必要があります。 より良い検索置換 彼らは正しいバージョンを提供しています。そうでなければあなたは見るかもしれません リダイレクトを最小限に抑える または Cookieのないドメインを使用する エラー.

リダイレクトを最小化

Cookieのないドメイン

Better Search Replaceプラグインを使用して画像のURLを一括更新…

WWWバージョンのより良い検索置換

HTTPとHTTPSのより良い検索置換

7. CDNから画像を提供する

これには、画像のURLを変更して、 CDN URL

  • 古い画像のURL(CDNなし):https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • 新しい画像URL(CDNあり):https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

CloudflareとStackPath –私は両方を使用します クラウドフレア そして StackPath より多くのデータセンター=より高速なコンテンツ配信。 Cloudflareは 200以上のデータセンター, StackPathは 34以上のデータセンター アメリカのほとんどの場所にあります(ほとんどの訪問者の出身地です). CloudflareがCDN URLを割り当てない StackPathのCDNを使用して画像を提供します.

StackPath-Data-Centers

ステップ1:CDNを選択します。私が使う StackPath (30日間の試用期間があります).

ステップ2:ダッシュボードで[CDN]タブをクリックし、 StackPath CDNサイトを作成する

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

ステップ3:CDN URLをコピーしてキャッシュプラグインに貼り付けます(以下はWP Rocket用です)…

WP-ロケット-CDN

ステップ4:画像URLを置き換えて、CDN URLを含めます( より良い検索置換).

CDN URLのより良い検索置換

手順5:を使用して古い画像のURLを確認する Chrome DevTools. 時には、キャッシュプラグインまたは CDNイネーブラー これは、ハードコードされたCSSおよびJavaScriptのリンクを除き、処理されます。残されたリンクについては、通常は ファイル (CSSやJavaScriptなど)、手動でのチェックと置換が必要なもの。 Chrome DevToolsは、現在使用されているすべてのドメインを表示します.

手順6:サイトを実行する GTmetrix YSlowでは、「コンテンツ配信ネットワーク」は緑色である必要があります。 「リダイレクトの最小化」や「Cookieを使用しないドメインの使用」でエラーが発生しないようにしてください.

CDN GTmetrix YSlow

8.画像のキャッシュ

ほとんどのキャッシュプラグインには、 ブラウザのキャッシュ, 画像をキャッシュします。私は複数のFacebook投票で#1キャッシュプラグインと評価されたWP Rocketを使用しており、そのためのチュートリアルがあります. 迅速なパフォーマンス 通常、1位の無料キャッシュプラグインにランク付けされています(そのためのチュートリアルもあります).

ブラウザのキャッシュ

9.ファビコンを小さくしてキャッシュ可能にする

ファビコンが16x16px、favicon.ico形式であり、キャッシュプラグインを使用してキャッシュされていることを確認してください.

10. EXIFデータを削除する

Exifデータ 絞り、シャッタースピード、ISO、焦点距離、カメラモデル、写真の撮影日などの情報が含まれています。これは、Webサイトの画像には必要ありません。の VA Exifプラグインの削除 画像がアップロードされるとExifデータを自動的に削除します.

ほとんどの画像最適化プラグイン(Imagify、ShortPixel、Kraken、EWWW、Smushなど)には、EXIFデータを自動的に削除するオプションがあります。これがImagifyの設定です…

EXIFデータの削除を想像する

11. Cloudflare画像の最適化

Cloudflareには、画像を最適化する方法もいくつかあります。 MirageとPolishは、 Cloudflareの速度設定 Hotlink Protectionが スクレイプシールドの設定.

Cloudflare Mirage (プロ機能)–画像リクエストを減らし、画像の遅延読み込みを行い、ネットワーク接続が遅いモバイルデバイスでの画像読み込み時間を改善します。詳細はこちら…

  • 訪問者のデバイス/接続に基づいて画像のサイズを変更します。接続状態が悪い訪問者は、高い帯域幅に戻るまで、小さいバージョン(低い解像度)を取得します.
  • リクエストの量を減らす– Webサイト上のすべての画像に対して複数のリクエストを送信するのではなく、Mirageはこれを1つのリクエストにプルして、訪問者がすぐに画像を見ることができるようにします.
  • 画像の遅延読み込み(ユーザーが下にスクロールして実際に画像を表示した後にのみ画像を読み込みます).

Cloudflare Imageミラージュ

Cloudflareポーランド語 (プロ機能)– EXIFデータをストリップして画像を圧縮します.

Cloudflareイメージポーランド語

Cloudflareホットリンク保護 –他の人があなたの画像をコピーして自分のウェブサイトに貼り付けるのを防ぎます。これは(まだその画像をホストしているため)帯域幅を消費します。.

Cloudflareホットリンク保護

12.画像の遅延読み込み

これにより、ユーザーがページを下にスクロールして目に見える画像が表示されるまで、画像の読み込みが遅延します。初期読み込み時間は改善されますが、スクロールしながら常に画像を読み込むと、非常に煩わしい場合があります。個人的には、ビデオよりもロードに時間がかかるため、ビデオの遅延ロードのみを行っています。.

あなたは使うことができます レイジーロードプラグイン, ビデオのレイジーロードプラグイン, またはWP Rocket…を使用する

WP-Rocket-Lazy-Load

13.正しい形式で保存

PNGとJPEG – PNGは圧縮されていない(ファイルサイズが大きい)ため、色数の少ない単純な画像で使用する必要があります。 JPEGは圧縮された(ファイルサイズが小さい)ため、画質はわずかに低下しますが、サイズは小さくなります。色数が多い画像で使用されます。 GIMPや他の画像編集プログラムは自動的に正しいフォーマットを使用するはずですが、これは知っておくと良いでしょう.

jpg_vs_png

イラストによる ラブノール

14.画像ファイル名

検索エンジンは代替テキストと画像ファイル名の両方を使用するため、WordPressにアップロードする前にファイルに名前を付けます。プラグインを使用している場合 代替テキストを自動的に追加します ファイル名に基づいて、ファイルに名前を付けるだけです。キーワードを詰め込まず、画像を説明するだけ.

画像ファイル名にラベルを付ける

15.代替テキスト

これらは画像ファイル名と同じである必要があります。あなたは使うことができます 自動画像代替属性プラグイン ファイル名を代替テキストとして自動的に使用します。関連する画像を使用している限り、一部の画像にはキーワードの(ビット)が自然に含まれているはずです…画像にキーワードを詰め込む理由はまったくありません。 キーワードの詰め込みペナルティ.

代替テキストを画像に自動的に追加 – 使用 自動画像代替属性プラグイン. これで、画像を追加するたびに、プラグインはファイル名と同じ代替テキストを追加します…

alt ="WP-Fastest-Cache-Plugin" 幅="577" 高さ="247" />

不足している代替テキストを見つける – Screaming Frogは、代替テキストがないすべての画像を表示する無料のツールです.

  • ダウンロード 叫ぶカエルSEOスパイダー
  • ウェブサイトを入力し、[開始]をクリックしてウェブサイトをクロールします
  • 画像タブをクリックします
  • 概要に移動する→ 代替テキストがありません (下記参照)
  • あなたのサイトでそれらの画像を見つけて、代替テキストを追加してください

画像の代替テキストがない–叫ぶカエル

16.グラフを開く(Facebook + Twitter)

Facebook / Twitterで共有すると、コンテンツ形式が正しくなります。特に、両方のネットワークがカスタムディメンションを使用して表示するため、画像は正しく表示されます。.

Facebookでシェア

Yoastを使用している場合は、[ソーシャル]設定に移動し、Facebook / Twitterの両方でOpen Graphを有効にします…

Yoast-Social-Meta-Data

次に、ページ/投稿を編集し、Yoastの「共有」リンクをクリックすると、Facebook(幅1200 x高さ628)およびTwitter(幅x高さ1024)のカスタム画像をアップロードするオプションが表示されます.

yoast-social-media-optimization

17.注目のスニペットの画像

注目のスニペット Googleが検索結果の上部にコンテンツの一部を表示し、画像を含めることができる(ただし保証されていない)場合. Googleは最初のページの結果からこれらをプルします, ただし、注目のスニペットや画像を表示するかどうかはユーザー次第です。これらはまた、スニペットを2回表示し、大量のトラフィックを得る素晴らしい方法です。.

注目のスニペットの3つのタイプ

  • 答え
  • テーブル
  • リスト

注目の画像スニペット

Googleで注目のスニペットを取得する方法

  • 人々が欲しいキーワードをターゲットに 簡潔な 回答
  • 使用する Mozキーワードエクスプローラ 質問キーワードを特定する
  • Answer The Publicを使用してさらに多くの質問キーワードを見つける
  • 回答を段落、リスト、表のいずれにするかを選択します
  • キーワードを説明する素敵なグラフィックをデザインする(または写真を撮る)
  • 最適な文字長を使用します(以下の写真を参照) Moz
  • 高品質のリファレンス(リンク、グラフィックスなど)を使用してファクトベースのコンテンツを作成します
  • 注目のスニペットはすでにあるが成果が低いキーワードをターゲットに設定する
  • 回答ボックスを目指している場合は、完全一致を使用してキーワードをターゲティングします
  • キーワードの最初のページにいることを確認します。そうでない場合は、コンテンツを改善します

最適なおすすめスニペットの長さ

18.構造化データ

画像はで使用することができます 構造化データ (そして バッジ)次のコンテンツタイプの場合:

動画リッチスニペット

レシピリッチスニペット

製品リッチスニペット

どのリッチスニペットプラグインを使用すればよいですか?
私が使う MyThemeShopのWP Review Pro (私が使用しているページはこちら)、レシピや製品レビューを含む14のデータタイプをサポートしています。以前はWP Rich Snippetsを使用していましたが、開発者はプラグインを放棄し、2年以上更新されていません。 オールインワンスキーマプラグイン 退屈なだけです(オプションとスタイルが不足しています)。 WP Review Proは非常に使いやすい.

19.スタイル画像

画像のスタイルを設定することを忘れないでください!私のほとんどはボーダーを使用しています.

  • 画像のタイトル
  • 画像リンク
  • 画像枠
  • 画像のキャプション

20. GIFのサイズ変更

画像を正しいサイズにサイズ変更するのと同じように、GIFもサイズ変更する必要があります( GIF GIF).

GIFのサイズを変更…

GIFのサイズ変更

それを圧縮します…

GIFを圧縮する

結果 :-)

犬のGIFを最適化

21.グラバターをキャッシュする

コメントが多い投稿がある場合, グラバター レポートを完全に台無しにする可能性があります。それらを無効にしたり、コメントを分割して特定の数のコメントのみを表示したり、Gravatarキャッシュプラグインを試したりできます。一部のプラグインは一部のWebサイトで機能しないため、多少のテストが必要になる場合があります.

  • グラバターのキャッシュ(最適, ハリーの, または FV Gravatarキャッシュ
  • Gravatarを完全に無効にする
  • デフォルトのGravatarを空白に設定します
  • 価値のないコメントを削除する
  • デフォルトのGravatarをサーバー上のカスタムイメージに設定します
  • Gravatar画像をより小さなサイズ(32pxなど)に制限する
  • WP Disableでコメントをページ分割して、一度に20件のコメントのみを表示する
  • これらのいずれも機能しない場合は、チェックアウトしてください WP RocketのキャッシングGravatarsチュートリアル

キャッシュグラバター画像

22.外部Webサイトからの画像の埋め込みを避ける

常に画像をウェブサイトにアップロードし、決してコピー/貼り付けしないでください。そうしないと、画像がサーバー上でホストされていないため、他の場所から画像をプルする必要があるため、余分なリクエストが発生します。.

23.画像最適化ツール

機能が重複しているプラ​​グインを使用しない – Imagify、ShortPixel、Kraken、EWWW、Smushはすべて基本的に同じことを行います(可逆圧縮、EXIFデータの削除、画像のサイズ変更)。 WP Rocketには、遅延ロード、キャッシング、およびCDN(およびデータベースのクリーンアップ+ローカルでのGoogle Analyticsのホスト)のオプションがあり、ほとんどのキャッシュプラグインにはありません。追加のプラグインを使用する必要がありません。.

よくある質問

✅ GTmetrixで画像の最適化エラーを修正する方法?

ShortPixel、Imagify、Smushなどのプラグインを使用してロスレス圧縮する。 GTmetrixでこのエラーが常に修正されるため、ShortPixelを使用します.

✅ GTmetrixでServe Scaled Imageエラーを修正する方法?

つまり、画像を正しいサイズにトリミング/サイズ変更する必要があります。画像が大きすぎる場合、GTmetrixは拡大縮小された画像の提供エラーを表示し、サイズ変更する必要がある正しい寸法を通知します.

✅ GTmetrixのSpecify Image Dimensionエラーをどのように修正しますか?

このチュートリアルに示すように、画像のHTMLを表示し、指定された幅と高さがあることを確認します.

✅画像の読み込みを速くするその他の方法?

EXIFデータを削除し、CDNを使用して画像を提供することで、GTmetrixの推奨事項の外で最も大きな違いが生まれます。.

✅最適な画像最適化?

品質の損失が実質的にゼロであり、GTmetrixの画像の最適化アイテムを修正するため、ShortPixelを使用します.

どう思いますか?
GTmetrixレポートは少し良く見えますか?コメント欄で教えてください!そして、スコア/ロード時間をさらに向上させるヒントが必要な場合は、WordPressの速度ガイドをすべて参照してください。.

乾杯,
トム

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map