In technology, speed matters. This includes the speed of development and the speed of your products. We wrote a guide in 2019 on why website speed is crucial where we talked about tips to increase your website performance.
We are pleased to share that Google has created a new, simpler way of measuring your site's performance. This post explores how to correctly measure your site performance, which tools you should use, and what the best practices in 2020.
How to Correctly Measure Your Site Performance
It can be confusing how to judge your site performance – there are so many different metrics, tools, and conceptual frameworks. Google alone offers: Lighthouse, Chrome DevTools, PageSpeed Insights, and Search Console's Speed Report. Other popular website tools include GTMetrix, Pingdom, and YSlow.
Enter Web Vitals, a single tool that provides "unified guidance for quality signals that are essential to delivering a great user experience on the web". In particular, the new Web Vitals tool from Google focuses on three core areas: Loading, Interactivity, and Visual Stability.
Loading
To test how quickly your website loads, Web Vitals uses Largest Contentful Paint (LCP). This measure tracks how long until the page's main content has loaded. Google recommends that this takes 2.5 seconds or less.
Interactivity
Next, Web Vitals tracks the First Input Delay (FID). This measure tracks how long the browser feels "locked up" as a page loads. To create a seamless user experience, pages should have a FID under 100 milliseconds.
Visual Stability
Lastly, there is Cumulative Layout Shift (CLS), a metric that looks at how often elements on the page change position. For example, if your website loads certain elements (like ads or more advanced media) later causing content to jump after its initial paint..
Google recommends a CLS of less than 0.1, to keep the page stable and the experience positive.
How to Increase Your Website Score
Optimizing your website is going to depend upon the specifics of your application, tech stack, and desired outcomes. Our formal recommendation is working with a skilled development team that can audit your application and outline the areas with the highest return on investment.
That said, there are some general guidelines that hold true across the board.
Optimize Your Infrastructure
Your application will perform poorly if it does not have access to the right resources. First and foremost, host your websites and applications on cloud servers that are optimized for the size and resources needed.
Do not rely on third-party resellers – go straight to Google, Amazon, or Microsoft.
Leverage Caching
Check that your application leverages a complete caching architecture: application cache, server cache, and CDN cache. This change alone will dramatically improve performance by reusing content reducing application processing time and by placing assets in servers physically close to your visitors reducing download time.
Optimize Application Load
This is the most time consuming aspect of optimization. Depending on your framework, and how your application was built, this could involve heavy refactoring. We always suggest tackling the optimizations that will bring the most value (biggest gains with least amount of development).
Usually, the biggest gains are tied to the most work – such as reworking certain JavaScript scripts or reducing the size of CSS. However, a quick win can come by changing your load order so that the first paint happens faster, using the new CSS containment property, or serving images in next-gen formats.
Ensure Visual Stability
This is a new requirement that basically forces sites to leverage a "skeleton screen" or at a minimum ensures sites load in a natural manner without heavy visual changes to the user. Be mindful, optimizing for this requirement will likely require a bigger refactor of how your application loads.
Web Vitals vs. Lighthouse, PageSpeed Insights, and Other Tools
Lighthouse is the engine that runs all of Google's performance tools. But there has always been a lot of discrepancy in results and confusion around the suggestions provided – especially for non-technical site owners. If we had a dollar for every time we were asked "what is 'render-blocking'?" or "what is a 'next-gen format'?"
Web Vitals is the new standardized measurement for measuring application performance. With these scores available, site owners can work with developers to optimize their websites and web apps which will translate into a better experience for site visitors.
It's important to note that Google will begin to use Web Vital scores to determine the performance of your site, and they may even show site visitors this score in some capacity. As a result, site owners and developers should use Web Vital scores as their baseline.
Conclusion
Website speed is vital. More site owners are becoming aware of this, but there has been a lot of confusion and discrepancies around what metrics are most important.
Web Vitals provides a simple three-score system to align performance metrics for site owners, visitors, and developers. While more people are working from home currently, overall mobile usage is still increasing. According to GSMA Intelligence, an estimated 72% of people will use only their mobile devices to access the internet by 2025 (source).
It is easy to get excited about new features and building more complex websites and web applications. However, good software development also requires paying close attention to maintaining a clean codebase, increasing performance, and making sure your users get to where they want with fewer clicks and less wasted time.
Want to learn more about your website performance? Find out how Tragic can help create a plan to dramatically increase your website speed, stability, and even say you money on your monthly hosting bills.
