In recent times customers are doing more shopping online and their primary touchpoint is mobile. During Covid and lock down this trend increases worldwide.
Today’s customers are Millennium Shoppers. For them, shopping is a not social activity. They don’t like to go to the shop and feel about the product. They don’t want to spend time talking on the phone with the call centre agents and make a buying decision. They just go online search and buy what they want at their convenience.
To cope with this trend User experience becomes a key element to assess the performance and success of a website. If your user experience is not right you don’t get conversion & google does not give you ranking.
Now it does not matter if your website is really fast and opens in less than 2 seconds in the speed test tool. If customers can’t able to navigate through the website, can not able to search on the website and can not able to make frictionless purchases on the website then it’s useless.
Nowadays visitors are too lazy to wait for another second or try to find what they are looking for (if it is not obvious in UX). They will simply go to another competitor in another tab instead. So who determines if a site has a better User experience or website is slow or fast? Is it the analytic tools like Newrelic, Pingdom, Application insight APM ? or Google PageSpeed Insights? No. It’s the customer.
It is the customer who decides if the User experience is better.
But Customers feelings are very subjective. how can we measure user’s feelings and personal impressions of a website’s performance and turn them into data we can track, measure, and optimize? After all, you are not sitting with your customer while he does the shopping. Gladly Google provides the solution, Google introduces page experience signals to evaluate how a visitor is interacting with a site or a single page.
In early 2019, Google announced that it would evaluate a website’s speed ranking by focusing on two performance metrics;
- First Contentful Paint (FCP)
- First Input Delay (FID)
First Contentful Paint (FCP)
First Contentful Paint (FCP) means first meaningful content shown on the canvas webpage. This content could be text, images (including background images, logos), or non-white <canvas> elements.
First Input Delay (FID)
First input delay measures the time from a user’s first interaction (click on a link or a button) to the time when the browser actually responds to that interaction. A good FID score is below 100ms.
In June 2021 the performance scenario has further evolved. For instance, Google announced the three Core Web Vitals:
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) measures how long it takes to render the largest element of a page (the time until it’s fully visible), counting from the moment a user calls the URL. A good LCP score is below 2.5 seconds.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) indicator measures how visually stable a page is during the loading phase. The more unexpected layout shifts a page experience during loading, the harder it will be for a user to interact, and the worse their experience will be. The aim for a CLS score would be 0 (meaning there is no shift, only perfect visual stability), but we can usually aim to minimize it to less than 0.1.
How to improve your website?
Now, we know about KPIs and key metrics – we now need to see how we implement these metrics on our website to improve user experience.
Inline Critical Path CSS
If you’ve set CSS to load asynchronously, the browser will show unstyled content to the users before the required styles are loaded. This is an unpleasant experience for the users.
Critical Path CSS is the bare minimum CSS necessary to display the first part of a web page (above-the-fold) to the user.
You should define critical path CSS and use it inline in HTML. You should also use common images such as logos etc in SVG sprite. The browser downloads HTML code first and they don’t parse it. SVG is image code in CSS. That will also solve problems related to Largest contentful Paint (LCP)
Optimize Your Site’s DOM Size
Don’t load things more than necessary in DOM. Always avoided rendering hidden HTML & Form elements inside DOM. For optimum performance, DOM should not be more than 300 nodes.
Render-Blocking Resources
A webpage is rendered by the browser after putting together many elements such as HTML, CSS stylesheets, JavaScript scripts, and HTML imports. Typically, the browser will try to download all the webpage elements first, parse them all, and then render the webpage. Normally HTML size is small. So, when the user requests for a webpage, the browser would’ve received the HTML content already, but will still be waiting for all the other resources to be loaded before rendering the page. That’s called render-blocking resources. We should avoid using any JS that cause render-blocking.
Use Resource Hints
When a user visits a website, the browser requests the HTML document from the server, parses it, submits separate requests for any other referenced resources, and after loading and parsing them all, renders the web page. As a developer, we know which resources are the most important for your site. With this knowledge, you can set those critical resources to load ahead of time and speed up the page load. All resource hints use the rel attribute of the <link> tag to activate. You can identify popular user journeys and load its resources quickly to help conversion.
commonly used resource hints are
- DNS Prefetching
- Prerender
- Preload etc.
Ensure Text Remains Visible During Webfont Load
Fonts are usually large files and take a lot of time to load. There’s a reason why Google flags this behaviour. Some browsers won’t render text until all the fonts are loaded. To overcome this problem force the browser to temporarily show a system font while the custom fonts load. After that just swap font with the original one.
Get more from CDN
Improve static content cache on CDN and utilize the power of Cloudflare CDN comes with Optimizely. There are a lot of examples on Optimizely Github.
Implement relevant cache strategy
Implement relevant cache strategies on your website such as
- Output cache
- Donut cache
- Donut hole cache
Avoid Personalization based on 3rd party service information
Visitor groups and personalization runs on the server-side. If your visitor group criteria is based on 3rd party service then you will be at the mercy of 3rd party service performance.
Load personalized block asynchronously
Where possible always try to load blocks asynchronously that will help in “First Contentful Paint” KPI and helps your website visitors to interact early.
Optimise Database
Always optimize and maintain database indexes. Avoid using custom tables & calling tables directly without using optimizely API. APIs utilize Optimizely cache layer for better performance..