知っておきたいHTML最適化のコツ

多くの開発者は、JavaScript、画像の最適化、サーバー設定、ファイル圧縮、CSSの調整など、ウェブページのパフォーマンスを向上させるために複数の分野に注目しています。

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

この記事では、HTMLコードの複雑さとページ要素の数をいかに効果的に減らすかという問題を取り上げ、読み込みが速く、複数のデバイスでうまく動作する簡潔で明確なHTMLコードをいかに書くかといういくつかの側面から解説しています。

設計・開発プロセスで必要な 以下の原則に従うこと。 :

• <フォント 構造的な分離：スタイル付きのコンテンツではなく、構造を追加するためにHTMLを使用する。
  整理整頓：ワークフローにコード検証ツールを追加し、ツールやスタイルウィザードを使用してコードの構造と書式を維持する。
  新しい言語を学ぶ：要素構造とセマンティックマークアップを取得する。
  アクセシビリティの確保：ARIA属性、Fallback属性の活用など。
  テストする エミュレータやパフォーマンスツールを使って、複数のデバイスでサイトが正常に動作するようにします。

HTML、CSS、JavaScript との関係は

HTMLは、ページの構造と内容を調整するために使用されるマークアップ言語です。HTMLは、スタイル付きコンテンツを変更したり、テキストコンテンツをヘッダタグに入力したりするために使用できず、コードが長く複雑になります。代わりに、CSSを使ってレイアウト要素や外観を変更することがより適切です。

一般的な3つのデザインルール

• <フォント HTMLでページの構造を構築し、CSSでページのレンダリングを変更し、JavaScriptでページの機能を実装します。css ZenGardenは、動作の分離をうまく示しています。
  CSSやJavaScriptで実装できる場合は、HTMLのコードを少なくする。
  CSSやJavaScriptのファイルは、HTMLとは別に保存する。これは、キャッシュやデバッグに役立ちます。 

また、文書構造は以下のように最適化することができます。

1. HTML5 の文書型を使用すると、以下は空の文書になります。

2. 文書冒頭のCSSファイルを以下のように参照します。

この2つの方法によって、ブラウザはHTMLコードを解析する前にCSS情報を準備する。そのため、ページのロードパフォーマンスが向上します。

JavaScriptのコードをページ下部のend-of-bodyタグの前に入力すると、ブラウザがJavaScriptのコードを解析する前にページを読み込み、JavaScriptを使用するとページ要素に良い影響を与えるため、ページの読み込み速度を向上させることができるのです。

Defer と async 属性を使用すると、async 属性を持つスクリプト要素は順次実行されることが保証されない。

ハンドラはJavaScriptのコードに追加することができますが、以下のようにHTMLのインラインコードに追加するとエラーが発生しやすく、メンテナンスも容易ではありません。

index.html。

次のような書き方がよいでしょう。

index.htmlを作成します。

js/local.jsを使用します。

バリデート

ウェブページを最適化する方法の1つに、ブラウザが不正なHTMLコードを処理することがあります。正規の HTML コードは、デバッグが容易で、メモリ使用量やリソース使用量が少なく、解析が容易で、レンダリングや実行速度も速くなります。不正なHTMLコードは、レスポンシブデザインの実装を信じられないほど困難にします。

テンプレートを使用する場合、合法的なHTMLコードは非常に重要です。テンプレート単体では問題なく動作していても、他のモジュールと統合すると様々なエラーが報告されることがよくありますので、以下の手順でHTMLコードの品質を確保するようにしてください。

• ワークフローにバリデーションを追加する。HTMLHintやSublineLinterなどの検証プラグインを使用すると、コードエラーを検出するのに役立ちます。
  HTML5のドキュメントタイプを使用する
  HTMLの階層構造を維持しやすいようにし、左開きの状態で要素が入れ子にならないようにする。
  各要素の終了タグを確実に追加する。
  不要なコードを削除する。自己閉鎖的な要素には終了タグを追加する必要はない。ブール属性に値を割り当てる必要はなく、存在すれば真となる。

コード形式

書式の統一により、HTML コードを読みやすく、理解しやすく、最適化しやすく、デバッグしやすくします。

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

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

適切な要素を選んでコードを書くことで、可読性を確保します。

• <フォント 見出しには <h1>(<h2>,<h3>...) を、リストには <ul> または <ol> を使用します。
  なお、<article>タグの使用は、<h1>タグを先行させることが必要です。
  header、footer、nav、asideなど、適切なHTML5セマンティック要素を選択する。
  本文を記述するために <p> を使用すると、HTML5 のセマンティック要素はコンテンツを形成でき、その逆は成り立ちません。
  タグの代わりに <em> と <strong> タグを使用します。
  要素、入力タイプ、プレースホルダー、その他の属性を使用して、強制的に検証を行う。
  テキストを要素に混ぜて他の要素の子にすると、レイアウトエラーになります。

例

違う書き方だともっと良い。

   1: <div>
   2: <label for="name">Name:</label><input type="text" id="name">.Name="/label>.Name="/lt;input type="text" id="name">
   3: </div>

レイアウト

HTMLコードのパフォーマンスを向上させるには、スタイルではなく機能を実現することを目的としたHTMLコードに従うことです。

• <フォント レイアウトではなく、テキストを変更するには <p> 要素を使用します。デフォルトでは <p> は自動的にエッジに提供され、他のスタイルもブラウザーのデフォルトで提供されます。
  ブロック要素やCSSの表示プロパティで置き換えることができる<br>ブランチの使用は避けてください。
  横線を入れるのに <hr> を使うのは避け、CSS border-bottom で代用する。
  divタグは重要なことまで使わないでください。
  テーブルはレイアウトのために控えめに使用します。
  Flex Boxをより頻繁に使用することができます
  CSSを使用して余白などを調整する。

CSS

この記事では、HTMLの最適化について説明していますが、CSSを使用するための基本的なスキルについては、以下のように説明されています。

• <フォント インラインCSSを避ける
  IDクラスの使用は1回まで
  クラスは、複数の要素が関与する場合に使用できます。

以上が、今回ご紹介したHTMLコードの最適化のコツです。高品質で高性能なウェブサイトは、多くの場合、細部へのこだわりに依存します