Based on the feedback provided by tools discussed in the previous post, you will have identified improvement areas for your website or Ecommerce site. You find here below some actions and suggestions to efficiently improve your online presence.
LCP
Largest Contentful Paint measures the time it takes different content blocks to load within the user viewport. The viewport is the current screen. It's fair to say to a mobile or desktop viewport have different challenges to be solved.
A key element to optimise to get down to 3 seconds LCP is to optimise images. Images to look at are background images as well:
- File format: use the appropriate format: JPG, PNG, SVG but also new formats such as WebP. WebP is the format with the most browser compatiblity out there. WebP compression is 30% to 40% more efficient than JPG for example. Chosing WebP is advised for mobile viewports.
- Compression: select lossless or lossy compression. Lossless is best suited for images displayed in multiple screen sizes and is the de facto standard compression. Use lossy for images with fixed dimensions.
- CDNs: serve images through a CDN, either catered from your Wordpress or Webflow hosting or through an account you run for your site. The leading CDNs are Amazon Cloudfront, Azure CDN or Google CDN that are in the category of hyperscalers. Cloudflare, CDN77, Fastly or KeyCDN are great CDNs with ways to push images from your source server, FTP or manually.
- Image Optimisers: ImageKit.io or Cloudinary are image management solutions in the cloud that use CDNs to serve images. But their main capabilities are image management or media experience management. The provide easy and quick ways to automate image generation incl. compression and formats. Start with their free tier. It works fine for a small website.
If you only have a few images, you can use tools such as squoosh.app to upload or drag&drop your PNGs and JPGs and get the files converted into WebP files.
There are challenges with serving images and some severe limitations when you use like me a Webflow platform. You upload images and "magic" happens. This includes image optimising, serving (CDN, caching) and formats. For example, Webflow now supports WebP but you need to convert existing images in the Webflow Designer. And for dynamic pages such as CMS-driven blog posts, the images are not in the asset panel so you have to upload WebPs or manually convert them. You get the gist.
CLS
Cumulative Layout Shift measures if elements in the visible viewport shift from their starting position between two rendered frames.
Improving CLS is mostly about specifying the size of elements such as images or iFrames:
- The most important technical trick to fix CLS and avoid unexpected layout shifts is to always include size attributes on your images and video elements. If not possible reserve the required space with a CSS aspect ration box. Check out this article on CSS tricks on how to do it.
Size attributes are simple width and height attributes that you set in your HTML/CSS. With responsive images, use srcset that allows the browser to select between images. - Embed iFrames with dimensions. This also fixes CLS right away.
- If you embed ads in your website, also reserve a static slot in the DOM elements using a min-height for example but fixing the width.
- Pre-load webfonts using <link rel=preload> to avoid that the fallback font is swapped with your selected font
Improve CLS is even more important for mobile viewports. Having a page shifting from the starting position while loading confuses users.
FID
First Input Delay measures the latency for page elements to respond from a user's input. For example, search-as-you-type is measured by FID.
Optimising FID often gets down to JavaScript libraries or third-party solutions you are using:
- Third-party scripts' size is key to look at. One tends to add as many services and gimmicks to a site, which tend to slow down the site quite a bit. For example it's easy to add Hotjar to your site, which is a great tool but ask yourself if the service brings value to you or not. If FID is about your threshold, the main task is to remove the nice-to-have services.
In Lighthouse, check out how long it takes to parse and compile. Select the checkbox Show 3rd-party resources to see the CPU-intensive scripts. - Reduce payloads that are large. Aim to keep your total byte size below 1,600 KiB. Easy tricks such as minifying CSS or JS files often help a lot. A technique is to split CSS files into 2 or more files to have smaller files but also the initial CSS file to load above-the-fold content in order to render the page as fast as possible (it does add an additional network request, though).
- Remove unused code or libraries. For example if you use Firebase, there are quite a few packages within a domain. It you only need the data component, update the imports to only fetch that library.
- External systems such as search should be configured correctly, which usually takes place in the 3rd-party solution. For search-as-you-type, depending on your products or site, you may want to activate it with 2 or 3 characters. Make sure the settings are done according to the product taxonomy.
- Check the main-thread work and minimise it. The renderer process typically handles most code. it parses the HTML and builds the DOM, parses the CSS and applies the specified styles, and parses, evaluates, and executes the JavaScript. In Lighthouse, red flags will be displayed if the main-thread work takes longer than 4 seconds. Analyse the main-thread work and improve script loading, layouts and layout nesting, parsing of CSS incl. minifying or deferring the loading of non-critical elements. Depending on your application, monitor the garbage collection; you may be using memory in a non-optimised way.
- Reduce the number of network requests. By default, CSS and JavaScript files are render-blocking. It is a must to optimise them. For CSS, defer loading of non-critical files and minify all files. For JavaScript, using the latest ECMAScript typically helps reduce size up to 20%, import NPM packages using exports and optimise existing JavaScript code from legacy JavaScript to modern JavaScript using the Optimise Plugin in Webpack.
- Lastly an easy improvement is to update libraries such as FontAwesome to the latest versions. Performance tend to be better in newer version but be mindful to test updates as things may break.
Improving FID is probably the most technical and tricky work for you to improve your Core Web Vitals. It quickly gets down to having to rewrite JavaScript or CSS files to remove unused functionalities or nested elements.
This post points to a few concrete actions to improve your Core Web Vitals but does not intend to be exhaustive. It closes the series of posts on Core Web Vitals.
In the initial post, we talk about the Core Web Vitals. In the 2nd post, we define metrics for LCP, CLS and FID. In the 3rd post, we assess how to measure Core Web Vitals.
Hope you enjoyed the series. Feel free to contact me if you have any question or suggestions to improve the posts.
