COVID-19 下でも、誰もがウェブサイトにアクセスできるようにします

ウェブサイトのコア機能が常に利用可能で、アクセスしやすく、安全で、使いやすく、見つけやすく、高速になるようにする方法。

このページでは、誰もがいつでもウェブサイトを利用可能で、アクセスでき、安全で、使いやすいようにするためのガイダンスを提供します。

このページのガイダンスは、COVID-19（新型コロナウイルス感染症）の感染拡大が続く中、人々の安全を守るウェブサイトをサポートすることに短期的な焦点を移している Google 内の部門横断的なチームによるものです。そうした Google 社員は、重要な情報を探しているユーザーの多くがウェブをほとんど、あるいはまったく使用したことがないユーザーによって、サイトの需要がかつてないほど増加していることに気づいています。この期間中、サイトの可用性を確保し、すべての人がアクセスできるようにすることは容易ではありません。

ガイダンス

可用性、信頼性、復元力、安定性

サイトのトラフィックが急増して失敗する場合、またはサイトの失敗を回避したい場合は、以下のガイダンスに従うことで、問題を迅速に修正したり、重大な問題になる前に検出したりできます。

  • トラフィックの急増の問題を検出、軽減、防止する方法については、過負荷状態のサーバーを修正するをご覧ください。
  • 不要な画像、動画、スクリプト、フォントを削除します。各ページにおいて、サイトを利用するユーザーにとって本当に必要としている機能を提供することに重点を置いてください。
  • 画像を最適化すると、サーバーの帯域幅の使用量を大幅に削減できます。これは、ウェブ上で肥大化させる最大の要因は画像であるためです。
  • 可能な限り多くの静的コンテンツを CDN にオフロードします。一般的なプロバイダの詳細: AWS、Azure、Cloudflare、Google Cloud、Firebase。
  • 動的画像圧縮、テキスト圧縮、JS リソースや CSS リソースの自動圧縮など、簡単に有効にできる最適化が CDN にあるかどうかを確認します。
  • HTTP キャッシュを最適化すると、最小限のコード変更で、サーバーに対する要求を大幅に削減できます。概要については HTTP キャッシュ: 防御の最前線をご覧ください。具体的な推奨事項については、HTTP キャッシュとキャッシュのベスト プラクティスをご覧ください。Lighthouse の「効率的なキャッシュ ポリシーを使用して静的アセットを提供する」の監査を使用すると、キャッシュに保存されていないリソースをすばやく検出できます。リソースの種類によって鮮度の要件が異なるため、必要なキャッシュ戦略も異なります。
  • Service Worker を使用すると、サーバーに対する需要を大幅に減らすことができますが、多額の技術投資が必要になる場合があります。また、ウェブサイトをオフラインで機能させることで、インターネットに接続していないユーザーに営業時間や電話番号などの情報を表示できます。Workbox は、多くのボイラープレートを自動化し、ベスト プラクティスへの準拠が容易になり、低レベルの ServiceWorker API を直接使用した場合によく見受けられる軽微なバグを防ぐことができるため、ウェブサイトに Service Worker を追加するために推奨されるアプローチです。
  • サイトの利用が大幅に増えている場合は、DDoS 攻撃に対する保護が適切に行われているかを確認します。これは、サイトがより魅力的な標的になっている可能性があるためです。一般的なプロバイダの詳細: AWS、Azure、Cloudflare、Google Cloud。

詳しくは、ネットワークの信頼性をご覧ください。

ユーザー補助

さまざまなニーズを持つ人々がサイトにアクセスする人が増えているため、ユーザー補助を重視することがこれまで以上に重要になっています。以下のガイドラインを遵守して、ウェブサイトのコア機能に誰でもアクセスできるようにします。

  • ユーザー補助はチームの取り組みであり、誰もが果たすべき役割を持っています。まず、Google のユーザー補助機能ガイドと米国デジタル サービスのチームガイドをご覧ください。このガイドでは、各チームメンバー（プロダクト マネージャー、エンジニア、デザイナー、QA など）が行えることについて説明します。
  • ユーザー補助の審査を行って、役に立った点と改善が必要な点を確認します。WAVE ブラウザ拡張機能は、サイトの手動によるユーザー補助の監査に役立ちます。
  • ユーザー補助ガイドに目を通し、キーボード ナビゲーションやスクリーン リーダーのサポートなど、特定のトピックについての理解を深める。
  • Lighthouse の監査を実行して、ユーザー補助機能に関する一般的な問題を確認します。このレポートには、サイトの操作性を高めるために実施できる手動チェックのリストも表示されます。なお、ユーザー補助スコアが 100 であっても、サイトにアクセスできることが保証されるわけではありません。Lighthouse では自動化された方法ではテストできない重要な問題が多数存在するため、手動での審査を行うことも重要です。その他の自動監査ツールには、WAVE API や AXE 拡張機能があります。
  • egghead.io の「Start Building Accessible Web Applications Today」コースを修了するか、Udacity の「Web Accessibility」コースを参照してください。
  • 特定のユーザー補助トピックに関するヒントについては、A11ycast 再生リストをご覧ください。

ID、セキュリティ、プライバシー

重要な修正をすぐに見つけ出したくなるかもしれませんが、セキュリティの穴を開けないように常に注意してください。ユーザーは、極めてプライベートなトピックのコンテンツにアクセスする必要があります。ウェブサイトは、こうした機密性の高いユーザーデータを常に保護し、個人情報（PII）が安全であることをユーザーに説得する必要があります。

詳しくは、Google Nest と Google Pixel 8 の安全な使い方をご覧ください。

ユーザビリティ、UI、UX

基本的なニーズを満たすためにウェブにますます依存するようになっています。こうしたユーザーの多くはウェブを あまり利用しませんサイトのコア機能のユーザビリティを監査し、できるだけシンプルで使いやすいものにすることは重要です。

  • ウェブサイトの上部に、サービスの最新情報を明確に伝えるバナー（X ボタンで削除可能）を追加することを検討してください。バナーには行動を促すフレーズを使用して、より具体的なリソースにユーザーを誘導します。他のページ コンテンツより目立つように、独自の色やフォントを使用することを検討してください。共感を示し、人々のニーズに焦点を当て、どのようなサービスが期待されるかについて透明性のある文章を作成してください。
  • クリティカル ユーザー ジャーニー（CUJ）における物理的なインタラクションを最小限に抑える機会を探し、それらの変更をプロダクト チームに提案します。たとえば、通常、配達サービスで署名が必要な場合は、それを回避する方法があるかどうかを検討します。
  • CUJ が可能な限りシンプルで直感的であることを再確認し、改善の余地があればプロダクト チームに変更を提案してください。
  • 優れたモバイル設計の原則を確認し、さまざまなモバイル デバイスで CUJ を試して、明白な問題がないことを確認します。ウェブを頻繁に使用せず、突然ウェブに頼る必要に迫られたユーザーは、おそらくモバイル デバイスからサイトにアクセスしています。
  • サイトをリファクタリングして、可能な限りレスポンシブ デザイン パターンを使用するようにします。
  • フォームを効率的で優れたデザインにしましょう。

SEO

ユーザーは健康や仕事に関連する重要な情報を求めています。サイトがすべての検索エンジンから見つかるようにすることが重要です。基本的な問題を検出するには、Lighthouse の SEO 監査をご利用ください。 最新のガイダンスやアップデートについては、検索エンジンの公式ブログ（Google、Bing、Baidu、DuckDuckGo、Yandex）をフォローしてください。COVID-19 関連の最近の投稿:

詳しくは、見つけやすいをご覧ください。

パフォーマンス

一部の ISP（インドなど）では、家庭のインターネット使用量が急激に増加しており、需要の増加に対応するインフラストラクチャがありません。このような場合は、お客様自身の原因でなくても、ウェブサイトの速度が遅くなっている可能性があります。負荷のパフォーマンスを最適化することで、帯域幅の減少に伴う逆風を相殺できる可能性があります。つまり、ページを読み込むためにネットワーク経由で送信する必要があるバイト数を減らすことで、帯域幅の縮小によるパフォーマンスへの影響を相殺できます。

  • 画像はウェブ上で肥大化させる最大の原因です。画像を最適化することで、ウェブサイトの帯域幅の使用量を大幅に削減できる場合があります。Squoosh は、画像をすばやく圧縮するのに役立つオープンソースのシンプルな画像圧縮ツールです。
  • WebPageTest または Lighthouse を実行して、パフォーマンス向上が見込める要素を特定します。
  • テキスト圧縮を有効にして、テキスト リソースのネットワーク サイズを縮小します。多くの場合、これは最小限の技術投資で容易にパフォーマンスを向上できます。
  • 他部門と連携し、他の部門から賛同を得る方法については、部門横断的なウェブサイトの速度の修正をご覧ください。
  • 画像に標準化された遅延読み込みを使用して、実際には表示されない画像のリクエストを最小限に抑えます。ブラウザの互換性は 100% ではありませんが、段階的な機能強化として考えることができます。つまり、特定のブラウザが標準化された遅延読み込みをサポートしていない場合、画像は通常どおりに読み込まれます。
  • より非同期で読み込める A/B テストやパーソナライズのスクリプトがサイトに含まれているか、無効にできる重要でない機能がスクリプトに含まれているかどうかを確認します。通常、A/B テストとパーソナライズのスクリプトは、ページ コンテンツの読み込み前に実行する必要があるため、非同期で完全に読み込むことはできません。ただし、スクリプトの一部は非同期で読み込むこともできます。クリティカル レンダリング パスを参照して、同期スクリプト（レンダリング ブロック スクリプトとも呼ばれる）の一般的なトレードオフとページ読み込み時間の基本的なトレードオフを理解し、レンダリング ブロック スクリプトをページの読み込み時間より優先するか、またはその逆にするかを決定します。
  • サードパーティのコードは、ほとんどのウェブサイトで全リクエストの約半分を占めています。サイトの運営に不可欠ではないサードパーティのコードをoptimizingするか、一時的に削除または無効化することを検討してください。
  • 機能リリースの優先度が下がっている場合は、これをクリーンアップするのに最適なタイミングである可能性があります。タグ マネージャーからタグを削除し、肥大化した CSS と JS をクリーンアップして、サポートが終了した機能やコードを削除します。Chrome DevTools の [Coverage] タブと Puppeteer の Coverage クラスが、未使用のコードの検出に役立ちます。

詳しくは、読み込み時間が速いをご覧ください。

ヒーロー画像（NASA、Unsplash）