知っておくべきHTML最適化テクニック

Web ページのパフォーマンスを向上させるために、多くの開発者は、JavaScript、画像の最適化、サーバー構成、ファイルの圧縮、CSS の調整など、複数の側面から始めます。

HTML は Web インターフェイスの開発に必要なコア言語であるにもかかわらず、ボトルネックに達していることは明らかです。 HTMLページの負荷も重くなってきています。ほとんどのページには平均 40K のスペースが必要です。大規模な Web サイトには数千の HTML 要素が含まれる場合があり、ページサイズはさらに大きくなります。

HTML コードの複雑さとページ要素の数を効果的に減らすにはどうすればよいでしょうか。この記事では主にこの問題を解決し、簡潔で明確な HTML コードの書き方をさまざまな観点から紹介します。これにより、ページの読み込みが高速化され、複数のデバイスで適切に実行されるようになります。

設計および開発プロセスでは、次の原則に従う必要があります。

構造の分離: コンテンツのスタイル設定ではなく、構造の追加に HTML を使用します。
クリーンな状態を保つ: ワークフローにコード検証ツールを追加し、ツールやスタイルガイドを使用してコードの構造と形式を維持します。新しい言語を学ぶ: 要素の構造とセマンティックマークアップを正しくします。
アクセシビリティを確保する: ARIA 属性や Fallback 属性などを使用します。テスト: エミュレーターやパフォーマンスツールを使用して、Web サイトが複数のデバイスで適切に実行されるようにします。

HTML、CSS、JavaScriptの関係

HTML は、Web ページの構造とコンテンツを調整するために使用されるマークアップ言語です。 HTML を使用してスタイルコンテンツを変更したり、head タグにテキストコンテンツを入力したりすることはできません。そのため、コードが長く複雑になります。代わりに、CSS を使用してレイアウト要素と外観を変更する方が適切です。 HTML 要素のデフォルトの外観は、ブラウザのデフォルトのスタイルシートによって定義されます。たとえば、Chrome では、h1 タグ要素は 32 px の Times 太字でレンダリングされます。

3 つの一般的な設計ルール:

HTML を使用してページ構造を構築し、CSS を使用してページの表示を変更し、JavaScript を使用してページ機能を実装します。 CSS ZenGarden は動作分離の優れた例です。
CSS または JavaScript を使用して実現できる場合は、HTML コードを少なくしてください。
CSS ファイルと JavaScript ファイルを HTML とは別に保存します。これはキャッシュとデバッグに役立ちます。

ドキュメント構造は次のように最適化することもできます。

1. HTML5 ドキュメントタイプを使用します。以下は空のファイルです。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html >
<html>
<ヘッド>
< title >レシピ: ペスト</ title >
</ヘッド>
<本文>
< h1 >ペスト</ h1 >
< p >ペストは美味しいです！ </ p >
</本文>
</html>

2. ドキュメントの先頭で CSS ファイルを次のように参照します。

XML/HTML コードコンテンツをクリップボードにコピー

<ヘッド>
< title >私のペストレシピ</ title >
<リンク rel = "スタイルシート" href = "/css/global.css" >
<リンク rel = "スタイルシート" href = "css/local.css" >
</ヘッド>

どちらの方法でも、ブラウザは HTML コードを解析する前に CSS 情報を準備します。したがって、ページの読み込みパフォーマンスの向上に役立ちます。

ページの下部にある body 終了タグの前に JavaScript コードを入力すると、ブラウザが JavaScript コードを解析する前にページを読み込むため、ページの読み込みが高速化されます。JavaScript を使用すると、ページ要素に良い影響が及びます。

XML/HTML コードコンテンツをクリップボードにコピー

<本文>
...
<スクリプト src = "/js/global.js" >
<スクリプト src = "js/local.js" >
</本文>

Defer 属性と async 属性を使用すると、async 属性を持つスクリプト要素が順番に実行されることは保証されません。

ハンドラーは JavaScript コードに追加できます。次のコードのような HTML インラインコードには絶対に追加しないでください。エラーが発生しやすく、保守が困難になります。

インデックス.html:

XML/HTML コードコンテンツをクリップボードにコピー

<ヘッド>
...
<スクリプト src = "js/local.js" >
</ヘッド>
<本文 onload = "init()" >
...
<ボタン onclick = "handleFoo()" > Foo </ button >
...
</本文>

次の方が良いです:

インデックス.html:

XML/HTML コードコンテンツをクリップボードにコピー

<ヘッド>
...
</ヘッド>
<本文>
...
<ボタン id = "foo" > Foo </ボタン>
...
<スクリプト src = "js/local.js" >
</本文>

js/local.js:

JavaScriptコードコンテンツをクリップボードにコピー

初期化();
var fooButton =
document.querySelector( '#foo' );
fooButton.onclick = handleFoo();

確認する

Web ページを最適化する 1 つの方法は、ブラウザーが不正な HTML コードを処理できるようにすることです。正当な HTML コードはデバッグが容易で、メモリの使用量が少なく、リソースの消費量が少なく、解析とレンダリングが容易で、実行速度が速くなります。不正な HTML コードにより、レスポンシブデザインの実装が非常に困難になります。

テンプレートを使用する場合、HTML コードの合法性は非常に重要です。テンプレートは単独では問題なく動作しますが、他のモジュールと統合するとさまざまなエラーが報告されることがよくあります。したがって、HTML コードの品質を保証する必要があります。次の対策を講じることができます。

ワークフローに検証を追加します。HTMLHint や SublineLinter などの検証プラグインを使用して、コーディングエラーを検出します。
HTML5 ドキュメントタイプを使用すると、HTML 階層の維持が容易になり、左開き状態での要素のネストが回避されます。
各要素に必ず終了タグを追加してください。
不要なコードを削除します。自己終了要素に終了タグを追加する必要はありません。ブール属性には値を割り当てる必要はなく、存在する場合は True になります。

コード形式

形式の一貫性により、HTML コードの読み取り、理解、最適化、デバッグが容易になります。

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

セマンティクスとは意味が関連している事柄を指し、HTML はページコンテンツのセマンティクスに反映されています。つまり、要素や属性の命名によって、コンテンツの役割や機能がある程度表現されます。 HTML5 では、<header>、<footer>、<nav> などの新しいセマンティック要素が導入されています。

適切な要素を選択してコードを記述すると、読みやすくなることが保証されます。

タイトルを示すには <h1> (<h2>、<h3>…) を使用し、リストを実装するには <ul> または <ol> を使用します。
<article> タグを使用する前に <h1> タグを追加する必要があることに注意してください。
<header>、<footer>、<nav>、<aside> などの適切な HTML5 セマンティック要素を選択します。
本文を説明するには <p> を使用します。HTML5 のセマンティック要素はコンテンツを形成できますが、その逆はできません。
<i> タグと <b> タグの代わりに <em> タグと <strong> タグを使用します。
検証を強制するには、<label> 要素、入力タイプ、プレースホルダー、その他の属性を使用します。
テキストを別の要素の子として要素と混在させると、レイアウトエラーが発生する可能性があります。

例えば：

XML/HTML コードコンテンツをクリップボードにコピー

< div >名前: <入力タイプ= "テキスト" id = "名前" > </ div >

別の方法で書いた方が良いでしょう:

1: <div>
2: <label for="name">名前:</label><input type="text" id="name">
3: </div>

レイアウト

HTML コードのパフォーマンスを向上させるには、HTML コードはスタイルではなく機能性を重視して設計するという原則に従ってください。

<p> 要素はレイアウトではなくテキストの装飾に使用します。デフォルトでは、<p> によって自動的に余白が提供され、他のスタイルもブラウザーによってデフォルトで提供されます。
行を区切るために <br> を使用しないでください。代わりにブロック要素または CSS 表示プロパティを使用してください。
水平線を追加するのに <hr> を使用しないでください。代わりに CSS border-bottom を使用してください。
重要な瞬間でない限り、div タグを使用しないでください。
レイアウトにはできるだけ少ないテーブルを使用するようにしてください。
Flex Boxをもっと活用できる
CSSを使用して余白などを調整します。

この記事は HTML の最適化に関するものですが、CSS を使用するための基本的なスキルもいくつか紹介します。