This post discusses the importance of web performance and the role of different stakeholders in prioritizing it. It highlights the trend of increasing JavaScript usage, impacting page load times, especially on less powerful devices or slower networks. The author argues that while Google's intervention could be impactful, the long-term solution lies in businesses recognizing the positive correlation between web performance and conversion rates, making it a business priority rather than an afterthought. Tools and guidance are available to help, but ultimately, a shift in industry mindset is essential for sustained improvement.
I recently used Page Speed Insights for Mobile to improve my blog's page load time and one of the key recommendations was to reduce render-blocking CSS above the fold. This led me to explore the concept of critical CSS, which is the minimum CSS required to render the initial view of a page. I developed a proof-of-concept tool (bookmarklet and devtools snippet) that analyzes the DOM and extracts the critical CSS by iterating through visible elements and using window.getMatchedCSS(). This tool helps identify unnecessary CSS, integrate into build processes for optimization, and potentially generate page-specific CSS files for improved performance. It currently has limitations, working only in WebKit/Blink, ignoring media queries, and not handling pseudo-elements.
