SlideShare uma empresa Scribd logo
1 de 34
+
High Performing web pages
Nilesh Bafna
+
How does the web browser renders
a web page?
 Constructing the Object models
 Render tree construction
 Layout stage
 Paint
 Composite
© Perennial Systems Inc
2
+
Constructing Object model
Bytes -> Characters -> Tokens -> Nodes -> Object Model
© Perennial Systems Inc
3
+
Render tree
Render Tree Creation
1) Start at the root node of
the DOM
2) Nodes which are not
visible are omitted like
script, meta etc
3) Additional nodes which
are hidden by CSS are
also omitted from the final
render tree
4) Each visible node and its
CSS rules are merged in
a node
© Perennial Systems Inc
4
+
Layout stage
 This stage involves the calculation of the
exact position and size of every node
within the viewport
 It starts with the top parent and the
output is a box model with exact
absolute pixel positions updated in the
render tree.
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
© Perennial Systems Inc
5
+
Paint & Composite
 Once the layout is complete the browser issues a Paint setup and
Paint event for converting the render tree to pixels on screen
 Time required to paint varies on the number of nodes and complexity
of the styles. Eg: Solid colors take less time to paint, drop shadows
take more time.
 The drawing happens on different surfaces called layers
 Process of ordering the layers while painting so that they are seen in
the right order on the screen is called Composite.
© Perennial Systems Inc
6
+
How does browser react to scripts
and styles within code?
 While parsing the page, if the browser comes across a script, it has to
stop the creation of the DOM and pass the control to Javascript
engine to execute the script.
 Javascript cannot be executed if any style sheets on the page are still
to be loaded and CSS object model is pending to be formed. Hence,
now the parsing stops till both the CSSOM is created and then the
script is executed. Now consider, these scripts and stylesheets to be
external. Nightmare??
 Preload scanner: Browsers are smart to optimize when the parsing is
halted by the above operations. It runs a preload scanner for the
further HTML only to identify if there are any any other resources to be
fetched. The preload scanner initiates them meanwhile. Note: The
preload scanner does not modify the DOM at all, it simply cannot.
© Perennial Systems Inc
7
+
Minimize Critical rendering path
 Number of critical resources: Number of resources that may block the
critical rendering path
 Size of the critical resources: Total bytes to get the first render of the
page
 Minimum critical path length: number of round trips. The number of
round trips will depend on the length of the file.
© Perennial Systems Inc
8
+
Important events during the critical
rendering path
 domLoading: the browser is about to start parsing the first received
byte of HTML
 domInteractive: All HTML parsing is complete and DOM Object Model
is created.
 domContentLoaded: This is fired when both DOM and CSS trees are
created. All parser blocking Javascript have finished execution. Render
tree can now be created.
 domComplete: The event is fired when the page and its sub-resources
are downloaded and ready.
© Perennial Systems Inc
9
+
Let’s understand this better…
<html>
<head>
<meta name=“viewport" content="width=device-width,initial-scale=1”>
<link href=”my_style.css" rel="stylesheet">
<title>Example 1</title>
</head>
<body>
<p> Example 1 </p>
</body>
<script src=”my_app.js"></script>
</html>
Number of critical resources: 3
Size of critical resources: Total bytes of HTML +
CSS + Javascript
Minimum critical path length: 2 or more
depending on size
© Perennial Systems Inc
10
+
How to speed up page performance
 Render blocking resources
 CSS
 Javascript & Optimization
 Optimized Images
 Very Low TTFB
 Prioritize content delivery
 Configure the viewport
 Enable Compression
 Leverage browser Caching
 Minified resources
 Use Keep-Alive
 Web fonts
 Use CDN
 Reduce the number of
repaint and reflows
© Perennial Systems Inc
11
+
Render blocking CSS
 Media queries and Media types allow us to mark some CSS
resources as non render blocking.
 The browser does not wait for non render blocking CSS and is
used to optimize the time to first render for a page.
 All CSS resources with render blocking or non blocking will be
downloaded by the browser.
Eg:
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
© Perennial Systems Inc
12
+
Render blocking CSS
 If external CSS resources are small, it is a good idea to embed it within the HTML
page under the style tag.
 Reduce the complexity of the style calculations. Measure the style recalculation
cost and optimize by ensuring only required elements are styled. How to measure
will be covered in a different presentation.
 Avoid CSS @import
 Combine CSS in one file during production deployment
 Don't inline CSS attributes with the HTML
 Programmatically loadCSS which is not applicable to first prioritized HTML
content.
 To identify important CSS use tools like Critical tool. Above the fold CSS.
© Perennial Systems Inc
13
+
Parser blocking Javascript
 When a Javascript code is reached, the browser blocks the execution of
the DOM and hands over the control to Javascript engine till the script is
executed completely and resumes the reconstruction of DOM at the
same point.
 The browser delays the execution of Javascript till the CSS object model
is created
 The location of the script tag within the document is very important
<script src=“myscript.js” async></script>
Tells the browser it does not need to wait for the execution and can start
once the file is fetched from the server. This unblocks the DOM creation.
Placement order of the style and script tag play a very important role for
managing this experience.
© Perennial Systems Inc
14
+
Optimizing Javascript
 Inline JS when necessary reducing network round trip.
 Combine the Javascript file to reduce network calls.
 requestAnimationFrame instead of setTimeout
 Web workers for intensive operations (Do not have access to DOM)
 JS profiler to identify slow Javascript inside Chrome dev tools
 Defer loading javascript. Use of defer keyword may not work across
browsers. Programmatic loading of JS after page load can be used to
download and add javascript not affecting critical above the fold content.
 Use async version of popular 3rd party scripts. Eg: facebook, Google
analytics, twitter etc..
© Perennial Systems Inc
15
+
Optimizing Javascript
 Avoid forced synchronous layouts
 Avoid layout thrashing
 Read and write cycles
 Avoid long running input handlers and style changes in them
(onMouseDown, onChange etc..)
function logBoxHeight() {
box.classList.add(’myCSS');
// Gets the height of the box in pixels
// and logs it out.
console.log(box.offsetHeight);
}
function resizeAllParagraphsToMatchBlockWidth() {
// Puts the browser into a read-write-read-write cycle.
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = box.offsetWidth + 'px';
}
}
FastDOM, a library to reorder the reading and writing and making it async
© Perennial Systems Inc
16
+
 Prefer vector formats: vector images are resolution and scale
independent, which makes them a perfect fit for the multi-device and high-
resolution world.
 Minify and compress SVG assets: XML markup produced by most
drawing applications often contains unnecessary metadata which can be
removed; ensure that your servers are configured to apply GZIP
compression for SVG assets.
 Remove unnecessary image metadata: many raster images contain
unnecessary metadata about the asset: geo information, camera
information, and so on. Use appropriate tools to strip this data.
 WebP is a very promising format, though not supported across all
platforms; they should be used in native applications and its webviews.
Optimized Images
© Perennial Systems Inc
17
+
Optimized Images
 Use base64 for very small images < 5kb to avoid additional calls.
Google is not able to index base64 images which can be addressed
by the meta tag.
<meta property="og:image" content=images/myimage.png>
 Images should be optimized with Lossy filter (eliminates pixel data) ->
Lossless filter (Compression) pipeline.
 Choosing appropriate image format:
 Animated images-> Use GIF
 High quality lossless images-> PNG
 Medium-low quality -> JPEG (experiment with quality based on use case)
 Deliver large image assets size as close to the display size as
possible.
© Perennial Systems Inc
18
+
Very Low Time to first byte (TTFB)
Reasons for high TTFB:
1) Dynamic web page creation: This can
be addressed by deploying web page
caching for dynamic pages.
2) Web server configuration:
.htaccess offers convenience but can be
huge performance issues specially on
apache.
It can be anything from database
performance, slow application logic, slow
routing, slow framework/libraries, resource
starvation (CPU, Memory, Disk).
Less than 100 milliseconds is
superb
200 milliseconds is ideal
Anything else is bad...
© Perennial Systems Inc
19
+
Prioritize content delivery
 Above the fold is a portion of the web page that is visible in
web browser. Always load the critical portion first and defer
loading the rest of the page.
 The CSS delivery can be split into 2 parts to ensure faster page
render.
 Prioritize loading of most important information first and
deferring the rest using lazy loading.
© Perennial Systems Inc
20
+
Configure the Viewport
 <meta name=viewport content="width=device-width, initial-
scale=1">
 Avoid minimum-scale, maximum-scale, user-scalable. These
options negatively impact accessibility and should generally be
avoided.
 If necessary use different styling for small and large screens
using appropriate media queries.
© Perennial Systems Inc
21
+
Enable Compression
 Enabling Gzip compressions as all browsers today understand
Gzip compression.
 Compression is enabled via webserver configuration
 Compression of all HTTP requests results in compression of as
high as 50- 75% in terms of bandwidth and page load time.
© Perennial Systems Inc
22
+
Leverage browser caching
 Network calls are the most expensive operations.
 It is highly recommended an appropriate caching strategy is
adopted for every external resource. Eg: whether the resource can
be cached and by whom, for how long, and if applicable, how it
can be efficiently revalidated when the caching policy expires.
 Cache-Control defines how, and for how long the individual
response can be cached by the browser and other intermediate
caches
 ETag provides a revalidation token that is automatically sent by the
browser to check if the resource has changed since the last time it
was requested.
© Perennial Systems Inc
23
+
Minified resources
 All the HTML, CSS and JS can be minified typically using a
build process to deploy minified resources on the production
environment.
 To minify HTML, try HTMLMinifier
 To minify CSS, try CSSNano and csso.
 To minify JavaScript, try UglifyJS.
© Perennial Systems Inc
24
+
Use keep-alive
 This method allows the browser to use the same connection for
different HTTP requests. This is useful since a web page
involves multiple files like CSS, Images, JS and HTML
 This avoids creating a new connection for every file request.
 Keep-Alive is to be configured on the web server.
 Specially useful in shared environments where keep-alive is
generally turned off.
© Perennial Systems Inc
25
+
Web fonts
 4 types of fonts available for web: WOFF 2, WOFF, TTF, EOT.
 The support for each of them is limited with WOFF being the mostly widely supported
and WOFF 2 is still work in progress.
 EOT and TTF are not compressed by default. Ensure server side compression while
delivery of these fonts.
 WOFF has built in compression ensure optimal compression settings. WOFF2 gives 30%
reduction in file size.
 Separate files for different styles like itlatic, normal. The browser uses the one it needs
Use format hint so that the browser checks and downloads the format it supports.
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
url('/fonts/awesome.woff') format('woff'),
url('/fonts/awesome.ttf') format('ttf'),
url('/fonts/awesome.eot') format('eot');
}
url() directive allows us to load external fonts, and
are allowed to contain an optional format() hint
indicating the format of the font referenced by the
provided URL.
© Perennial Systems Inc
26
+
Web fonts
 Unicode range setting:
unicode-range: U+000-5FF; under @font-face
 Manual subsetting
Use the open-source pyftsubset to subset and optimize fonts.
Some font services allow manual subsetting via custom query parameters to manually get a
font subset.
 The browser downloads the required font after creating the render tree. This
causes the web page rendering to be delayed till the font is not available. Devs
can use the font loading API to micro manage this font loading process to get the
required fonts before the render tree. (Browser dependent)
 The devs can inline the font in the CSS to force the browser to download the font
while creating the CSSOM. We should keep a separate CSS file for fonts with
large max age so that the fonts are not downloaded every time a newer version of
CSS is built and deployed. (Be very careful)
 Use HTTP Caching for the fonts.
© Perennial Systems Inc
27
+
Use CDN
 Content delivery network is a network of servers placed in different
geographic locations with your website content and delivered to the clients
from the closest location for reduced network latency.
 CDN can be used for delivery of all static resources: CSS, JS, Images,
HTML
 Popular CNDs
 Cloudflare (has free option)
 Fastly
 Amazon CloudFront
 MaxCDN
 Akamai
 Cachefly
 Keycdn
© Perennial Systems Inc
28
+
Repaint and Reflows
 When part or whole of the render tree needs to be revalidated and the
node dimensions recalculated is called “Reflow”.
 When part of the screen needs to be updated due to changes in style
it requires the browser to paint that area of the screen. This is called
Repaint.
 Code that causes reflow or repaint
 Adding, removing, updating DOM nodes
 Hiding a DOM node with display: none (reflow and repaint) or visibility:
hidden (repaint only)
 Moving, animating a DOM node on the page (repaint)
 Adding a stylesheet, tweaking style properties (reflow or repaint or both)
 User action such as resizing the window, changing the font size, or browser
scrolling
© Perennial Systems Inc
29
+
Expensive operations
 Browsers optimizes the reflows and repaint operations by performing
in batches. Though are certain functions that causes the browser to
perform the reflow and/or repaints immediately and hence should be
used very carefully.
Element: clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(),
innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(),
scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth
Frame, Image: height, width
Range: getBoundingClientRect(), getClientRects()
SVGLocatable: computeCTM(), getBBox()
SVGTextContent: getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(),
getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(),
getSubStringLength(), selectSubString()
SVGUse: instanceRoot
Window: getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(),
webkitConvertPointFromPageToNode()
© Perennial Systems Inc
30
+
Recommendations for minimizing
Repaint and Reflow
 Don’t read and write to style sheet very quickly. Batch the query
state and change state statements
 Don’t change individual style one by one if there are multiple
changes, use cssText property as it batches the application of
change
 Don’t ask for computed style multiple times. Store in local
variable and reuse them specially for expensive operations.
© Perennial Systems Inc
31
+
PageSpeed module – Apache,
Nginx
 Page speed module is developed by Google and can be
configured with Apache or Nginx to perform web page
optimization best practices.
 These optimizations are performed by configuring filters in the
page speed module.
 Categories of filters:
 Optimize Caching
 Minimize round trip times
 Minimize request overhead
 Minimize payload size
 Optimize Browser rendering
© Perennial Systems Inc
32
+
What’s next?
 How to measure page performance using tools?
 JavaScript Internals
© Perennial Systems Inc
33
+
References
 https://developers.google.com/web/fundamentals/performance/?hl=en
 https://developers.google.com/speed/docs/insights/about
 https://jonsuh.com/blog/need-for-speed-2/
 https://classroom.udacity.com/courses/ud884/
 http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
 http://gent.ilcore.com/2011/05/how-web-page-loads.html
 http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
© Perennial Systems Inc
34

Mais conteúdo relacionado

Mais procurados

Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontendtkramar
 
Web performance mercadolibre - ECI 2013
Web performance   mercadolibre - ECI 2013Web performance   mercadolibre - ECI 2013
Web performance mercadolibre - ECI 2013Santiago Aimetta
 
Html from request to rendering
Html from request to renderingHtml from request to rendering
Html from request to renderingToan Nguyen
 
MongoDB Days Silicon Valley: Building Applications with the MEAN Stack
MongoDB Days Silicon Valley: Building Applications with the MEAN StackMongoDB Days Silicon Valley: Building Applications with the MEAN Stack
MongoDB Days Silicon Valley: Building Applications with the MEAN StackMongoDB
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesDoris Chen
 
Java script by Act Academy
Java script by Act AcademyJava script by Act Academy
Java script by Act Academyactanimation
 
Critical Rendering Path - Velocidade também é uma funcionalidade
Critical Rendering Path - Velocidade também é uma funcionalidadeCritical Rendering Path - Velocidade também é uma funcionalidade
Critical Rendering Path - Velocidade também é uma funcionalidadeJoao Lucas Santana
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN StackRob Davarnia
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDBMoshe Kaplan
 
High Performance Web Sites, With Ads: Don't let third parties make you slow
High Performance Web Sites, With Ads: Don't let third parties make you slowHigh Performance Web Sites, With Ads: Don't let third parties make you slow
High Performance Web Sites, With Ads: Don't let third parties make you slowTobias Järlund
 
Generating the Server Response: HTTP Status Codes
Generating the Server Response: HTTP Status CodesGenerating the Server Response: HTTP Status Codes
Generating the Server Response: HTTP Status CodesDeeptiJava
 
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentIncremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentAkihiro Ikezoe
 
Securing Your MongoDB Deployment
Securing Your MongoDB DeploymentSecuring Your MongoDB Deployment
Securing Your MongoDB DeploymentMongoDB
 
Starting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN StackStarting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN StackMongoDB
 
EWD 3 Training Course Part 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode ObjectEWD 3 Training Course Part 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode ObjectRob Tweed
 
Building an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stackBuilding an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stackdivyapisces
 

Mais procurados (20)

Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
 
Web performance mercadolibre - ECI 2013
Web performance   mercadolibre - ECI 2013Web performance   mercadolibre - ECI 2013
Web performance mercadolibre - ECI 2013
 
Html from request to rendering
Html from request to renderingHtml from request to rendering
Html from request to rendering
 
MongoDB Days Silicon Valley: Building Applications with the MEAN Stack
MongoDB Days Silicon Valley: Building Applications with the MEAN StackMongoDB Days Silicon Valley: Building Applications with the MEAN Stack
MongoDB Days Silicon Valley: Building Applications with the MEAN Stack
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best Practices
 
Java script by Act Academy
Java script by Act AcademyJava script by Act Academy
Java script by Act Academy
 
Critical Rendering Path - Velocidade também é uma funcionalidade
Critical Rendering Path - Velocidade também é uma funcionalidadeCritical Rendering Path - Velocidade também é uma funcionalidade
Critical Rendering Path - Velocidade também é uma funcionalidade
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
 
Introduction to MongoDB
Introduction to MongoDBIntroduction to MongoDB
Introduction to MongoDB
 
High Performance Web Sites, With Ads: Don't let third parties make you slow
High Performance Web Sites, With Ads: Don't let third parties make you slowHigh Performance Web Sites, With Ads: Don't let third parties make you slow
High Performance Web Sites, With Ads: Don't let third parties make you slow
 
Generating the Server Response: HTTP Status Codes
Generating the Server Response: HTTP Status CodesGenerating the Server Response: HTTP Status Codes
Generating the Server Response: HTTP Status Codes
 
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend DevelopmentIncremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
 
Securing Your MongoDB Deployment
Securing Your MongoDB DeploymentSecuring Your MongoDB Deployment
Securing Your MongoDB Deployment
 
Starting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN StackStarting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN Stack
 
Velocity dust
Velocity dustVelocity dust
Velocity dust
 
EWD 3 Training Course Part 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode ObjectEWD 3 Training Course Part 20: The DocumentNode Object
EWD 3 Training Course Part 20: The DocumentNode Object
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
 
Building an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stackBuilding an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stack
 
Grails and Neo4j
Grails and Neo4jGrails and Neo4j
Grails and Neo4j
 
Mdb dn 2016_11_ops_mgr
Mdb dn 2016_11_ops_mgrMdb dn 2016_11_ops_mgr
Mdb dn 2016_11_ops_mgr
 

Destaque

Test this Now! 10 Critical Tests To Double Leads & Sales in 2016
Test this Now! 10 Critical Tests To Double Leads & Sales in 2016Test this Now! 10 Critical Tests To Double Leads & Sales in 2016
Test this Now! 10 Critical Tests To Double Leads & Sales in 2016semrush_webinars
 
Cn final-project-presentation-by-luqman
Cn final-project-presentation-by-luqmanCn final-project-presentation-by-luqman
Cn final-project-presentation-by-luqmanLuqman Malik
 
AT&T Case Competition
AT&T Case CompetitionAT&T Case Competition
AT&T Case CompetitionKai Lin
 
Презентація:Енергія. Робота.
Презентація:Енергія. Робота.Презентація:Енергія. Робота.
Презентація:Енергія. Робота.sveta7940
 
All Movement Types SAP by www.abaper.weebly.com
All Movement Types SAP by www.abaper.weebly.com All Movement Types SAP by www.abaper.weebly.com
All Movement Types SAP by www.abaper.weebly.com Pavan Golesar
 
APLICACIÓN DE LOS SISTEMAS DE INFORMACIÓN EN ENTIDADES PÚBLICAS Y GOBIERNO E...
APLICACIÓN DE LOS SISTEMAS DE INFORMACIÓN EN ENTIDADES  PÚBLICAS Y GOBIERNO E...APLICACIÓN DE LOS SISTEMAS DE INFORMACIÓN EN ENTIDADES  PÚBLICAS Y GOBIERNO E...
APLICACIÓN DE LOS SISTEMAS DE INFORMACIÓN EN ENTIDADES PÚBLICAS Y GOBIERNO E...UNIVERSIDAD DE SANTANDER
 
Keeping it in sync: how to plan your next HubSpot integration
Keeping it in sync: how to plan your next HubSpot integrationKeeping it in sync: how to plan your next HubSpot integration
Keeping it in sync: how to plan your next HubSpot integrationJaxzenMarketing
 
Open Approach to Customer Success
Open Approach to Customer SuccessOpen Approach to Customer Success
Open Approach to Customer SuccessGuy Nirpaz
 
Rúbrica de observación en aula ( EVALUACIÓN DESEMPEÑO DOCENTE)
Rúbrica de observación en aula ( EVALUACIÓN DESEMPEÑO DOCENTE)Rúbrica de observación en aula ( EVALUACIÓN DESEMPEÑO DOCENTE)
Rúbrica de observación en aula ( EVALUACIÓN DESEMPEÑO DOCENTE)Eudes Cárdenas Martínez
 
Presentation
PresentationPresentation
PresentationIram Naz
 
Search Content vs. Social Content
Search Content vs. Social ContentSearch Content vs. Social Content
Search Content vs. Social ContentSemrush
 
What Makes Great Infographics
What Makes Great InfographicsWhat Makes Great Infographics
What Makes Great InfographicsSlideShare
 
Masters of SlideShare
Masters of SlideShareMasters of SlideShare
Masters of SlideShareKapost
 
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to SlideshareSTOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to SlideshareEmpowered Presentations
 

Destaque (19)

Test this Now! 10 Critical Tests To Double Leads & Sales in 2016
Test this Now! 10 Critical Tests To Double Leads & Sales in 2016Test this Now! 10 Critical Tests To Double Leads & Sales in 2016
Test this Now! 10 Critical Tests To Double Leads & Sales in 2016
 
Cn final-project-presentation-by-luqman
Cn final-project-presentation-by-luqmanCn final-project-presentation-by-luqman
Cn final-project-presentation-by-luqman
 
Vera_Tyan_Portfolio
Vera_Tyan_PortfolioVera_Tyan_Portfolio
Vera_Tyan_Portfolio
 
AT&T Case Competition
AT&T Case CompetitionAT&T Case Competition
AT&T Case Competition
 
Презентація:Енергія. Робота.
Презентація:Енергія. Робота.Презентація:Енергія. Робота.
Презентація:Енергія. Робота.
 
Sistemas de informacion gerencial
Sistemas de informacion gerencialSistemas de informacion gerencial
Sistemas de informacion gerencial
 
All Movement Types SAP by www.abaper.weebly.com
All Movement Types SAP by www.abaper.weebly.com All Movement Types SAP by www.abaper.weebly.com
All Movement Types SAP by www.abaper.weebly.com
 
APLICACIÓN DE LOS SISTEMAS DE INFORMACIÓN EN ENTIDADES PÚBLICAS Y GOBIERNO E...
APLICACIÓN DE LOS SISTEMAS DE INFORMACIÓN EN ENTIDADES  PÚBLICAS Y GOBIERNO E...APLICACIÓN DE LOS SISTEMAS DE INFORMACIÓN EN ENTIDADES  PÚBLICAS Y GOBIERNO E...
APLICACIÓN DE LOS SISTEMAS DE INFORMACIÓN EN ENTIDADES PÚBLICAS Y GOBIERNO E...
 
Keeping it in sync: how to plan your next HubSpot integration
Keeping it in sync: how to plan your next HubSpot integrationKeeping it in sync: how to plan your next HubSpot integration
Keeping it in sync: how to plan your next HubSpot integration
 
Open Approach to Customer Success
Open Approach to Customer SuccessOpen Approach to Customer Success
Open Approach to Customer Success
 
Rúbrica de observación en aula ( EVALUACIÓN DESEMPEÑO DOCENTE)
Rúbrica de observación en aula ( EVALUACIÓN DESEMPEÑO DOCENTE)Rúbrica de observación en aula ( EVALUACIÓN DESEMPEÑO DOCENTE)
Rúbrica de observación en aula ( EVALUACIÓN DESEMPEÑO DOCENTE)
 
Taller Dircom CyL: "Reinventarse a los 50" por Arturo Gómez Quijano
Taller Dircom CyL: "Reinventarse a los 50" por Arturo Gómez QuijanoTaller Dircom CyL: "Reinventarse a los 50" por Arturo Gómez Quijano
Taller Dircom CyL: "Reinventarse a los 50" por Arturo Gómez Quijano
 
Paid Search Has Changed: 3 Ways to Keep Up in 2017
Paid Search Has Changed: 3 Ways to Keep Up in 2017Paid Search Has Changed: 3 Ways to Keep Up in 2017
Paid Search Has Changed: 3 Ways to Keep Up in 2017
 
Presentation
PresentationPresentation
Presentation
 
Anatomija moždano stablo
 Anatomija moždano stablo Anatomija moždano stablo
Anatomija moždano stablo
 
Search Content vs. Social Content
Search Content vs. Social ContentSearch Content vs. Social Content
Search Content vs. Social Content
 
What Makes Great Infographics
What Makes Great InfographicsWhat Makes Great Infographics
What Makes Great Infographics
 
Masters of SlideShare
Masters of SlideShareMasters of SlideShare
Masters of SlideShare
 
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to SlideshareSTOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
STOP! VIEW THIS! 10-Step Checklist When Uploading to Slideshare
 

Semelhante a Building high performing web pages

Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering PathRaphael Amorim
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)clickramanm
 
Frontend performance
Frontend performanceFrontend performance
Frontend performancesacred 8
 
IBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the BoxIBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the BoxKarl-Henry Martinsson
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 
Web performance
Web performanceWeb performance
Web performanceSamir Das
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth makingCathy Lill
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013Bastian Grimm
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingAshok Modi
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012Bastian Grimm
 
How to optimize your Magento store
How to optimize your Magento store How to optimize your Magento store
How to optimize your Magento store Rasbor.com
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web AppsTimothy Fisher
 
Magento Performance Optimization 101
Magento Performance Optimization 101Magento Performance Optimization 101
Magento Performance Optimization 101Angus Li
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3Gopi A
 
Drupal performance and scalability
Drupal performance and scalabilityDrupal performance and scalability
Drupal performance and scalabilityTwinbit
 

Semelhante a Building high performing web pages (20)

Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
IBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the BoxIBM Connect 2016 - Break out of the Box
IBM Connect 2016 - Break out of the Box
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Web performance
Web performanceWeb performance
Web performance
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth making
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
How to optimize your Magento store
How to optimize your Magento store How to optimize your Magento store
How to optimize your Magento store
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Magento Performance Optimization 101
Magento Performance Optimization 101Magento Performance Optimization 101
Magento Performance Optimization 101
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
Drupal performance and scalability
Drupal performance and scalabilityDrupal performance and scalability
Drupal performance and scalability
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 

Último

DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dashnarutouzumaki53779
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 

Último (20)

DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Visualising and forecasting stocks using Dash
Visualising and forecasting stocks using DashVisualising and forecasting stocks using Dash
Visualising and forecasting stocks using Dash
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 

Building high performing web pages

  • 1. + High Performing web pages Nilesh Bafna
  • 2. + How does the web browser renders a web page?  Constructing the Object models  Render tree construction  Layout stage  Paint  Composite © Perennial Systems Inc 2
  • 3. + Constructing Object model Bytes -> Characters -> Tokens -> Nodes -> Object Model © Perennial Systems Inc 3
  • 4. + Render tree Render Tree Creation 1) Start at the root node of the DOM 2) Nodes which are not visible are omitted like script, meta etc 3) Additional nodes which are hidden by CSS are also omitted from the final render tree 4) Each visible node and its CSS rules are merged in a node © Perennial Systems Inc 4
  • 5. + Layout stage  This stage involves the calculation of the exact position and size of every node within the viewport  It starts with the top parent and the output is a box model with exact absolute pixel positions updated in the render tree. <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Critial Path: Hello world!</title> </head> <body> <div style="width: 50%"> <div style="width: 50%">Hello world!</div> </div> </body> </html> © Perennial Systems Inc 5
  • 6. + Paint & Composite  Once the layout is complete the browser issues a Paint setup and Paint event for converting the render tree to pixels on screen  Time required to paint varies on the number of nodes and complexity of the styles. Eg: Solid colors take less time to paint, drop shadows take more time.  The drawing happens on different surfaces called layers  Process of ordering the layers while painting so that they are seen in the right order on the screen is called Composite. © Perennial Systems Inc 6
  • 7. + How does browser react to scripts and styles within code?  While parsing the page, if the browser comes across a script, it has to stop the creation of the DOM and pass the control to Javascript engine to execute the script.  Javascript cannot be executed if any style sheets on the page are still to be loaded and CSS object model is pending to be formed. Hence, now the parsing stops till both the CSSOM is created and then the script is executed. Now consider, these scripts and stylesheets to be external. Nightmare??  Preload scanner: Browsers are smart to optimize when the parsing is halted by the above operations. It runs a preload scanner for the further HTML only to identify if there are any any other resources to be fetched. The preload scanner initiates them meanwhile. Note: The preload scanner does not modify the DOM at all, it simply cannot. © Perennial Systems Inc 7
  • 8. + Minimize Critical rendering path  Number of critical resources: Number of resources that may block the critical rendering path  Size of the critical resources: Total bytes to get the first render of the page  Minimum critical path length: number of round trips. The number of round trips will depend on the length of the file. © Perennial Systems Inc 8
  • 9. + Important events during the critical rendering path  domLoading: the browser is about to start parsing the first received byte of HTML  domInteractive: All HTML parsing is complete and DOM Object Model is created.  domContentLoaded: This is fired when both DOM and CSS trees are created. All parser blocking Javascript have finished execution. Render tree can now be created.  domComplete: The event is fired when the page and its sub-resources are downloaded and ready. © Perennial Systems Inc 9
  • 10. + Let’s understand this better… <html> <head> <meta name=“viewport" content="width=device-width,initial-scale=1”> <link href=”my_style.css" rel="stylesheet"> <title>Example 1</title> </head> <body> <p> Example 1 </p> </body> <script src=”my_app.js"></script> </html> Number of critical resources: 3 Size of critical resources: Total bytes of HTML + CSS + Javascript Minimum critical path length: 2 or more depending on size © Perennial Systems Inc 10
  • 11. + How to speed up page performance  Render blocking resources  CSS  Javascript & Optimization  Optimized Images  Very Low TTFB  Prioritize content delivery  Configure the viewport  Enable Compression  Leverage browser Caching  Minified resources  Use Keep-Alive  Web fonts  Use CDN  Reduce the number of repaint and reflows © Perennial Systems Inc 11
  • 12. + Render blocking CSS  Media queries and Media types allow us to mark some CSS resources as non render blocking.  The browser does not wait for non render blocking CSS and is used to optimize the time to first render for a page.  All CSS resources with render blocking or non blocking will be downloaded by the browser. Eg: <link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> © Perennial Systems Inc 12
  • 13. + Render blocking CSS  If external CSS resources are small, it is a good idea to embed it within the HTML page under the style tag.  Reduce the complexity of the style calculations. Measure the style recalculation cost and optimize by ensuring only required elements are styled. How to measure will be covered in a different presentation.  Avoid CSS @import  Combine CSS in one file during production deployment  Don't inline CSS attributes with the HTML  Programmatically loadCSS which is not applicable to first prioritized HTML content.  To identify important CSS use tools like Critical tool. Above the fold CSS. © Perennial Systems Inc 13
  • 14. + Parser blocking Javascript  When a Javascript code is reached, the browser blocks the execution of the DOM and hands over the control to Javascript engine till the script is executed completely and resumes the reconstruction of DOM at the same point.  The browser delays the execution of Javascript till the CSS object model is created  The location of the script tag within the document is very important <script src=“myscript.js” async></script> Tells the browser it does not need to wait for the execution and can start once the file is fetched from the server. This unblocks the DOM creation. Placement order of the style and script tag play a very important role for managing this experience. © Perennial Systems Inc 14
  • 15. + Optimizing Javascript  Inline JS when necessary reducing network round trip.  Combine the Javascript file to reduce network calls.  requestAnimationFrame instead of setTimeout  Web workers for intensive operations (Do not have access to DOM)  JS profiler to identify slow Javascript inside Chrome dev tools  Defer loading javascript. Use of defer keyword may not work across browsers. Programmatic loading of JS after page load can be used to download and add javascript not affecting critical above the fold content.  Use async version of popular 3rd party scripts. Eg: facebook, Google analytics, twitter etc.. © Perennial Systems Inc 15
  • 16. + Optimizing Javascript  Avoid forced synchronous layouts  Avoid layout thrashing  Read and write cycles  Avoid long running input handlers and style changes in them (onMouseDown, onChange etc..) function logBoxHeight() { box.classList.add(’myCSS'); // Gets the height of the box in pixels // and logs it out. console.log(box.offsetHeight); } function resizeAllParagraphsToMatchBlockWidth() { // Puts the browser into a read-write-read-write cycle. for (var i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = box.offsetWidth + 'px'; } } FastDOM, a library to reorder the reading and writing and making it async © Perennial Systems Inc 16
  • 17. +  Prefer vector formats: vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high- resolution world.  Minify and compress SVG assets: XML markup produced by most drawing applications often contains unnecessary metadata which can be removed; ensure that your servers are configured to apply GZIP compression for SVG assets.  Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on. Use appropriate tools to strip this data.  WebP is a very promising format, though not supported across all platforms; they should be used in native applications and its webviews. Optimized Images © Perennial Systems Inc 17
  • 18. + Optimized Images  Use base64 for very small images < 5kb to avoid additional calls. Google is not able to index base64 images which can be addressed by the meta tag. <meta property="og:image" content=images/myimage.png>  Images should be optimized with Lossy filter (eliminates pixel data) -> Lossless filter (Compression) pipeline.  Choosing appropriate image format:  Animated images-> Use GIF  High quality lossless images-> PNG  Medium-low quality -> JPEG (experiment with quality based on use case)  Deliver large image assets size as close to the display size as possible. © Perennial Systems Inc 18
  • 19. + Very Low Time to first byte (TTFB) Reasons for high TTFB: 1) Dynamic web page creation: This can be addressed by deploying web page caching for dynamic pages. 2) Web server configuration: .htaccess offers convenience but can be huge performance issues specially on apache. It can be anything from database performance, slow application logic, slow routing, slow framework/libraries, resource starvation (CPU, Memory, Disk). Less than 100 milliseconds is superb 200 milliseconds is ideal Anything else is bad... © Perennial Systems Inc 19
  • 20. + Prioritize content delivery  Above the fold is a portion of the web page that is visible in web browser. Always load the critical portion first and defer loading the rest of the page.  The CSS delivery can be split into 2 parts to ensure faster page render.  Prioritize loading of most important information first and deferring the rest using lazy loading. © Perennial Systems Inc 20
  • 21. + Configure the Viewport  <meta name=viewport content="width=device-width, initial- scale=1">  Avoid minimum-scale, maximum-scale, user-scalable. These options negatively impact accessibility and should generally be avoided.  If necessary use different styling for small and large screens using appropriate media queries. © Perennial Systems Inc 21
  • 22. + Enable Compression  Enabling Gzip compressions as all browsers today understand Gzip compression.  Compression is enabled via webserver configuration  Compression of all HTTP requests results in compression of as high as 50- 75% in terms of bandwidth and page load time. © Perennial Systems Inc 22
  • 23. + Leverage browser caching  Network calls are the most expensive operations.  It is highly recommended an appropriate caching strategy is adopted for every external resource. Eg: whether the resource can be cached and by whom, for how long, and if applicable, how it can be efficiently revalidated when the caching policy expires.  Cache-Control defines how, and for how long the individual response can be cached by the browser and other intermediate caches  ETag provides a revalidation token that is automatically sent by the browser to check if the resource has changed since the last time it was requested. © Perennial Systems Inc 23
  • 24. + Minified resources  All the HTML, CSS and JS can be minified typically using a build process to deploy minified resources on the production environment.  To minify HTML, try HTMLMinifier  To minify CSS, try CSSNano and csso.  To minify JavaScript, try UglifyJS. © Perennial Systems Inc 24
  • 25. + Use keep-alive  This method allows the browser to use the same connection for different HTTP requests. This is useful since a web page involves multiple files like CSS, Images, JS and HTML  This avoids creating a new connection for every file request.  Keep-Alive is to be configured on the web server.  Specially useful in shared environments where keep-alive is generally turned off. © Perennial Systems Inc 25
  • 26. + Web fonts  4 types of fonts available for web: WOFF 2, WOFF, TTF, EOT.  The support for each of them is limited with WOFF being the mostly widely supported and WOFF 2 is still work in progress.  EOT and TTF are not compressed by default. Ensure server side compression while delivery of these fonts.  WOFF has built in compression ensure optimal compression settings. WOFF2 gives 30% reduction in file size.  Separate files for different styles like itlatic, normal. The browser uses the one it needs Use format hint so that the browser checks and downloads the format it supports. @font-face { font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local('Awesome Font'), url('/fonts/awesome.woff2') format('woff2'), url('/fonts/awesome.woff') format('woff'), url('/fonts/awesome.ttf') format('ttf'), url('/fonts/awesome.eot') format('eot'); } url() directive allows us to load external fonts, and are allowed to contain an optional format() hint indicating the format of the font referenced by the provided URL. © Perennial Systems Inc 26
  • 27. + Web fonts  Unicode range setting: unicode-range: U+000-5FF; under @font-face  Manual subsetting Use the open-source pyftsubset to subset and optimize fonts. Some font services allow manual subsetting via custom query parameters to manually get a font subset.  The browser downloads the required font after creating the render tree. This causes the web page rendering to be delayed till the font is not available. Devs can use the font loading API to micro manage this font loading process to get the required fonts before the render tree. (Browser dependent)  The devs can inline the font in the CSS to force the browser to download the font while creating the CSSOM. We should keep a separate CSS file for fonts with large max age so that the fonts are not downloaded every time a newer version of CSS is built and deployed. (Be very careful)  Use HTTP Caching for the fonts. © Perennial Systems Inc 27
  • 28. + Use CDN  Content delivery network is a network of servers placed in different geographic locations with your website content and delivered to the clients from the closest location for reduced network latency.  CDN can be used for delivery of all static resources: CSS, JS, Images, HTML  Popular CNDs  Cloudflare (has free option)  Fastly  Amazon CloudFront  MaxCDN  Akamai  Cachefly  Keycdn © Perennial Systems Inc 28
  • 29. + Repaint and Reflows  When part or whole of the render tree needs to be revalidated and the node dimensions recalculated is called “Reflow”.  When part of the screen needs to be updated due to changes in style it requires the browser to paint that area of the screen. This is called Repaint.  Code that causes reflow or repaint  Adding, removing, updating DOM nodes  Hiding a DOM node with display: none (reflow and repaint) or visibility: hidden (repaint only)  Moving, animating a DOM node on the page (repaint)  Adding a stylesheet, tweaking style properties (reflow or repaint or both)  User action such as resizing the window, changing the font size, or browser scrolling © Perennial Systems Inc 29
  • 30. + Expensive operations  Browsers optimizes the reflows and repaint operations by performing in batches. Though are certain functions that causes the browser to perform the reflow and/or repaints immediately and hence should be used very carefully. Element: clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth Frame, Image: height, width Range: getBoundingClientRect(), getClientRects() SVGLocatable: computeCTM(), getBBox() SVGTextContent: getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString() SVGUse: instanceRoot Window: getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode() © Perennial Systems Inc 30
  • 31. + Recommendations for minimizing Repaint and Reflow  Don’t read and write to style sheet very quickly. Batch the query state and change state statements  Don’t change individual style one by one if there are multiple changes, use cssText property as it batches the application of change  Don’t ask for computed style multiple times. Store in local variable and reuse them specially for expensive operations. © Perennial Systems Inc 31
  • 32. + PageSpeed module – Apache, Nginx  Page speed module is developed by Google and can be configured with Apache or Nginx to perform web page optimization best practices.  These optimizations are performed by configuring filters in the page speed module.  Categories of filters:  Optimize Caching  Minimize round trip times  Minimize request overhead  Minimize payload size  Optimize Browser rendering © Perennial Systems Inc 32
  • 33. + What’s next?  How to measure page performance using tools?  JavaScript Internals © Perennial Systems Inc 33
  • 34. + References  https://developers.google.com/web/fundamentals/performance/?hl=en  https://developers.google.com/speed/docs/insights/about  https://jonsuh.com/blog/need-for-speed-2/  https://classroom.udacity.com/courses/ud884/  http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/  http://gent.ilcore.com/2011/05/how-web-page-loads.html  http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html © Perennial Systems Inc 34