WordPress サイトを高速化するために画像の読み込みを高速化するための 7 つの実証済みのヒント

公開: 2017-03-30

平均的な Web ページのサイズの 63% が画像であることをご存知ですか? つまり、Web サイトを高速化したい場合、画像の読み込みを高速化することが最善の方法の 1 つであるということです。

高速な Web サイトには次のような特徴があります。

  • 読み込み時間が遅いとユーザーはイライラするため、訪問者の満足度が高まります。
  • サイトの速度がランキング要素となるため、検索エンジンのランキングが向上します。
  • 換金率が高くなると、より多くのお金を手に入れることができます。

しかし、実際に画像の読み込みを高速化し、より高速な WordPress Web サイトのメリットを享受するにはどうすればよいでしょうか? さて、これから説明するヒントに従ってください。 掘り下げてみましょう。

WP Buffs のチームは、Web サイト所有者、代理店パートナー、フリーランサー パートナーが画像を最適化してサイトの読み込みを高速化するのを支援します。 1 つの Web サイトの管理が当社に必要な場合でも、1,000 のクライアント サイトのサポートが必要な場合でも、当社がお手伝いいたします。

始める前に – 比較するベンチマークを取得します

心配しないでください。サイトとその画像を高速化する方法を説明します。 しかし、私はこれが実際に機能することを証明したいと思っています。 そこで、始める前にお願いがあります。

現在、サイトの読み込みにどれくらいの時間がかかっているかを把握してください。 これは、私が何を言っているのかを理解しているという証拠として機能するだけでなく、比較するためのベンチマークになります。 そうすれば、変更によって実際にサイトの速度が向上したかどうかを推測する必要がなくなります。 確実に知りたいデータが手に入ります。

しかし、サイトの読み込みにどれくらい時間がかかるかをどのようにテストすればよいでしょうか? わかりました、ストップウォッチと素早い指が必要になります…待って、いいえ。 それは良い考えとは思えません。 それを自動的に行う方法はどうですか？

代わりにこれを試してください。Pingdom ツールに移動し、サイトの URL を入力して、 [テストの開始]ボタンをクリックします。

比較するベンチマークを取得する

次に、Pingdom はサイトの読み込みにかかった時間を正確に返します。

あなたが得た数字が何であれ、この記事を読み終えた後にあなたが達成することを期待すべき数字です。

私のポートフォリオ サイト (例) はすでにかなり最適化されています。これらのヒントを実装すると、ページの読み込み時間が同様になることを願っています…

1. 使用する前に画像のサイズを変更する

どの WordPress テーマを使用しているとしても、テーマでは特定の最大幅までの画像しか表示できません。 つまり、その最大幅を超えるサイズの画像をアップロードすると、次の 2 つの点でサイトの速度が低下します。

  • 画像のファイルサイズが必要以上に大きくなっています。
  • 訪問者の Web ブラウザが画像のサイズを変更できるようにしています。

画像の読み込みを高速化したい場合は、どちらも良いことではありません。 この問題を解決するには、画像をアップロードする前に必ず画像のサイズを変更してください。

どの寸法を使用する必要がありますか? そうですね、正確なサイズはWordPressテーマによって異なるため、一律に答えることはできません。 ただし、一般的なルールとして、ほとんどの WordPress テーマでは幅 700 ～ 800 ピクセルの範囲内で機能します。

WordPress 画像のサイズを変更する方法

WordPress 画像のサイズを変更する簡単な方法が 2 つあります。

まず、WordPress サイトにアップロードする画像のサイズを自動的に変更する Imsanity などのプラグインをインストールできます。

次に、非プラグイン ソリューションを希望する場合は、Batch Image Resizing Made Easy を使用して、画像を一括して簡単にサイズ変更できます。 サイズ変更プロセス中にツールが画像をトリミングしないように、必ず[自動高さ]を選択してください。

画像のサイズを変更することで画像の読み込みを高速化します

既存のサイトで作業している場合は、できるだけ多くの古い画像に戻ってサイズを変更する必要があります。 Imsanity プラグインは、既存の WordPress 画像のサイズを一括変更するのに役立ちます。

2. 画像を圧縮してサイズをさらに節約する

画像のサイズを変更すれば、戦いは半分完了です。 ただし、圧縮と呼ばれるものを使用して、画像のファイル サイズをさらに縮小することもできます。 圧縮は、次の 2 つの方法でサイズを縮小します。

  • ロスレス圧縮。 品質を損なうことなくファイルサイズを縮小します。
  • 非可逆圧縮。 サイズを大幅に節約できますが、品質は多少犠牲になります。

通常、品質が最高のパフォーマンスである写真やその他の画像には、可逆圧縮をお勧めします。 ただし、チュートリアルのスクリーンショット (この記事の画像など) の場合は、サイズを最大限に節約するために非可逆圧縮を使用することをお勧めします。

WordPress 画像を圧縮する方法

画像のサイズ変更と同様に、便利なプラグインを入手することも、スタンドアロン ツールを使用することもできます。

プラグインに関する限り、Smush Image Compression and Optimization は、最新リリースでは画像の圧縮とサイズ変更の両方ができるため、優れたオプションです。

スタンドアロン サイトが必要な場合は、可逆方式と非可逆方式の両方で画像を圧縮できる Kraken も有力なオプションです。

圧縮を使用して画像の読み込みを高速化する方法

面倒だとは思いますが、画像のサイズ変更と同様に、できるだけ多くの古い画像に戻って圧縮する必要があります。 Smush プラグインを使用している場合は、新しいイメージだけでなく古いイメージも自動的に圧縮できます。

3. CDN を使用して画像やその他のコンテンツを配信する

CDN (コンテンツ配信ネットワークの略) は、次のようにサイトと画像の読み込みを高速化します。

通常、誰かが Web サイトにアクセスすると、ホスティング データ センターからすべてのファイルをダウンロードする必要があります。 データ センターがテキサス州ダラスにあり、誰かがカリフォルニアから訪問する場合でも問題ありません。 彼らはまだお互いにかなり近いです！

しかし、イギリスのロンドンから誰かが訪れたらどうなるでしょうか? さて、それはあまり良くありません。 インターネットと同じくらい高速ですが、データ速度は依然として物理によって制限されています。 つまり、たとえほんの一瞬であっても、物理的な距離は重要です。

CDN は、Web サイトのファイルを世界中の複数のデータ センターに保存することで、この問題を解決します。 そうすれば、誰かがあなたのサイトを訪問するたびに、最も近いグローバル データ センターからファイルをダウンロードできます。

これらはサイトを高速化するための非常に素晴らしいツールです。 しかし、それにはいくらかかりますか？

心配しないで！ 実際、高品質の無料 CDN を見つけることができます。 そのようなオプションは次の 2 つです。

  • Jetpack Site Accelerator – Jetpack プラグインの Photon モジュールは、画像の CDN として機能します。 画像の読み込みを高速化したいだけの場合は、これは良いオプションです。
Jetpack サイト アクセラレータ
  • CloudFlare – セットアップが簡単で、画像や HTML を含むすべての静的ファイルを配信する人気のオプションです。

4. サイトのブラウザ キャッシュを有効にする

Google PageSpeed Insights ツールを使用したことがある方なら、おそらく「ブラウザ キャッシュの活用」というフレーズが夢に出てくるでしょう。 つまり、これはサイトを高速化するための一般的な提案です。

ブラウザ キャッシュは基本的に、ファイルを毎回ダウンロードするのではなく、訪問者のブラウザに特定のファイルを訪問者のローカル PC に保存するように指示します。 したがって、たとえば、訪問者は最初の訪問時にロゴ画像をダウンロードする必要があります。 ただし、その後訪問するたびに、訪問者はそのファイルをローカル キャッシュからロードすることになります。

これは、訪問者がサーバーからすべてを直接取得する必要がないため、読み込み時間が短縮されることを意味します。

ブラウザーのキャッシュを設定する最も簡単な方法は、次のコードを .htaccess ファイルに追加することです。

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

FTP プログラムを使用してサーバーのルート ディレクトリに接続すると、.htaccess ファイルを見つけることができます。 または、このファイルの場所がわからない場合は、Web ホストのサポートがお手伝いします。

5. ページキャッシュにもプラグインを使用していることを確認してください

ブラウザのキャッシュだけが WordPress サイトを高速化する唯一の方法ではありません。 サイトでのコンテンツの提供を容易にするページ キャッシュと呼ばれるものもあります。 何よりも、ページ キャッシュにより、画像の読み込みが高速化されるだけでなく、サイトの残りの部分も高速化されます。

ページ キャッシュを実装するには、軽量でセットアップが簡単な Cache Enabler というプラグインをお勧めします。 インストールしてアクティベートするだけです。 次に、 「設定」→「キャッシュ・イネーブラー」に進み、次のように設定します。

ページキャッシュ用のプラグインを使用していることを確認してください

何よりも、Cache Enabler はコードを縮小します。これは、ページの読み込み時間を短縮するもう 1 つの手法です。

6. 画像のホットリンクを無効にする

ホットリンクとは、サーバー上でホストされている画像を他の Web サイトが投稿することです。 基本的に、Web サーバーは他の人のサイトを改善するためにリソースを使用します。 それは良いことではありません！

そのため、ホットリンクを無効にすることを検討する必要があります。 こうすることで、サーバーは自分の Web サイトのみに集中できます。

ホットリンクを無効にするには、All In One WP Security & Firewall プラグインを使用するか、次のコードを .htaccess ファイル (ブラウザー キャッシュを追加したのと同じファイル) に追加します。

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

yourdomain.com を実際のドメイン名に置き換えてください。

7. それ以外は失敗 – より高速なホストを選択する

上記に挙げたすべてのことにより、サイトと画像の読み込みが速くなります。 しかし、これらのヒントすべてでは克服できないことがあります。

ホスティングが遅い。

応答時間が遅い Web ホストを使用している場合、これらのヒントはすべて単なる絆創膏です。 つまり、サイトの速度はホストのパフォーマンスによって常に影響を受けます。

したがって、上記のすべてを実装しても、ページの読み込み時間にまだ不満がある場合は、思い切ってプレミアム ホスティング プロバイダーに切り替える時期が来たかもしれません。

あるいは、より安価で効果的なオプションをお探しの場合は、私は SiteGround* の大ファンです。 SiteGround は、700 ミリ秒未満で読み込まれる個人のポートフォリオ サイトに使用しています*。

まとめ

あなたが Pingdom に戻ってサイトを再度テストしている間、少し休憩します。

物事は速くなりましたか？ 彼らはする必要があります！

これで、現在および将来の成功に向けて Web サイトを準備することができました。 モバイル インターネットが成長し続けるにつれて、ページの読み込み時間はさらに重要になるからです。

フィードバックを送信したり、会話に参加したりしませんか? Twitter にコメントを追加してください。

保存保存