{"id":17550,"date":"2021-11-12T15:53:52","date_gmt":"2021-11-12T21:53:52","guid":{"rendered":"https:\/\/www.dotcom-tools.com\/web-performance\/?page_id=17550"},"modified":"2021-11-12T15:53:52","modified_gmt":"2021-11-12T21:53:52","slug":"avoid-an-excessive-dom-size","status":"publish","type":"page","link":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/","title":{"rendered":"Lighthouse Optimizations &#8211; How to Avoid an Excessive DOM Size"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; gap=&#8221;25&#8243; equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column css=&#8221;.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}&#8221;][vc_custom_heading text=&#8221;<b>Avoid an Excessive DOM Size<\/b>&#8221; font_container=&#8221;tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221; css=&#8221;.vc_custom_1636753644113{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][\/vc_column][\/vc_row][vc_row margin_top=&#8221;40&#8243; margin_bottom=&#8221;30px&#8221; css=&#8221;.vc_custom_1636409410012{margin-bottom: 30px !important;}&#8221;][vc_column][vc_custom_heading text=&#8221;The DOM: An Overview&#8221; font_container=&#8221;tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"font-size: 16px;\">The Document Object Model, or DOM or DOM tree, is the structure that represents the XML or HTML (HyperText Markup Language) documents. It is a map, or technically an API (Application Programming Interfaces), that is used by the browser (and developers) to read, access, build, delete, and update all the elements of a web page. One of the major benefits of the DOM is that it is language agnostic and is an industry and programming standard that can be used with all languages and frameworks. The DOM structure itself is made up of a variety of nodes. And these nodes are objects that can be added into the structure of the DOM. And like other objects, nodes can be modified to include different properties and methods. There are a variety of different nodes that make up the DOM. They are also given a number as a unique identifier and can also include sub-nodes, or what are known as children nodes. The list below includes the 12 distinct types of main nodes that make up the DOM:<\/p>\n<ul>\n<li style=\"font-size: 16px;\" style=\"list-style-type: none;\">\n<ul>\n<li><strong>Element (1).<\/strong> These are one of the most common types of nodes and they represent all the HTML elements on a page.<\/li>\n<li><strong>Attr (2).<\/strong> The Attr node is used to represent the name of a document.<\/li>\n<li><strong>Text (3).<\/strong> Text nodes are the text values found inside of the element nodes as attributes.<\/li>\n<li><strong>CDATASection (4).<\/strong> This node is not commonly used but is short for \u201cCharacter Data.\u201d This is used to differentiate between character data and markup data, so it can be ignored by the parser and not part of the page\u2019s markup.<\/li>\n<li><strong>EntityReference (5).<\/strong> An EntityReference is a group of characters that can be used as a substitute for another character, word, or phrases. It helps differentiate between a literal character and a markup character. These nodes always follow the same format. They begin with an ampersand and end with a semicolon.<\/li>\n<li><strong>Entity (6).<\/strong> The Entity node represents the actual entity (parsed or unparsed) in the XML document and can also include various attributes.<\/li>\n<li><strong>Processing Instruction (7).<\/strong> This node is responsible for sending instructions to specific applications within the document that recognize the instructions.<\/li>\n<li><strong>Comment (8).<\/strong> The Comment nodes are HTML comments.<\/li>\n<li><strong>Document (9).<\/strong> The Document node refers to the entire HTML document.<\/li>\n<li><strong>DocumentType (10).<\/strong> The DocumentType node is responsible for handling the document type and communicating to the browser what language, HTML standard, or any other markup language, is being used.<\/li>\n<li><strong>DocumentFragment (11).<\/strong> The DocumentFragments can contain a collection of nodes that can be used for inserting a group of elements or text elements into a document.<\/li>\n<li><strong>Notation (12).<\/strong> This represents a notation within the Document Type Definition, or DTD.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"font-size: 16px;\">When we talk about documents within the DOM, it can refer to multiple things, such as HTML, XML, CSS (Cascading Style Sheets), JavaScript. The objects are what define help define the tags and elements of the file. The model is the layout, or structure.<\/p>\n<p style=\"font-size: 16px;\">When a user visits your site, the server sends all the HTML to the browser, which is then converted into the DOM. Additionally, any JavaScript code that is used with page will interact with the DOM as an API for the HTML. For example, using JavaScript, programmers can change\/remove HTML elements, update CSS styles, create action on clicks, form submissions, etc., and more. This provides a more interactive and dynamic environment for users, helping to keep them engaged with your pages.<\/p>\n<p>[\/vc_column_text][vc_custom_heading text=&#8221;Recommendations for Avoiding Excessive DOM Size&#8221; font_container=&#8221;tag:h3|font_size:30|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"font-size: 16px;\">As you can see, the DOM can become a complex, and sometimes confusing structure to have to manage. The larger the document, the more CPU and memory are needed to process all the nodes and branches. The tradeoff between providing a complex, dynamic user experience with a bunch of JavaScript and ensuring page load times stay within expectations are important considerations. Lighthouse will trigger a warning if your DOM contains more than 1,500 elements. Sometimes, there is just not a lot you can do to avoid your DOM becoming too large, but as you are building pages, ensure that there are not too many CMS (Content Management System) themes used, as these can add to the number of additional elements. And in some cases, they really do not add to the functionality of your pages, so remove them if possible.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row margin_top=&#8221;60&#8243; margin_bottom=&#8221;0&#8243; css=&#8221;.vc_custom_1636595147911{margin-bottom: 15px !important;}&#8221;][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595227743{padding-top: 60px !important;padding-bottom: 60px !important;padding-left: 10px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17233&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>Lighthouse<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Flighthouse%2F&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595173585{padding-top: 60px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17284&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>PageSpeed Terms<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fpagespeed%2F&#8221;][\/vc_column][vc_column width=&#8221;1\/3&#8243; css=&#8221;.vc_custom_1636595196399{padding-top: 60px !important;padding-right: 10px !important;padding-bottom: 60px !important;background-color: #f6f6f6 !important;}&#8221;][vc_single_image image=&#8221;17281&#8243; alignment=&#8221;center&#8221; style=&#8221;vc_box_rounded&#8221;][vc_custom_heading text=&#8221;<b>YSlow<\/b>&#8221; font_container=&#8221;tag:p|font_size:20|text_align:center|color:%232b2b2b|line_height:1&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\">YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.<\/p>\n<p>[\/vc_column_text][vc_btn title=&#8221;Learn More&#8221; style=&#8221;flat&#8221; color=&#8221;primary&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-location-arrow&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fwww.dotcom-tools.com%2Fweb-performance%2Fyslow%2F&#8221;][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; gap=&#8221;25&#8243; equal_height=&#8221;yes&#8221; content_placement=&#8221;middle&#8221; css=&#8221;.vc_custom_1636408663624{padding-top: 100px !important;padding-bottom: 100px !important;background-image: url(https:\/\/www.dotcom-tools.com\/blog\/wp-content\/uploads\/2015\/09\/hero-section-with-description-3320.jpg?id=15799) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221;][vc_column css=&#8221;.vc_custom_1636409653940{padding-top: 30px !important;padding-bottom: 30px !important;background-color: #e6eaef !important;}&#8221;][vc_custom_heading text=&#8221;Avoid an Excessive DOM Size&#8221; font_container=&#8221;tag:h1|font_size:40|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221; css=&#8221;.vc_custom_1636753644113{padding-top: 30px !important;padding-bottom: 30px !important;}&#8221;][\/vc_column][\/vc_row][vc_row margin_top=&#8221;40&#8243; margin_bottom=&#8221;30px&#8221; css=&#8221;.vc_custom_1636409410012{margin-bottom: 30px !important;}&#8221;][vc_column][vc_custom_heading text=&#8221;The DOM: An Overview&#8221; font_container=&#8221;tag:h2|font_size:35|text_align:center|color:%232b2b2b|line_height:1.5&#8243; use_theme_fonts=&#8221;yes&#8221;][vc_column_text] The Document Object Model, or DOM or&hellip;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":17260,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.6 (Yoast SEO v19.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Lighthouse Optimizations - How to Avoid an Excessive DOM Size | Dotcom-Monitor Tools Blog<\/title>\r\n<meta name=\"description\" content=\"Want to learn more about avoiding an excessive DOM size? What does this Lighthouse recommendation mean? Fix excessive DOM size errors with Dotcom-Tools!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Lighthouse Optimizations - How to Avoid an Excessive DOM Size\" \/>\r\n<meta property=\"og:description\" content=\"Want to learn more about avoiding an excessive DOM size? What does this Lighthouse recommendation mean? Fix excessive DOM size errors with Dotcom-Tools!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Dotcom-Monitor Tools Blog\" \/>\r\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dotcommonitor\" \/>\r\n<meta name=\"twitter:card\" content=\"summary\" \/>\r\n<meta name=\"twitter:site\" content=\"@dotcom_monitor\" \/>\r\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\",\"name\":\"Dotcom-Monitor Tools Blog\",\"description\":\"Let&#039;s Make the Web a Faster Place.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/#webpage\",\"url\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/\",\"name\":\"Lighthouse Optimizations - How to Avoid an Excessive DOM Size | Dotcom-Monitor Tools Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/#website\"},\"datePublished\":\"2021-11-12T21:53:52+00:00\",\"dateModified\":\"2021-11-12T21:53:52+00:00\",\"description\":\"Want to learn more about avoiding an excessive DOM size? What does this Lighthouse recommendation mean? Fix excessive DOM size errors with Dotcom-Tools!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lighthouse Optimizations\",\"item\":\"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lighthouse Optimizations &#8211; How to Avoid an Excessive DOM Size\"}]}]}<\/script>\r\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lighthouse Optimizations - How to Avoid an Excessive DOM Size | Dotcom-Monitor Tools Blog","description":"Want to learn more about avoiding an excessive DOM size? What does this Lighthouse recommendation mean? Fix excessive DOM size errors with Dotcom-Tools!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/","og_locale":"en_US","og_type":"article","og_title":"Lighthouse Optimizations - How to Avoid an Excessive DOM Size","og_description":"Want to learn more about avoiding an excessive DOM size? What does this Lighthouse recommendation mean? Fix excessive DOM size errors with Dotcom-Tools!","og_url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/","og_site_name":"Dotcom-Monitor Tools Blog","article_publisher":"https:\/\/www.facebook.com\/dotcommonitor","twitter_card":"summary","twitter_site":"@dotcom_monitor","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website","url":"https:\/\/www.dotcom-tools.com\/web-performance\/","name":"Dotcom-Monitor Tools Blog","description":"Let&#039;s Make the Web a Faster Place.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dotcom-tools.com\/web-performance\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/#webpage","url":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/","name":"Lighthouse Optimizations - How to Avoid an Excessive DOM Size | Dotcom-Monitor Tools Blog","isPartOf":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/#website"},"datePublished":"2021-11-12T21:53:52+00:00","dateModified":"2021-11-12T21:53:52+00:00","description":"Want to learn more about avoiding an excessive DOM size? What does this Lighthouse recommendation mean? Fix excessive DOM size errors with Dotcom-Tools!","breadcrumb":{"@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/avoid-an-excessive-dom-size\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dotcom-tools.com\/web-performance\/"},{"@type":"ListItem","position":2,"name":"Lighthouse Optimizations","item":"https:\/\/www.dotcom-tools.com\/web-performance\/lighthouse\/"},{"@type":"ListItem","position":3,"name":"Lighthouse Optimizations &#8211; How to Avoid an Excessive DOM Size"}]}]}},"_links":{"self":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17550"}],"collection":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/comments?post=17550"}],"version-history":[{"count":2,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17550\/revisions"}],"predecessor-version":[{"id":17552,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17550\/revisions\/17552"}],"up":[{"embeddable":true,"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/pages\/17260"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-tools.com\/web-performance\/wp-json\/wp\/v2\/media?parent=17550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}