HTMLの最適化

HTML最適化(回転)
前段の分野では、JavascriptやCSSの最適化が注目されてきたが、圧縮最適化ツールも豊富で、HTML最適化への関心は相対的に冷淡だった.Steve Soudersの大作「Even Faster Web Sites」では、Javascriptのロード、CSSセレクタ、ピクチャ最適化、gzip、iframe問題など、多くの有効なフロントエンド最適化方法について言及していますが、HTML最適化については詳しくは説明していません.フロントエンド全体の構成では、HTMLは不可欠な一部であり、本格的な展示「フロントエンド」である.しばしば十数KのJavascriptと比較して、HTMLのサイズはページリソース全体にあまり比重を占めず、Gzipもあるが、多くのページには圧縮の余地があり、Gzip後でも大きな体積を減らすことができることが明らかになった.この事実は後続の文章で示され、本文は主にHTML最適化のいくつかの実行可能性とそれほど実行不可能に見える方法について議論する.
いろいろな最適化方法について、必ず分類をしなければならないなら、色で区別します.様々なページで適用され、無害な方法については、緑に分類します.対照的に、特定の場合にのみ適用されるか、または基準に反する方法はオレンジ色に分類される.

緑の方法

1.相対URLの使用
リンク、外部チェーンCSSのhref、外部チェーンJavascriptのsrc、ピクチャsrc、iframe srcなど、ページ内の様々なURLについて、現在のページと同じドメイン名の下にあると判断できれば、相対的なURLを使用することができ、各URLが少なくとも1つのドメイン名の長さを節約することができる.
2.HTTPまたはHTTPSの削除
絶対URLはいずれもHTTPやHTTPSなどのプロトコルヘッダで始まり、URLを特定できるプロトコルが現在のページURLのプロトコルと一致しているか、あるいはそのURLが複数のプロトコルの下で利用可能である場合、このプロトコルヘッダを削除することが考えられる.このようにするのは一部非主流であるが,事実は実行可能であることを証明し,理論的根拠もある(http://www.ietf.org/rfc/rfc2396.txt5.2節で説明する).Nexus Oneのこのページには、リソースを節約する目的ではないが、少なくともプロトコルヘッダの削除が可能であることを証明するリソースURLがあります.
CSSの場合、プロトコルヘッダをIE 7、IE 8の下に削除するとCSSが2回ダウンロードされるので注意が必要です.
3.コメントの削除
CSS、Javascriptと同様にHTMLのコメントを削除することで最適化も可能です.しかし、この点はHTMLにとって複雑であり、HTMLに特定の役割を果たす注釈が削除できないためである.
(a). IE条件コメント

   
   
   
   


    
    
    
    

      <!--[if expression]> HTML <![endif]—> 
    

   
   
   
   

このような構文では、expressionに準拠するブラウザのみがコンテンツを認識できます.
(b). CDATAコメント

/*  */

CDATA自体はXHTMLで必要ですが、CDATAの内容は特殊文字をエスケープする必要はありませんが、古いバージョンのブラウザと互換性があるため、エラーを回避するために注釈を付ける必要があります.しかし、このコメントに対して、あなたのページが本当にXHTML基準を使用していない場合は、大胆に削除することができます.XHTML規格を使用するのは簡単なDTD宣言ではなく、アプリケーション/xhtml+xmlのようなコンテンツフォーマットをサーバが割り当てることができるほか、ブラウザのサポートも必要であり、現在IEはXHTMLフォーマットをサポートしていない.そのため、現在あなたのページはXHTML仕様で書かれているかもしれませんが、HTMLで検証することもできますが、IEと互換性を持つにはHTML方式で展示されているに違いありません.このように,規格に従うために追加された多くのコンテンツは削除可能であり,具体的には後述するオレンジ色の部分で詳細に述べる.
(c). カスタムコメント
統計など、製品でカスタマイズされた特定の機能を持つコメント.
4.空白文字の圧縮
HTMLのほとんどのラベルでは、複数の空白文字が1つに圧縮されて表示されるので、余分な空白文字を削除することでHTMLボリュームを小さくすることができます.ただし、pre、textareaの空白文字はそのまま表示され、ラベル属性の属性値もそのまま表示されます.例えばtitle、valueなどです.
5.圧縮inline css&Javascript
inlineでもexternalでも圧縮が必要で、これは体積を減らす最も直接的な方法です.
6.CSS&Javascriptなるべく外部チェーン
外部チェーンCSSとJavascriptは、HTML自体のボリュームを小さくするだけでなく、ブラウザのキャッシュメカニズムを十分に利用できるので、CSS、Javascriptのコード量が一定ボリュームを超える場合は、できるだけ外部チェーンを利用します.それ以外に、onmouseover="xxxx"方式でイベントを登録することはできるだけ避け、メンテナンスにも不要な冗長コードが発生しやすい.
7.要素のデフォルト属性の削除
HTML仕様では、多くのHTML要素の属性にデフォルト値があり、これらのデフォルト値については消去して書かないことができますが、以下は不完全な統計です.
タブ
ツールバーの
デフォルト
style
media
screen
link
media
screen
form
method
get
form
input
type
text

オレンジの方法

オレンジ色の方法とは、標準に違反したり、ページに予想できない問題が発生したりする方法の一種であり、非常規則的な方法であるため、検索エンジンのトップページなどの非常規則的なページにも適用されます.
1.削除または置換
DOCTYPEはページの表示にとって非常に重要で、ブラウザは具体的なDOCTYPEによってどのようにページを表示するかを決定します.DOCTYPEを削除した後のページの表示に自信がない限り、簡単に削除しないでください.もう1つの実行可能な方法は、HTML 5の書き方を採用することである.すなわち、多くのブラウザは、このdoctypeの書き方を標準または準標準(Almost Standard)モードに解析することができるが、依然としていくつかの問題をもたらす.具体的には、ここを参照.現在、百度もGoogleもそうしています.
2.ラベル属性値の引用符を削除
引用符は必須ではありません.削除します.ここでは、属性値に引用符などを含めるなど、特殊な状況も考慮する必要があります.
(注意:XHTML仕様に合致しない)
3.属性値の一部を省略
たとえばdisabled、checked、multipleなどの値は省略できます.
(注意:XHTML仕様に合致しない)
4.オプションの閉じたラベルを削除
例えばbody、p、trなどのラベルは、ラベルを閉じていないことを可能にし、具体的にはここを参照する.
(注意:XHTML仕様に合致しない)
5.自動クローズラベルの「/」を削除
(注意:XHTML仕様に合致しない)

ツール

HTML最適化ツールは現在、Absolute HTML Compressorが理想的である、またPageSpeed 1である.6ではHTML圧縮機能も導入されているが,現在は4つの簡単な戦略しかなく,まだ実験的な段階にある.フロントエンドのパフォーマンスへの関心が高まるにつれて、HTMLの最適化や圧縮も発展するに違いありません.

まとめ

1.HTMLの最適化と圧縮の発展は先端の他の資源に遅れているが、現在もますます注目されている.
2.緑のルールの多くは、コードを書く過程で注意し、従うことができます.この最適化をコードに組み込むことができれば、効果はもっと良いはずです.
3.オレンジ色のルールは、いくつかの仕様に違反しているため、特定のページにのみ適用されます.
参考資料

HTML minify – to be or not to be?

Optimizing HTML

Optimizing Optimizing HTML