Visit almost any popular website, open up the inspector, and take a look at what's between the <head> tags.
You'll see a whole load of cryptic meta data, SEO gibberish, social media stuff, and a lot of external links to trackers, analytics, and ad networks.
How many of these tags improved your experience of the website?
Most of these tags have no benefit to people. Many of them are completely useless. Some of them are actively annoying!
These are digital plastic bags - small bits of redundant code that pollute the internet.
As a rule, sending users useless data is bad, it:
- slows down your website
- costs you and your visitors money
- pollutes the planet (yes actually)
Redundant head tags are hardly the worst offenders when it comes to wasting data. But I've got a little bit obsessed with them recently. I even purchased some old devices in order to run some tests.
I've gone through so many web pages <head> tags looking at the markup, and have found so many bits of redundant code, that I could almost fill a book.
But before I do that I thought I'd guage interest in this very dry topic. So, if you're intested in micro-optimizing your html by removing head tags, please let me know!
Some digital plastic bags:
Favicons
~75% of websites have a tag in the <head> letting the browser know where to find the site's favicon, something like this:
<link rel="icon" href="/favicon.ico">
But, by default, all browsers look for a file /favicon.ico in a site's root directory. So deleting the above code has no negative effects.
Removing it saves at least 37 bytes on every page on your website. There's a little bit more to it than that (for a future post) but that's the gist.
<meta charset="utf-8">
This tag is sacred. You must have this tag. Except, you absolutely don't need it. Here's why:
By default pretty much every web server adds an http header telling the browser to use utf-8.
This is actually a better way of doing it, because the sooner you tell the browser the charset, the sooner it can start to render the page.
So all your doing by adding <meta charset="utf-8"> is telling the browser something it already knows.
Now some people say you should still have it, in case someone downloads your web page and opens it locally, because then there won't be any http headers. But here's the thing.
UTF-8 is the only allowed character encoding for HTML5 so if you have <!doctype html> at the beginning of your document. Then the browser already knows what to do. And, even if you don't declare a doctype, the browser will still work it out! You can try it, it works absolutely fine.
If you're looking for a real life example of this, take a look at youtube. No <meta charset="utf-8">.
Apple Touch Icons
An apple-touch-icon is an image used on iOS devices when a website is added to the home screen.
Different iOS devices display icons at different sizes, and so it's common to see something like this:
Example from theguardian.co.uk
<link rel="apple-touch-icon" sizes="152x152" href="https://assets.guim.co.uk/images/favicons/fee5e2d638d1c35f6d501fa397e53329/152x152.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="https://assets.guim.co.uk/images/favicons/1fe70b29879674433702d5266abcb0d4/144x144.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="https://assets.guim.co.uk/images/favicons/c58143bd2a5b5426b6256cd90ba6eb47/120x120.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="https://assets.guim.co.uk/images/favicons/68cbd5cf267598abd6a026f229ef6b45/114x114.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="https://assets.guim.co.uk/images/favicons/873381bf11d58e20f551905d51575117/72x72.png"/>
<link rel="apple-touch-icon-precomposed" href="https://assets.guim.co.uk/images/favicons/6a2aa0ea5b4b6183e92d0eac49e2f58b/57x57.png"/>
Just like with favicon.ico you can remove these links and place a single apple-touch-icon.png in your root directory.
e.g. https://example.com/apple-touch-icon.png
Want to use different sizes? There's a trick to that aswell, but I'll save that for another post if anyone is interested.
HandheldFriendly
This is a surprisingly popular tag. Notionally it is used for making your site work better on old handheld devices.
<meta name="HandheldFriendly" content="True">
This is not the case.
What it's really does is tell very old Palm Pilots that you've designed your website specifically to work on them. Which is a lie.
I've collected lots more of these nuggets, with sources and tests. If you're interested, like this article, leave a comment, etc.
If enough people do I'll make a website about it.
Top comments (5)
I'd love to see a whole article/site about this. I teach website design, and these are good for my students to think about. I like how you do the pros/cons.
I’d also like a site explaining all this in detail, please let us know if you ever build it.
I’d love a site about this
Very interesting... +1 vote for more info...
Nice tweaks!