<head>: the single biggest render-blocker
The head tag is where machine readable information lives. Metadata. #
Source Example |
---|
|
There are a number of elements permitted under the head element and the one lesson I wish to impart is that ordering and structuring your head element will potentially give you performance gains. CT.css is a diagnostic css file that will inspect the ordering and content of the head element.
Try clicking some of the following if you want to get a quick insight into the head elements benefits and pitfalls:
This option gives you a good ct.css report for the current page showing inline styles and a small script #
This option destroys the head element, showing you how it effects user experience (easily restored by refresh) #
An example badly ordered Test head Element. #
Credit to Harry Roberts at CSS Wizardry for ct.css.
A starter head element for a webpage -- Inspired by HTML5 Boilerplate project. #
<head>
<!-- Get UTF-8, acquire emoji -->
<meta charset="utf-8">
<!-- Makes making a responsive webpage much easier -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title in browser. Necessary. Important for SEO -->
<title>Title of webpage</title>
<!-- Important for SEO, previews -->
<meta name="description" content="">
<!-- These 5 are desirable for showing previews when site is linked on most media platforms -->
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:alt" content="">
<!-- Every site should really have a favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- Important for Progressive Web App features and more -->
<link rel="manifest" href="site.webmanifest">
</head>
I will eventually get into more of these tags, and CSS eventually, but for now we have a working head element!