Webパフォーマンスと収益を最適化する方法

公開: 2018-04-06

忍耐は、ウェブサイトの訪問者やオンライン買い物客にとっての美徳ではありません。あなたのウェブサイトで訪問者を維持する、または失うことになると、ほんの一瞬が重要になります。

Kissmetricsによると、読み込み時間はページの放棄の主な要因です。平均的なWeb訪問者は、ロードに時間がかかりすぎるページに対して忍耐力がないため、ロード時間の1秒ごとにパーセンテージとして放棄が増加します。ブログによると、ユーザーの40％近くが10秒後にページを放棄します。モバイルインターネットユーザーは、おそらくこの問題に最も不満を感じています。73％が、読み込みが遅すぎるWebサイトに遭遇したと述べています。

ページの読み込みの問題は、Webサイト訪問者の買い物行動に直接影響します。 Kissmetricsはまた、ウェブサイトのパフォーマンスに不満を持っていた買い物客の79％が、同じサイトから再度購入する可能性が低いと指摘しました。消費者のほぼ半数は、ページが2秒以内に読み込まれることを期待しており、1秒の遅延により、顧客満足度が16％低下します。

これらの遅延の結果は、実際のお金に変換されます。 eコマースの巨人であるAmazonは、ページの読み込みがわずか1秒遅くなると、売上高が16億ドルになることを明らかにしました。同様に、Googleは、検索結果の10分の4秒の速度低下により、1日あたり800万回の検索が失われ、オンライン広告の数百万回が減少することを指摘しました。

問題の核心に迫る

ロード時間に影響を与える最大の要因は、画像、ビデオ、およびグラフィックスです。今日のWebサイトには、訪問者を引き付けるために、より多くのビジュアルとより少ないテキストが組み込まれています。 HTTPアーカイブによると、Webサイトの平均ウェイトの64％近くが画像であり、ビデオがさらに8％を占めています。

これらのタイプのメディアはウェブサイトのサイズのほぼ4分の3を占めるため、パフォーマンスとコンバージョン率を向上させるには、サイト上の画像と動画をより効率的に管理することが重要です。 Webサイトのパフォーマンスに対する画像やビデオの影響を減らすために実行できるいくつかの手順を見てみましょう。

より効率的で最新の画像形式を使用する

GoogleはChromeブラウザにWebP画像形式のサポートを追加し、MicrosoftはほとんどのInternetExplorerおよびEdgeブラウザのJPEG-XRに対して同じことを行いました。しかし、多くの開発者は、最新の形式でサイトを最適化する方法を利用するのではなく、同じJPG形式とPNG形式を使用して、これらの変更をまだ受け入れていません。

理想的には、必要に応じて画像をWebPおよびJPEG-XRに変換し、フォーマット間でバランスが取れるように圧縮品質を調整する必要があります。各画像にアクセスする特定のブラウザを検出し、それぞれのブラウザに最適化されたバージョンの画像を配信することも重要です。そうすることで、サイトの速度を落とすことなく、視覚的な品質とファイルサイズの最適化の観点から、ユーザーが可能な限り最高の画像を確実に受け取れるようになります。

無駄なブラウザ側のサイズ変更を排除

開発者は、サーバー側で画像のサイズを変更するのではなく、ブラウザ側の画像のサイズ変更をショートカットとして使用することがよくあります。最終的な結果は最新のブラウザでもまったく同じように見えますが、帯域幅への影響はまったく異なります。ブラウザ側のサイズ変更により、Webサイトの訪問者は、不必要に大きな画像をダウンロードするために貴重な時間を浪費し、それを配信するための帯域幅を浪費します。

古いブラウザの場合、サイズ変更アルゴリズムは通常標準以下であるため、問題はさらに顕著になります。画像が必要なウェブサイトのサイズに完全に適合していることを確認する必要があります。大きな画像を配信してブラウザに依存してサイズを変更するのではなく、同じ画像の異なるサムネイルを作成する価値があります。 ImageMagickのようなオープンソースの画像リサイザーやCloudinaryのようなクラウドベースのソリューションなど、これを支援できるツールがいくつかあります。

正しい画像ファイルタイプを使用する

JPEG、PNG、およびGIFは、今日Webサイトで使用される最も一般的なファイル形式ですが、それぞれの役割は大きく異なります。間違ったフォーマットを使用すると、訪問者の時間と自分のお金を無駄にしています。よくある間違いは、PNGを使用して写真を配信することです。 PNGは、ロスレス形式であるため、写真を可能な限り最高の状態で再現できるという一般的な誤解があります。

これは一般的に当てはまりますが、これもまったく不要な最適化です。表示されるコンテンツに使用する画像形式を覚えておくことが重要です。 PNGは、コンピューターで生成された画像（チャート、ロゴなど）、または画像に透明性が必要な場合（画像オーバーレイ）に使用する必要があります。キャプチャした写真を表示するときのJPEG。アニメーションが必要な場合はGIF（Ajax読み込みアニメーションなど）。

すべての配信媒体で単一の画像サイズを使用しないでください

特にスマートフォン、タブレット、スマートウォッチが消費者に好まれるようになったため、Webサイトはさまざまなデバイスで表示されています。多くの場合、開発者は、画像のクライアント側のサイズ変更を使用して、すべてのデバイス解像度で同じ画像を提供します。画像は見栄えがするかもしれませんが、訪問者は不必要に大きな画像をデバイスにロードするのに時間を浪費し、冗長な帯域幅の使用に対して料金を支払います。

これは、無駄に余分な高解像度の画像をダウンロードするために多額の追加料金を支払う3Gユーザーやローミングユーザーにとっては特に不公平です。これらの問題を回避するには、訪問者のモバイルデバイスとユーザーエージェントを使用した解決策を特定する必要があります。正しい解像度で、サーバーから最適な画像を取得します。これには、元の画像ごとにサムネイルのセットを利用できるようにする必要があります。このプロセスを自動化する優れたJavascriptパッケージが利用可能です。

レスポンシブデザインを活用する

訪問者がサイトにアクセスするために使用しているデバイスごとに、解像度が異なります。 Webサイトのマークアップは、さまざまなデバイスで、さまざまな解像度、ピクセル密度、モバイルデバイスの向きで完璧に見えるように適応する必要があります。画像の管理、操作、配信は、Web開発者が直面するレスポンシブデザインの主な課題の1つです。

これらの課題のために、多くのWebサイトは、必要となる可能性のある最高解像度の画像で構築され、ブレークポイントに応じてクライアント側で単純に縮小されます。このプロセスは非効率的であり、パフォーマンスを低下させます。ただし、必要なすべての画像サイズと適切なHTMLコードを生成するのに役立つ、オープンソースツールのレスポンシブブレークポイントなどのオプションがあります。

コンテンツ配信ネットワーク（CDN）を利用する

CDNSは通常、コンテンツのラウンドトリップ時間を短縮するために、サーバーを世界中に戦略的に展開しています。 CDNを使用すると、画像をより迅速にユーザーに提供し、クラッシュの可能性を減らし、SEOパフォーマンスを向上させ、ユーザーエクスペリエンスを向上させることができます。 CDNを選択するときは、グローバルカバレッジのレベル、キャッシュレート、エッジで論理操作を実行する機能、平均応答時間、および平均無効化時間などの他のメトリックを考慮する必要があります。

変更の影響

これらのベストプラクティスを採用することで、ユーザーエクスペリエンスに真の違いをもたらし、訪問者がより長く滞在し、より多くの閲覧を行い、エンゲージメントを高め、購入することを奨励できます。これらの企業の結果を検討してください。

個人が賃貸住宅を検索するのに役立つオンラインリソースであるApartmentListは、サイトで紹介されているさまざまなアパートコミュニティから画像のデータフィードを取得するときに、さまざまな異なる画像形式と解像度を処理していることに気付きました。これらすべての画像をさまざまなサイズのモバイルデバイスやデスクトップでのプレゼンテーションに最適な画像に変換し、レスポンシブデザイン手法を活用することで、同社のコンバージョン率は20％近く向上しました。

SaaSベースのeコマースプラットフォームであるKartRocketは、SMBがオンラインストアをすばやく簡単に作成できるようにする透過的で完全なeコマースエコシステムを提供し、読み込み時間やサイトのパフォーマンスに影響を与えずに画像の品質を確保する方法を見つける必要がありました。クライアント。ツールを活用して画像を動的に制御し、小さなサムネイル、大きなバナー画像、主な製品画像に最適化されました。このアプローチにより、KartRocketは画像読み込みの応答時間を100倍に増やすことができました。

結論

時が金なりのとき、ウェブサイトの所有者は、訪問者の体験を改善するために必要なすべての措置を講じないわけにはいきません。ページの読み込みがわずか1秒遅れても、消費者の側では収益と信頼が失われる可能性があります。

画像と動画はほとんどのウェブサイトで最大の帯域幅を占有していることを考えると、ウェブデザインと画像形式を真剣に検討し、メディアが最適化されてサイトが最適化されるようにするために必要な手順を実行する必要があります。顧客の認識–結果として苦しむことはありません。