Web performance is an essential element of the user experience. In the first part of this series, I talked about a method for automating some tasks related to web performance optimization.
Here, in the second part of the series, we will go over some slightly more advanced techniques for improving front-end web performance.
This is what we will talk about:
Optimizing the HTML structure
- Referencing JavaScript and CSS files at the bottom
- Dealing with flash of unstyled content (FOUC)
- Inlining CSS and JavaScript
Server configuration
- Browser caching
- How long should files be cached?
- How to override caching
- Data compression
After applying all of these optimizations on my site, I was able to get a perfect (100/100) PageSpeed Insights score for both mobile and desktop web performance analyses.
Optimizing the HTML Structure
For a long time, I thought that my external CSS and JavaScript references should be inside the
But having script and link elements at the start of the HTML document can block the render of the page, meaning the browser won’t process and display any subsequent HTML element until the resources have been downloaded and processed.
Many JavaScript files, especially those written with asynchronous programming in mind, often don’t need to be referenced inside the
Referencing CSS files towards the end of the HTML document is a little bit trickier. That’s because when you load CSS files at the end of the document, the user might start seeing the page content without any styles because the style rules from the external stylesheet haven’t been loaded and processed yet. This situation is called flash of unstyled content (FOUC).
Referencing JavaScript and CSS Files at the Bottom
Whenever possible, we should reference external resources at the bottom of the document. Just before the closing body tag.
... ...
Dealing with Flash of Unstyled Content
To address the FOUC, what I’ve done is give the body element an inline style attribute of 0% opacity.
style=opacity:0>
Then, in my external stylesheet, I reset the body element back to 100% opacity.
body { opacity: 1 !important; }
When the external stylesheet has been loaded and processed, the content will be displayed.
The issue with this technique is if there was a server failure that prevents the CSS file from being downloaded, the user would just see a blank page because of the inline style attribute given to the body element.
Inlining CSS and JavaScript
You can also include CSS style rules within