{"id":138,"date":"2021-04-28T15:46:10","date_gmt":"2021-04-28T14:46:10","guid":{"rendered":"https:\/\/praeparo.com\/?p=138"},"modified":"2021-04-28T15:46:12","modified_gmt":"2021-04-28T14:46:12","slug":"web-vitals-and-wordpress","status":"publish","type":"post","link":"https:\/\/praeparo.com\/web-vitals-and-wordpress\/","title":{"rendered":"Web Vitals and WordPress"},"content":{"rendered":"\n

There has always been a lot of focus on user experience when designing WordPress sites but now with the Google initiative Web Vitals we have a way to measure what good is. This becomes an essential tool in any team to ensure a website meets the users’ expectations and becomes even more important as it becomes a ranking signal.<\/p>\n\n\n\n

So what is Web Vitals?<\/h2>\n\n\n\n

Web Vitals is more than just performance but covers four critical areas:<\/p>\n\n\n\n

  1. Performance<\/strong> looks at the page and measures first visible items along with when the user can interact.<\/li>
  2. Best Practices<\/strong> gives advice on recommended design and implementation patterns.<\/li>
  3. SEO<\/strong> (Search Engine Optimisation) checks if the page is discoverable and understood.<\/li>
  4. Accessibility<\/strong> checks if the page has any problems that may prevent users from interacting.<\/li><\/ol>\n\n\n\n

    What most people focus on is Core Web Vitals which maps to the area of performance. But, our recommendation is you must address all points as to why would you have a great performing site if users can find it (SEO) and are frustrated when using it (Best Practices & Accessibility).<\/p>\n\n\n\n

    Many tools exist for measuring Web Vitals (see options below<\/a>) and often they will report two values, the first for Mobile and the second for Desktop. Although, we need to consider Desktop it is Mobile that we need to get working as that is the harder and with a modern responsive website, Desktop will naturally come along as you fix Mobile.<\/p>\n\n\n\n

    We will now look at each in turn and the diagrams are based on a real Mobile example we have worked on.<\/p>\n\n\n\n

    Performance<\/h3>\n\n\n\n

    The performance report gives you an overall score, for this website 95, but we really need to focus on three items, these are the three aspects of the user experience; loading, interactivity, and visual stability, indicating if you pass the Core Web Vitals assessment, however, we do expect this to evolve:<\/p>\n\n\n\n