{"id":3527,"date":"2022-03-08T15:19:33","date_gmt":"2022-03-08T14:19:33","guid":{"rendered":"https:\/\/staging.wearebatman.be\/?p=3527"},"modified":"2024-05-15T13:49:07","modified_gmt":"2024-05-15T11:49:07","slug":"how-to-measure-page-experiences-on-your-website","status":"publish","type":"post","link":"https:\/\/staging.wearebatman.be\/en\/hoe-pagina-ervaringen-meten-op-uw-website\/","title":{"rendered":"HOW TO MEASURE PAGE EXPERIENCES ON YOUR WEBSITE?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">As a website owner you would want to know and measure how users experience interaction with web pages. Google\u2019s Core Web Vitals are just the metrics for that. Since 2021 these Core Web Vitals are used as ranking factor, hence part of the Google algorithm. In other words, these metrics will help define how pages will appear in search results. These metrics are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Largest Contentful Paint (LCP)<\/li>\n\n\n\n<li>First Input Delay (FID)<\/li>\n\n\n\n<li>Cumulative Layout Shift (CLS)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Largest Contentful Paint<\/strong>&nbsp;measures how fast your page loads (laadsnelheid). It is considered as a good user experience if your page loads within the first 2,5 seconds. Above 4 seconds? Time to up your game! CSS and\/or JS rules delay the LCP. Think about a JS function that loads a hero image. Result: the hero image loading time will be delayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>First Input Delay<\/strong>&nbsp;covers the interactivity of the page (reactievermogen). To ensure good user experience, a page has to have a FID of 100 milliseconds or less. For example, you see a button and you click on it \u2013 Nothing happens\u2026 That means that the main thread is too busy to actually calculate your click and respond to it. The interaction on the page is delayed. FID\u2019s above 300 milliseconds will make your customer leave the website. Too slow, sorry. A third party code can impact the FID. For example: the visual site of the page has already loaded, user tries to interact but in the meantime the interaction has been blocked.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cumulative Layout Shift<\/strong>&nbsp;measures the visual stability of the page (visuele stabiliteit van een pagina). A layout shift occurs any time a visible element changes its position from one rendered frame to the next.<br>Imagine a user who tries to click something on the screen, but screen is empty. A banner pops up and the user unintentionally clicked it. In a perfect world, the best case scenario would be that the banner preserves space for itself so the user does not click this area. If items don\u2019t have dimensions specified, then your browser can\u2019t preserve space for them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What tools are available?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Google Search Console is one of the tools that you can use to monitor and measure the general state of performance of your website. However, we don\u2019t find it detailed enough. We swear by Google Lighthouse. It\u2019s a free, open-source tool that helps you learn more about your website\u2019s performance and gives you concrete steps to optimize it. One of the ways to run the tool is via&nbsp;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">Google Chrome extension<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open the website URL that you want to generate a report of and click the Lighthouse icon in the extension area (next to the URL). Then click \u2018Generate report\u2019. Lighthouse will execute multiple page audits and create a report detailing how the page performs. You can then use suggestions from the results to improve your website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need help with auditing your WordPress site?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Keep an eye on what is happening on your website(s) by performing audits. It is essential for ensuring a great user experience.&nbsp;<a href=\"https:\/\/staging.wearebatman.be\/en\/how-to-measure-page-experiences-on-your-website\/#contact\">BATMAN provides technical analysis reports<\/a>&nbsp;that help you understand your site\u2019s performance, SEO and accessibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>(Source:&nbsp;<a href=\"https:\/\/developers.google.com\/learn\/pathways\/web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developers.google.com\/learn\/pathways\/web-vitals<\/a>)<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>As a website owner you would want to know and measure how users experience interaction with web pages. Google\u2019s Core Web Vitals are just the metrics for that. Since 2021 these Core Web Vitals are used as ranking factor, hence part of the Google algorithm. In other words, these metrics will help define how pages will appear in search results.<\/p>","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Hoe pagina-ervaringen meten op jouw website? %%sep%% %%sitetitle%%","_seopress_titles_desc":"Met de juiste tools kom je te weten hoe gebruikers jouw website ervaren. Maak deze ervaring zo positief mogelijk en ontdek welke metrics je hierbij kunnen helpen.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","footnotes":""},"categories":[17],"tags":[],"class_list":["post-3527","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/posts\/3527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/comments?post=3527"}],"version-history":[{"count":2,"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/posts\/3527\/revisions"}],"predecessor-version":[{"id":7321,"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/posts\/3527\/revisions\/7321"}],"wp:attachment":[{"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/media?parent=3527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/categories?post=3527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.wearebatman.be\/en\/wp-json\/wp\/v2\/tags?post=3527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}