HTMLテクニック - ウェブ制作テクニック - テクニック

HTML高速化

HTMLの処理速度

HTMLも記述の仕方によっては処理速度が変わります。
できるだけスムーズに処理されるような正しくて効率的なコーディングを心がけてください。

コードの配置

一般的にJavaScriptは処理に時間がかかるため、ページの下部に配置するのが良いとされています。
ただし、アクセス解析は解析精度が落ちるので、精度と速度のどちらを重視するかで配置位置も変わります。
精度優先ならページの上部に配置し、速度優先ならページの下部に配置してください。
Webページを速く見せるための5つのちょっとした工夫

JavaScript：ページ下部に配置
アクセス解析：低速度/高精度（ページ上部に配置）、高速度/低精度（ページ下部に配置）

画像のサイズ指定

画像のサイズ指定方法です。
画像サイズをまったく指定しないと遅くなるので、サイズは必ず指定してください。
また、指定サイズと実サイズが違っても遅くなるので、この2つは同じにする必要があります。

高速表示：実サイズと同じサイズを指定
低速表示：指定無し、実サイズと異なるサイズを指定

HTML要素の省略

HTMLではコードの省略が可能なものもあります。
コードを省略するとソースの見た目は変わりますが、表示速度が若干アップするようです。
見た目や扱いやすさを考慮するなら省略せず、表示速度を重視するなら省略した方が効果的なようです。
「HTMLのタグは一部省略可能」表示速度はどちらが早いのか調べてみた
 終了タグが省略可能な要素
 HTML5でタグをどれだけ省略できるか調べてみた

オーディオスプライト

オーディオスプライトはHTMLの技術を利用した音声ファイルの最適化技術です。
複数の音声ファイルを一まとめにして、読み込み時の負荷を軽減する事ができるようです。
HTML5の音声ファイル最適化技術オーディオスプライトとは？

HTMLのSEO対策

ページタイトル（title要素）

最もSEO効果が高いとされるのがページタイトルです。
現在ではHTML要素自体にSEO効果があまりないため、数少ないSEO効果のある要素となっています。

<title>ページタイトル</title>

見出し（h要素）

見出しもかつてはSEO効果の高い要素でしたが、現在ではその効果はあまりないと言われています。
「h」の次の部分には「1～6」の数字を入れますが、両サイドの数字は合わせて記述します。
なお、h要素を利用すると文字サイズが大きくなりますが、CSSで整形すると通常の文字サイズで利用できます。
h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い（まとめ）

<h1～6>見出し</h1～6>

画像のオプション要素（alt要素、title要素）

画像にテキスト要素を付加するコードで、それぞれのコードには以下のような特性があります。
altは画像の代わりに表示される代替テキストで、titleはカーソルを画像に移動した際に表示されるポップアップテキストです。
なお、W3Cでは画像を使用する場合はalt属性が必須なので、何も表示しない場合でも「alt=""」のように空で作成しないと減点になります。

役割：alt（代替テキスト）、title（ポップアップテキスト）
検索：alt（ヒットする）、title（ヒットしない）
条件：alt（画像利用時は必須）、title（画像利用時でも必須ではない）

META要素について

従来ではMETA要素が重要視されており、SEOの効果もありましたが、現在では大手サイトをはじめいくつものサイトが廃止しています。
その理由は主要な検索エンジンがMETA要素を重視しておらず、効果がほとんど無いためです。
ただし、SNS対策としてのOGPでは現在でも活用されているようです。

Open Graph Protocol

Open Graph Protocol（OGP）はSNS上でシェアされた時に、Webページの情報を効率的に伝えるための記述です。
以下のコードはHTML用ですが、「？」の部分はサイトのタイプに合わせて文字を選択してください。
記述位置は最初の一行をheadタグ内に記述し、META要素はヘッダ内に記述すれば良いようです。

ウェブサービス：website
ブログ（トップページ）：blog
ブログ（記事ページ）：article