⚡ Digital Gardening Project ⚡

<head>: the single biggest render-blocker

The head tag is where machine readable information lives. Metadata. #

Source Example 
<head>
  <meta charset="utf-8" />
  <title>Webpage Title</title>
</head>

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 #

Run ct.css on this site to examine the head element.

This option destroys the head element, showing you how it effects user experience (easily restored by refresh) #

Destroy the head element on this page (refresh to restore) to see the effect of losing your head.

An example badly ordered Test head Element. #

Visit a TEST badly ordered head element with lots of warnings.

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!