パフォーマンス入門：
サイト高速化の定義からそのメリット、方法までを徹底解説
インターネットが私たちの生活で大きな役割を果たすようになった今、サイトを訪れたユーザーの体験はかつてないほど重要なものとなっています。売上を伸ばす、情報を共有する、フォロワーを増やすなど、サイトの目標を達成するためには、読み込み時間を 1 ミリ秒単位で管理する必要があります。
Google もページ上での体験の重要性にますます力を入れており、サイト所有者がパフォーマンスを監視して最適化できるように、ユーザー中心の新しいパフォーマンス指標であるコアウェブバイタル（CWV）を導入しました。Google は Web サイトの CWV スコアを検索エンジンのランキングアルゴリズムの一部として採用しているほか、これらのスコアを確認できるレポーティングツールも公開し、サイト所有者がサイトパフォーマンスを監視・最適化してコアウェブバイタルを改善できる体制を整えています。
この記事では、パフォーマンス指標を理解するための基本知識として、Wix がどのようにサイトパフォーマンスを向上させているかをご紹介します。
パフォーマンス入門：
Web サイトのパフォーマンスは
何よりも重要
Wix は常にパフォーマンスを最優先事項としてさまざまなサービスを開発しています。Google のコアウェブバイタルで良いスコアを獲得できるよう、私たちは Wix サイトのパフォーマンスをさらに向上させるために絶えず努力してきました。ほとんどの場合は、ユーザーの皆さまが気づかないうちに自動的に改良が加えられています。
CWV 対策として行った改善の 1 つが、新しく取り入れた Web サイトのランタイムインフラストラクチャです。この機能を採用したことで、CWV の 3 つの指標すべてにおいて良好なパフォーマンススコアを記録した Wix サイトの割合を 7 倍に増やすことができました。このような取り組みにより、Time to Interactive（インタラクティブになるまでの時間、TTI）の短縮にも成功し、ほぼすべての Wix サイトのパフォーマンスが全般的に改善されました。また、グローバルに展開するデータセンターの数を増やし、読み込み速度を向上させました。さらに、ユーザーのデバイスやネットワークの速度がどんなに遅くても、ユーザーがサイトをより速くロードできるようにするための措置も講じています。
しかし、このような新しいインフラを導入しても、意図せずにコンテンツや画像でウェブサイトをオーバーロードしてしまうなど、パフォーマンスに影響を与える要因は他にもみられます。Wix はサイトの読み込み速度を常に改善していますが、サイト所有者であるあなた自身でもサイトのパフォーマンスを監視、サポート、改善するためにできることがたくさんあります。
Web サイトのパフォーマンスは何よりも重要
サイトのパフォーマンスを確認する
サイトのパフォーマンスは、訪問者がサイトに到達したときの読み込みの速さ、ユーザーの操作に対する反応の速さ、アニメーションなどのメディアの動きの滑らかさなど、さまざまなスピード・品質テストによって測定されます。読み込み時間が遅いサイトは直帰率を高めるだけでなく、モバイルユーザーは 3 秒以内に読み込まれないサイトから離脱するという調査結果もあります。読み込みの遅延はユーザーエクスペリエンスを低下させ、サイトの検索ランキングに悪影響を与える原因となります。 最終的には、優れたユーザーエクスペリエンスとはコンバージョン率の向上を意味するため、サイトのパフォーマンスは常に最重要視しておかなければなりません。以下では、サイトのパフォーマンスを監視するためのリソースをいくつかご紹介します。
Google のパフォーマンスツール
Google では、ページの読み込み速度を評価する「Google PageSpeed Insights」など、サイトパフォーマンスを追跡する無料ツールをいくつか提供しています。このツールでは、ラボデータ（シミュレーション環境から得られるデータ）とフィールドデータ（実際のユーザーから得られるデータ）の両方を確認することができます。ラボデータとフィールドデータの違いについては、この記事の後半でご説明します。
この Google Page Speed Insights にも、3 つの CWV 指標すべてが組み込まれています。
-
Largest Contentful Paint（LCP）：画面上のメインコンテンツをレンダリングするのにかかる時間を測定します（CWV 指標）。
-
Cumulative Layout Shift（CLS）：ページの寿命期間中に予期せぬレイアウトのずれがどれぐらい発生したかを、「レイアウトシフトスコア」として評価します（CWV 指標）。
-
First Input Delay（FID）：ユーザーがリンクやボタンをクリックするなどしてページにはじめてアクセスしてから、ブラウザがそのアクセスを実際に処理するまでの時間を測定します（CWV 指標）。
-
First Contentful Paint（FCP）：ユーザーの画面上にテキストやグラフィックを表示できるようになった最初の瞬間をレポートします。FCP が高ければ高いほど、新規訪問者のデバイスにサイトが表示されるまでの時間が長いことを意味します。
-
Speed Index（SI）：ページロード時のコンテンツの表示速度を表します。読み込み時間が長ければ長いほど、ユーザーエクスペリエンスは低下します。
-
Time to Interactive（TTI）：ユーザーがページにアクセスしてから、完全にインタラクティブ（ユーザーがボタンをクリックするなどしてサイトでアクションを起こせる状態）になるまで何秒かかるかを測定します。
-
Total Blocking Time（TBT）：TTI のサブセットで、ユーザーがはじめてページ上のコンテンツを見た瞬間（上記の First Contentful Paint = FCP）から、確実にインタラクティブになるまでの時間を測定します。
測定結果の見方
Google Lighthouse はラボのデータを使用し、中間地点に位置する PC とモバイルデバイスにおける典型的なユーザーエクスペリエンスの合成結果を生成します。
URL を分析すると、PC 用とモバイル用の 2 つのレポートが表示されていることが分かります。これら 2 つのスコアは次の理由でそれぞれ異なります。
-
中間的な PC マシン（ノートパソコンを含む）は、高速ネットワーク上で動作する高速 CPU を搭載した上位機種が多いといえます。
-
一般的にモバイルデバイスは PC よりも処理速度が遅く、またモバイルの場合はビューポートに合わせて画像やサイト要素のサイズを変更する必要があります。PageSpeed Insights で表示されるのは、3G 接続を想定したモバイルでのサイト読み込み時間です。
ただ、PC とモバイルでスコアが異なる可能性はあっても、ユーザーエクスペリエンスには影響しない場合もあります。
Google の新しい指標であるコアウェブバイタル（CWV）は、Google Search Console や PageSpeed Insights などのツールで評価することができます。これは、訪問者がサイトで実際に体験したことを示す Real User Measurement（RUM）（フィールドデータとも呼ばれます）に基づく値です。
CWV はすべてのサイトで表示されるわけではありませんが（レポートを表示するには大量のビジタートラフィックが必要なため）、フィールドデータはパフォーマンスを把握するための貴重なリソースとなります。CWV が有用なのは、サイトの速度に関する3つの重要なポイントである LCP と CLS（どちらも上述）、および First Input Delay（FID）をレポートしてくれるためです。FID は、ユーザーが最初にページとインタラクションした際に、ブラウザがイベントハンドラを処理するまでの遅延を測定します。FID はページの応答性とインタラクティブ性を測定するもので、100 ミリ秒以下の場合は「良好」と評価されます。なお、FID はイベント処理の「遅延」のみを計測しており、イベント処理時間そのものや、イベントハンドラを実行した後にブラウザがユーザーのインタラクションを更新するまでの時間は計測しません。新規訪問者がすぐにサイトにアクセスできるよう、FID 値は低くしておくことをお勧めします。これらの新しいコアウェブバイタル指標の詳細については、こちらのガイドをご覧ください。
Wix のサイト速度ダッシュボード
Wix のサイト速度ダッシュボードは、フィールドデータとラボデータの両方に基づいて総合的なサイト速度の指標を示すものです。一番上のセクションには、サイト訪問者が体験する実際の読み込み時間が表示されます。これは TTI（Time To Interactive）と呼ばれるもので、クリック、タイピング、タップなどのユーザー入力にサイトが反応するまでの時間を表します。
また、ページごとの読み込み速度をチェックしたり、同じカテゴリーや地域の他のサイトと比較したりすることもできます。サイトのパフォーマンスを最適化する際、これらの変更が TTI にどのような影響を与えるかを知りたい場合は、「一定期間での速度」セクションで最近の傾向をご確認ください。
一番下のセクションでは、PageSpeed Insights でサイトの速度をテストしたり、PageSpeed スコアの履歴を見たりすることができます。コンテンツを最適化してパフォーマンスを向上させるたびに「もう一度テストする」ボタンをクリックすることで、サイトのダッシュボードから直接最新の結果を確認できます。
So, what can you do with all these stats?
PageSpeed Insights の測定結果
サイトのパフォーマンスを確認する
サイトのパフォーマンスを
向上させる方法
パフォーマンスデータと、それがサイトのユーザーエクスペリエンスにとってどのような意味を持つのかを理解したところで、早速その知識を活用してみましょう。サイトのパフォーマンスを向上させる最も簡単な方法の 1 つは、サイトから複雑な要素をなくすことです。以下のような要素を見直し、調整することで、サイトのパフォーマンス向上が見込めます。
-
メディア — 画像や動画を過度に使用すると、特に初期ビューポート（ページの最初に表示される領域）では、サイトのパフォーマンスが低下します。可能であれば、（PNG の代わりに）より読み込みの速い JPG や、SVG のロゴやイラスト（過剰に使用しない限り、JPG よりもさらに読み込みが速い）を使用することをお勧めします。また、GIF（サイズが大きくなる可能性があります）の使用は避け、オーディオやビデオをサイトに掲載する場合は、Wix サイトで最適なパフォーマンスが得られるよう設計された内蔵の Wix ビデオプレーヤーを使用してください。
-
フォント — テキストを表示する際には、フォントデータのダウンロードが必要になることがよくあります。このような場合、特に多数のフォントを使用している場合はフォントの表示が遅れます。1 ページに表示するフォントの数は 3 ～ 4 種類に抑えることをお勧めします。
-
ページの高さ — ページの高さは、訪問者がページ全体を見るためにスクロールしなければならない画面の数で決まります。モバイルの場合、画面が長いとエクスペリエンスは低下します。ユーザーにとって、デバイス上で多くの画面をスクロールするのが良い体験とは言えないためです。また、長すぎるページには多くのコンテンツが含まれている傾向があり、結果として読み込み時間が長くなるためページの一番下までスクロールせずに訪問者が離脱する可能性だってあります。パフォーマンスを向上させるために、ページが長い場合はいくつかの短いページに分割することを検討しましょう。
パフォーマンスをまず確認してから不要な要素を調整・削除するのは手間がかかるように思えますが、こうして訪問者の満足度を高め、より長い時間サイトに滞在してもらうことで最終的にコンバージョン率が高まります。
サイトのパフォーマンスを向上させる方法
Conclusion
Many agencies aren’t upselling soon enough. And they’re risking premature customer churn because of it.
Knowing when to upsell a client can feel more art than science, but a study by Vendasta claims to have found the perfect time to expand your relationship with a client: 3 months.
Ninety days may seem like a short timeline to start upselling, but if a client is satisfied with your work in that time period then upselling can bring them more value quicker than they expected. Alternatively, if they’re not satisfied, it gives you a chance to recalibrate so you can keep their business. Both of those scenarios result in additional revenue you would have missed out on had you not initiated the conversation.
Upsells are easier to approach and able to start earlier than most agencies realize. Here are four critical steps that will help you upsell sooner successfully.
次のステップ：サイトの最適化
この記事でサイトのパフォーマンスの基礎を理解したら、次に Web サイトの最適化でより良いパフォーマンスを上げるコツについて学びましょう。ご自身のサイトで実装できるさまざまなヒントやコツをブログで紹介しています。また、コアウェブバイタルについての完全ガイドもご覧ください。
Dan は、Wix でホスティングされているすべてのサイトをスピード面で最適化することを目標として日々業務に取り組んでいます。25 年以上のソフトウェア開発経験を持ち、マルチユーザーゲームからミサイル軌道シミュレーションまでさまざまなシステムに携わってきました。また、コンピューターサイエンスの修士号を持ち、テックカンファレンスでの講演や、JavaScript Jabber ポッドキャストのパネリスト、Google Chrome Advisory Board（CAB）のメンバーとしても活躍しています。
ライター：Dan Shappir
Wix.com パフォーマンス技術責任者
参考記事
Learn More
Check out our blog post about how to optimize your site for better performance, filled with tips and tricks you can implement on your website. And to learn more about Core Web Vitals, read our in-depth guide.
Author: Dan Shappir
Dan focuses on optimizing all sites hosted on Wix for speed. With over 25 years of software development experience, Dan has worked on systems ranging from multi-user games to missile trajectory simulations. He is a frequent speaker at technical conferences, a panelist on the JavaScript Jabber podcast, and a member of the Google Chrome Advisory Board (CAB). Dan holds an M.Sc. in Computer Science.