高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?

ほとんどの開発者は、JavaScript と画像、サーバー構成、ファイルの圧縮と連結、さらには CSS の調整 (小さな画像の結合) を通じて最適化を行います。

HTML は常に Web のコア言語であるにもかかわらず、貧弱な HTML は見過ごされがちです。

HTML はどんどん大きくなっています。上位 100 の Web サイトの HTML ページのほとんどは 40K 程度です。 Amazon と Yahoo は何千もの HTML ページを使用します。 youtube.com のメイン ページには 3,500 個の HTML 要素があります。

HTML の複雑さとページ上の要素の数を減らしても解析時間が大幅に短縮されるわけではありませんが、HTML はさまざまなデバイスに適応し成功に影響を与える高速な Web ページを構築する上で重要な要素です。
この記事では、読み込みが速く、複数のデバイスをサポートし、デバッグや保守が容易な Web サイトを作成できる、簡潔でわかりやすい HTML の書き方を学習します。

コード (特に HTML) を記述する方法は 1 つではありません。これは単なる一般的な経験であり、唯一の正しい選択ではありません。
HTML、CSS、JavaScript

HTML は、構造とコンテンツを表すために使用されるマークアップ言語です。

スタイルと外観を表示するために HTML を使用しないでください。単に「大きく」見せるためだけに見出しタグ (h1-h6) にテキストを書いたり、インデントのためだけに引用符を使用したりしないでください。代わりに、CSS を使用して要素の外観とレイアウトを変更します。

HTML 要素のデフォルトの外観は、ブラウザのデフォルトのスタイルによって実現されます。Firefox、Internet Explorer、Opera はすべて異なります。たとえば、Chrome では、デフォルトの h1 要素は 32 ピクセルのサイズでレンダリングされます。

3つの基本原則:

HTML は構造を表すために使用され、CSS はさまざまなスタイルとテーマを表現するために使用されます。ユーザーの操作に応答する JavaScript。

HTML を使用し、必要に応じて CSS と JavaScript を使用します。たとえば、多くの場合、検証には HTML フォームを使用し、アニメーションには CSS または SVG を使用します。

HTML コードから CSS と JavaScript を分離します。キャッシュを許可すると、コードのデバッグが容易になります。本番環境では、CSS と JavaScript を縮小して結合することができ、ビルド システムの一部にする必要があります。 注* JavaScriptビルド（コンパイル）システムコンペティションのドキュメント構造を参照

HTML5 ドキュメント タイプの使用:

ページの上部、たとえば head 要素で CSS ファイルを参照します。

こうすることで、ブラウザは乱雑なページレイアウトをレンダリングすることなく、HTML を解析する前にスタイルをプリロードできます。

本文を閉じる前に、ページの一番下に JavaScript を配置します。これにより、JavaScript が読み込まれる前にブラウザがページをレンダリングできるため、ページのレンダリング時間が長くなります。

JavaScript でイベント処理を追加します。 HTML に追加しないでください。これは維持するのが非常に困難です。たとえば、

これはずっと良いです:

有効なHTML

Web ページが成功する主な要因は、無効な HTML を処理できるブラウザの能力です。ブラウザには、無効なコードをレンダリングする方法に関する標準化されたルールもいくつかあります。

しかし、これはそれを手放すべき理由にはなりません。有効な HTML はデバッグが容易で、ファイルサイズが小さく、高速で、レンダリングが高速であるためリソースの消費も少なくなります。無効な HTML により、レスポンシブ デザインの実装が困難になります。

テンプレートを使用する場合は、有効な HTML を記述することが特に重要です。

BUILD システムで HTML を検証する: HTMLHint や SublimeLinter などの検証プラグインを使用して、HTML の構文をチェックします。

HTML5 doctype を使用します。

HTML 階層を維持するようにしてください。要素を正しくネストし、閉じられていない要素がないことを確認してください。デバッガーがコメントを追加するのに役立ちます。

自己終了しない要素の後には必ず終了タグを追加してください。たとえば、次のようになります。

しかし、次の書き方をすれば間違いを避け、段落の階層をより明確にすることができます。

<p>ペストは食べても美味しいです...</p>
<p>…そしてペストは簡単に作れます。</p>

項目要素 (li) は閉じる必要はなく、非常に賢いプログラマーはこれをこのように記述しますが、リスト要素 (ul) は閉じる必要があります。

注意しなければならないのは、ビデオとオーディオの要素です。それらは自己完結的ではありません:

逆に、不要なコードを削除することで、HTML ページはよりきれいになります。

img などの自己完結要素に「/」を追加する必要はありません。

プロパティを追加しない場合、プロパティを設定しても値はありません（この場合、自動的に再生されず、コントロールもありません）。

属性のないビデオ

次の2つがより良い

読みやすいですね

styletタグとscriptタグにはtype属性は必要ありません。デフォルトはcssとjavascriptです。

プロトコル アドレスを最適化することをお勧めします (http または https を削除すると、現在のプロトコルに従って自動的に構成されます)

読みやすさを向上させる（一目見ただけでタイトルのように見えるなど）

これはリンクのようなもの

<a href="/contact"><h2>お問い合わせ</h1></a>

小文字を使用する必要があります

大文字と小文字を混ぜると見た目がさらに悪くなります。

セマンティックマークアップ

「セマンティクス」とは意味に関連することを意味する

HTML は意味のあるコンテンツをマークアップする必要があります。つまり、要素は記述するコンテンツと一致する必要があります。

HTML5 では、<header>、<footer>、<nav> などの新しい「セマンティック要素」が導入されています。

適切なコンテンツに適切な要素を使用すると、アクセシビリティが向上します。

タイトルには<h1>、<h2>、<h3>、リストには<ul>または<ol>を使用します。

<article>のタイトルは<h1>で始まる必要があることに注意してください。

<header>、<footer>、<nav>、<aside> の使用

本文を書くには<p>を使用します

強調するには、<i> と <b> の代わりに <em> と <strong> を使用します。

フォームは<label>要素、入力タイプを使用します

テキストと要素を混在させるとレイアウトの問題が発生する可能性がある

それは次のように表現するのが最も適切である。

レイアウト

HTML はスタイルではなく意味に基づいて構造化する必要があります。

レイアウトではなくテキストに <p> 要素を使用します。

行を折り返すために <br> を使用することは避け、代わりにブロックレベル要素と CSS を使用してください。

水平区切り線 <hr> の使用は避けてください。 CSS 境界スタイルを使用して制御します。

不要な DIV を使用しないでください。 W3C では、DIV をソート順序の最後の要素として定義しています。

どの要素がブロックレベル要素であるかを認識し、不要なブロックレベル要素を DIV 内に配置しないようにしてください。 div 内にリストを配置する必要はありません。

レイアウトにテーブルを使用しないでください。

Flex ボックスは広く推奨されているので、可能であれば使用してください。

CSS のパディングとマージンを使用し、ボックス モデルを理解します。
CS

この投稿は HTML に関するものですが、ここでは基本的な CSS のヒントをいくつか紹介します。

インライン CSS は避けてください。パフォーマンス上の理由から、CSS は BUILD 時に Web ページに埋め込むことができます。

IDの重複を避けてください。

複数の要素にスタイルを適用する場合は、子要素ではなく親要素にクラスを使用することをお勧めします。

アクセシビリティ

セマンティック要素の使用

下位互換性を提供

リンクにタイトル属性を追加し、リンク テキストと同じコンテンツを使用しないようにします。

入力要素にタイプ属性とプレースホルダー属性を追加する