Recently, I've been working alongside some site performance specialists and have learned some really useful stuff. Some things to improve site performance are obvious: reduce the size of everything so you're loading less and things will speed up and work better. That's generally how I try to do front end anyway. But some things we've looked at I might never have considered.
The biggest eye-opener for me was that the order of the <head> can make a really big impact on page loading, blocking and rendering times.
Re-ordering the <head> on a few client sites with these specialists shaved nearly two seconds off the page load time. Two seconds. By just writing the HTML in a different order.
It comes down to making sure that certain things are loaded first, and in turn reduce the blocking on other items to be loaded. Which sounds very logical in hindsight, but I honestly did not think it could make such a big impact for the front end.
And here it is, the (current) best order to make your <head> perform at its best:
<head>
/* Most important initial elements */
<meta charset>
<meta name="viewport">
<title>Site and page title</title>
/* Any preconnect/dns-prefetch */
/* Async script calls, inline JS and then regular script calls */
<script src="" async></script>
<script>// Inline JS</script>
<script src=""></script>
/* Stylesheets, then style blocks */
<link rel="stylesheet" />
<style>/* Inline CSS */</style>
/* Any preload elements */
/* Any deferred scripts */
<script src="" defer></script>
/* Any prefetch/prerender stuff */
/* Everything else (Favicons, Open Graph, search engine meta, etc.) */
</head>