Get out of my &lt;head&gt;! redundant head tags you can safely delete
Tags: webdev, html, webperf, performance
Published: 2021-04-06 18:47:30

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](https://almanac.httparchive.org/en/2020/markup#favicons) have a tag in the `<head>` letting the browser know where to find the site's `favicon`, something like this:

```html
<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*

``` html
<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.

```html
<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.