We asked the industry experts “What are the most crucial strategies for developers to effectively optimize websites for Core Web Vitals in 2024?”
Here is what 7 thought leaders had to say.
- Optimize LCP, FID, and CLS
- Enhance CLS for Visual Stability
- Leverage Lazy-Loading and Code-Splitting
- Prioritize Clean Coding and Continuous Monitoring
- Implement Multi-Faceted User Experience Optimization
- Focus on Speed and Intuitive Mobile Design
- Install NitroPack for Improved Site Speed
Optimize LCP, FID, and CLS
To optimise websites for Core Web Vitals in 2024, developers should prioritise optimising Largest Contentful Paint (LCP) by optimising images, preloading critical assets, and reducing server response times. Minimising JavaScript execution through code splitting and reducing unused JS is crucial for improving First Input Delay (FID). Enhancing Cumulative Layout Shift (CLS) involves ensuring stable layouts by setting dimensions for media and avoiding late content injections.
Additionally, implementing advanced caching strategies, such as using HTTP caching and service workers, helps ensure faster resource delivery. Performance can be further boosted by lazy-loading offscreen elements, leveraging HTTP/2 or HTTP/3, and minimising third-party scripts and fonts.
Mei Ping Mak, Director of SEO and Web, Website Design Asia
Enhance CLS for Visual Stability
One of the most crucial strategies for optimising websites for Core Web Vitals in 2024 is to enhance Cumulative Layout Shifts (CLS). Focusing on CLS ensures website visual stability and enhances the user experience.
Some strategies for enhancing CLS that developers can implement include setting size attributes for images and videos to avoid layout shifts when media loads. Preloading fonts and other critical resources also ensures that they load predictably and prevent sudden layout changes.
Developers can also optimise websites for Core Web Vitals by reserving space for ads and embedded content. Defining the space for these elements ensures there are no drastic layout changes. While at this, it is also recommended to avoid injecting content above existing content on a website.
Clooney Wang, CEO, TrackingMore
Leverage Lazy-Loading and Code-Splitting
One of the most crucial strategies we implemented was leveraging lazy-loading for images and videos. By deferring offscreen content, we dramatically improved our Largest Contentful Paint (LCP) scores, loading our pages faster without compromising quality.
In 2024, developers should also focus on minimising JavaScript execution time. By breaking down our JavaScript into smaller, more manageable chunks—also known as code-splitting—we reduced the time it took for our pages to become interactive, significantly boosting our First Input Delay (FID) scores. These strategies improved our Core Web Vitals and created a smoother, more engaging experience for our users, which is ultimately what matters most.
Christopher Pappas, Founder, eLearning Industry Inc
Prioritise Clean Coding and Continuous Monitoring
In 2024, prioritising clean, efficient coding practices is vital. We focus on optimising JavaScript execution and deferring non-essential scripts to boost our Core Web Vitals scores. Leveraging tools like WebPageTest, we identify bottlenecks that affect metrics like Cumulative Layout Shift (CLS). Continuous monitoring and incremental improvements ensure our sites consistently outperform benchmarks, providing a superior user experience.
Dan Ponomarenko, CEO, Webvizio
Implement Multi-Faceted User Experience Optimisation
Optimising for Core Web Vitals in 2024 requires a multi-faceted approach focused on user experience. Prioritise efficient asset loading by implementing lazy-loading for images and videos, and using modern image formats like WebP.
Minimise JavaScript execution time through code splitting and deferring non-critical scripts. Leverage browser caching and implement a content delivery network (CDN) to reduce server response times.
Address Cumulative Layout Shift by specifying image dimensions and reserving space for dynamic content. Optimise Largest Contentful Paint by prioritising above-the-fold content and preloading critical resources.
Regularly audit your site using tools like Lighthouse, and implement server-side rendering or static site generation where applicable to enhance overall performance.
Yoyao Hsueh, Founder, Blustrat Digital
Focus on Speed and Intuitive Mobile Design
As a website developer focused on performance, my top strategies for optimising core web vitals in 2024 are:
Minimise page load times through image compression, efficient code, and limiting redirects. For a travel company client, cutting load time in half increased bookings by 43%. Speed is the top ranking factor for Google, so fast sites get rewarded in search results.
Design simple, intuitive interfaces. Lots of white space, minimal copy, and a clear content hierarchy reduce confusion. After simplifying an enterprise platform, support needs dropped by 36% due to the improved UX.
Mobile-first design is key since over 70% of traffic is now on mobile. Responsive layouts, large tap targets, and components optimised for touch ensure a great experience on any device. For an e-commerce client, our mobile redesign led to a 63% increase in sales.
Constant testing and learning. Google’s algorithm and user needs change quickly, so we monitor web vitals and UX trends to keep optimising. The platforms and devices we build for evolve fast, so staying on the cutting edge drives the best results.
Alexander Palmiere, Founder & CEO, Refresh Digital Strategy
Install NitroPack for Improved Site Speed
If your site is on WordPress, Magento, or OpenCart, the best thing you can do is install the NitroPack plugin. We’re not paid or sponsored by them in any way. We’ve just found that it works magic on improving site speed, and it optimises for Google’s PageSpeed Insights score better than any other plugin. At a minimum, the plugin will get you to a score of 80, but we’ve found it usually gets you to a score of 90+. If you’re not using one of the supported platforms, or you don’t have the budget for the plugin, you can look at what NitroPack does well to do some of the same things on your own:
- Resource Loading – One of NitroPack’s biggest benefits is its ability to rearrange how resources are fed to the main thread, which takes advantage of multi-core architecture. This re-arrangement helps to speed up load times significantly.
- Image Optimisation – Images are often some of the largest files on a page and can take more time to load. NitroPack compresses images down to a smaller size, while also delaying image loading until images are needed (referred to as “lazy loading”).
- Caching – NitroPack automatically pre-caches popular pages so that visitors can get instant access to a page.
- Code Minification – NitroPack minifies HTML, CSS, and JavaScript to reduce file sizes and make it faster for machines to read.
Applying these techniques to your website can drastically improve site performance and your Core Web Vitals scores.
Shaun Tyndall, Founder / Director, Inclind
At Software House we provide web development services that resonate on these tips from the experts. Get in touch with our staff now.
