Webサイトへの訪問者や、オンラインで買い物をするユーザーたちに、ページの表示速度に対する忍耐力を求めてはいけません。なぜなら彼らがページに滞在するか否かは、たった数秒間のうちの判断によって決まってしまうからです。
Kissmetricsの報告によって、ページの読み込み速度がユーザーの離脱率に大きな影響を及ぼすことがわかりました。一般的なWebサイトへの訪問者は、ページの読み込み時間に対する忍耐力が低いので、読み込み時間が１秒かかるごとに離脱率も１％増加してしまいます。
同調査には、10秒後には40％近くのユーザーがページを離脱するというデータがあります。おそらくスマートフォンなどのモバイル端末を使用しているユーザーにとって、ページの読み込み速度に対する問題はWebサイトを閲覧する際に、もっとも不満に感じる要素の１つだといえるでしょう。スマホユーザーのおよそ73％は、Webサイトの読み込み速度が遅いと感じたことがあると指摘しました。
ページの読み込み速度は、Webサイトでの買い物客の購買行動に直接影響を及ぼします。またKissmetricsは、Webサイトの読み込み速度などのパフォーマンスに不満を感じた買い物客の79％は、そのサイトから再び商品を購入する可能性が低くなると述べました。消費者の半分近くが２秒以内にページを読み込めることを期待しており、１秒の遅れは顧客満足度を16％低下させることに繋がります。
このようにページの表示速度の遅れは、実際の収益にも影響を及ぼします。ECの大手企業であるAmazonは、１ページを読み込むための速度がたった１秒遅れるだけで、16億ドルの売上高に影響するというデータを明らかにしました。同様にGoogleは、検索結果の表示速度がほんの4/10秒遅れてしまうだけで、１日に800万件の検索が失われ、またそれが数百万回分のオンライン広告の損失に相当するということを述べています。
問題の核心に迫る
ページの読み込み速度に影響を及ぼす主な要因として、画像や動画、図式が挙げられます。今日のWebサイトでは、訪問者の興味を惹きつけるためにテキストの情報を減らし、より多くのビジュアル要素を組み込むようになってきました。 HTTP Archiveのデータによると、平均的なWebサイトの容量の約64％は画像であり、動画は８％を占めています。
このように画像などを主に使用するようなメディアでは、Webサイト内の容量の４分の３近くを画像などのデータが占めていることがあります。したがってパフォーマンスやコンバージョン率を向上させるためには、まずサイト内の画像や動画を効率的に管理することが重要になってくるでしょう。画像や動画によってWebサイトのパフォーマンスに影響が出てしまうので、そのような事態を解消するための対策をいくつか紹介します。
より効率的な最新の画像フォーマットを使用する
GoogleはChromeブラウザにおいて、WebPと呼ばれる最新の拡張子を用いた画像のサポートを新たに追加しました。またMicrosoftはInternet ExplorerとEdgeのほとんどのブラウザにおいてJPEG-XRへの対応を可能にしました。しかし、開発者の多くはこのような画像のフォーマットの変化をまだ受け入れていません。彼らは最新のフォーマットの導入によってサイトを最適化するよりも、以前と同様にJPGとPNG形式を使い続けることに固執しているのです。
この最新のフォーマットを導入する際の理想としては、必要に応じて従来の画像をWebPやJPEG-XRに変換し、またフォーマット間のバランスをとるために圧縮品質を調整することです。特定のブラウザによって画像にアクセスし、それぞれのブラウザに最適化されたバージョンの画像を配信することも重要です。そうすることによって、サイトの速度を低下させることなく、視覚品質とファイルサイズの最適化を行うことが可能になり、ユーザーはもっとも適した状態の画像を受信できるようになるでしょう。
ブラウザ側での無駄なリサイズを除外する
開発者は手っ取り早い方法として、サーバー側ではなくブラウザ側で画像のリサイズをすることがよくあります。モダンブラウザで表示する際には、最終的な見た目としては同じですが、通信速度や容量への影響はまったく異なります。ブラウザ側のサイズの変更により、Webサイトの訪問者は必要以上に大きな画像をダウンロードすることになってしまうので、彼らの貴重な時間を無駄にするだけでなく、データの転送量も無駄にすることになってしまいます。
古いブラウザでは、リサイズのアルゴリズムが優れていないため、このデータ量の問題はさらに顕著になってしまいます。そのため画像がWebサイトの大きさに合っているかどうかを確認する必要があります。必要以上に大きな画像を使用し、ブラウザによるリサイズに頼るのではなく、同じ画像のサムネイルを作成しましょう。ImageMagickのようなオープンソースの画像リサイズサービスや、Cloudinaryのようなクラウドベースのソリューションなど、画像のリサイズを手助けしてくれるツールはネット上にいくつかあります。
正しい形式の画像ファイルを使用する
JPEGやPNG、GIFは、現在Webサイト上でもっとも一般的に使用されているファイル形式ですが、それぞれの役割は大きく異なります。間違ったフォーマットを使用すると、サイト訪問者のページ読み込み時間を無駄にするだけでなく、あなた自身のお金も無駄にしてしまうことになるので気をつけましょう。
よくある間違いとしては、写真を配信するのにPNG形式の画像形式を使うことです。PNGは可逆性圧縮という性質を持っており、JPEG形式よりも損失のないフォーマットなので、一般的には写真を掲載する際に最高の再現率をもたらすと思われています。
これは概ね真実であるといえますが、最適化という面においてはPNG形式はまったく不要なのです。このような画像の形式によるWebページとのミスマッチを防ぐため、コンテンツごとにどのようなイメージフォーマットを使用するかのが最適なのかを覚えておくことが重要です。
PNGの使用が最適となるシチュエーションとしては、コンピュータ上で生成されたチャートや、ロゴなどの画像や、画像をオーバーレイとして使用するために背景透過が必要な場合などが挙げられるでしょう。一方でJPEG形式は撮影した写真をアップするときに最適でしょう。最後にGIFは、Ajax読み込みアニメーションを始めとしたアニメーションが必要な場合に使用しましょう。
運営しているすべてのメディア内で同一の画像サイズを使用しない
スマートフォンやタブレット、スマートウォッチがユーザーに好まれるようになった現在、Webサイトはさまざまなデバイス上で閲覧されます。しかし、多くの開発者は、クライアント側のイメージサイズ変更機能を使用しているため、デバイスの解像度ごとに画像を変化させてはいません。
デバイスごとに画像のサイズを変化させなくても、見た目は良いかもしれません。しかし、サイトを訪れたユーザーにとっては、必要以上に大きな画像の読み込みをすることになってしまうので、彼らは時間を浪費し、また余分な通信費用を支払うことにもなってしまいます。
ユーザーが不必要に高解像度な画像をダウンロードすることになると、結果的に余分な費用を支払うことにも繋がってしまいます。とくに３G回線を使っているユーザーや、ローミングユーザーにとっては不公平です。このような画像サイズによって発生するデータ量の問題を回避するには、サイト訪問者のデバイスと解像度を特定する必要があります。
そしてそれぞれに対して適切な解像度を把握した上で、サーバーから最適な画像を取得するようにしましょう。そのために、それぞれの元の画像のサムネイルセットを用意する必要があります。このようなプロセスを自動化するJavaScriptパッケージも存在します。
レスポンシブデザインを活用する
Webサイトを制作する際には、モバイルやタブレットなどのすべてのデバイスにおいて、さまざまな解像度、ピクセル密度に対応させましょう。またデバイスの向きによって表示が崩れないように上手く適応させる必要もあります。
ユーザーがサイトにアクセスするとき、使用しているデバイスによってその解像度は異なってきます。Webサイトをマークアップする際には、すべての異なるデバイス上で、解像度やピクセル密度を適応させ、またモバイルデバイスがどのような向きであっても、完璧に見えるように適応させる必要があります。表示を完璧に適応させるためには、画像の管理や操作をしたうえで配信しなければなりませんが、これらはWeb開発者が直面するレスポンシブデザインの主な課題となります。
またこれらの課題を解決するために、多くのWebサイトは、ブレークポイントとなる解像度を定め、またそれによってクライアント側で縮小された状態の最高解像度の画像を表示するように構築されています。このプロセスは非効率的であり、Webサイトのパフォーマンスには悪影響を及ぼします。しかし、オープンソースツールにの中にはResponsive Breakpointsなどのオプションがあり、これらによって必要なすべての画像サイズと、それに対応したHTMLコードを生成することができます。
コンテンツ・デリバリ・ネットワーク（CDN）を活用する
CDNは、コンテンツ間の往復時間を短縮するために、世界中に展開するサーバーを所持しています。 CDNによって、ユーザーに画像をより早く配信するこができるようになり、また突然の強制終了などの不具合が起こる可能性を減らし、さらにSEO面でのパフォーマンスを向上させつつユーザーエクスペリエンスを向上させることができます。
CDNを選択する場合は、世界的な適用範囲のレベル、キャッシュ速度、辺地での論理的な実行能力、平均応答時間、平均読み込み失敗速度などの測定基準を考慮する必要があります。
変化による影響
これらのベストプラクティスを採用することで、ユーザー体験に大きな差をつけることができます。サイト訪問者の滞在時間を伸ばすことができ、多く閲覧してもらえることになるので、結果としてより多くの購入に導くことができます。では、以下の企業の業績の変化を見てみましょう。
Apartment Listは、個人向けのオンライン賃貸住宅検索サイトです。サイトに掲載するアパートメントコミュニティから画像をデータフィードとして収集しているので、さまざまなイメージフォーマットと解像度の画像を取り扱っています。この企業は、レスポンシブデザインを活用し、さまざまなサイズのモバイルデバイスやデスクトップ上で、すべての画像を最適な画像に変換することにより、コンバージョン率を20％近く向上させました。
KartRocketは、SaaSベースのECサイトのプラットフォームです。彼らはわかりやすく完全なECのエコシステムを提供することにより、中小企業がオンラインストアを迅速かつ簡単に作成できるようにしました。そして、読み込み時間やサイトパフォーマンスに影響を及ぼすことなく画像の品質を保持する方法を発見しました。KartRocketは、ツールを活用して画像を動的に制御し、小さなサムネイル、大きなバナー画像、主な製品画像などを最適化しました。このようなアプローチによって、KartRocketは画像の読み込み応答時間を100倍向上させることに成功しました。
結論
時間やリソースがないと、Web担当はユーザー体験を向上させる措置まで手が回りません。しかし、ページの読み込み速度が数秒遅れただけでも、消費者の信頼を失い、また収益を減らす可能性もあります。
ほとんどのWebサイトにおいては、画像や動画がもっとも多くの通信量を占めていることを考慮して、サイトのデザインや画像フォーマットをしっかりと検討しましょう。また収益と顧客の知覚的な認識が考慮されていることことだけではなく、メディアが最適化されていることを確認し、サイトに悪影響を及ぼさないようにしましょう。
