オンラインPC館

HTML高速化

HTMLの処理速度

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

コードの配置

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

  1. JavaScript:ページ下部に配置
  2. アクセス解析:低速度/高精度(ページ上部に配置)、高速度/低精度(ページ下部に配置)

画像のサイズ指定

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

  1. 高速表示:実サイズと同じサイズを指定
  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=""」のように空で作成しないと減点になります。

  1. 役割:alt(代替テキスト)、title(ポップアップテキスト)
  2. 検索:alt(ヒットする)、title(ヒットしない)
  3. 条件: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="サイト概要">

  1. ウェブサービス:website
  2. ブログ(トップページ):blog
  3. ブログ(記事ページ):article