Rate Your Experience

How can I use Leap and Ezoic's Chrome Extension to pass Core Web Vitals?

Modified on: Mon, 26 Jul, 2021

The Leap toolset offers many features to make troubleshooting and navigating core web vitals easier than ever. Before getting started we recommend downloading the Ezoic Chrome extension as well as installing the Ezoic plugin.

Ezoic Chrome Extension: https://chrome.google.com/webstore/detail/ezoic/nbccjeeblefkmoohdiipbghgikopimnd

Ezoic Plugin: https://wordpress.org/plugins/ezoic-integration/


This tab will only show when Leap has been activated on your site.


image


Within the Leap tab there are 4 separate categories to help publisher gain insight into their sites’ performance and core web vitals:


  • Alerts
  • LCP (Largest Contentful Paint)
  • CLS (Cumulative Layout Shift)
  • Technologies



Alerts


The Leap tool will scan the page and detect important issues that need to be addressed. The most important points that you should address to improve site performance will be shown in the Alerts section.


image


Each alert will have a dismiss option, if this is something that does not concern you then you can remove it from the list. There will also be an option to click for more information or to view alternatives that can help resolve that particular issue.


You may also see alerts regarding caching, here is an article that explains how to debug these issues: https://support.ezoic.com/kb/article/debugging-site-speed-notifications



LCP


image


In the LCP tab you will see a rating for this page’s LCP, rated from Poor to Good with anything in between being marked as “needs improvement”. If a page has an LCP that is “poor” or “needs improvement” you can use the ‘Highlight LCP Element’ tool to see the element on your page that is responsible for slowing down your LCP. This can be toggled on and off according to your preference.


image

When this is set to ‘on’, you will see a yellow outline around the LCP element, helping to troubleshoot LCP in an intuitive and visual way. If the LCP is poor, you know what is causing this and can address this using Leap's image optimization and caching features.



CLS


image


The CLS tab will show a score for the page and rank that score from Poor - Good. The tab also contains a selection of tools to help you debug and improve your CLS scores. These are as follows:


image


When you toggle this debugger on, Leap will highlight the most unstable element on your page and you will see the following dialogue box appear to help you understand why this element is causing a higher CLS score as well as suggestions on how to improve this:


image


The element in question will be highlighted with a green border. The detected movement will be calculated and the results explained, this will show as px measurements that indicate the number of pixels that the element has moved and been resized by.


The Debugger suggestions may prompt you to check the ‘Unsized Image Finder’, this tool will help to locate images that do not have a fixed size that may be impacting your CLS scores.


image


This tool can be toggled ON and OFF and will highlight the unsized images on that page as well as provide tips on how to set a fixed size for these images.


The final tool that will help you debug your CLS score is the ‘Debug Script Delays’ tool, which will help you identify any scripts that are running/delayed on the page that are impacting the CLS scores. Bear in mind some of these scripts may be integral to the functionality and loading speed of your site so it is best practice to check these one by one.


image


When you activate the ‘Debug Script Delays’ tool this dialogue box will open and it will allow you to see all the external and inline scripts running on this page, and will show you which ones are delayed.


image


When you are debugging the delayed scripts you can create drafts to test different variations and find the result that works best for this page. When you have set up a configuration you can click the “ View CLS Results*” button and this will open a new window to test the configuration and will display the results of the configuration you have chosen to test.


You will then see the comparison between your current configuration and the configuration you have chosen to test with the option to activate the new version if you see the scores are better.


image


Technologies


Leap’s ‘Technology’ tab allows you to view all the technologies that are being used on this page and ranks them similarly to how you view them in the ‘Technologies’ tab in the Leap section of your Ezoic Dashboard.


image


In order to improve your Core Web Vitals you will want to pay attention to the technologies that are marked as “Not Recommended” or “Needs Improvement”. You can view alternatives to these technologies via the Technologies tab in the Leap section of your Ezoic dashboard.


If you notice that only certain pages of your site are using certain technologies i.e. home page or contacts page, it is best to first prioritise the technologies that you are seeing across many pages on your site, i.e. blog post or articles pages. It is also a good strategy to test the popular landing pages of your site. You can find these in your Big Data Analytics via the Ezoic Dashboard, displayed under ‘Content’ > ‘Landing Pages’ report. This will ensure that you users are getting the best experience when landing on your site.



Loading ...