Are You Trying to Make Your Website Run Faster?
Over the past few weeks, I’ve been focused on improving the performance and structure of my website. The objective was to reduce load times, improve rendering speed, and ensure a more stable user experience across devices. The process involved a series of targeted adjustments, each addressing a specific bottleneck or inefficiency. Below is a breakdown of the steps I followed, in the order they were implemented.
1. Initial performance assessment
I began by running a Lighthouse audit and reviewing Core Web Vitals in Chrome DevTools. The results highlighted several issues: a slow Largest Contentful Paint (LCP), high Total Blocking Time (TBT), and layout instability contributing to Cumulative Layout Shift (CLS). The waterfall chart revealed excessive blocking from render-critical resources and inefficient asset loading. This provided a baseline for optimisation and helped prioritise the areas that required immediate attention.
2. Identifying the critical rendering path
I mapped out the resources required for the initial render—HTML, critical CSS, primary font files, and the hero image. Non-essential assets were flagged for deferred loading. This step was essential for reducing time-to-first-paint and ensuring that above-the-fold content appeared as quickly as possible.
3. Refactoring HTML structure
I reviewed the markup and removed unnecessary nesting, redundant wrappers, and legacy elements that were no longer in use. Semantic tags were applied where appropriate, and ARIA roles were cleaned up. This reduced DOM complexity and improved parsing efficiency.
4. Separating and minimising CSS
I audited the stylesheets to identify unused rules and consolidated overlapping declarations. The remaining CSS was split into two categories: critical styles required for initial rendering, and non-critical styles that could be loaded asynchronously. This allowed for more efficient delivery and reduced render-blocking behaviour.
5. Inlining critical CSS
The critical CSS was embedded directly into the <head> of the HTML document. This included layout styles, typography, and visual elements required for the header and hero section. By eliminating the need for an external stylesheet during initial render, the browser was able to paint the page more quickly.
Don't have time to do it yourself?
Click the "HIRE ME" button in the top right corner and let me know what I can do for you!
6. Deferring non-critical resources
Non-critical CSS was loaded using a media attribute swap technique, and JavaScript files were deferred unless they were required for immediate interactivity. I also implemented code splitting for JavaScript bundles and removed unused dependencies. This reduced blocking time and improved interactivity metrics.
7. Optimising image delivery
All images were resized to match their display dimensions and converted to modern formats such as WebP. The hero image was preloaded and assigned a high fetch priority. Below-the-fold images were lazy-loaded using the native loading="lazy" attribute. SVG icons were inlined where appropriate to reduce HTTP requests.
8. Preventing layout shifts
To address CLS, I ensured that all images and embedded elements had explicit width and height attributes or aspect ratios defined. Space was reserved for dynamic content such as ads or third-party embeds. This stabilised the layout during load and improved visual consistency.
9. Font optimisation
I subsetted the primary font to include only necessary glyphs and preloaded the main font file. The font-display: swap property was applied to prevent invisible text during font loading. Where possible, system fonts were used for UI components to reduce reliance on external font files.
10. Configuring caching and monitoring
I implemented cache-control headers for static assets, assigning long lifetimes to hashed files and shorter durations to HTML documents. Preconnect and DNS-prefetch directives were added for third-party domains. Finally, I set up real-user monitoring for Core Web Vitals to track performance over time and detect regressions.
What's Next?
In my case, implementing all these steps improved my desktop performance, however, I still have a long way to go with regards to mobile devices.
Each of these steps contributed to a measurable improvement in load performance, rendering stability, and overall user experience. The process required careful analysis and incremental adjustments, but the results were significant. The site now loads faster, responds more smoothly, and maintains a consistent layout across devices and network conditions.
If you're working on a similar optimisation project, I recommend starting with a performance audit and addressing the most impactful issues first. The improvements compound quickly once the foundational bottlenecks are resolved.
