Deploying strategies to improve core web vitals require a both technical and marketing activities related initiatives. A blend of both can help improve CWV metrics for both the organic performance of the website as well as business outcomes. Let us look at some of the strategies.
Server Side Rendering (SSR)
Server side rendering (SSR) means that the server prepares a web page’s HTML content with data before sending it to the browser instead of letting the browser build the entire page using CSS and Javscripts.
Server side rendering makes important content available in the initial HTML response itself. This can potentially reduce the Time to First Byte (TTFB) or time of the Largest Contentful Paint (LCP). As a strategy, developers can try SSR of critical LCP first or any other critical information above the fold. This can help reduce the time significantly.
Reduced time to content affects both user experience and agentic experience. When SSR provides content in the HTML, there is reduced dependency on real time JS execution. This leads to better crawlability and agent accessibility.
Image Optimisation:
Images are often large in size and their loading time can contribute towards the bloated CWV metric values and broken user experience. If image sizes are large, browser has to download more data before it can display important content.
There are various strategies which can help in image optimisation.
Many developers are still using JPEG and PNG image formats which contribute to high web page sizes. Nothing wrong in it if you can achieve smaller image sizes. However, as a practice, one should look at image compression as a practice and opt for formats like AVIF and WebP. These formats significantly reduce the size with lossless rendering.
Developers should also focus on using SVG file formats for items like logos where perfect scalability is needed without loss of quality and increase in load times. SVG is not a compression technique but a file format that stores XML code instructions rather than pixels.
When websites have global users, it is important to use image CDNs. These allow for image sources to be closer to the user’s location and reduction in load times.
Website developers can try lazy loading, deferring on non critical images and pre-loading hero images which can lead to significantly lower load times. They should avoid using structures like carousel which are high in size and increase load time significantly.
Displaying and reserving right dimensions / aspect ratio of the image on the website is important. One should serve different image sizes based on the user’s device. Why send a 3000 X 2000 px image when the browser will display 600 x 400 px spect ratio. Serving correct image sizes to the pre-defined aspect ratio and place in the code helps lower the CLS score.
Dynamic content and Advertisements:
Dynamic content and advertisements often lead to increased load times.
Many websites actively support dynamic advertisements and deploy header bidding. Header bidding is a programmatic technique where ad publisher websites offer advertisement space to multiple ad exchanges. Concurrent bidding happens for the ad placement slots before accessing the primary ad server. This maximises competition and help websites get better revenue compared to sequential ad display methods.
While header bidding method is strategic, convenient and allows for maximised revenue, it also leads to significant increase in advertisement load times.
Various methods can help to improve the web vitals in this scenario. Websites can fix slots for dynamic content loading. If fixed slots are not provided, content will load at position zero and then move other content down below on the page leading to CLS penalty.
Since the dynamic content leads to cumulative layout shift, it is important to set height for dynamic content so that rendering happens in a fixed place. Also, it is important to avoid dynamic content on top of the pages like cookie banners or special offers to void higher TTFB, LCP or FCP.
Javascript optimisation:
Using Javascript have both pros and cons. While Javascripts are great for human experience giving dynamic visuals and interactivity, they are not so great for agentic operationally and experience.
If there is too much javascript or poorly optimised javascript that loads content in real time, then the browser spends significant amount of time downloading, parsing, compiling and executing the code.
If we look at the web vital metrics, Heavy JS can lead to delay in rendering of the largest Contentful Paint (LCP), it can also lead to high Interaction to Next Paint (INP). Since a lot of content with JS is rendered in real time, it can cause Cumulative Layout Shifts (CLS).
Real time content rendering can lead to time and token limit exhaustion, which makes the AI agents skin your website in favour of faster websites for information. Developers must optimise or deferring third party java scripts, remove render blocking and unused JS, lazy load non critical JS and pre-load critical JS
Minimize Redirects:
Redirects can cause high Time to First Byte (TTFB). It is best to keep no of redirects to a minimal. Digital marketers tend to use URL shorteners in order to track their campaigns whic h can unknowingly lead to time delays.
Simple redirects like
cobaltqubemedia.com/blog to www.cobaltqubemedia.com/blog to https://www.cobaltqubemedia.com/blog will also add to your TTFB
UTM Parameters:
UTM parameters are great tools for digital marketers. However, these can reduce caching effect on your infrastructure. URLs which point to the same webpage may look unique with the added UTM parameters. Less caching means more TTFB. URL UTM parameters must be ignored by the caching infrastructure.
A/B testing:
Digital marketers and developers should together set their A/B testing to improve the core web vital metrics.
Some examples can be, A/B test between:
Server Side Rendering,
Client Side Rendering OR Server Side Rendering of Largest Contentful Paint
Sever Side Rendering above the fold content or full Content Side Rendering
If there is time to implement changes on the website directly, make these changes to the server side first and see the effect. You can also choose a few pages to implement the A/B testing.
Business decision makers or digital marketers have a huge impact on the website performance. Generally what might be good for the website performance as per the developers may not be what business decisions think apt in their quest to drive traffic, reduce bounce rate, gamify for engagement etc.
In the future, technical and marketing teams will operate as one. The sooner we blend the two to take joint decisions in the favour of the business, the better.