多くのWeb制作者はパフォーマンスというと、JavaScriptや画像の最適化、サーバーの設定、CSSなどのファイルの圧縮や結合を検討します。そして、Webページのコアとなる言語にも関わらず、HTMLは無視されがちです。

HTMLは単に複雑さと要素の数を減らすだけでは、パースにかかる時間をあまり改善することはできません。しかしよく作られたHTMLはページを素早くロードするための決定的な土台になり、異なるビューポートサイズに対応するレイアウトになります。
さまざまなデバイスに対して素早くロードし、うまくいくコンテンツを作ることができるクリーンで簡潔なHTMLのコードを紹介します。

High performance HTML

下記は各ポイントを意訳したものです。
著者のSam Dutton氏は、Google ChromeのDeveloper Advocateをされています。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• 要約
• HTML, CSSとJavaScript
• ドキュメントの構造
• バリデーション
• コードのフォーマット
• セマンティックなマークアップ
• レイアウト
• HTML Eメール
• CSS
• アクセシビリティ
• ボーナスの提案
• 最後に

要約

• 別の用途で使わない

  HTMLは構造を加えるために使う、コンテンツのスタイルのためには使わない。

• クリーンにしておく

  ワークフローにコードのバリデーションを加えてください。

• 整然としておく

  一貫したコードの構造とフォーマットを維持するためにツールやスタイルガイドを使う。

• 言語を学ぶ

  エレメントの構造やセマンティックなマークアップを身につける。

• アクセシビリティを保証する

  aria属性やrole属性を加え、ページをアクセシブルにする。

• テスト

  エミュレータやパフォーマンスツールを使い、さまざまなデバイス・スクリーンサイズであなたのサイトをテストする。

大きい画像は、こちら。

• High performance HTML (オリジナル)
• High performance HTML (翻訳版)

HTML, CSSとJavaScript

HTMLはコンテンツに構造と意味を加えるマークアップ言語です。

HTMLはコンテンツにスタイルを加えるために使われるべきではありません。例えば文字を目立たせたいために、blockquotes要素を使ったりしないでください。その代わり、要素のレイアウトや見た目はCSSで指定します。

参考

HTMLのデフォルトの見た目は、ブラウザのデフォルトのスタイルシートに定義されています。各ブラウザのスタイルシートは、「revert.css」を参考にしてください。例えば、Chromeではh1要素は32pxのボールドで表示されます。

3つの一般的な原則

• HTMLは構造のために、CSSはレイアウトや見た目、JavaScriptは振る舞いや動きに使ってください。
• まずはHTMLを使い、それから必要ならCSSを使い、もし本当に必要ならJavaScriptを使うことを考えてください。例えば多くの場合、フォームのバリデーションのためにはHTML、そしてCSSで可能です。
• CSSとJavaScriptはHTMLから独立したファイルに記述してください。これはそれらのファイルをキャッシュすることを可能にし、コードをデバッグする際も容易になります。最終的にはCSSやJavaScriptはミニファイして利用することができます。

ドキュメントの構造

• HTML5の基本的なドキュメントの構造です。
  [html]
  
  
  
  
  
  

  Pesto

  Pesto is good!

  
  
  [/html]

• head要素内に、CSSファイルへのリンクを記述します。
  これが意味することは、HTMLを解析する前にブラウザがCSSを読み込むということです。
  [html]
  
  
  
  [/html]
• JavaScriptファイルはページの一番下、</body>の前に記述します。ここに記述することで、ブラウザがJavaScriptを解析する前にページのレンダリングをすることができ、ロード時間を速めます。またJavaScriptがページ内の要素を参照するのに役立つ副作用もあります。
  [html]
  
  ...
  コンテンツ
  ...