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(画像利用時でも必須ではない)
<img src="画像ファイルのパス" alt="画像のタイトル" title="画像のタイトル">
META要素について
従来ではMETA要素が重要視されており、SEOの効果もありましたが、現在では大手サイトをはじめいくつものサイトが廃止しています。
その理由は主要な検索エンジンがMETA要素を重視しておらず、効果がほとんど無いためです。
ただし、SNS対策としてのOGPでは現在でも活用されているようです。
Open Graph Protocol
Open Graph Protocol(OGP)はSNS上でシェアされた時に、Webページの情報を効率的に伝えるための記述です。
以下のコードはHTML用ですが、「?」の部分はサイトのタイプに合わせて文字を選択してください。
記述位置は最初の一行をheadタグ内に記述し、META要素はヘッダ内に記述すれば良いようです。
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# ?: https://ogp.me/ns/?#">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="?">
<meta property="og:url" content="URL">
<meta property="og:image" content="画像ファイル">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="サイト概要">
- ウェブサービス:website
- ブログ(トップページ):blog
- ブログ(記事ページ):article