@DevOpsSummit Authors: Liz McMillan, Pat Romanski, Yeshim Deniz, Zakia Bouachraoui, Elizabeth White

Related Topics: @DevOpsSummit

@DevOpsSummit: Blog Post

Web Performance 101: Critical Render Path | @DevOpsSummit #DevOps #WebPerf

The success of a website is directly proportional to the users’ digital experience

Web Performance 101: Critical Render Path
By Kameerath Kareem

The success of a website is directly proportional to the users’ digital experience. In the age of tech, savvy consumers, and competitive targeted marketing, speed matters. Users expect websites to load fast – the faster the user can view the webpage, the better the digital experience. We’ve already discussed how page size, images, and scripts can affect webpage load time and how each of these factors can be optimized to deliver the best user experience. In this article, we look at another important factor that determines web performance: critical render path.

What is critical render path?

The series of events involved in downloading website resources (HTML, CSS, and scripts), processing, and rendering the first pixel on the page is called the critical render path.

Tech Terms Explained
DOM Document object model defines the structure of the webpage, the HTML elements are rendered on the page based on the DOM.
CSSOM CSS is parsed to form the CSS object model which defines the style rules for the webpage.
Render Start The time taken to receive the first byte of data for the primary URL.

A browser needs to construct the structure of the page before rendering. The webpage data structure has two main components: DOM (document object model) and CSSOM (CSS object model). The browser parses the page HTML to form the DOM while the CSS is used to build the CSSOM.

The HTML is received by the browser in raw bytes, which is converted to characters. The HTML markup tokens/tags (for example: “<head>”, “<body>”) are then generated. These tags are then mapped to form nodes that make up the DOM tree.

full-processA similar process is carried out by the browser when it receives the CSS rules. The data is converted to characters and tokens, which is then linked to form the CSSOM tree.

cssom-treeThe DOM and the CSSOM together form the final render tree. The browser paints each node on the page following the render tree path. The entire process takes time and can impact the overall performance of the webpage.

How significant is the critical render path?

The initial view of the page, or what the user views above the fold, is critical to the end-user experience. Optimizing each step in the critical render path will speed up the rendering process of above-the-fold content, resulting in a better digital experience.

If the page HTML contains any render-blocking script or CSS then the render start will be delayed. Most websites are cluttered with multiple CSS files, scripts, and images which are not critical for rendering the first pixel. A user is more likely to wait for a page to load if an initial layout is displayed versus a blank page.

We can see this in action in the image below – the filmstrip shows the number of seconds the page remains blank before the first pixel is displayed; Amazon paints the first pixel within a second while Nordstrom takes 2.4 seconds.

amazonvsnord_renderstartThe time taken by the initial render sets the tone for the users’ digital experience. The user perceives a better web performance even if the rest of the page takes another second to fully load.

Let us compare the Critical Render Path from another perspective. The following waterfall graphs give us a better understanding of the page design and critical render path. The graph (below) for Axis Bank shows several scripts and other resources being loaded before the page starts to render – this can be detrimental to the end-users’ digital experience.

axisbankwaterfallIn contrast, the waterfall chart for US Bank gives an example of an optimized render path – there are fewer resources that need to be downloaded before the initial render.

usbankwaterfallWhat is the ideal render path?

To optimize the critical render path, we must focus on the following three factors:

  • Reducing the number of critical assets will allow the browser to start rendering the initial view/above-the-fold content quickly without waiting for the rest of the resources to complete loading.
  • Minimizing the byte size of the critical resources will reduce browser overhead and help speed up the render process.
  • By optimizing the order in which each critical resource is downloaded or lazy-loading assets that are not critical, we can minimize the round trips the browser needs to make to fetch each critical resource and in effect reduce the length of the critical render path.

To build the ideal render path for your webpage you must analyze the assets that are critical to the initial view. The resources must then be minimized and optimized to reduce the overhead on the browser. This will ensure the progressive rendering of the page begins as fast as possible, the page will continue to load and draw all the other elements but this will not disrupt what the user views above the fold.

The post Web Performance 101: Critical Render Path appeared first on Catchpoint's Blog.

Read the original blog entry...

More Stories By Mehdi Daoudi

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.

@DevOpsSummit Stories
Daniel Jones is CTO of EngineerBetter, helping enterprises deliver value faster. Previously he was an IT consultant, indie video games developer, head of web development in the finance sector, and an award-winning martial artist. Continuous Delivery makes it possible to exploit findings of cognitive psychology and neuroscience to increase the productivity and happiness of our teams.
DevOpsSUMMIT at CloudEXPO, to be held June 25-26, 2019 at the Santa Clara Convention Center in Santa Clara, CA – announces that its Call for Papers is open. Born out of proven success in agile development, cloud computing, and process automation, DevOps is a macro trend you cannot afford to miss. From showcase success stories from early adopters and web-scale businesses, DevOps is expanding to organizations of all sizes, including the world's largest enterprises – and delivering real results. Among the proven benefits, DevOps is correlated with 20% faster time-to-market, 22% improvement in quality, and 18% reduction in dev and ops costs, according to research firm Vanson-Bourne. It is changing the way IT works, how businesses interact with customers, and how organizations are buying, building, and delivering software.
The benefits of automated cloud deployments for speed, reliability and security are undeniable. The cornerstone of this approach, immutable deployment, promotes the idea of continuously rolling safe, stable images instead of trying to keep up with managing a fixed pool of virtual or physical machines. In this talk, we'll explore the immutable infrastructure pattern and how to use continuous deployment and continuous integration (CI/CD) process to build and manage server images for any platform. Then we'll show how automate deploying these images quickly and reliability with open DevOps tools like Terraform and Digital Rebar. Not only is this approach fast, it's also more secure and robust for operators. If you are running infrastructure, this talk will change how you think about your job in profound ways.
In today's always-on world, customer expectations have changed. Competitive differentiation is delivered through rapid software innovations, the ability to respond to issues quickly and by releasing high-quality code with minimal interruptions. DevOps isn't some far off goal; it's methodologies and practices are a response to this demand. The demand to go faster. The demand for more uptime. The demand to innovate. In this keynote, we will cover the Nutanix Developer Stack. Built from the foundation of software-defined infrastructure, Nutanix has rapidly expanded into full application lifecycle management across any infrastructure or cloud .Join us as we delve into how the Nutanix Developer Stack makes it easy to build hybrid cloud applications by weaving DBaaS, micro segmentation, event driven lifecycle operations, and both financial and cloud governance together into a single unified st...
Nicolas Fierro is CEO of MIMIR Blockchain Solutions. He is a programmer, technologist, and operations dev who has worked with Ethereum and blockchain since 2014. His knowledge in blockchain dates to when he performed dev ops services to the Ethereum Foundation as one the privileged few developers to work with the original core team in Switzerland.