Browser performance impact of charset/codepage assignment

Most developers (myself included) are often unaware of the performance impact of the Content-Type / charset of a web page. Ideally you should set this as an HTTP Header vs. using META http-equiv. It’s often though that this only helps with the transport and display of data, however, the browser also makes use of it when parsing CSS & JS assets. Tags related to those provide an optional ‘charset‘ attribute should they ever need to vary from your content.

General guidance is to set this at the very top of the <head> before <title>; and within the first 1024 bytes, though there are reports that Firefox will look at the first 2048 bytes of the page for this META information.

Not doing so may cause the browser to do a codepage restart to re-parse assets that were interpreted in the potentially incorrect codepage.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


NLS for CSS?

Okay, so this is a little odd. This does not effect the language or direction of the website, but instead is a measure to ensure proper encoding of the CSS file itself.

The browser will generally rely on the HTTP Headers to determine this value, but in cases where the server or application configuration does not, you can provide the equivalent in the file itself.

WARNING: This needs to be the first line of the .css file, before any spaces or comments.

@charset “UTF-8”;

Other common value:
@charset “ISO-8859-1”;