パフォーマンス向上のためのデザイン設計

4章マークアップ言語とスタイルの最適化

通常のサイトにおいて、画像はページ容量の大部分を構成していますが、それらの画像を呼び出し実際に表示させるHTMLやCSSも、やはりページの読み込み時間全体に影響を与えます。マークアップ言語の構造化と命名の方法を工夫することが、サイトのメンテナンス性とパフォーマンス性能の維持につながります。CSSとデザインパターンを意図的に体系化することによって、サイトの外観をその裏にある目的や流用性に焦点を当てることができるようになりますHTMLとCSSの両方を、クリーンで意義のある状態に保てば、サイトの読み込み速度、ひいては全体的なユーザエクスペリエンスが向上します。本章ではサイトのHTML、CSS、フォントやJavaScriptの読み込みに関するベストプラクティスをご紹介します。

4.1　HTMLのクリーンアップ

（余分な書式やタグのない）クリーンなHTMLは、ハイパフォーマンスなサイトの基盤となります。年数の長いサイトであるほど、複数のデザイナーや開発者がタグを追加するという問題を抱えがちですが、比較的新しいサイトであっても、埋め込みスタイルやインラインスタイル、未使用または不要な要素、命名が不完全なクラスやIDを見つけ出し、それらを取り除けば、パフォーマンスの向上につながります。

1章では、マークアップ言語とスタイルをクリーンアップするだけで、あるサイトのページの読み込み時間を半分に短縮できたという筆者自身の体験をご紹介しました。肥大化したHTMLやCSSの削除に徹底して取り組んだ結果、HTML、CSS、スタイルシート画像ファイルのサイズをそれぞれ縮小できたのです。

サイトのHTMLを調査する際は、次の点に注意しましょう。

• スタイルシートに移動させる必要のある埋め込みスタイルまたはインラインスタイルがないか ...