Is only strictly necessary if your web server isn't serving the charset as part of the content-type:
content-type: text/html; charset=utf-8
There's no harm in including it though, and it does at least mean that if your HTML page is saved offline it will definitely carry its charset information with it.
I would say the opposite: putting critical information only in HTTP headers is dangerous; always put it in the actual file; in some cases a file extension is sufficient.
If you do want to ensure the file is interpreted as UTF-8 regardless of HTTP headers, the most efficient way is to place a U+FEFF "byte order mark" character (EF BB BF when encoded as UTF-8) at the start of the file. It's shorter than a meta tag, and it's the first thing browsers check for when loading a file (assuming they're following https://html.spec.whatwg.org/multipage/parsing.html#determin...).
Changing the encoding changes the meaning. If the encoding is only declared in a form that is easily lost during a standard action (downloading a file), that's bad.
I cannot zoom this page on mobile, very annoying...what is causing it? Anyway seems like a poor recommendation assuming the page is practicing what it is preaching here.
The site includes "maximum-scale=1.0" in its viewport meta tag, which prevents zooming. Funnily enough, the website doesn't actually recommend doing that anywhere in its text.