ウェブサイトの表示速度を計測して、改善点を調査してくれる「GTmetrix」というウェブサービスがあります。

リンク：GTmetrix

この「GTmetrix」自体は、今さら紹介する必要もないほど有名なサイトですし、おそらく勉強熱心な本ブログの読者様なら既にご存知でしょう。
しかし、調査結果の警告に対する改善策・解決策となるとハナシが別で、サイトのパフォーマンス向上のための方法がわからず、苦労されている製作者の方が多いようです。

今日は、いくつかの警告の中でも特に見落としがちな「Avoid a character set in the meta tag」と「Specify a character set early」の２つ、文字コードに関する問題の解決方法を紹介していきます。

  • Avoid a character set in the meta tag
  • Specify a character set early

そもそもこれらの警告は、簡単に説明するなら「最初に文字コードを指定してくださいね〜」というものです。

ブラウザは通常、文字コードの解析が終わってからページのレンダリングを開始します。
逆に言えば、文字コードが解析できないとレンダリングも JavaScript などの実行も行いません。
なぜなら文字コードがわからないとスクリプトを適切に実行できないからです。

そのためウェブページの文字コード（あるいはエンコーディング方法）は HTML の 最初で指定するのが通例になっています。

多くの場合ほぼ例外なく <head>タグの先頭の方で <meta charset="UTF-8"> や <meta charset="SHIFT_JIS"> などと指定しているかと思います。
しかし［GTmetrix］では「これだけでは不充分ですよ」と警告しているワケです。

その理由は、そもそも文字コードは、本来ならばHTML内より、HTTPレスポンスヘッダで指定する方がより望ましいから。

……前置きが長くなりましたが、GTmetrixの「Avoid a character set in the meta tag」と「Specify a character set early」に対する解決策、それが以下の２つになります。

.htaccess を使って文字コードを指定する方法

まずは「.htaccess」を使って文字コードを指定する方法ですが、これは以下の1行を適当な箇所に挿入するだけでOKです。

AddDefaultCharset utf-8

ご利用のサーバーの環境によっては［.htaccess］を編集できないこともあるので、そのときはPHPを利用して文字コードを指定します。

PHP を使って文字コードを指定する方法

PHPを使って構築しているウェブページならば、PHPのプログラムの先頭に以下のコードを記述しておきます。

header('Content-type: text/html; charset=utf-8');

ここでは仮に「utf-8」と記述していますが、環境によって任意の文字コードに書き換えてください。

体感的には認識できないほど僅かな「ミリ秒単位」での表示速度アップにしかならないでしょう。
しかし、こうした細かな積み重ねがSEO的に大きな差を生みます。
まさに『塵も積もれば山となる』ですね。