SlideShare a Scribd company logo
Critical Rendering
Path
Kavitha H N
Agenda:
What is critical rendering path?
Why we need to know critical rendering path?
DOM construction
DOM partially loading
CSSOM
CSSOM render blocking
Render Tree
Layout
Analytics on browser
My reactions when
first time I heard of
CRP
What and Why?
CRITICAL RENDERING PATH IS THE SEQUENCE
OF STEPS BROWSERS GOES THROUGH TO
CONVERT HTML, CSS AND JAVASCRIPT TO
ACTUAL PIXELS ON THE SCREEN.
AND WE NEED TO KNOW THIS TO BUILD
PERFORMANCE ORIENTED WEB APPLICATIONS.

Recommended for you

WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT

Web development involves building, creating, and maintaining websites. It has two broad divisions - front-end development which deals with the user interface using HTML, CSS, and JavaScript, and back-end development which controls behind-the-scenes processes using databases. For example, when a user logs into Facebook, scripts on the back-end receive updates and re-generate the front-end display of the news feed accordingly. Web development is used in industries like mobile apps, entertainment, healthcare, banking, and government organizations.

web development
Website Development Proposal PowerPoint Presentation Slides
Website Development Proposal PowerPoint Presentation SlidesWebsite Development Proposal PowerPoint Presentation Slides
Website Development Proposal PowerPoint Presentation Slides

If your company needs to submit a Website Development Proposal PowerPoint Presentation Slides look no further. Our researchers have analyzed thousands of proposals on this topic for effectiveness and conversion. Just download our template, add your company data and submit to your client for a positive response. https://bit.ly/2WjtNbj

business proposalproposal templateswebsite development
NEXT.JS
NEXT.JSNEXT.JS
NEXT.JS

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

next.jsnextreact
Browser Actions to render content
 The browser follows a well defined set of steps and it all
starts with processing the html and building the DOM.
Browser Actions to render content
 First we grab the html and we
create the document object
model (DOM) .
 Then we fetch css and we build
css object model(CSSOM).
 Then we combine both and
create render tree.
 Then we have to figure out where
everything goes and it happens in
layout step.
 Then finally we paint the layout
on actual screen.
Lets go in depth!!
 The html specification contains a set of rules to process the received data
for example the text contain in angle brackets (<html>) as special meaning
and is set to be a tag as result. So when browser encounter such tokens
browser emits a token called start tag html token, next head tag token
then meta and so on..
 The entire process is done by tokeniser while tokeniser does this process
there is another thing happening simultaneously these tokens are
converted into node objects.
 As the tokeniser emits the relation ship between node objects for example
the start tag head token comes inside close tag html token so head tag will
be child of html tag. Similarly the meta tag , link tag and so on.
 Similarly once we consume all tokens we arrive at document object model
(DOM) which is a tree structure which captures the content and properties
of html and there relation ship between the nodes.
 Also note that all these objects contains all of their properties for example
img node as src attribute. The DOM is the full parts presentation of html
mark up.

Recommended for you

Angular 4 The new Http Client Module
Angular 4 The new Http Client ModuleAngular 4 The new Http Client Module
Angular 4 The new Http Client Module

The document discusses Angular 4's HTTP client module. Some key points: 1. The HTTP client uses Observables to handle asynchronous requests and responses in a reactive way. Observables allow for features like retry logic. 2. JSON responses are parsed by default, eliminating the need for manual parsing. 3. Interceptors allow adding middleware logic like authentication headers to all requests. 4. Progress events provide feedback on file upload and download progress.

angular4httpclientrest api
How to Integrate WhatsApp with Salesforce.pptx
How to Integrate WhatsApp with Salesforce.pptxHow to Integrate WhatsApp with Salesforce.pptx
How to Integrate WhatsApp with Salesforce.pptx

AwsQuality App is a highly rated AppExchange app with a unique set of features, and it’s probably the best for Salesforce Integration with WhatsApp. AwsQuality makes it simple to communicate with your customers worldwide via SMS and WhatsApp. Their average 5.0-star rating shreds of evidence from over 45 customer reviews. Read more: https://www.awsquality.com/how-to-integrate-whatsapp-with-salesforce/

salesforceintegrationwith
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout

This document summarizes CSS Grid Layout, a new two-dimensional grid system being added to CSS. It discusses some of the limitations of existing CSS layout methods and how Grid Layout addresses them. Key points include: Grid Layout uses line-based placement to position items, grid tracks can be flexible or fixed widths, areas can be explicitly or implicitly named, and the system avoids hacks and limitations of previous methods.

cssgrid layoutcss3
Cool.. We have built the DOM.
DOM partially loading
 The browser constructs the DOM incrementally so we
can take advantage of this to speed up the rendering of
your page
 Whenever you send a search request to Google the
server actually does something very clever before it
knows what the search results are it immediately returns
the header of the page.
 As this header is same for all the users, this allows the
browser to start processing the response and begin
constructing the DOM incrementally and potentially
even render the header and once search results are
ready the rest of the html arrives and then the browsers
parses that and displays the content.
 Returning partial html can be
good performance optimization.
CSSOM
Now we have constructed DOM, DOM contains the
content of the page we should also know how to
display the page, to do that we should build css object
model.

Recommended for you

Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt

HiddenBrains is an offshore web development company in india. We provide hiring services for php web development, asp.net web development, java programming, open source development, ecommerce solution, internet marketing and web design. Hire highly experienced web programmer and get customized web application development services in UK, Europe, USA.

web development companyweb developerhire php developer
Web development
Web developmentWeb development
Web development

The document discusses web development and provides an overview of key topics including HTML, CSS, JavaScript, and sample projects. It introduces HTML tags and elements, CSS syntax and types, JavaScript syntax, and provides code examples of simple HTML, CSS, and JavaScript documents. It also outlines three projects: a portfolio site using HTML and CSS, a static website using HTML and CSS, and a dynamic website using HTML, CSS, and JavaScript.

web developmentweb designweb design and development
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners

Cascading Style Sheets (CSS) is a mechanism for adding style to HTML documents. CSS allows complete control over layout, design and formatting of web pages. CSS properties can be applied inline, internally via <style> tags, or externally via linked style sheets. CSS uses selectors to apply styles to HTML elements based on their id, class, type and other attributes. Declarations are made up of properties and values to specify styles.

 The first thing the browser as to do is
identify tokens and convert the tokens to
node.
 The first would be body with font-size 16px
and the paragraph node.
 Paragraph is child of body as all the visible
content is part of body. Also children of the
body node inherits its parents styling rule
this is what we call cascading rules and
cascading style sheets.
CSS is render blocking
We cant use partial css tree because if we render the css with
current styles and later if the style is changed then we would be
rendering wrong css. So browser blocks page rendering until
entire css is processed.
Well Done– We generated CSSOM
Render Tree
 Now we have DOM and CSSOM need to combine them into render tree.
 One of the important property of render tree is it only captures visible
content.

Recommended for you

WordPress for Education PPT
WordPress for Education PPTWordPress for Education PPT
WordPress for Education PPT

The document discusses using WordPress blogs for education. It argues that WordPress blogs can meet students where they are with technology, increase interaction through self-posting and commenting, and be helpful for teachers by making homework paperless and automatically archiving student work. It then provides tips for using WordPress, including an overview of signing up, the dashboard, categories and tags for organizing posts, commenting features, and user roles. Finally, it lists some free WordPress themes that could be suitable for education purposes.

Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - Directives

A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module. ngif ngFor If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.

angularwebstack academy bangalorefullstack web developer
Resumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdfResumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdf

O documento resume os principais conceitos de CSS, incluindo: 1) CSS é usado para definir estilos e formatação para elementos HTML; 2) CSS pode ser inserido por meio de arquivos externos, internamente ou inline; 3) Seletores CSS são usados para estilizar elementos específicos e existem vários tipos como por elemento, ID, classe e universal.

cssw3schools
 To construct the render tree we have start at the
root element which in this case is paragraph
element.
 First render tree picks paragraph element and
correspondingly checks for any style in CSSOM
if it finds style then it creates render tree.
 Then it navigates to Hello node and no
corresponding css but it renders as is, then it
goes to span node , span as css rules but if you
the rule says display:none, so it ignores span
node and styles as render tree just picks visible
content. and then moves to student node which
is text and renders that.
Render tree is
very similar on
what we see
on phone
Quiz Time
Awesome – you learnt it!!

Recommended for you

AEM & Single Page Applications (SPAs) 101
AEM & Single Page Applications (SPAs) 101AEM & Single Page Applications (SPAs) 101
AEM & Single Page Applications (SPAs) 101

This document discusses single page applications (SPAs) and their relationship with content management systems (CMS) like Adobe Experience Manager (AEM). It provides background on the shift from traditional websites to SPAs, outlines benefits and challenges of SPAs for both IT and marketing teams, and describes how AEM 6.4 aims to support content delivery to various channels including SPAs through a decoupled architecture.

content managementdigital asset managementdam
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Development

This document discusses various online tools that can be used for content development. It covers online platforms and applications, web design principles and elements, using templates and WYSIWYG editors for web design, online presentation tools, cloud storage, and mapping applications. Some key points include that online platforms allow users to create different types of content, common web design principles, examples of layouts and WYSIWYG editors, online presentation applications like Prezi and SlideShare, popular cloud storage services, and mapping tools such as Google Maps.

Pillar Content Strategy
Pillar Content StrategyPillar Content Strategy
Pillar Content Strategy

This document summarizes a presentation about creating content pillars for SEO. It discusses how search engines and user behavior have changed, requiring a new approach to content strategy focused on building comprehensive content pillars around core topics. It then outlines the 7 steps to reverse engineer a content pillar: 1) choose a core topic, 2) identify subtopics, 3) create blog posts, 4) assemble content into a downloadable offer, 5) build a resource page, 6) link relevant content, and 7) create access to the page. An example of creating a text analysis content pillar for a company called Etuma is provided.

marketingcontent marketingcontent strategy
Layout - Calculating
positions and
dimensions
Where and how all the elements are
positioned on the page is the layout step.
Here is a simple render tree and in the
layout step body tag will be taken complete
width of view port and its Gray in color
Next div tag takes 50% of width from its
parents body which we can see in Green
and then p tag takes 50% of div tag which
we can see taken in red color.
Paint : So the final
step is putting pixels
on the page.
Quiz time
Well Done!! You learnt it guys

Recommended for you

Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt

History Why bootstrap Getting started containers Grid basic Typograpy Colours Tables Images Alerts Buttons Progress bar Spinner Pagination Listgroups Cards Dropdowns Collaps Navs Carousel Modal Tooltip Popovers Toast Scrollspy Offcanvas Utilities Bootstrap 5 forms

historybootstraptypograpy
Flexbox
FlexboxFlexbox
Flexbox

Introduction and real-life examples about using Flexbox. Presented at the front-end meetup in Skopje on 12.01.2016.

flexboxweb design and developmentcss
How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)

how web and browser works, this presentation can help you in understanding what happens when you enter a URL in your browser and how the page is displayed by the browser, and how we can improve the performance of our applications.

browserjavascriptweb
Analytics:
Critical rendering path presentation
https://www.linkedin.com/pulse/critical-
rendering-path-kavitha-vikas/
https://www.slideshare.net/KavithaVikas/crit
ical-rendering-path-presentation-
174676915
Follow me on twitter and Linkedin
@kavithavikas
https://www.linkedin.com/in/kavitha-vikas-43024b19/

Recommended for you

Understanding the dom by Benedict Ayiko
Understanding the dom by Benedict AyikoUnderstanding the dom by Benedict Ayiko
Understanding the dom by Benedict Ayiko

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.

andeladevnightsug
Quantum. Just Quantum
Quantum. Just QuantumQuantum. Just Quantum
Quantum. Just Quantum

EifTech's Software Developer Dmytro Mysak collected all the secrets and tricks behind new Firefox Quantum: + Quantum overview + Rust-bindgen + Quantum CSS + Quantum Render + Quantum + Compositor + Quantum DOM + Quantum Flow

firefoxfirefox quantumquantum flow
Web performance
Web performanceWeb performance
Web performance

Web performance metrics, analysis and discussion. Finally determination of a TO-DO lists for achieving goal based on the RAIL performance model.

web performanceperformanceperfmatters

More Related Content

What's hot

Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing Presentation
RahulSuri30
 
Enterprise Software Proposal Template PowerPoint Presentation Slides
Enterprise Software Proposal Template PowerPoint Presentation SlidesEnterprise Software Proposal Template PowerPoint Presentation Slides
Enterprise Software Proposal Template PowerPoint Presentation Slides
SlideTeam
 
Ecommerce Online Store Developer Proposal PowerPoint Presentation Slides
Ecommerce Online Store Developer Proposal PowerPoint Presentation SlidesEcommerce Online Store Developer Proposal PowerPoint Presentation Slides
Ecommerce Online Store Developer Proposal PowerPoint Presentation Slides
SlideTeam
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
khushi74
 
Website Development Proposal PowerPoint Presentation Slides
Website Development Proposal PowerPoint Presentation SlidesWebsite Development Proposal PowerPoint Presentation Slides
Website Development Proposal PowerPoint Presentation Slides
SlideTeam
 
NEXT.JS
NEXT.JSNEXT.JS
Angular 4 The new Http Client Module
Angular 4 The new Http Client ModuleAngular 4 The new Http Client Module
Angular 4 The new Http Client Module
arjun singh
 
How to Integrate WhatsApp with Salesforce.pptx
How to Integrate WhatsApp with Salesforce.pptxHow to Integrate WhatsApp with Salesforce.pptx
How to Integrate WhatsApp with Salesforce.pptx
AwsQuality
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
Bruce Tucker
 
Web development
Web developmentWeb development
Web development
GarvitBaleshwar
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
 
WordPress for Education PPT
WordPress for Education PPTWordPress for Education PPT
WordPress for Education PPT
jekkilekki
 
Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - Directives
WebStackAcademy
 
Resumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdfResumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdf
ssuser1a3a66
 
AEM & Single Page Applications (SPAs) 101
AEM & Single Page Applications (SPAs) 101AEM & Single Page Applications (SPAs) 101
AEM & Single Page Applications (SPAs) 101
Adobe
 
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Development
adrianlaranjo111
 
Pillar Content Strategy
Pillar Content StrategyPillar Content Strategy
Pillar Content Strategy
Knoxville HUG
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
Mallikarjuna G D
 
Flexbox
FlexboxFlexbox
Flexbox
Netcetera
 

What's hot (20)

Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing Presentation
 
Enterprise Software Proposal Template PowerPoint Presentation Slides
Enterprise Software Proposal Template PowerPoint Presentation SlidesEnterprise Software Proposal Template PowerPoint Presentation Slides
Enterprise Software Proposal Template PowerPoint Presentation Slides
 
Ecommerce Online Store Developer Proposal PowerPoint Presentation Slides
Ecommerce Online Store Developer Proposal PowerPoint Presentation SlidesEcommerce Online Store Developer Proposal PowerPoint Presentation Slides
Ecommerce Online Store Developer Proposal PowerPoint Presentation Slides
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
Website Development Proposal PowerPoint Presentation Slides
Website Development Proposal PowerPoint Presentation SlidesWebsite Development Proposal PowerPoint Presentation Slides
Website Development Proposal PowerPoint Presentation Slides
 
NEXT.JS
NEXT.JSNEXT.JS
NEXT.JS
 
Angular 4 The new Http Client Module
Angular 4 The new Http Client ModuleAngular 4 The new Http Client Module
Angular 4 The new Http Client Module
 
How to Integrate WhatsApp with Salesforce.pptx
How to Integrate WhatsApp with Salesforce.pptxHow to Integrate WhatsApp with Salesforce.pptx
How to Integrate WhatsApp with Salesforce.pptx
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
Web development
Web developmentWeb development
Web development
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
WordPress for Education PPT
WordPress for Education PPTWordPress for Education PPT
WordPress for Education PPT
 
Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - Directives
 
Resumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdfResumo CSS – w3schools.pdf
Resumo CSS – w3schools.pdf
 
AEM & Single Page Applications (SPAs) 101
AEM & Single Page Applications (SPAs) 101AEM & Single Page Applications (SPAs) 101
AEM & Single Page Applications (SPAs) 101
 
Online tools for Content Development
Online tools for Content DevelopmentOnline tools for Content Development
Online tools for Content Development
 
Pillar Content Strategy
Pillar Content StrategyPillar Content Strategy
Pillar Content Strategy
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Flexbox
FlexboxFlexbox
Flexbox
 

Similar to Critical rendering path presentation

How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)
Vibhor Grover
 
Understanding the dom by Benedict Ayiko
Understanding the dom by Benedict AyikoUnderstanding the dom by Benedict Ayiko
Understanding the dom by Benedict Ayiko
Damalie Wasukira
 
Quantum. Just Quantum
Quantum. Just QuantumQuantum. Just Quantum
Quantum. Just Quantum
ElifTech
 
Web performance
Web performanceWeb performance
Web performance
Samir Das
 
Web performance
Web performanceWeb performance
Web performance
Islam AlZatary
 
Fccwc326
Fccwc326Fccwc326
Shaping up with angular JS
Shaping up with angular JSShaping up with angular JS
Shaping up with angular JS
Brajesh Yadav
 
What is virtual dom in react js
What is virtual dom in react jsWhat is virtual dom in react js
What is virtual dom in react js
BOSC Tech Labs
 
Web Performance Tips
Web Performance TipsWeb Performance Tips
Web Performance Tips
Ravi Raj
 
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
Sara Moccand-Sayegh
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
Raphael Amorim
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
AbdulrahmaanDhagacad
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
Muhammad Nasr
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Stack Learner
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
Zohar Arad
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
Albino Tonnina
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT

Similar to Critical rendering path presentation (20)

How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)How web works and browser works ? (behind the scenes)
How web works and browser works ? (behind the scenes)
 
Understanding the dom by Benedict Ayiko
Understanding the dom by Benedict AyikoUnderstanding the dom by Benedict Ayiko
Understanding the dom by Benedict Ayiko
 
Quantum. Just Quantum
Quantum. Just QuantumQuantum. Just Quantum
Quantum. Just Quantum
 
Web performance
Web performanceWeb performance
Web performance
 
Web performance
Web performanceWeb performance
Web performance
 
Fccwc326
Fccwc326Fccwc326
Fccwc326
 
Shaping up with angular JS
Shaping up with angular JSShaping up with angular JS
Shaping up with angular JS
 
What is virtual dom in react js
What is virtual dom in react jsWhat is virtual dom in react js
What is virtual dom in react js
 
Web Performance Tips
Web Performance TipsWeb Performance Tips
Web Performance Tips
 
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In BanglaWeb Design & UI/UX Bootcamp [Online & Offline] In Bangla
Web Design & UI/UX Bootcamp [Online & Offline] In Bangla
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 

Recently uploaded

BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
WriteMe
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Gen-AI in Telcos: Strategies, Challenges & Impact
Gen-AI in Telcos: Strategies, Challenges & ImpactGen-AI in Telcos: Strategies, Challenges & Impact
Gen-AI in Telcos: Strategies, Challenges & Impact
aejazahamed4
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
chetankumar9855
 
Empowering Businesses in the Digital Age
Empowering Businesses in the Digital AgeEmpowering Businesses in the Digital Age
Empowering Businesses in the Digital Age
Bert Blevins
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
ScrumGathering New Orleans 2024 Catherine Louis.pdf
ScrumGathering New Orleans 2024  Catherine Louis.pdfScrumGathering New Orleans 2024  Catherine Louis.pdf
ScrumGathering New Orleans 2024 Catherine Louis.pdf
Global Agile Consulting- CLL-Group, LLC
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 

Recently uploaded (20)

BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
BEGINNER’S GUIDE TO AI AGENTS (1).pptx...
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Gen-AI in Telcos: Strategies, Challenges & Impact
Gen-AI in Telcos: Strategies, Challenges & ImpactGen-AI in Telcos: Strategies, Challenges & Impact
Gen-AI in Telcos: Strategies, Challenges & Impact
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
 
Empowering Businesses in the Digital Age
Empowering Businesses in the Digital AgeEmpowering Businesses in the Digital Age
Empowering Businesses in the Digital Age
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
ScrumGathering New Orleans 2024 Catherine Louis.pdf
ScrumGathering New Orleans 2024  Catherine Louis.pdfScrumGathering New Orleans 2024  Catherine Louis.pdf
ScrumGathering New Orleans 2024 Catherine Louis.pdf
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 

Critical rendering path presentation

  • 2. Agenda: What is critical rendering path? Why we need to know critical rendering path? DOM construction DOM partially loading CSSOM CSSOM render blocking Render Tree Layout Analytics on browser
  • 3. My reactions when first time I heard of CRP
  • 4. What and Why? CRITICAL RENDERING PATH IS THE SEQUENCE OF STEPS BROWSERS GOES THROUGH TO CONVERT HTML, CSS AND JAVASCRIPT TO ACTUAL PIXELS ON THE SCREEN. AND WE NEED TO KNOW THIS TO BUILD PERFORMANCE ORIENTED WEB APPLICATIONS.
  • 5. Browser Actions to render content  The browser follows a well defined set of steps and it all starts with processing the html and building the DOM.
  • 6. Browser Actions to render content  First we grab the html and we create the document object model (DOM) .  Then we fetch css and we build css object model(CSSOM).  Then we combine both and create render tree.  Then we have to figure out where everything goes and it happens in layout step.  Then finally we paint the layout on actual screen.
  • 7. Lets go in depth!!
  • 8.  The html specification contains a set of rules to process the received data for example the text contain in angle brackets (<html>) as special meaning and is set to be a tag as result. So when browser encounter such tokens browser emits a token called start tag html token, next head tag token then meta and so on..  The entire process is done by tokeniser while tokeniser does this process there is another thing happening simultaneously these tokens are converted into node objects.  As the tokeniser emits the relation ship between node objects for example the start tag head token comes inside close tag html token so head tag will be child of html tag. Similarly the meta tag , link tag and so on.  Similarly once we consume all tokens we arrive at document object model (DOM) which is a tree structure which captures the content and properties of html and there relation ship between the nodes.  Also note that all these objects contains all of their properties for example img node as src attribute. The DOM is the full parts presentation of html mark up.
  • 9. Cool.. We have built the DOM.
  • 10. DOM partially loading  The browser constructs the DOM incrementally so we can take advantage of this to speed up the rendering of your page  Whenever you send a search request to Google the server actually does something very clever before it knows what the search results are it immediately returns the header of the page.  As this header is same for all the users, this allows the browser to start processing the response and begin constructing the DOM incrementally and potentially even render the header and once search results are ready the rest of the html arrives and then the browsers parses that and displays the content.
  • 11.  Returning partial html can be good performance optimization.
  • 12. CSSOM Now we have constructed DOM, DOM contains the content of the page we should also know how to display the page, to do that we should build css object model.
  • 13.  The first thing the browser as to do is identify tokens and convert the tokens to node.  The first would be body with font-size 16px and the paragraph node.  Paragraph is child of body as all the visible content is part of body. Also children of the body node inherits its parents styling rule this is what we call cascading rules and cascading style sheets.
  • 14. CSS is render blocking We cant use partial css tree because if we render the css with current styles and later if the style is changed then we would be rendering wrong css. So browser blocks page rendering until entire css is processed.
  • 15. Well Done– We generated CSSOM
  • 16. Render Tree  Now we have DOM and CSSOM need to combine them into render tree.  One of the important property of render tree is it only captures visible content.
  • 17.  To construct the render tree we have start at the root element which in this case is paragraph element.  First render tree picks paragraph element and correspondingly checks for any style in CSSOM if it finds style then it creates render tree.  Then it navigates to Hello node and no corresponding css but it renders as is, then it goes to span node , span as css rules but if you the rule says display:none, so it ignores span node and styles as render tree just picks visible content. and then moves to student node which is text and renders that.
  • 18. Render tree is very similar on what we see on phone
  • 20. Awesome – you learnt it!!
  • 21. Layout - Calculating positions and dimensions Where and how all the elements are positioned on the page is the layout step. Here is a simple render tree and in the layout step body tag will be taken complete width of view port and its Gray in color Next div tag takes 50% of width from its parents body which we can see in Green and then p tag takes 50% of div tag which we can see taken in red color.
  • 22. Paint : So the final step is putting pixels on the page.
  • 24. Well Done!! You learnt it guys
  • 28. Follow me on twitter and Linkedin @kavithavikas https://www.linkedin.com/in/kavitha-vikas-43024b19/