Web開発はこれまで、いくつもの明確な時代を経てきました。静的なHTMLページ、サーバーレンダリングされたアプリケーション、JavaScriptだけで完結するシングルページアプリケーションの台頭、そして今、シンプルさとスピードへと揺り戻す動きです。それぞれの時代は実際の課題を解決すると同時に新たな課題も生み出しており、現在はその前の時代の行き過ぎ――JavaScriptを送りすぎ、読み込みが遅すぎ、保守が難しくなりすぎたページ――を是正することによって、大きく特徴づけられています。
振り子はサーバーへと揺り戻る
ここ10年の大半において、支配的だったパターンはシングルページアプリケーションでした。ほぼ空白のHTMLページを、クライアント側でJavaScriptがすべて埋めていくというものです。これによりリッチでアプリのようなインタラクティブ性が可能になりましたが、実際のコストも伴いました。ページが使用可能になる前にダウンロードし実行しなければならない大きなJavaScriptバンドルは、パフォーマンスと検索での可視性の両方を損なっていたのです。
現在の世代のフレームワークは、「サーバーファースト」あるいは「アイランドアーキテクチャ」としばしば呼ばれるハイブリッドモデルへと移行しています。ページはデフォルトでサーバー上でレンダリングされ、完全な形で高速に届き、JavaScriptは本当にインタラクティブ性が必要な箇所にのみ選択的に追加されます。これはクライアントサイドのインタラクティブ性を否定するものではなく、それをより意図的に使うということです。JavaScriptを、どこにでも当てはめるデフォルトの選択肢としてではなく、意図的に費やすべきコストとして扱っているのです。
なぜパフォーマンスが技術指標だけでなくビジネス指標になったのか
かつてページ速度は純粋に技術的な関心事として扱われ、エンジニアは気にかけてもビジネス側のステークホルダーはあまり気にしないものでした。それが変わったのには、2つの具体的な理由があります。検索エンジンは今や実際の読み込みパフォーマンスをランキングの要因に組み込んでおり、速度はオーガニックな可視性に直接結びついています。また、読み込み時間の短縮がコンバージョン率の向上と直帰率の低下に直接つながることを示す相当量のデータが今や存在します。ほとんどの取引型サイトにとって、読み込み時間が1秒増えるごとに、測定可能な形で収益が失われるのです。
これにより、パフォーマンスへの配慮は開発プロセスのより早い段階へと押し上げられました。ローンチ後に最適化するのではなく、チームは最初からパフォーマンス予算を軸に設計するようになっています。
- デフォルトでブラウザへ送るJavaScriptを最小限に抑える。
- ページの重量に最も大きく寄与することが多い画像を、最適化し適切なサイズにする。
- 重要でないリソースは、一度にまとめてではなく、必要になったときにのみ読み込む。
- 高速なオフィスの接続環境だけでなく、現実世界のネットワーク条件に対してテストする。
静的コンテンツとエッジレンダリングの台頭
リクエストのたびに新たに構築するのではなく、事前にページを生成できる場合、そうすることは依然として優れたパフォーマンスを達成するための最も信頼できる方法のひとつです。デプロイ時にページを事前構築する静的サイト生成は大きく成熟し、サイト全体を再構築するのではなく特定のページを段階的に再生成する技術などを通じて、以前の世代よりもはるかに動的に感じられるコンテンツを扱えるようになっています。
これを補完するのがエッジレンダリングで、動的コンテンツを生成する作業を、訪問者に物理的に近いサーバーへと分散させ、すべてのリクエストを単一の集中型オリジンサーバーへルーティングすることに伴うレイテンシを削減します。これらのアプローチを組み合わせることで、本当に必要な場面での動的でパーソナライズされたコンテンツを犠牲にすることなく、サイトを瞬時に感じられるものにできます。
アクセシビリティとセマンティクスはもはやオプションではない
フレームワークが成熟するにつれ、アクセシビリティがどれほど真剣に扱われるかにも意味のある変化がありました。最終的なコンプライアンスチェックとしてではなく、最初からコンポーネントに組み込まれるデフォルトの考慮事項として扱われるようになっています。このシフトは、法的リスク、実際のユーザーニーズ、そしてアクセシブルなマークアップは検索エンジンがより効果的に解析できる、構造化され意味的に意味のあるマークアップである傾向があるという実際的な現実の組み合わせによって推進されています。
オプションではなく標準として扱われることがますます増えている実践には、次のようなものがあります。
- より具体的な要素が存在する場合は、汎用的なコンテナではなくセマンティックなHTML要素を使用する。
- マウスやタッチだけでなく、キーボードのみで完全な機能が利用できるようにする。
- テキスト以外のコンテンツに対して、意味のある代替テキストとラベルを提供する。
- ローンチ後ではなく、デザイン段階でアクセシビリティ基準に照らして色のコントラストをテストする。
今日構築するチームにとっての意味
今、ツールを選び、基準を定めるチームにとって、高速で保守しやすいサイトと、遅く壊れやすいサイトとを一貫して分ける原則がいくつかあります。デフォルトはサーバーレンダリングとし、クライアントサイドのインタラクティブ性は意図的に追加すること。パフォーマンスを、後から修正する問題としてではなく、開発を通じて守るべき予算として扱うこと。そしてアクセシビリティを後付けするのではなく、最初からコンポーネントに組み込むことです。
結論
現代のWeb開発は、新しい文脈の中で、古い教訓へと巡り戻ってきました。送るものを減らし、早くレンダリングし、複雑さはそのコストに見合う場合にのみ追加するということです。フレームワークやツールはかなり変わりましたが、根底にある規律――ユーザーの時間、デバイス、接続環境を尊重すること――こそが、デモでは印象的に見えるだけのサイトと、実際に優れたパフォーマンスを発揮するサイトとを分けているのです。