Fast page loading is critical for an optimal user experience and SEO. Here we focus on the UX part, we want to show the page to user as fast and correctly as possible.
1. Don’t make the browser re-start the parsing:
Once the browser got the page, it needs to parse it and show it to user.
But it may not know what encoding it is, as soon as it will see the meta charset tag, it will stop and re-start the parsing with the right encoding.
So, keep this tag above all other tags, just below title is common.
2. Inline critical CSS: If the browser doesn’t have CSS styles to apply to the elements as it start to display them, they will be unstyled, waiting for the CSS files to be downloaded (if they arrive at all). It’s a best practice to inline the minimum set of CSS needed to keep a decent layout and look. See this article for more info: Understanding Critical CSS
3. Keep the JavaScript after the content:
The browser will pause the rendering in case the JavaScript may change it.
This will have the user wait the browser finish to download and parse all the Javascript.
Note: Using async and defer may help you avoid to put the Javascript at the bottom of the page. See this gist for more info.
Here is a recap in code:
<head>
<title>My Fast Page</title>
<meta charset="UTF-8" />
...
<style>
/* inline critial CSS here */
</style>
<!-- link other non critical CSS here -->
<link href='bar.css' rel='stylesheet' />
</head>
<body>
...
<!-- Put JavaScript down the page -->
<script src='app.js' ></script>
</body>