Up next in 10
How to Fix Avoid an Excessive Dom Size Error in Page Speed Insight _ Core Web vitals
350 views
Jan 26, 2024
In this tutorial video, viewers will learn how to fix the "Avoid an Excessive DOM Size" error in Page Speed Insights, focusing on Core Web Vitals. The video provides step-by-step guidance on addressing this specific error related to the Document Object Model (DOM) size, which can impact a website's performance. Whether you're a website owner or developer aiming to improve Core Web Vitals and overall page speed, this tutorial offers practical insights and clear instructions for resolving the "Excessive DOM Size" issue, contributing to a more optimized and user-friendly web experience.
View Video Transcript
0:00
Hello everyone, welcome to Key2 Blogging and in this video we will be talking about the DOM sites
0:05
So if you are using Blogger or WordPress, then you must see a DOM avoid excessive DOM sites in PaySpeed Insight test
0:13
So let's understand what is DOMSight. So before that, let me just copy the URL of this page and I will go to the PaySpeed Insight and run a pay speed test first
0:26
So let's wait. As you can see, the pace speed is around 99 but this page is still not past the core
0:35
wave vitals. So how funny is that? So let me just scroll down and when we check the lap test it is all passing the core
0:45
web vitals but in real world it is not passing the core web vitals
0:51
And when I scroll down and as you can see there is very less errors and we need to fix the
0:57
image element do not have width and hide. hide the attribute. So I have already made a video on this, how to fix this error
1:05
So you can check this video. So here we will check out the avoid and excessive DOM size
1:12
So as you can see, it has 8.30 elements in DOM size
1:18
So let's understand what is DOM sites and how you can reduce it in your blogger and WordPress website
1:25
So for this, we need to reference a WP row. blockade web page and here they have explained what is DOM size
1:34
So DOM size basically the structure of your web page. So if you have root HTML tag and under that you will see head tag and body tag and
1:44
under the head tag you will see like title tag and under the body tag you will see elements
1:49
like H1 tag or anchor tag or image tag. So all the object inside the web page is considered as nodes
1:59
and all the nodes sum up as a DOM size. So we can basically reduce the number of nodes thereby reducing the DOM size
2:09
So as you can see, they have explained that if the total DOM size exceed 1500 then it will
2:16
flak in the pay speed inside tool and if it is greater than 818 then it will flack in the GT matrix tool
2:24
And they have also explained that if the DOM tree element is DOM depth is greater than 32 nodes then it will flag
2:36
And so what are the impact of DOM sites in page performance
2:41
They have explained that if the DOM site increase on your page then the amount of data
2:47
transfer will be increased and thereby rendering time will be increased So browser will take more time to understand the DOM tree and then display the web page to the visitors And as you can see it will also increase the visitors device memory
3:04
So if a user using a low-end smartphone then the time to load the web page will be higher
3:12
So we need to reduce the number of DOM element in that web page
3:17
So let's go to the blogger website and we need to switch to the HTML view
3:24
First of all, you need to use a lightweight theme and then we need to remove all unnecessary
3:30
codes in that blogger website. So I have made a dedicated playlist on how to improve the pay speed of your blogger website
3:37
So you can follow this playlist to improve your pay speed in blogger website
3:42
And if you are using WordPress then you can use plugins like WP Rocket, Pop Matters plugin
3:46
to improve your space speed. So let's check how you can reduce the DOM size
3:52
So here we are in the post editor and I will switch to HTML view first
3:59
And then here as you can see, that is a paragraph tag. So let me just hit enter here
4:05
So let's create some spacing here. And as you can see there is a paragraph tag and that is added a span tag
4:12
So we don't need this span tag here. So I can delete this span tag here
4:16
So as you can see there is two DOM depth each two so we can reduce a DOM size by removing
4:25
a span tag and as you can see there is a deep tag and we have the image tag here so let me just
4:32
hit enter here so we don't need this deep stack so I can just remove all the deep tag from
4:39
here and I can remove this last two tag so in this way you can further reduce the
4:46
the DOM size and you can set the height and width in this image tag and you can also add
4:54
loading equal to lazy tag like this to improve the speed further and you can also use a
4:59
web-y version of the image so that it will take less size in the web page and as you can see
5:06
there is a deep tag deep BR deep so this is a blank deep tag so we don't need this deep
5:13
tag so I can remove this deep tag from here. Now let's check this is another paragraph tag
5:20
So you can just hit enter to see it more clearly. And as you can see there is another span tag
5:27
So let me just hit enter. So you will see it clearly
5:32
And as you can see there is another span tag inside the paragraph tag and they have also added
5:40
the style text line left. you don need this span tag here so i can just remove this span tag from this paragraph tag so you have to minimize the coding like this And as you can see there is a blank paragraph tag here
5:56
As you can see, P and closing P tag. So there is no text under this tag
6:02
So I can just remove this paragraph tag here. So in this way you can find all the elements
6:08
So as you can see, there is another image. So I can just simply delete all
6:14
the deep tag before the image tag and let me just hit enter here and I will remove the A
6:24
tag and deep tag so let me just do it in all images okay I have removed all the deep
6:31
tag before the image tag and as you can see there is a paragraph tag here and they have
6:36
added a style tag like this so we don't need the text align left because by default
6:42
HTML will take the left align. So I can simply delete the style tag here
6:48
And let me just find any other tag. So what I can do is I will type Control Plus App and I can just simply search for the
6:58
sections like style text alignment left. So we don't need this text in any of the code
7:05
So I can just remove all the style tag from here. So let me just quickly do that. Okay
7:10
I have removed all the style tag. style text alignment to left from this code
7:15
So let me just remove all the space from here. Now let's go to the page speed inside and let's scroll off
7:26
And they ask us to upload a WebP image here and reduce the file size of that image
7:33
And there is an option image element do not have explicit width and height
7:37
So you can fix it. So let's go to the image and
7:42
We have not added the height, so let's add the height again like this and let's add the width again like this
7:56
Now let me just publish this blog post from here. Now let's go to the page fit inside and let me just open this in a new tab
8:08
Now let me just copy the URL and let me just Hit enter and let's yze the page after updating the blog post
8:17
So before the DOM size is around 8.30 elements, so let's take what is the DOM size in the new test
8:28
So let's scroll down and let me just find this option avoid DOM size
8:36
So I think the error is gone because it has gone below the limit and as you can see we will not find any error like avoid dom size so I think it is in past and as you can see there is the option
8:53
avoid an excessive dome size so earlier it was red flag by the pay speed inside
8:59
and when I check it and as you can see avoid dome size it has gone below 850 so
9:07
So there is 815 elements and before there is 830. So we have reduced 15 nodes in that web page
9:16
So in this way you can fix this error, avoid an excessive DOM site
9:20
So you have to minimize the total number of tags use on that web page and also impact
9:26
the theme code. So let me just open the theme. So as you can see, there is a sidebar in this page or there is a header in this page and
9:35
there is footer in the space. So all the elements will contribute to the DOM size
9:40
So you can reduce the total DOM size in the theme and you can reduce the DOM size from
9:46
your post editor. And if you are using WordPress then let me just show you how you can reduce DOM size
9:53
So it depends on how you design the web page. So suppose let me just add a row layout here and let me just add a row layout like this and
10:04
let me just add another row layout under this low row layout and as you can see we have
10:10
added some nested element here there is a row layout under this row layout there is a section
10:16
here and under that section there is another row layout and in that row layout we have seen
10:22
two sections so insist of adding the structure like this so you can reduce the dome size
10:29
just by adding a row layout like this so let me just add the row layout
10:33
row layout here and instead of adding a whole row layout and another two sections inside
10:40
the row layout I can just add the 2 by 2 row layout and I can just simply use this element
10:46
hold row layout and I can just add and padding and margin to this element and I can just
10:53
simply add the background color here and I can just add the padding within this section
11:03
So you have to try to reduce the number of elements used on that web page so thereby you can reduce the total number of DOM sites
11:11
So I hope this video help you reduce the DOM sites and avoid DOM site error in your PaySpeed Inside test
11:19
And if you have any doubt regarding this, then you can ask me in the comment sections
11:23
And if you found this video helpful then make sure to hit the like button
11:27
And I will see you in the next video. And don't forget to check out the pay speed
11:32
the pay speed playlist so it will help you improve your blogger website drastically. Thank you