画像の重いウェブサイトのデザインに対処する方法

写真が本当に1,000語の価値があるのなら、なぜあなたはそれらを使ってあなたのブランドのストーリーを語らないのですか?

花のような詩的なコピーは素晴らしいですが、画像はあなたのウェブサイトに生命と感情をもたらします。

それらはあなたのブランドと製品の視覚的な説明です。

そして、彼らはあなたの聴衆にあなたが提供しなければならないものを見る機会を与えるだけではありません。それらは、売上とシェアを促進することになると重要です。

あなたはあなたのページでそれらを必要としています。

ただし、高解像度の写真をいくつか追加して、それで済ませることはできません。

なんで?ウェブデザインに関しては、スピードがゲームの名前だからです。

サイトはきれいに見えても最初の5秒間は読み込まれない場合は、貴重なコンバージョンに別れを告げることができます。

速度は、トラフィックとコンバージョンを促進し、一般的な成功を生み出すための大きな要因です。

また、サイトは本来あるべきほど高速ではない可能性があります。実際、Googleによると、ほとんどのサイトは十分な速度で読み込まれていません。

これは、大量のコンバージョンを失っていることを意味します。

そして、最も可能性の高い理由は、サイトデザインの99%が画像であるということです。

これが私が意味することです:

ページサイズ(すべてのページ要素のメガバイトまたはキロバイト単位のサイズ)が大きすぎます。読み込み時間が遅くなり、実際に人々にバウンスを懇願します。

ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください

SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する

なんで?あなたの画像があまりにも多くのスペースを占めているからです。

実際、画像はおそらくページサイズの99%を占めています。

そして、速度とその後の変換を向上させたい場合は、それを修正する必要があります。

遅いサイトを持つことはもはやオプションではありません。

ありがたいことに、これは修正可能な問題です。サイト全体の再設計も行う必要はありません。

これが、サイトデザインの99%が画像である理由です(そして、それに対して何をすべきで、何ができるか)。

ほとんどのサイトは画像に重点を置いています
したがって、コンバージョンを促進したい場合は画像が必要であることがわかっています。

ただし、ページサイズに関しては、画像が多すぎるとすぐに追加される可能性があります。

テキストやボタンなどの他のページ要素と比較すると、画像が最も多くのページスペースを占めます。

これは、スペースの大部分が画像によって占められることを意味します。

はっきりさせておきますが、画像がたくさんあることは悪いことではありません。実際、画像が多いほど良いです。

しかし、ほとんどの人は、ページの速度とページのサイズに合わせてグラフィックを最適化するのを忘れてしまいます。

たとえば、Evernoteのウェブサイトを見てください。

貼り付けた画像02587

控えめに言っても、それはミニマルで美しいサイトです。

しかし、すぐに、画像が多いことに気付きます。テキストやその他のページ要素に関してはほとんど何もありません。

彼らのサイトデザインのほとんどは画像を中心に展開しています。

または、インターコムのWebサイトはどうですか。

貼り付けた画像02561

それは同じことです。

それはほとんどの意味を伝える画像によって支配されています。

そして、それは完璧です。画像は、テキストのブロックよりも価値と使用法を伝えるのにはるかに優れています。

したがって、彼らのウェブサイトのデザインが主に画像に焦点を当てていることは理にかなっています。

ただし、画像を正しく表示することに十分な焦点を当てていないと、ページ速度の問題が発生する可能性があります。

Marketoは、画像に重点を置いているサイトのもう1つの例ですが、うまく機能しています。

貼り付けた画像02646

パターンに気づいていますか?

大多数のサイトは画像に重点を置いています。

次のセクションでは、これらの画像がサイトの速度をどのように低下​​させるかについて詳しく見ていきましょう。

遅いサイトはコンバージョンを殺します

2017年、Googleは、ウェブサイトの衝撃的な速度低下を示したページ速度調査からいくつかの重要なデータをリリースしました。

最初のデータには、私が今話していることとまったく同じものが含まれていました。

ページの大部分を占め、最も重要な画像。

実際、Googleのレポートによると、バイト単位の平均Webサイトページの重みは、ベストプラクティスが示唆するよりもはるかに大きいです。

貼り付けた画像02664

平均ページ重量に関しては、低いほど良いです。

ページの重みがバイト単位で小さいほど、読み込みが速くなり、より多くのコンバージョンが促進されます。

ベストプラクティスに関する限り、500KB未満で撮影する必要があります。

しかし、ほとんどのページのサイズは2MBを超えています。

それはページがあるべき場所からは程遠いです。

そして、より高いページの重みは何を生み出しますか?あなたはそれを推測しました:ページ速度の問題。

貼り付けた画像02567

ページ速度のベストプラクティスは3秒です。

ウェブサイトが最初の数秒で読み込まれない場合は、貴重なトラフィックと売り上げのリスクがあります。

そのため、ページが大きいほど読み込み時間が長くなり、トラフィックと売上に悪影響を及ぼします。

それは悪循環です。

Googleの調査結果はこれを確認しました。サイトの読み込みに時間がかかるほど、顧客がバウンスする可能性が高くなります。

貼り付けた画像02654

平均ページ速度グラフを振り返ると、通常の速度範囲は8〜12秒です。

これは、人々があなたのサイトから跳ね返っていることを意味します

 

、まとめて、単に速度のため。

そして、その速度の問題は、ページの重みが重いことから発生します。これは、サイトにある可能性のある大量の大きな画像ファイルによって引き起こされる可能性があります。

実際、同じ調査によると、平均的なモバイルサイトの読み込みには22秒かかります。

ありがたいことに、これらの問題を診断して修正し、コンバージョンを節約して速度を上げる方法があります。

方法は次のとおりです。

問題を診断する
グーグルはレッグワークを行い、サイトの大部分が遅すぎることを発見しました。

これは、サイトが取得しているトラフィックを利用するために必要な速度でサイトのパフォーマンスが低下していることを意味します。

ありがたいことに、私たちは実際にこの問題をすばやく診断し、優れた修正を見つけることができます!

このための優れたツールは、GoogleのTestMySiteツールです。

貼り付けた画像02580

これは、Googleが提供する最高のモバイルサイトテストツールです。

デスクトップテストにGoogleのPageSpeedInsightsを使用することもできます。

この例では、モバイルサイトのテストに焦点を当てますが、デスクトップテストツールも自由に使用して、最大限のメリットを得ることができます。

バーにURLを入力することから始め、次に矢印をクリックしてテストを開始します。

貼り付けた画像02615

次に、ツールがWebサイト全体をスキャンし、いくつかの貴重なデータと問題を修正する方法を提供するまで、約1分待ちます。

ロードされたら、無料のレポートのダウンロードを開始するか、テストの初期データを確認できます。

貼り付けた画像02542

モバイルでの読み込み時間がわずか4秒でしたが、それでも訪問者の10%を失っています。

それがページ速度の重要性です。

ベストプラクティスを1秒超えると、トラフィックが10%減少します。

次に、GoogleのPageSpeed Insightsツールを使用して自分のサイトをテストしたところ、次のことがわかりました。

貼り付けた画像02668

そこに本当の問題があります。

私の画像は私のウェブサイトの速度を妨害しています。

そして、それらを最適化するだけで、サイズを78%減らすことができます。

これにより、2〜3秒の速度を節約し、失われたコンバージョンを取り戻すことができる可能性があります。

それは巨大です。

コンバージョンは主にナンバーゲームであることを忘れないでください。サイトにアクセスする(そしてサイトにとどまる)人が多いほど、コンバージョン率は高くなります。

あなたはあなたのブランドをより多くの人々に公開しています。その結果、より多くのコンバージョンを楽しむことができます。

ただし、ページの速度が遅くなると、訪問者はバウンスします。彼らは焦りすぎています—そして彼らは他のサイトがより速くロードすることを知っています。

画像を最適化しない場合に、画像がサイトにすばやく追加される方法の簡単な例を示します。

WordPressでサイトを運営していて、ブログ投稿に画像を追加するとします。

画像ライブラリセクションに移動し、写真をアップロードして追加します。

貼り付けた画像02659

「新規追加」をクリックすると、いくつかの画像のインポートが開始されます。

次に、各画像を見て、ファイルサイズを確認します。

貼り付けた画像02635

単一の画像の場合は253KB。

または、最近アップロードしたこの画像はどうですか。

貼り付けた画像02509

1つの小さな画像に対して2MB。

また、Googleによると、ページの太さ/サイズのベストプラクティスは500KB未満であることを忘れないでください。

したがって、単にアップロードされて最適化されていない画像のほんの一部でも、サイトの実行が非常に遅くなる可能性があります。

私が扱っているほとんどのWebサイトでも、この間違いを頻繁に犯しています。

ユーザーは、製品ショットまたはアプリ内SaaS画像を機能ページにアップロードしてから、ページを公開します。

彼らが次に知っていることは、彼らのページ速度の読み込み時間は屋根を通り抜けているということです。

それで、これらの問題を修正する時が来ました。

画像を圧縮する
ページ上の大きなファイルとページ要素は、ダウンロードに時間がかかります。

コンピュータにアプリケーションやプログラムをダウンロードする場合、サイズが大きいほど時間がかかります。

かなり自明ですよね?

ええと、それはあなたのサイトに関しても同じことです。

大きな画像はより多くのスペースを占有します。訪問者があなたのウェブサイトに来るとき、それらの高解像度の画像のためにブラウザはロードするのに時間がかかります。

そしてKinstaによると、サイズの大部分は1つの厄介な要素、つまりかさばる画像に帰着します。

Kinstaによると、フォーマットの選択、サイズ変更、圧縮は、ページのサイズを縮小し、速度を上げる最大の要因です。

また、画像を元のサイズの60〜70パーセントに圧縮することも推奨しています。

きれいな服でいっぱいの洗濯かごのように考えてください。それらがすべて集まっている場合、それらは多くのスペースを占有します。

ただし、折りたたむと凝縮されます。ドレッサーの引き出しに簡単に収納できます。

それはまさにあなたがあなたの画像でやりたいことです。画面上では同じように見えますが、訪問者の読み込みが速くなります。

それで、どうやってそれをしますか?

WordPressを使用する場合、プラグインはたくさんあります。

私のお気に入りの1つは、スマッシュ画像の圧縮と最適化です。

貼り付けた画像02640

これは、無料で画像のサイズ変更、最適化、圧縮をサイトで行うことができる最高のプラグインの1つです。

WordPressダッシュボードから簡単にインストールできます。インストールしたら、すぐに使い始めることができます。画像をアップロードするたびに、それを「スマッシュ」します。

「Bu」を使用すると、一度に最大50枚の画像を圧縮することもできます。

 

lk Smush」機能:

貼り付けた画像02548

そして、私のお気に入りの機能の1つは自動化です。

プラグイン設定に移動すると、アップロード時に画像を自動的にスマッシュするように選択できます。

貼り付けた画像02574

元の画像を特定のサイズに自動的にサイズ変更することもできます。

貼り付けた画像025331

このプラグインを使用する場合は、各画像をスマッシュするプロセスをスキップできる機能を使用することもできます。

プラグインは実際に画像ライブラリをスキャンし、圧縮する必要のある画像を検出します。

貼り付けた画像02519

WP Smushは無料のツールであり、WordPressプラットフォームを使用する場合、最もよく使用されるプラグインの1つになるはずです。

ただし、WordPressを使用しない場合は、他にもいくつかのオプションがあります。

開始するのに最適な場所は、Compressor.ioです。

貼り付けた画像02595

このツールは無料で使用でき、圧縮用に4つの異なるファイルタイプをサポートしています。また、ファイルサイズを縮小しながら品質を維持できるテクノロジーを使用しています。

貼り付けた画像02628

開始するには、「試してみてください」をクリックするだけです。写真をアップロードして圧縮します。

たとえば、私が圧縮したこのテスト写真をチェックしてください。

貼り付けた画像02514

このツールは、品質にほとんど目立った違いがなく、サイズを78%縮小することができました。

画像のサイズを7.57MBから1.67MBに縮小しました。あなたのウェブサイトに関しては、その種の削減は極めて重要です。

もう1つの優れた圧縮ツールは、JPEGの圧縮です。

貼り付けた画像02525

このツールは、PNGJPEG、およびPDF形式で一度に20枚の画像を一括アップロードできるので優れています。

次に、圧縮した画像をZIPファイルにダウンロードして、簡単に開いて共有することができます。

圧縮を開始するには、画像ファイルをプログラムにアップロードまたはドラッグします。

貼り付けた画像02555

A / Bテストツールのために、同じ画像をアップロードしましたが、Compressor.ioとまったく同じ結果が得られました。

貼り付けた画像02536

サイズを78%縮小。

このツールで私が気に入っていることの1つは、実際に画像を並べてクローズアップで調べ、品質が低すぎて好みに合わないかどうかを確認できることです。

貼り付けた画像02608

左の画像は、7.3MBのサイズの元の画像を示しています。

右の画像は、1.6MBの圧縮バージョンを示しています。サイズは78%縮小されています。

品質は事実上区別できません。

さらに圧縮するには、サイドバーを下にドラッグして品質を下げます。

圧縮用の私のお気に入りのツールのもう1つは、ファイルの種類に応じて、TinyJPGまたはTinyPNGです。

貼り付けた画像02602

この無料のツールを使用すると、一度に最大20枚の画像を圧縮することもできます。

このツールで3MBの画像をテストしたところ、画像サイズが大幅に縮小されていることがわかりました。

貼り付けた画像02622

74%圧縮して500KB近くにすることができました。

これは非常に驚くべき削減であり、このサイトでは、圧縮する前に画像サイズがどのようになるかを正確に把握することもできます。

したがって、大きな画像をできるだけ圧縮する必要があります。

小さな画像を圧縮するだけでも、長期的には大量のスペースを節約できます。

画像ベースのページが多いサイトの場合、Webサイトを最適化するための戦略として圧縮を使用する必要があります。

5MBの写真をアップロードするだけでは、サイトが遅くなり、実際に顧客をバウンスさせることになります。

圧縮は、ページ速度に関して技術的なSEOの問題のほとんどを修正でき、画像の品質を低下させることはありません。

結論
画像はあなたのサイトを素晴らしいものに見せます。画像がない場合、訪問者を変換することはできません。

人々はイメージと感情的につながるので、イメージが大好きです。写真は物語を語ります。

ただし、画像が多すぎると、速度に大きな影響を与えるリスクがあります。

そして正直なところ、サイトのトラフィックに関しては、速度がおそらく最も重要な要素です。

ページの読み込みに10秒以上かかる場合は、ユーザーがクリックしてGoogleに戻り、問題を解決するために次のウェブサイトを探していることを保証できます。

人々は、今必要なコンテンツを取得するのに10〜20秒待つことを望んでいません。

サイトがコンバージョンに最適化されていても、誰かに実際にコンテンツにアクセスしてもらうことができない場合、その人はコンバージョンに至りません。

そしてグーグルによれば、私たちのほとんどはこの問題に苦しんでいます。

単に私たちの過ちを利用していないいくつかのサイト。

それで、なぜこれが起こっているのですか?

あなたのサイトのデザインとページサイズの99%が巨大な画像によって支配されているからです。

これらの美しい製品ショット、解説動画、機能ページは、スペースを取りすぎています。

それらはあなたのページを遅くし、変換を追い払う原因になっています。

ただし、説明した手順に従うと、修正はそれほど難しくありません。

Googleの無料ツールを使用して問題を診断することから始めます。

これは、サイトの実行速度が低下する原因を特定するのに役立ちます。

次に、画像を圧縮します。

これは人々がウェブサイトのデザインで犯す最大の間違いです。

サイズが数メガバイトの画像をアップロードすると、サイトの実行速度が低下します。

WordPressでさまざまなプラグインを使用するか、無料のWebサイトツールを使用して、わずか数分で画像を圧縮してみてください

 

s。

サイトとページサイズを修正すると、無数の訪問とコンバージョンを迅速に促進できます。

サイトのデザインをどのように調整して修正し、速度を上げましたか?