It is the customer who decides if the User experience is better. <\/p>\n\n\n\n
But Customers feelings are very subjective. how can we measure user\u2019s feelings and personal impressions of a website\u2019s 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.<\/p>\n\n\n\n In early 2019, Google announced that it would evaluate a website\u2019s speed ranking by focusing on two performance metrics;<\/p>\n\n\n\n First Contentful Paint (FCP)<\/span> means first meaningful content shown on the canvas webpage. This content could be text, images (including background images, logos), or non-white <canvas> elements.<\/p>\n\n\n\n First input delay measures the time from a user\u2019s 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.<\/p>\n\n\n\n I<\/strong>n June 2021 the performance scenario has further evolved. For instance, Google announced the three Core Web Vitals: <\/p>\n\n\n\n Largest Contentful Paint (LCP)<\/span> measures how long it takes to render the largest element of a page (the time until it\u2019s fully visible), counting from the moment a user calls the URL. A good LCP score is below 2.5 seconds.<\/p>\n\n\n\n Cumulative Layout Shift (CLS)<\/span> 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.<\/p>\n\n\n\n Now, we know about KPIs and key metrics \u2013 we now need to see how we implement these metrics on our website to improve user experience.<\/p>\n\n\n\n If you\u2019ve 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. <\/p>\n\n\n\n Critical Path CSS is the bare minimum CSS necessary to display the first part of a web page (above-the-fold) to the user. <\/p>\n\n\n\n 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\u2019t parse it. SVG is image code in CSS. That will also solve problems related to Largest contentful Paint (LCP)<\/span><\/p>\n\n\n\n Don\u2019t 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.<\/p>\n\n\n\n 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\u2019ve received the HTML content already, but will still be waiting for all the other resources to be loaded before rendering the page. That\u2019s called render-blocking resources. We should avoid using any JS that cause render-blocking.<\/p>\n\n\n\n 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<\/strong> attribute of the <link><\/strong> tag to activate. You can identify popular user journeys and load its resources quickly to help conversion.<\/p>\n\n\n\n commonly used resource hints are<\/p>\n\n\n\n Fonts are usually large files and take a lot of time to load. There\u2019s a reason why Google flags this behaviour. Some browsers won\u2019t 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Implement relevant cache strategies on your website such as <\/p>\n\n\n\n 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. <\/p>\n\n\n\n Where possible always try to load blocks asynchronously that will help in “First Contentful Paint”<\/span> KPI and helps your website visitors to interact early. <\/p>\n\n\n\n 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..<\/p>\n","protected":false},"excerpt":{"rendered":" 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…<\/p>\n","protected":false},"author":1,"featured_media":599,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[10,13,63,90,22],"class_list":["post-577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-episerver","tag-cms","tag-episerver","tag-optimizely","tag-optimizely-cms","tag-episerver-commerce"],"yoast_head":"\n![\"optimize](\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2021\/08\/customer-experience-1024x551.jpg\")
<\/figure>\n\n\n\n\n
First Contentful Paint (FCP)<\/span><\/h2>\n\n\n\n
First Input Delay (FID)<\/span><\/h2>\n\n\n\n
\n
Largest Contentful Paint (LCP)<\/span><\/h2>\n\n\n\n
Cumulative Layout Shift (CLS)<\/span><\/h2>\n\n\n\n
![\"Optimize](\"https:\/\/www.naveedulhaq.com\/wp-content\/uploads\/2021\/08\/naveedulhaq-com.png\")
<\/figure>\n\n\n\nHow to improve your website?<\/h2>\n\n\n\n
Inline Critical Path CSS<\/h2>\n\n\n\n
Optimize Your Site\u2019s DOM Size<\/h2>\n\n\n\n
Render-Blocking Resources<\/h2>\n\n\n\n
Use Resource Hints<\/h2>\n\n\n\n
\n
Ensure Text Remains Visible During Webfont Load<\/h2>\n\n\n\n
Get more from CDN<\/h2>\n\n\n\n
Implement relevant cache strategy<\/h2>\n\n\n\n
\n
Avoid Personalization based on 3rd<\/sup> party service information<\/h2>\n\n\n\n
Load personalized block asynchronously<\/h2>\n\n\n\n
Optimise Database<\/h2>\n\n\n\n