0:00
Hello, today I'm going to be showing you how to pass core web vitals using
0:12
Izoic leap on this WordPress website. I'm here in my WordPress dashboard and then I'll go ahead and start by going into Izoic
0:20
I'll log into my user dashboard and once I'm here, I'm going to go to the Speed tab
0:28
you've integrated your site with the Zylic and integration is complete, you'll be able to start
0:32
using Izoic Leap. You'll see this site has already been scanned and already has several recommendations
0:39
here. And the core web vitals scores are going to take the crux data, which is field data, which
0:46
is going to look at my aggregate score over the last 28 days. However, we can use lab data to
0:51
determine whether or not my site is passing Core Web vitals now. To get started, I'm going to use
0:56
the optimization settings inside of Leap to implement proper site speed features on my WordPress website
1:04
I'm given the option here to set it up myself or see if a setup assistant can help me
1:09
If I want to get it set up now, I'm going to go ahead and get started. So by getting started, I'm given these recommended options. All features are toggled on
1:19
We're going to talk a little bit more about each of these features and how to troubleshoot
1:23
potential issues on your site or potential things that could be. slowing it down and how to enable the features to work the best in just a moment
1:31
Prior to even moving to the preview section, to implement these features properly, I need
1:35
to make sure that I've got a couple of things turned off inside of my WordPress website. So I'm going to go back to my WordPress admin dashboard and go to plugins
1:46
Many of the features implemented by Ezoic by default are often duplicated by plugins that
1:51
publishers already have installed on their websites. By deactivating these plugins, clearing our cache, prior to starting our preview, we can
1:58
ensure that our success and our troubleshooting is minimized. Anything that's currently trying to optimize, compress, or minify CSS, JavaScript, images
2:08
fonts, and more should be disabled. These things will duplicate Ezoic functionality and won't be able to make the site as fast
2:16
as Ezoic can using these exact same features. In fact, these things will often create conflicts or even issues on the site if they're
2:23
not deactivated and the cache is cleared prior to using Ezoic Leap. So you can see here I've disabled common site speed optimization plugins
2:32
Anything that has anything to do with images, image optimization, compression, serving images in next gen formats, or resizing my images, I've also disabled
2:43
Ezoic will automatically compress and serve these images in next gen formats for you without
2:49
any cost. Many times these plugins are things that cost extra money for
2:53
publishers and you can actually cancel these subscriptions because Ezoic will do it for free. Sites need to also make sure that they deactivate any
3:00
caching plugins on their website. Caching features inside of Ezoic Leap are very
3:05
important to site speed. If Ezoic is not able to cache something because a
3:09
plugin is it will keep the ZOak leap from operating properly or serving the page as fast as it could Once you disabled any plugins that are trying to optimize images caching or site speed on their own we need to check a couple more things first
3:23
Often the theme itself will have features designed to do some of these things or have features
3:28
that you can toggle on or off that may be causing similar duplicate functionality
3:33
If there's a plugin you can't turn off for one reason or another, you just need to make
3:37
sure that there aren't options that are keeping you from being able to optimize your site speed
3:41
Often, there are features inside of plugins or your theme itself that may be duplicating
3:45
some of these exact same functions. And if you can't disable those plugins or some aspects of the theme, there's probably
3:52
something you can toggle on or off that would make the settings more ideal so that LEAP can
3:56
deliver the page even faster. This could look something like Caching Dynamics CSS
4:00
If you remember, we don't want anything else cache so that it can deliver the page as fast
4:05
as possible. Even if something says it will make a site faster or slower, you want to make sure that you
4:10
toggle this off to get started. It may seem odd but you actually want to remove any
4:15
speed optimization settings anywhere available inside of your WordPress theme or any
4:20
additional plugins. Once you've disabled these plugins and toggled off any features that may cause duplicate functionality on your WordPress website
4:27
before you actually activate your first preview, you'll want to scroll down
4:31
and clear the cache to your site. This one sure that nothing from the site that
4:36
was being done by the plugins is still live on the site. This way when a Zoic
4:40
does some of these features, none of the existing functionality from the plugins is duplicated
4:45
and causes an error whenever Ezoic tries to do the same thing. Once the cache is cleared, it's time for me to move to the preview, so I'll click next
4:59
Once I've clicked next, I can go to the preview URL of my site
5:03
The preview function won't work properly if you're still logged into your WordPress admin
5:07
if you plan on using Lighthouse. In that case, you should open an incognito window if you want to test it using Google Chrome
5:16
In Chrome, you can use Inspect Element to go to Lighthouse, and then you can generate a report
5:22
If you see Reduce Initial Server Response Time, that means the cache didn't hit
5:27
Typically, this happens the first time you run a Lighthouse report. If you run it again, that should go away and you should be able to see the actual performance of your site using the preview
5:37
Success. So now I'm no longer getting the reduced initial server response time on the site and I can navigate my site using the preview function
5:46
I can actually emulate a mobile device using Chrome here as well
5:50
I can see that my menu is working and also that ads are showing on my site
5:54
I can see that my images are also displaying the site should work exactly how it's supposed to if as you begin clicking around
6:01
you notice that a preview is still being created that means the isoq is still optimizing aspects of the page and it may take a little while
6:07
while before you can start testing it again. You can also use the preview function inside
6:11
of Google's PageSpeed Insights. Once we've been able to test our preview, we can make sure
6:19
by navigating around on the preview URL via incognito window to double check to make sure
6:25
the site operating exactly how it supposed to I recommend emulating a mobile device You could also send the URL to a mobile device that you use to ensure that it displaying properly Here I notice my menu not operating properly
6:39
It takes a while for my menu to open and this may be a problem for my users
6:44
If that happens, there's a couple reasons why it might work. If you notice that interactive elements, like a menu, a slider, animations, icons, collapsible, containers, or accordions
6:54
something that a user would interact with isn't displaying properly or isn't interactive
6:58
or isn't interactive, you can go back to your settings, go to previous, and typically these are things
7:03
that are caused by script execution settings. You can go to advanced settings
7:09
and now you can go to find delayed scripts. Now, if you're unfamiliar with your site
7:15
and which script might be causing the issue with a menu, an accordion, or something else on your site
7:21
that isn't quite working right, that's interactive to users, you could disable find delayed scripts
7:26
or script delay completely. In a worst case scenario, anything that you can identify that you know isn't your menu, you could leave on and you could toggle everything else off
7:36
However, if you do know something in here that may be causing the issue with your menu, you can specifically hide it so that it's not a delayed script and everything should work properly
7:47
However, if you reach a point to where you cannot figure out what is causing the issue, but it's an interactive element, something in the script delay, you can simply toggle off that feature
7:58
inside of script execution. If you notice something like a thumbnail or images not displaying properly
8:04
there's a couple reasons why this could be. First, I want to make sure that any kind of image optimization or image caching
8:12
plugins or features or technologies that I'm using are currently disabled. I want to double check that I've cleared my cache inside of the caching app
8:22
and if I've already activated my LEAP settings that I clear the site speed cache
8:27
which will be a button right here if the site has already had an activated optimization setting
8:32
Once both those caches are cleared, if the site is still not displaying the images properly
8:37
there's a couple things we can do about that. You could start by turning off lazy load, NextGim, or resize images, and test the preview for each with it off
8:50
or if you ultimately decide that you would just like to solve the problem right away, you could simply toggle off images
8:57
and you could reactivate the plugins that you were using before. However, it's almost certain that the site will be slower if the images are not optimized and delivered via Zoic
9:06
If you have something like a search box or a contact form and it seems to be displaying
9:11
without any styling or improperly, it's possible that it's something to do with minifying HTML or CSS
9:18
Once again, we want to make sure that this isn't related to something in a caching plugin
9:23
or a setting inside of my theme that's trying to do the same thing first
9:27
Once I've cleared my caches and ensured that no plugins are causing the conflict, I can go back into advanced settings
9:33
And I could try minifying JavaScript, minifying CSS, or minifying HTML, toggling on or off to see if one of those is causing the issue in my preview
9:44
If ultimately I can solve the issue I can also disable minify If lo and behold after activating my site or my preview I see that my site looks like this where it clear that the CSS or something about the design
9:57
or style of the site is missing, and it looks like basically just a HTML page, it's possible that
10:03
it's the critical CSS. CSS is often loaded across the entire site, even when it's not needed
10:08
on every page. However, Leap may remove something that's needed on one page, but not another
10:13
You can remove unused CSS and that will ensure that your site won't display that way anymore
10:18
Critical CSS, optimizing fonts, preloading fonts, or custom CSS that you may have entered in here
10:25
usually is not the case. However, if you notice that your fonts are not loading properly or loading differently than normal
10:31
you can click allow slow loading fonts as well. This will ensure that the fonts that are on your site today will load exactly as they're supposed to
10:39
However, the site will be slower because there's something that leads to. is identified that means that the fonts are called or externally brought to the site in a slow loading fashion
10:49
Once you finish troubleshooting, any elements that you're unable to fix or unable to solve
10:54
you can finally go through the preview function, double check to make sure everything is working properly
10:59
and now you can continue on to activate these settings. If you just fast forwarded here so that you can quickly identify and troubleshoot something on your site
11:08
Anything that may be related to the thumbnails or images, you can just disable images
11:15
And that's a pretty safe bet. However, if it's menu, something interactive on your site, like an accordion, or something like a slider
11:23
and the images still aren't working, you can also disable script execution
11:29
If something is related to CSS and the page doesn't look right, it looks unstyled or like a HTML page
11:36
you can go in and just disable critical. CSS. While it's uncommon that you would need to disable all these features, if you
11:45
also notice that something like a contact form or search bar is not displaying
11:49
properly, it may be something related to minifying the HTML or minifying JavaScript
11:56
With all these things disabled, you'd potentially troubleshoot any potential conflicts that would exist on your site. Once you've activated this version, you want to make sure
12:07
that you clear the site speed cache, and also clear the cache inside the caching app across
12:16
your whole site. It may take up to 15 minutes before Ezoic is able to display the site optimized with Leap
12:25
So please take your time before you test it again. And you can always use the tester tab inside of the Ezoic Leap dashboard that uses PageSpeed Insights
12:33
and Lighthouse as its core functionality. So it will be the same reports that you would pull from PageSpeed Insights
12:39
If you did have to disable some of the optimization settings inside of Ezoic Leap
12:43
make sure you go over to problems, let us know, and create a ticket. That way, we can fix any issues particular to your site
12:50
and you can take advantage of all the site's features on Ezoic Leap
12:55
For more information about Ezoic Leap or troubleshooting things that you may have an issue with
12:59
inside of your website, you can visit support.esoic.com or www.ezoic.com. slash leap