ウェブデザインの最適化（WPO）：完全ガイド

航空券やレストラン予約のような重要な買い物をしようとしているとき、単に支払いをするためにこのページを訪れたことがない人はいないでしょう。取引は成立したのだろうかと質問するとき、あなたの心は揺れ動き、二度手間になる可能性を考えることになる。悔しいことに、あなたは何かを予約しなければならなかったのに、そのページが希望通りに表示されなかったためにチャンスを逃してしまったのです。

もしあなたがこのエモーショナルなロシア人に共感するのであれば、サイト作成におけるオプティマイゼーションの重要性を理解しているはずだ。

サイトのパフォーマンスとは、どのようなデバイスでも、サイトのページがユーザーのナビゲーターに読み込まれ、表示される速度のことで、インタラクティブ性とユーザビリティに影響を与えます。要するに、サイトの表示と実行が速ければ速いほど、その「パフォーマンス」は向上するのです。

サーバーやプラットフォームのインフラは、サイトの優れたパフォーマンスにとって基本的なものですが、コンテンツや画像を必要以上に追加するなど、その他の要因もパフォーマンスを低下させる可能性があります。このガイドでは、サイトパフォーマンスの基礎について説明するとともに、サイトの監視、サポート、最適化のためにできることを探ります。

Dica:Wixのサイトのパフォーマンスは、現在、かつてないほど向上しています。

WebPフォーマットへの自動画像変換やコードコンテナ編集など、インフラストラクチャーの常時追加機能により、デバイスやローカライゼーションに依存することなく、サイトをより迅速に表示することができます。

多くの場合、サイト訪問者は、サイトへの新規訪問だけでなく、クライアントへの転換を保証するために、最初のサイトパフォーマンスを向上させることが必要です。例えば、サイトの訪問者がページの改築に失敗したり、コンテンツの保存に時間がかかったりした場合、その訪問者はサイトに戻ることはありません。このことは、自社サイトだけでなく、人々が自社ブランドをどのように認識するかという点においても、長期的な影響を与える可能性があります。

コンテンツクエア・ソリューションのスペシャリストであるニヤ・ノネバは、2022年のデジタル・ベンチマークについてこう語っている：

"世界中の多くの人々が、膨大な数の電話会議のために疲労に苛まれ、電話機と向き合う時間を少しでも減らそうとしている。長時間の充電は、使用中のユーザーや限られた時間しか充電できないユーザーには不向きです。顧客は、サイトでの経験が価値あるものであることを望んでいます。"

成績が非常に重要である理由、すなわち影響力について、もっと話をしよう：

ユーザーの経験

来訪者の再訪問と再来訪の割合

会話税

ブランドに対する認識

モバイル文化

O SEO

サイトを作成する際には、デザインがどの程度業績に影響を与えるかを考慮することが基本です。もし、あるサイトが非常に優れたものであるにもかかわらず、閲覧に支障があったり、不規則な構成であったり、返信に支障があったりした場合、訪問者が閲覧をやめてしまったり、フラストレーションを感じたり、そのページから去ってしまったりすることは非常によくあることです。これは、これらのエスニックな要素が、ユーザーのサイトでの体験を損なうからです。

「サイトのパフォーマンスは、ユーザーの体験に直結しています。「新しいサイトのデザインに取り組む際には、レイアウト、階層構造、直感性、使いやすさなど、ユーザーが体験する要素を考慮する必要があります。

サイトの稼働率を考慮したユーザー体験を提供することで、ビジネスの成功を保証するチャンスが広がります。

サイトの所有者は、訪問者に最高の第一印象を与えるために非常に短い時間を費やします - そのため、サイトが最高のパフォーマンスを発揮することが不可欠です。再訪問率とは、サイトを訪問した訪問者のうち、1ページしか訪問しなかったり、1度もリンクをクリックしなかったりした訪問者の割合を指します。Google によると、あるページがクリックされるまでに3秒かかる場合、1秒かかるのとは対照的に、再訪問率は32%に上がります。

あなたのサイトが迅速で、利用者が良い経験を持っている場合、利用者がページを離れ、いくつかのリンクをクリックすることは避けられません。このような体験は、お客様がサイトに戻り、商品を購入したり、サービスを求めたりするきっかけとなります。Cloudflareによると、「ページがより速くアクセスされればされるほど、ユーザーがそのページで意図した操作を実行する確率は高くなります」。

しかし、2019年のPortentの調査では、ページが表示されるまでの最初の3秒間が会話率に大きく影響することがわかっている。しかし、1秒でも遅ければ4,42%も減少する。

自社サイトの稼動率と実績をモニターすることで、クライアントに自社が時間とコストを大切にしていることを示すことができます。低デスペンダーのサイトでの不完全な経験は、クライアントのブランドに対する信頼や一般的なイメージに影響を与える可能性があります。

次のようなことを想像してみてください：有名な家族の一人が、Instagramに自社ブランドのムービーを使ってストーリーを投稿します。そして、あるマイクロインフルエンサーが、自社サイトの商品ページへのリンクを公開し、Z世代が圧倒的に多いフォロワーへのコールトゥアクションを行い、その商品は販売中であるだけでなく、購入可能であることをアピールします。購入意欲の高い何百万人もの訪問者が、このサイトに入り、衝動的に購入しようとするが、購入するために必要なページからは離れてしまう。このような衝動的な購入者が他の購入者の60%に達する場合、サイトやアプリを利用する際に、購入するために多くの時間を費やすのは当然のことです。

そして、そのようなことはない。彼らの欺瞞が持続することで、自社のブランドをどのような形で確立するかが遠のく可能性がある。IBMの調査によると、"Z社の極端に高い期待に応えられない企業は、急速に衰退し、競合他社を引き離す危険性がある "という。

メディアでは、1日に200回、あるいは4分間に1回スマートフォンにアクセスしており、インターネットの60%が携帯電話によるものであることは驚きではありません。携帯端末に高いパフォーマンスと迅速な通信を実現するデザインは、ユーザーの体験にとって重要な要素です。スマートフォンのユーザーは、移動中やカフェの待ち時間にサイトを閲覧することが多いため、距離が離れていることを意味し、速度が重要です。

モバイルサイトの表示速度が0.1秒でも速くなると、ベアジョブサイトの会話数は8.4%増加するという調査結果が出ています。この簡単なテストにより、あなたのサイトがモバイル端末に対応しているかどうかを確認することができます。

実績は、ユーザーがどのようにサイトを認識するかだけでなく、訪問者がどのようにサイトを見つけるかにも影響します。

コアウェブバイタル（詳細は後述します）は、Google ページエクスペリエンス（ユーザーがそのページでの体験をどのように感じるかを示す指標の組み合わせ）の一部であり、検索エンジン結果ページ（SERP - Search Engine Results Page、英語表記）でのサイトの表示形式を左右します。

しかし、Google 、コアウェブ・バイタルを基本的なデータとは見なさないことは重要である。

Google 、SEOのスペシャリストであるジョン・ミューラーは、「関連性がますます重要になっている」と述べている。

「ページでの体験は、ページ数を増やすために使われる数多くの要因のひとつに過ぎない。「しかし、メディアを凌駕する経験を持っているページは、優れた関連性のあるコンテンツを持っていれば、高い評価を得ることができるのです」。

たとえば、検索エンジンの検索結果ページで、あなたの会社が競合他社よりも上位に表示されている場合、最も優れた業績を上げているサイトは、検索結果でも上位に表示されます。

サイトのパフォーマンスは、サイト訪問者がアクセスしたときにサイトが表示される速さ、ユーザーからの質問に対する反応の速さ、アニメーションなどのメディアの流動性など、速度と品質に関するさまざまなテストによって測定されます。これらのテストは、コントロールされたシミュレーションを用いたラボテスト、またはユーザーやメディアによる実体験を用いたフィールドテストによって行われます。

多くのツールや指標が存在する中、Google のCore Web Vitalsイニシアチブは、サイトが最も重要な指標に集中できるようにするために、統一された指標を作成しました。サイトのパフォーマンスを測定するための基礎となるものですが、パフォーマンスに影響を与える唯一の指標ではないことを確認することが重要です。

コアウェブバイタルは、3つのインジケータを使用して、処理速度、視覚的安定性、およびインタラクティビティを測定します：

LCP (Largest Contentful Paint)またはExibição do Maior Contentúdoは、ページ内の最も大きな画像やテキストを表示するのにかかる時間を測定します。

累積レイアウトシフト(CLS)または累積レイアウト変更は、ページの使用中に発生するレイアウト変更すべてを意味します。レイアウトの変更は、ページが移動するときに、目に見える要素の位置が変わるときに起こります。

最初の入力ディレイ（FID）または入力遅延は、最初の入力が入力されるまでの間隔を表します。

ユーザーとページとの相互作用（リンクやボタンをクリックするなど）。

ナビゲーターがこのインタラクションを処理する瞬間。

コメント: Core Web VitalsとWixサイトのパフォーマンスについて、以下の情報をご覧ください。

モバイル版とデスクトップ版のポンティングの違い。

2018年の"Web Performance Made Easy"カンファレンスで、Google ："ユーザーの大部分(75%)は、UXの階層において最も重要なものは速度であると分類している。"

データ転送速度とは、ページ内のデータを転送する速度のことです。この速度は、次のようなさまざまな方法で調整することができます：

スピードインデックス(SI)または速度インデックス(Índice de Velocidade)は、ページの書き込み中に表示されるコンテンツの速度を測定します。

First Contentful Paint（FCP）またはPrimeira Exibição de Contentdoは、ページへの書き込みを開始してから、コンテンツ（テキスト、画像、その他のグラフィック要素など）の一部がテキストに反映されるまでの間隔を指定します。

インタラクティブになるまでの時間（TTI）またはインタラクティブになるまでの時間は、ユーザーがページに入った瞬間から、完全にインタラクティブになるまでの（または、ボタンをクリックしてサイトと相互作用できるようになるまでの）秒数を表します。

合計ブロック時間 (TBT) または合計ブロック時間 (Tempo Total de Bloque) は、そのページがブロックされている合計時間を表します。

最初のバイトまでの時間 (TTFB) または最初のバイトまでの時間 (Tempo até o Primeiro Byte) は、ナビゲータがページを要求した瞬間から、サーバが最初のバイトの情報を受信するまでの時間間隔を表します。

サイトのパフォーマンスを向上させるために、考慮すべきパラメータをもう少し詳しく説明します。

HTTP要件

HTTP (またはハイパーテキスト転送プロトコル) の要件は次のように定義されます。

ナビゲータとウェブサーバは通信します。URLをナビゲータに入力すると、ナビゲータがページの各アーキボディをホストするサーバに要求することになります。一般的に、ページが複雑であればあるほど、サイトを完全に保存するために必要なHTTPリクエストは多くなり、そのため保存にかかる時間は長くなります。

通常、サイトが受け取るHTTPリクエスト数が少なければ少ないほど、サイトのパフォーマンスは向上します。画像、JavaScript、CSSファイル、およびその他のリソースは、HTTPリクエスト数を増加させる要素の一例です。

ページ数

要求されるファイルサイズは、要求されるファイルサイズと同じです。HTML や画像、その他のメディア、JavaScript、CSS、ページ内に存在する他のリソースなどです。サイトが重ければ重いほど、また必要な要素やリソースが多ければ多いほど、ページのパフォーマンスは向上します。

イメージの重要性：イメージはサイトのデザインにおいて重要な役割を果たします。ブランドのメッセージを発信し、訪問者を惹きつけ、ブログのコンテンツをサポートし、さらにはコールトゥアクション(CTA)としても機能します。しかし、画像はHTMLのシンプルなテキストを含む広告よりも負荷が高く、保存に時間がかかるため、サイトのパフォーマンスを大幅に低下させる可能性があります。

可能な限り最高のパフォーマンスを保証するために、すべての画像はサイト内で戦略的な役割を果たし、最適化される必要があります。画像の最適化とは、品質を低下させることなく、可能な限り少ないファイルサイズで画像を変換するプロセスを指します。希望のサイズにするために、イメージのリディメンジメントを使用することができます。

JPG、PNG、GIFのファイル形式を選択することができます。この形式の画像はPNG形式の画像よりも数倍速く保存できるため、パフォーマンスの点ではJPG形式が最も優れています。GIFは避けた方が無難ですが、一般的にアニメーション画像は非常に重いため、保存に時間がかかります。そのような場合は、ビデオを使ってみてください。ビデオのサイズが小さくなり、ビデオが完全に縮小される前にユーザが視覚化することができます。

注意：Wixサイトに追加されたすべての画像は、より迅速で高品質なダウンロードを保証するために、自動的に最適化され、最新の画像フォーマット（WebPなど）に変換されます。また、Wixサイトでは、「遅延ローディング」（または低速読み込み）を使用してパフォーマンスを向上させ、ユーザーが最初に閲覧する範囲外にあるコンテンツやメディアの読み込みを省略することができます。

ファイルサイズ: ファイルサイズが小さければ小さいほど、ファイル転送と読み込みは速くなります。パフォーマンスを向上させるために、ファイルはウェブサーバによって「コンパクト化」されるか、または情報を失うことなく最小限に縮小され、その後、通常通り受信してレンダリングするナビゲータに送信されます。

説明：Wixは、Brotliまたはgzipを使用して、すべてのファイルを自動的に圧縮し、より高速で効率的なダウンロードを実現します。

宿泊施設

サイトのホスティングとは、サイトのアーカイブをユーザーのウェブガイドに提供することを指します。さまざまなホスピタリティのオプションは、サイトの稼働率、トラフィック、拡張性に基づいて、サイトのパフォーマンスに影響を与えます。

説明：Wixは、世界中の様々なサーバーと接続し、自動的にCDN（またはコンテンツ供給ネットワーク）からキャッシュに保存され、お客様のサイトをホスティングすることで、特にTime To First Byte（TTFB）に関連した、迅速なレスポンスを保証します。

キャッシュへの保存

キャッシュの保存は、(サーバーであれナビゲータであれ) データを保存するプロセスであり、リクエストと HTTP 応答のサイクルを回避するために、 将来にわたってより簡単にデータにアクセスできるようにするものです。

例えば、ブリーチを販売するeコマースサイトの場合、ロゴのように、すべてのページに同じロゴを表示する必要があります。キャッシュに保存しない場合、ユーザーが新しい商品をクリックするたびに、そのページはロゴを変更する必要があります。Wixサイトでは、すべてのページで自動キャッシュ保存を使用しています。

地理的位置

インターネットは常に存在し、いつでもどこでも存在するように見えるが、サイトが機能するためのインフラは物理的なものではなく、世界中に広がっている。HTTPリクエストはすべて、ナビゲーターからサーバーに送信される必要があり、同時に、情報もサーバーから送信され、ナビゲーターに送信される必要があります。サーバとナビゲータ間の物理的距離が大きいほど、要求と応答のサイクルが完了するのに必要な時間も長くなります。

たとえば、ワシントン州シアトルのサーバーにホストされているサイトは、マダガスカルからのリクエストとは対照的に、シアトルのナビゲーターからのリクエストに対して高いパフォーマンスを示します。

リクエストに応答するために必要なデータの転送距離を短縮するために、ホスピタゲームのプロバイダーは、情報ネットワークの一部として、世界中に戦略的なサーバー（プロキシサーバー）を配置しています。これらのサーバーは、ウェブページ、画像、ビデオのキャッシュを保持し、最も近くにいる閲覧者の要求に迅速に応答します。

コメント:Wixは、ローカライズを含め、迅速かつ効率的なコンテンツ配信を保証するために、サーバーのキャッシュを自動化し、CDNを中断することなく、グローバルに分散されたCDNやデータセンターですべてのサイトをホスティングしています。

他サーバーのアドオンは、他サーバーのデータを取得し、サイトを補完する機能を追加します。これらのサーバーへのHTTPリクエストは、一般的に処理に時間がかかります。パフォーマンスを向上させるために、ユーザーの体験に大きく貢献するアドオンだけを残してください。

URL登録

サイトの訪問者や検索エンジンは、元のページとは異なるURLにリダイレクトされます。これは、ナビゲータが、他のページにリダイレクトされた特定のページのURLへのHTTPリクエストをサーバに送信したときに発生します。

サーバーは新しいURLでナビゲーターのリクエストに応答し、その後、ナビゲーターはそのURLへの新しいリクエストに応答します。そのため、リクエストとHTTPレスポンスのサイクルが追加で終了することになり、ページのパフォーマンスがマイナスになる可能性があります。多くの再リクエストは、ナビゲータからのリソースをすべて削除し、ページの読み込み時間を短縮する可能性があります。

ビジネスが成長し、オンライン・コンテンツが増加するにつれ、リディレクション・プログラムを使ってサイトのフローを更新することが必要になります。例えば、あなたが同じテーマについて複数のブログ記事を作成し、それらをクラスタ化されたトピックのモデルをベースとした戦略的な記事にまとめたとします。一般的に、再検索はSEOにとって避けられないものであり必要なものですが、最高の結果を得るためには、最もシンプルな方法であることを保証します。

コメント:問題やエラー箇所を特定するために、ボットのログ関連情報を使用するか、Deepcrawl アプリケーション（有料）を使用して、WixのURLリダイレクトツールを使用してリダイレクトを定義します。 (コントロールパネルで、SEOツールをクリックし、URLリダイレクトツールをクリックしてください。

サイトのパフォーマンスを確認するための最初のステップは、テストを行うことです。

説明： Wixのサイト速度コントロールペインでは、サイトのTTI（インタラクティブ時間）を視覚化し、デスクトップ版とモバイル版のパフォーマンスをテスト、分析、改善することができます。また、ページごとのアクセス速度をモニターし、他のユーザーと比較することで、ユーザー体験を向上させる方法を学ぶこともできます。

テストを受ける前に、以下のことを考慮してください：

データ・フレンドリーに注意してください。キャンプデータまたはリアルユーザ監視データ（RUM）は、最も正確なデータであり、実際のユーザや訪問者のデータを含み、ユーザのデバイス、ネットワーク、および場所の正確な状況を反映します。

しかし、すべてのサイトがこのようなキャンプデータを取得するのに十分な技術を備えているわけではなく、その場合はラボラトリーデータを使用することになります。キャンプデータとは対照的に、ラボラトリーデータはシミュレートされた環境下にあります。モバイルサイトでは、シミュレートされた環境は、実際のユーザーの経験を反映する必要がないため、100％正確なものではありません。

より詳細な情報をお求めの場合は、ラボラトリー・データをご利用ください。

サイトデザインの変更が収益に与える影響を知る。新しいギャラリーをサイトに追加したいとのことですが、公開する前に、それが収益に知覚的な影響を与えるかどうかを確認する必要があります。デザインが未完成であるため、リアルモニター（RUM）のデータを取得することはできませんが、ラボラトリーのデータを使用することで、デスクトップ版とモバイル版でユーザが実際に体験している間に、パフォーマンスのヒントを即座に検出することができます。

キャッシュに注意してください。ラボでのテストでは、ページを更新するたびに結果が変わります。より正確で信頼性の高い結果を得るために、各試験において3～5回更新し、計算することをお勧めします。

異なるテストは異なる結果をもたらします。各試験は次のような形で機能します。

そのため、このような些細なことであっても、その人の持つ才能を最大限に引き出すことができるのです。また

URLを分析すると、デスクトップ版とモバイル版の2種類の関連情報を受け取ることができます。デスクトップ版とモバイル版では、処理能力、サイト環境、サイトコンテンツによって異なる結果が得られることは間違いありません。正確な結果を得るためには、1～3回のテストを行う必要がありますが、各テストの詳細やデータの場所にも注意を払い、その違いをより明確に理解してください。

Google には、PageSpeed InsightsやGoogle Lighthouse など、サイトのパフォーマンスを測定するための無料ツールが多数あります。その他にも、GTmetrix、Treo、Calibreがあります。

ベルナルド・シャンツ

ブロガー＆グロース・マーケティング・スペシャリスト - Português