Web サイトの最適化でより良いパフォーマンスを上げるコツ
Web サイトのパフォーマンスは、オンラインのユーザージャーニーにおいて重要な役割を果たします。パフォーマンスの高いサイトはオンラインでの競争力を高め、リピーターを増やすことでブランド認知度の底上げに貢献します。また、読み込み時間が短いサイトはエンゲージメントが高く、訪問者の滞在時間も長くなるため、結果として売上や利益の増加につながります。
優れたユーザーエクスペリエンスを実現するためには、サイトのパフォーマンスを常に最適化する必要があります。Google の新しいパフォーマンス指標であるコアウェブバイタル（CWV）が登場した今は、サイトの最適化に取り組む絶好の機会です。
CWV の指標は、ページの読み込み速度に影響を与える 3 つのサイト要素を評価することで、パフォーマンスの測定とモニタリングを簡素化します。この指標が重要視されている理由は、Google がこのコアウェブバイタルを検索アルゴリズムに組み込んでいるためです。つまり、これらの指標は、世界最大の検索エンジンであなたのサイトがどう順位付けされるかに大きく影響する可能性があるのです。
Wix では、ユーザーのサイトの読み込みと動作をできる限り高速化するよう常にソフトウェアを更新し、インフラを改善するよう努めています。しかし、アプリ、デザイン機能、メディアなど、サイトのパフォーマンスに貢献する要素は他にもたくさんあり、これらはあなた自身で最適化することができます。
この記事では、サイトのパフォーマンスに影響を与えるさまざまな要素について説明します。コアウェブバイタルが新たなパフォーマンス測定基準となる中で、その攻略のコツを掴んでサイトをさらに良いものにしていきましょう。
はじめに
サイト最適化のための最優先事項
このセクションでは、サイトのパフォーマンスを向上させるために自分自身に問いかけるべきことや、新たに発見可能なインサイトについてご説明します。
サイトの目的をクリアにする
Web サイトを最適化するにあたっては、まずサイトを通じて何を達成したいかを考えましょう。これにより、訪問者に感じてほしい体験や、サイトを閲覧する際にとってもらいたい行動をより明確にすることができます。
サイトのスピード状況を確認する
最適化を始める前に、サイトの読み込み時間をチェックして、遅延の発生原因を調べる必要があります。Wix アクセス解析に新しく追加されたサイト速度ダッシュボードでは、実際のユーザー行動の測定結果（フィールドデータと呼ばれます）に基づいて、サイトのパフォーマンスを簡単に確認することができます。また、PC とモバイルの双方について、ラボデータに基づく PageSpeed Insight のスコアも確認できます。
定期的にパフォーマンスをチェックすることで、サイトを正しい方向に導くために必要な洞察を得ることができます。
サイト訪問者（およびサイトの読み込み時間）について理解する
サイトのアクセス解析データを確認し、サイト訪問者の特徴を理解しましょう。 訪問者がネットワーク速度の遅い国に居住していたり、ローエンドのモバイル端末を使用していたりするかもしれません。もしそうであれば、サイト上で遅延につながっているいくつかの要素を最適化して、訪問者が使用しているネットワークやデバイスに関わらず最適な読み込み時間を確保できると良いでしょう。
サイトを最適化する前に
メディアの最適化で読み込み時間を短縮
写真、イラスト、動画は Web サイトをより魅力的にしてくれますが、同時にサイトの表示速度の低下につながる場合もあります。Wix サイトでは、表示時に画像や動画を自動で最適化してサイトの読み込みを高速化しています。低品質の画像プレースホルダー（LQIP）を使用したり、最初のビューポートから外れたメディアの読み込みを遅らせたり（遅延読み込み）することで、サイトのすばやくスムーズな読み込みを実現します。また、訪問者がページをスクロールすると、Wix は LQIP をより高品質なメディアに置き換え、読み込み時間を最適化します。
以下では、メディアを最適化してパフォーマンスを高めるための方法をいくつかご紹介します。
PNG ではなく JPG を使用する
JPG 画像は PNG に比べて最大 10 倍も小さいため、結果として読み込み速度が格段に速くなります。そのため、可能な場合は JPG を使用することをお勧めします。JPG でサポートされていない透過性が必要な場合や、高品質の画像が必要な場合は、PNG を使用してください。
図形、アイコン、ロゴには SVG を使用する
PNG や JPG は写真に適していますが、SVG は図形やロゴのようなイラストスタイルの要素に適しています。SVG は通常、PNG や JPG よりもはるかに小さく、HTML に直接埋め込まれるため読み込みも速くなります。また、SVG はどんなに拡大しても鮮明な画像を保つことができるため、写真以外の画像データにはできる限り SVG を使用するようにしましょう。
画像や PNG を使うのは、SVG が非常に複雑（例：ノルウェーの海岸線を描いた SVG で 250k 近くあるような場合など）で、レイアウト上の要素の寸法がかなり小さい場合のみにすることをお勧めします（特に、スクロールしなければ表示されない位置にある図形の場合）。
アニメーション GIF は避ける
アニメーションの利用は時に効果的ですが、アニメーション GIF は通常ファイルサイズが大きく、読み込み時間も長くなります。サイトにアニメーションを表示する場合は、代わりに動画を使用してください。動画はファイルサイズが小さく、完全にダウンロードされる前でもユーザーにコンテンツを見せることができます。GIF を使用するなら、シンプルなアニメーショングラフィックやロゴ、またはコンテンツのアニメーションが数フレームで、サイズが小さい（例：100 x 100 など）の場合のみに留めることをお勧めします。
ヒント：Wix の動画ボックスでパフォーマンスを向上させる
アニメーション GIF の代わりに動画ボックスを使用すると、YouTube や Vimeo などの外部ビデオプレーヤーよりも優れたパフォーマンスが得られます。
メディアの最適化
メディア利用時のその他の
ベストプラクティス
メディアを最適化してサイトのパフォーマンスを向上させる方は他にもあります。以下でそのいくつかをご紹介します。
可能な限り画像を組み合わせる
画像形式のオーバーレイを使用している場合は、画像を1枚の画像にまとめることで全体的なダウンロードサイズを縮小できます。また、この場合は透明度を上げる必要がないため、1 枚の JPG のみを使用してダウンロード時間を短縮することができます。
遅延読み込みで快適なサイト体験を提供
Wix は「遅延読み込み」を利用して、より速く、よりスムーズなローディングを実現しています。遅延読み込みとは、高解像度の画像を読み込む際、一時的にそれを低画質の LQIP に置き換える技術のことです。優先度の低い画像はページの下の方に移動させ、他の要素を完全に読み込む時間を確保することで、この遅延読み込みの効果を最適化できます。
大きな背景画像は分割して表示する
Web ページは何画面にもわたって表示されるため、大きな背景画像の読み込みを待つ間にユーザー側で遅延が生じてしまうことがあります。このような場合、大きな背景画像を1画面分程度の大きさで縦に分割して表示するとページの読み込みが速くなります。こうすることで、遅延読み込みによってページの読み込みも速くなり、ユーザーがスクロールを始めたときにのみ画像がダウンロードされます。
Wix ビデオプレーヤーでサイトのパフォーマンスを向上させる
YouTube や Vimeo など外部のビデオプレーヤーではなく、Wix に内蔵されている Wix ビデオプレーヤーを使用することで、サイトのパフォーマンスを向上させることができます。
背景画像と主画像の色を揃える
Wix サイトでは、ストライプやカラムなどの背景画像の色を設定することができます。この色は、部分的に透明な画像の背後や、画像が読み込まれる前などに表示されます。画像の主な色に合わせてこの背景色を選択することで、サイトの読み込み時にユーザーに違和感を与えないようにすることができます。
サイトで遅延読み込みを活用して、最適な読み込み時間を実現
メディア最適化のその他のアイデア
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.
テキストの最適化
一般的に、テキストの方が画像よりも早く読み込まれますが、サイトのテキストやフォントもさらに最適化することができます。
ファーストビューセクションにテキストを追加する
ファーストビュー（サイトを開いた際にスクロールしなくても表示される部分）にテキストを追加することで、訪問者はスクロールする前にサイトの概要について知ることができます。訪問者にサイトをもっと見たいと思ってもらえるように、魅力的かつアクションにつながる文章に仕上げましょう。この部分のテキストが適切でない、またはテキスト自体を追加していない場合は、訪問者がサイトから離脱してしまう可能性があります（テキストが表示されていないと「サイトが完全に読み込まれていない」という印象を与えてしまうかもしれません）。
フォントを制限する
フォント選びは楽しいものですが、あまりにも多くの種類、太さ、サイズのフォントを使用すると見栄えが悪くなったり、読みづらくなることに加えて、ページのパフォーマンスにも影響が生じます。多くの場合、フォントファイルをダウンロードしてはじめてテキストが表示されるため、複数のフォントファイルをダウンロードすることでページの読み込み時間が遅くなる可能性があります。そのため、ページ上のフォントのバリエーションは 5 種類以下に抑えることをお勧めします。
カスタムフォントのアップロードは一度のみ行う
カスタムフォントを使用する場合は、同じフォントを何度もアップロードしないよう注意しましょう。何度もアップロードを行うと同じページに同じフォントが何度もダウンロードされ、サイトのパフォーマンスに悪影響を与えたり、読み込み時間が遅くなる可能性があります。Wix エディタは、読み込み時間の高速化を重視して必要なカスタムフォントのアップロードを行うよう設計されています。
画像の中にテキストを入れない
テキストと画像を一体化させると、サイト訪問者に最大のインパクトを与えることができます。しかし、画像の中にテキストが入っていると、かえってサイトのパフォーマンスは低下します。検索エンジンやスクリーンリーダーは画像の中に埋め込まれたテキストを検出できませんし、ほとんどの場合、ピクセル化されて読みづらくなってしまいます。また、パフォーマンスの面でも、画像が完全に読み込まれるまでテキストは表示されません。
リヴィールアニメーションは控えめに使用する
リヴィールアニメーションは、訪問者に見てもらいたい重要なコンテンツを目立たせ、読み込み時により豊かなエクスペリエンスを演出できるエフェクトです。しかし、過度に使用するとやり過ぎ感が出てしまうほか、アニメーションが完了するまでテキストが読めなくなるため、読み込み時間も長くなります。そのため、リヴィールアニメーションはあくまで控えめに使用することをお勧めします。
強いコントラストを意識する
画像の上にテキストを使用する場合は、下地となる画像や背景色と強いコントラストをつけることを意識しましょう。こうすることで、画像が読み込まれる前でも訪問者にテキストを読んでもらうことができます。
サイトのファーストビューセクションの例
テキストの最適化
サイトの読み込み時間に
影響するその他の要素
サイトのパフォーマンスに関する問題がまだみられる場合は、以下のヒントを参考にしてサイトをさらに最適化しましょう。
サイトの複雑さとページの高さを検証する
ページの読みやすさを決める要素のひとつは「ページの高さ」です。サイトのページは掲載したいコンテンツの量に合わせて拡張されますが、掲載する内容が多ければ多いほどページは縦に長くなり、読み込みにも時間がかかります。ページが長すぎる場合は、特定のコンテンツをまとめていくつかの短いページに分割することを検討しましょう。
モバイル用にサイトを最適化する
モバイルエディタを使って、どのデバイスでもサイトが美しく見えるよう配慮しましょう。レイアウトを選択し、PC とモバイルで異なるコンテンツを追加する、重要度の低いコンテンツを非表示にする、ギャラリー、フィード、リピーターのアイテム数を減らすなどしてデザインを調整します。
iFrame、Google 広告、トラッキングツールがサイトに与える影響を理解する
iFrame（余分な HTML やその他のリソースをダウンロードします）や Google 広告などをサイトに統合すると、サイトのパフォーマンスに悪影響を与える可能性があります。iFrame の使用は控えめにし、Google 広告を使用する場合はすべてのボックスが表示されていることを確認してください。トラッキング＆アクセス解析（T&A）ツールもパフォーマンスを低下させる可能性があるため、サイト上での訪問者の動向を分析するために必要なものだけを使用しましょう。また、トラッキングピクセルを使用する前と後で（使用した場合と使用しなかった場合）、サイトのパフォーマンスをテストすることで、サイト読み込み時の体験に与える影響をより正確に評価することができます。
ライトボックスの使用を制限する
ライトボックスとは、メインページのコンテンツの上に表示されるポップアップウィンドウのことです。ライトボックスは、重要なメッセージやお知らせを表示するのに最適です。しかし、ページの読み込み時に自動的にポップアップ表示されるライトボックス（特に主要なコンテンツを表示するもの）を使用すると、そのコンテンツが表示されるまでに遅延が生じてしまいます。ライトボックスは、ビジネス名などのページの主要コンテンツではなく、特別セールなどの追加情報の表示のみに使用することを強くお勧めします。
まとめ
Google のコアウェブバイタルが検索アルゴリズムの一部として組み込まれるようになり、パフォーマンスの最適化を常に念頭に置く必要が出てきました。Wix では、パフォーマンス向上をサポートする最新技術を率先して取り入れることで、Wix でホスティングされている1億以上のサイトがいつでも最高のパフォーマンスを発揮できるよう、常に努力を続けています。
サイト最適化のヒント
Ready to learn more?
For an overview of website performance and to get your site up to speed, read our Intro to Performance article. Or to get a detailed understanding of 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.
パフォーマンスについて
もっと知ろう
Web サイトのパフォーマンスの概要と、サイトの読み込みを高速化するヒントは「パフォーマンス入門」の記事をお読みください。また、コアウェブバイタルについて詳しくまとめた完全ガイドはこちらをご覧ください。
Dan は、Wix でホスティングされているすべてのサイトをスピード面で最適化することを目標として日々業務に取り組んでいます。25 年以上のソフトウェア開発経験を持ち、マルチユーザーゲームからミサイル軌道シミュレーションまでさまざまなシステムに携わってきました。また、コンピューターサイエンスの修士号を持ち、テックカンファレンスでの講演や、JavaScript Jabber ポッドキャストのパネリスト、Google Chrome Advisory Board（CAB）のメンバーとしても活躍しています。
ライター：Dan Shappir
Wix.com パフォーマンス技術責任者
