{"id":45270,"date":"2022-12-01T22:31:20","date_gmt":"2022-12-01T22:31:20","guid":{"rendered":"https:\/\/www.arimetrics.com\/glosario-digital\/web-rendering"},"modified":"2026-10-01T08:22:51","modified_gmt":"2026-10-01T08:22:51","slug":"web-rendering","status":"publish","type":"encyclopedia","link":"https:\/\/www.arimetrics.com\/en\/digital-glossary\/web-rendering","title":{"rendered":"Web Rendering"},"content":{"rendered":"<p><img decoding=\"async\" class=\"boxpad alignright wp-image-45302 size-full\" src=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2023\/01\/web-rendering.jpg\" alt=\"Web rendering\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2023\/01\/web-rendering.jpg 300w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2023\/01\/web-rendering-150x150.jpg 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><strong>Definition:<\/strong><\/p>\n<p><strong>Web rendering<\/strong> is the process through which a browser interprets a page&#8217;s resources, calculates its structure and styles, and draws the visual result on the screen. It may include executing JavaScript, updating content and performing further layout calculations after the initial load.<\/p>\n<p>The term is also used to describe where and when an application&#8217;s HTML is generated: on the server, during a build or on the user&#8217;s device. These strategies affect initial delivery, but the browser still has to process and display the final result.<\/p>\n\n<h2>How browser rendering works<\/h2>\n<p>When a URL is requested, the browser receives a response and begins a sequence of tasks. Some run incrementally, while others can block rendering until a resource becomes available.<\/p>\n<ol>\n<li><strong>Download:<\/strong> requests the document and linked resources over HTTP, taking priorities, cache and connection limits into account.<\/li>\n<li><strong>HTML parsing:<\/strong> turns <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/html\">HTML<\/a> into nodes and constructs the Document Object Model or DOM.<\/li>\n<li><strong>CSS processing:<\/strong> downloads and interprets <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/css\">CSS<\/a> stylesheets to form the CSS Object Model or CSSOM.<\/li>\n<li><strong>Render tree:<\/strong> combines visible DOM content with its calculated styles.<\/li>\n<li><strong>Layout and paint:<\/strong> calculates sizes and positions, creates the required layers and paints pixels on the screen.<\/li>\n<li><strong>Updates:<\/strong> <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/javascript\">JavaScript<\/a>, fonts, images or an interaction can modify the DOM, styles, layout or paint.<\/li>\n<\/ol>\n<p>Downloading a file does not mean it has already been displayed. Synchronous scripts can stop document parsing, and required stylesheets can delay the first render. The actual effect depends on the order, size, priority and behaviour of each resource.<\/p>\n<h2>Web rendering models<\/h2>\n<p>Rendering models describe how the initial content is produced and how the application continues in the browser. A single website may combine several models according to page type.<\/p>\n<ul>\n<li><strong>CSR:<\/strong> the server supplies an initial shell and the browser runs JavaScript to request data and construct much of the content.<\/li>\n<li><strong>SSR:<\/strong> the server generates HTML for each request and sends it with the requested content already represented.<\/li>\n<li><strong>Static generation:<\/strong> creates HTML during the build or publishing process and later serves it as a prepared file.<\/li>\n<li><strong>Regeneration:<\/strong> updates static pages periodically or under defined conditions without necessarily rebuilding the entire website.<\/li>\n<li><strong>Hybrid rendering:<\/strong> combines previously generated HTML with components that activate, load or update on the client.<\/li>\n<\/ul>\n<p>Hydration connects JavaScript to previously generated HTML to add interactivity. It can improve initial delivery compared with an application built entirely on the client, but it also adds code and work to the device. No rendering strategy is universally faster.<\/p>\n<h2>Relationship with web performance<\/h2>\n<p>Rendering time contributes to perceived performance. Network speed, the server and resource weight matter, but so does the work performed by the main thread to parse, execute, calculate styles, lay out and paint.<\/p>\n<ul>\n<li><strong>Critical resources:<\/strong> CSS and scripts required for the initial view should be prioritised and limited to what is essential.<\/li>\n<li><strong>Expensive JavaScript:<\/strong> long tasks can block interaction responses and delay visual updates.<\/li>\n<li><strong>Layout shifts:<\/strong> images without dimensions, fonts or inserted content can move elements that have already appeared.<\/li>\n<li><strong>Deferred loading:<\/strong> <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/lazy-loading\">lazy loading<\/a> can postpone non-critical resources but should not delay the main visible content.<\/li>\n<li><strong>Repeated work:<\/strong> frequent DOM or style changes can cause unnecessary calculations, layouts and paints.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/wpo\">WPO<\/a> should be based on laboratory measurements and real-user data. Reducing one isolated phase does not guarantee a noticeable improvement if the bottleneck lies elsewhere.<\/p>\n<h2>Web rendering and SEO<\/h2>\n<p>Search engines need to retrieve and understand content. When the initial HTML contains the main information, links and metadata, processing can be more direct. Pages that depend on JavaScript may require an additional rendering phase, and some crawlers may not execute it.<\/p>\n<ul>\n<li><strong>Main content:<\/strong> should appear in rendered HTML without requiring scrolling, clicking or accepting a dialogue.<\/li>\n<li><strong>Crawlable links:<\/strong> important navigation should use HTML links with accessible destinations and appropriate HTTP status codes.<\/li>\n<li><strong>Consistent metadata:<\/strong> titles, robots directives, canonicals and structured data should not create conflicting signals between initial and rendered HTML.<\/li>\n<li><strong>Accessible resources:<\/strong> blocking required scripts or styles may prevent a crawler from obtaining an equivalent representation.<\/li>\n<\/ul>\n<p>Google processes JavaScript through crawling, rendering and indexing phases, but rendering may wait in a queue. This does not mean JavaScript is inherently harmful or that SSR guarantees rankings. Content accessibility, quality, linking and the wider set of signals remain decisive. Resource consumption may also relate to <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/crawl-budget\">crawl budget<\/a> on large websites.<\/p>\n<h2>How to identify rendering problems<\/h2>\n<p>An assessment should compare what the server delivers, what the browser constructs and what the target crawler can process. A screenshot alone cannot verify links, metadata or HTTP responses.<\/p>\n<ul>\n<li><strong>Inspect HTML:<\/strong> compare the response source with the DOM after JavaScript has executed.<\/li>\n<li><strong>Review the network:<\/strong> locate errors, blocked resources, slow requests, redirects and unexpected responses.<\/li>\n<li><strong>Analyse performance:<\/strong> use traces to identify long tasks, recalculated styles, layout shifts and paint events.<\/li>\n<li><strong>Test the crawler:<\/strong> examine the rendered URL, loaded resources, visible content and indexing signals.<\/li>\n<\/ul>\n<p>The appropriate solution depends on the observed failure. It may involve correcting a request, reducing JavaScript, delivering essential content in HTML, changing priorities or adopting a hybrid model. Bot-specific dynamic rendering is considered a complex workaround rather than the recommended approach for a new architecture.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Definition: Web rendering is the process through which a browser interprets a page&#8217;s resources, calculates its structure and styles, and draws the visual result on the screen. It may include executing JavaScript, updating content and performing further layout calculations after the initial load. The term is also used to describe where and when an application&#8217;s [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","encyclopedia-tag":[1268],"class_list":["post-45270","encyclopedia","type-encyclopedia","status-publish","hentry","encyclopedia-tag-web-performance"],"_links":{"self":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia\/45270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media?parent=45270"}],"wp:term":[{"taxonomy":"encyclopedia-tag","embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia-tag?post=45270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}