Your website search console is the primary tool for any webmaster. At OraDMT, we have compiled a series of tools and hacks that will help you investigate and fix your Core Web Vital issues. You can follow this article to help you learn more about  How to Fix Core Web Vitals Issues: LCP, CLS, FID

PageSpeed Insights

PageSpeed Insights is an online tool that helps you analyze any website's speed performance and provide multiple audits and suggestions to help the site owner optimize the page's performance and load it faster. Separate mobile and desktop reports are generated when using this tool.

2 datasets are used in the resulting analysis report:

  • Field Data: these metrics are collected from real users as they have visited this site (CrUX report data)
  • Lab Data: these are data generated using the Lighthouse tool. Different metrics are collected including:
    • First Contentful Paint
    • First Meaningful Paint
    • Speed Index
    • First CPU Idle
    • Time to Interactive
    • Max potential First Input Delay

The performance score is calculated using the lab data. The page is considered fast if this score is above 90 and slow if below 50.

The Opportunities section provides performance optimization suggestions along with the potential page load gain if they are implemented.

The Diagnostics section provide additional information about how a page adheres to best practices for web development.

Chrome DevTools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. They can be opened by pressing Control+Shift+C (Windows, Linux, Chrome OS) or Command+Option+C (Mac).

2 tools are particularly helpful to investigate speed issues:

  • The Lighthouse panel (or Audits on older Chrome versions) can be used to display performance metrics for the current page using the Lighthouse tool. You can choose the device type, the type of audits to generate and whether CPU and network throttling should be applied. In our case, the Performance audit type should be checked.
  • The Performance panel can be used to analyze a web page's load and runtime performance. To get started analyzing your webpage's speed:
    • Navigate to the web page
    • Open the Performance panel
    • CPU and network throttling can be applied to analyze further performance bottlenecks.
    • Click on the refresh icon inside the Performance panel to start profiling and reload the page
    • All the main tasks (scripting, rendering, ...) will be displayed along with their sub-tasks. You can zoom on the sub-tasks, click on them to display more details (source script for example) and view network and timing events such as First Contentful Paint (FCP). The longest task after the FCP corresponds to the max potential First Input Delay.

Other tools