文字セットの宣言がないか、HTML で宣言のタイミングが遅い

サーバーとブラウザは、ネットワーク経由で通信するために、 あります。サーバーで文字エンコード形式が指定されていない場合は、 を使用すると、ブラウザは各バイトがどの文字を表しているかを知ることができません。 文字エンコード宣言 仕様によってこの問題が解決します。

Lighthouse charset 監査で不合格となった結果

灯台 文字エンコードが指定されていない場合は、フラグを設定します。

失敗した文字エンコードの監査。

Lighthouse では、次のいずれかが見つかった場合に文字エンコードが宣言されていると見なされます。

  • ドキュメントの <head> 内の <meta charset> 要素で、 ドキュメントの最初の 1,024 バイト以内の
  • charset ディレクティブを含む Content-Type HTTP レスポンス ヘッダー。 有効な IANA 名
  • バイト オーダー マーク（BOM）
で確認できます。

charset の監査に合格する方法

HTML に <meta charset> 要素を追加する

HTML ドキュメントの最初の 1,024 バイト以内に <meta charset> 要素を追加します。 要素は最初の 1,024 バイト以内に完全に含める必要があります。 ベスト プラクティスは、<meta charset> 要素を最初の要素として ドキュメントの <head>。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    …

Content-Type HTTP レスポンス ヘッダーを追加する

Content-Type を追加するようにサーバーを設定する charset ディレクティブを含む HTTP レスポンス ヘッダー。

Content-Type: text/html; charset=UTF-8

リソース