{"id":1111,"date":"2021-02-13T14:10:49","date_gmt":"2021-02-13T13:10:49","guid":{"rendered":"https:\/\/www.wsdigitalconsulting.com\/coreweb-vitals-comment-reduire-la-taille-des-dom-pour-ameliorer-la-performance-de-votre-site\/"},"modified":"2021-02-13T14:10:49","modified_gmt":"2021-02-13T13:10:49","slug":"coreweb-vitals-comment-reduire-la-taille-des-dom-pour-ameliorer-la-performance-de-votre-site","status":"publish","type":"post","link":"https:\/\/www.evolurise.com\/en\/coreweb-vitals-comment-reduire-la-taille-des-dom-pour-ameliorer-la-performance-de-votre-site\/","title":{"rendered":"[CoreWeb Vitals] How to reduce DOM size to improve your site's performance?"},"content":{"rendered":"
By analyzing your site using Google PageSpeed Insights<\/a>You may have noticed an error such as \"Avoid excessive DOM size\":<\/p>\n\n\n\n Or in GTmetrix<\/a> \"Reduce the number of DOM elements\":<\/p>\n\n\n\n When your browser receives an HTML document, it needs to be converted into a tree structure, which is then rendered and painted using CSS and JavaScript.<\/p>\n\n\n\n This tree structure is known as the DOM or Document Object Model.<\/p>\n\n\n\n Lighthouse and Google PageSpeed Insights start marking pages if one of the following conditions is met:<\/p>\n\n\n\n Excessive DOM size can impact performance in a number of ways.<\/p>\n\n\n\n Longer time to analyze and render (FCP)<\/strong> A large DOM tree and complicated style rules (CSS) that require a huge amount of processing by the browser. The browser has to parse the HTML, build the rendering tree and so on. Every time the user interacts or something changes in the HTML, the browser has to recalculate it. For example, the technical reduction of the DOM size is done as follows:<\/p>\n\n\n\n Opt for :<\/p>\n\n\n\n Basically, you need to get rid of all possible HTML elements. You can also use Flexbox or Grid to further reduce the size of the DOM.<\/p>\n\n\n\n If you have a page with several sections? Like services, contact forms, products, blog posts, testimonials, etc.?<\/p>\n\n\n\n Try dividing them into several pages and linking to them from the header, for example (Nav bar).<\/p>\n\n\n\n \"Lazyload all possible elements. For example:<\/p>\n\n\n\n NB: Lazyloading images will not reduce the size of the DOM.<\/em><\/p>\n\n\n\n Sometimes, it may be necessary to remove elements injected by the theme\/builder. For example, adding to the shopping cart button on product pages, the rating button, author information, publication date, etc.<\/p>\n\n\n\n A quick solution is to hide them using CSS :<\/p>\n\n\n\n Although this solution seems easy to implement, it's not the optimal solution, as you're distributing unwanted code to users (which includes both HTML markup and CSS styles).<\/p>\n\n\n\n Check your theme\/plugin settings to see if there's an option to remove it. If not, find the corresponding PHP code and delete it.<\/p>\n\n\n\n A good theme plays a major role in DOM size. Use well-coded themes like GeneratePress or Astra.<\/p>\n\n\n\n Page constructors also inject too many divs. Use constructors like Oxygen<\/a> which don't inject unwanted divs and have more control over HTML structure.<\/p>\n\n\n\n If you don't know Oxygen, have a look at \"\u00a0Building a Website in Oxygen from Scratch.<\/a>\"\u00a0<\/p>\n\n\n\n Other plugins or theme settings may inject too many divs. Example: \"mega menu\" plugins like UberMenu.<\/p>\n\n\n\n Sometimes they're crucial to your website's user experience. But sometimes they are never used by users.<\/p>\n\n\n\n Maybe your footer links are never clicked because most visitors just scroll to 75% of the page.<\/p>\n\n\n\n Use tools like HotJar or Google Analytics events to see what visitors do and don't use. Analyze, measure and iterate.<\/p>\n\n\n\n If you need help optimizing your site's web performance or improving the loading speed of your strategic pages, WS Digital Consulting<\/a>We have qualified and certified experts who are ready to help you and propose solutions tailored to your site and your budget. Contact us for a FREE personalized quote: Contact us<\/a><\/p>","protected":false},"excerpt":{"rendered":" While analyzing your site with Google PageSpeed Insights, you may have noticed an error like \"Avoid excessive DOM size\": Or in GTmetrix \"Reduce the DOM size\": Or in GTmetrix \"Reduce the DOM size\": Or in GTmetrix \"Reduce the DOM size\": Or in GTmetrix \"Reduce the DOM size\": Or in GTmetrix \"Reduce the...<\/p>","protected":false},"author":2,"featured_media":4794,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[275,276,277],"tags":[],"class_list":["post-1111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coreweb-vitals","category-performance-web","category-vitesse-de-chargement-des-sites-internet"],"yoast_head":"\n<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
What is DOM?<\/h2>\n\n\n\n
\n
\n
\n
What impact does DOM size have on performance?<\/h2>\n\n\n\n
Increased memory usage<\/strong> Your JavaScript code can have functions to access DOM elements. A larger DOM arbo means that JavaScript uses more memory to process these elements. Here's an example of queries to manipulate DOM with JS: document.querySelectorAll('img') which lists all images, commonly used by LazyLoad libraries.
Increases TTFB<\/strong> As the size of your DOM increases, so does the size of the HTML document (in KB). As more data has to be transferred over the network, the TTFB increases.<\/p>\n\n\n\n
How can I technically reduce the size of the DOM?<\/h2>\n\n\n\n<div id="navigation-main">\n <ul>\n etc.\n <\/ul>\n<\/div><\/code><\/pre>\n\n\n\n
How can I reduce the size of the DOM in WordPress?<\/h2>\n\n\n\n
Divide pages with several sections into several pages<\/h3>\n\n\n\n
Apply Lazyload to your site elements and paginate everything possible<\/h3>\n\n\n\n
\n
Don't hide unwanted elements using CSS<\/h3>\n\n\n\n.cart-button {
display:none ;
}<\/code><\/p>\n\n\n\nUse well-coded themes and page builders<\/h3>\n\n\n\n
Conclusion<\/h2>\n\n\n\n