I was analyzing the site for speed optimization using GTmetrix, which gave me an insight to avoid a character set in the meta tag. This tutorial will explain why you should not set character set in meta tag and what’s the right way of achieving the same. Before we starting learning about the best practice for setting character set, let’s briefly understand what’s character set first of all.
What’s Character Set?
The web browser uses the character set to determine what should be displayed on a web page. It means, if the browser has to display the HTML page correctly, then it should know which character set to use. So the web developers define character set using Meta tag. For example, ASCII was the first character encoding standard and ISO-8859 included international characters upon ASCII. Currently, the default HTML5 character set is UTF-8 (Unicode), which includes almost all of the characters & symbols in the internet. If you want to learn more about character set, then this link is the right place.
As I told, the general practice of defining character set is via Meta tag as shown below:
For HTML 4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
For HTML 5:
<meta charset="UTF-8">
Most of the WordPress themes would also define Meta tag in header.php file as below:
<meta charset="<?php bloginfo( 'charset' ); ?>" />
The bloginfo() function with argument as ‘charset‘ will always print UTF-8 character encoding, which is the default encoding of WordPress.
In fact, my blog’s theme was setting character encoding via Meta tag and GTmetrix said, that’s a bad practice. When defining character set using Meta tag was the traditional approach, why would GTmetrix suggests to “Avoid a character set in the meta tag“? Let’s find out.
Why Avoid a character set in the meta tag
Avoiding a character set in the meta tag will improve page load time and also avoids content duplication. Moreover, if your visitors are using IE-8 web browser then it’s has some serious compatibility issue, which disables the use of lookahead downloader (the parser restarts when CHARSET set in META tag). Well, these incompatibility issues degrades the performance of your website.
How to set CHARSET without using META tag?
The best practice suggests to set character set in the web server or via the server side scripting language. So based on the server side language & web server that powers your website, you need to the send response headers with Content-Type: text/html; charset=UTF-8
Before that remove the charset from the Meta tag. To do that, remove the META tag defined in head section of your HTML page. In case of WordPress, remove META tag from header.php file.
Set charset in Apache Web server:
Copy & paste the below line in .htaccess file to enable charset HTTP response header.
AddType 'text/html; charset=UTF-8' html
Set charset in Nginx web server:
Copy & paste the below lines in your config file.
http {
include /etc/nginx/mime.types;
charset UTF-8;
...
}Set charset in PHP:
header("Content-Type: text/html; charset=utf-8");Hope it helps. Did you see the difference in page load time after setting charset through response headers? Let me know your comments.
