Investigating HTML Structure Impact on FCP with Heavy CSS in Production Deployment
I'm following best practices but I've encountered a strange issue with I'm working on a project and hit a roadblock. After profiling our production application using Lighthouse, it became evident that the First Contentful Paint (FCP) is significantly delayed—hovering around 2.5 seconds. This performance bottleneck seems tied to the heavy CSS we are loading at the start, particularly due to how HTML is structured. Our layout uses multiple nested `<div>` elements within a grid system, implemented through CSS Grid, which raises concerns over rendering speed. The current HTML structure looks like this: ```html <div class="container"> <header> <h1>Welcome to My Application</h1> </header> <main> <div class="grid"> <div class="item">Content 1</div> <div class="item">Content 2</div> <div class="item">Content 3</div> </div> </main> <footer> © 2023 My Application </footer> </div> ``` It's worth noting that we are also using [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/) alongside custom styles, and I suspect the combination might be overloading the CSS rendering engine. I’ve attempted several optimizations: 1. **Reducing CSS file size**: Implemented tree-shaking and removed unused styles, which helped reduce the size from 500KB to 300KB. 2. **Asynchronous CSS loading**: By adding `rel="preload"` to CSS links, I tried to prioritize the loading sequence but noticed no real improvement. 3. **Critical CSS**: I extracted critical CSS inline for above-the-fold content; FCP improved slightly but not to the level we require. 4. **HTML Minification**: Minified our HTML to shave off bytes, yet the impact seemed negligible. Currently, our CSS file is around 300KB after optimizations and includes complex selectors that might be hindering rendering speed. I’m contemplating refactoring our HTML structure to flatten the nesting of `<div>` elements and possibly moving to a more semantic approach with sections and articles. Can anyone suggest best practices for structuring HTML to optimize FCP especially when using heavy CSS? Should I also consider server-side rendering or other frameworks for this issue? Any insights or resources on balancing HTML structure and CSS performance would be incredibly helpful. Any ideas what could be causing this? This is for a application running on Windows 11. Cheers for any assistance! This is for a web app running on Ubuntu 22.04.