SlideShare a Scribd company logo
1 of 91
Download to read offline
Progressive downloads
and rendering



Stoyan Stefanov, Yahoo!
Fronteers, Amsterdam, 2010
http://slideshare.net/stoyan/
About me
           YSlow 2.0
Why progressive?
Importance of performance
•  Psychology, physiology
•  Effects of waiting
•  “Time is money”
•  Make people happy
Perception
Perception
Perception
Perception
Durations
               actual
            expected
            perceived
                rem’d

                 time
It feels slower when…
•  Unpleasant
•  Unknown
•  Boring
•  Too much to keep track
First time experience
•  Unfamiliar = slow
•  Optimize empty cache or
   there will be no full cache
So… go progressive!
But before we begin…
The basics
•  Reducing the # HTTP
•  Gzip
•  Minification
•  Image smushing
•  Expires
•  CDN
The basics
•  Yahoo!’s best practices
•  Google’s
•  perfplanet.com
Progressive
Progressive enhancement
Progressive downloads
Progressive rendering
Agenda
•  Blocking JavaScript
•  Flushing
•  CSS and rendering
•  Blocking <!--[if IE 6]>	
•  Preloading, MHTML…
Blocking JavaScript
JavaScript blocks



   html
          js
               png

               png
JavaScript blocks
•  A no-no!

<script src="jquery.js"></script> 
<script src="jquery.twitter.js"></script> 
<script src="jquery.cookie.js"></script> 
<script src="myapp.js"></script> 
This waterfall looks ridiculous



html
       js
             js

                  js

                        js

                             png

                             png
JavaScript at the bottom



   html
          png

          png

                js
Non-blocking JavaScript
•  defer and async	
•  Defer: IE innovation, ok to
   delay, but keep order
•  Async: HTML5, whatever
<script async src="my.js" onload="doIt()"></script> 
<script defer src="my.js" onload="doIt()"></script> 
defer and async timeline

               async
                   	


     defer
         	



         DOMContentLoaded
                        	   load
Non-blocking JavaScript
•    Asynchronous loading
     html
                  js

            png

            png


var js = document.createElement('script'); 
js.src = 'myscript.js'; 
var h = document.getElementsByTagName('head')[0]; 
h.appendChild(js); 
Flush
flush() early
 html
                         png

                    js               
                               css



 html



   js
        png
                                     ✔
              css
flush()
<html>	
<head>	
  <script src="my.js" 	
   	type="text/javascript"></script>	
  <link href="my.css" 	
   	type="text/css" rel="stylesheet" />	
</head>	

<?php flush() ?>
<body>	
  ....
Chunked encoding
HTTP/1.1 200 OK 
Content‐Type: text/plain 
Transfer‐Encoding: chunked 

25 
This is the data in the first chunk 

1C 
and this is the second one 

0 
Chunked encoding

•  Progressive rendering
   - Semantic app chunks
   vs.
   - Server-level chunks
Progressive rendering
                        Chunk
                        #1




                        Chunk
                        #2




                        Chunk
                        #3
<!doctype html>	
<html>	
<head><title>My App</title></head>	
<body>	
  <div id="header">	
     <img src="logo.png" />	
     ...	
  </div>                   <!-- end of chunk #1 -->	

  ... The full body of the page ...	
                           <!-- end of chunk #2 -->	



<script src="all_20100925.js"></script>	
</body>	
</html>                    <!-- end of chunk #3 -->
Progressive + source order
                             1


3
                             2
4
HTTP chunking: not only HTML
HTTP chunking: not only HTML
•  Google Instant
•  /*""*/ - delimited JSON
   pieces
•  Chunk #1 suggestions
•  Chunk #2 results

                    http://tinyurl.com/chunkview
CSS and rendering
Worst enemy?



        CSS
CSS blocks rendering
•  The worst component type
•  Place way at the top
•  Inline all @media print, etc



http://www.phpied.com/delay-loading-your-print-css/
http://www.phpied.com/rendering-styles/
CSS
CSS
CSS block
downloads?

But they do block:
•  When followed
   by an inline script
•  When in conditional
   comments
Inline CSS
•  Google search
•  Bing.com: inline + postload
Same domain
•  If you split across domains
•  and if you don’t use CDN
•  Saves a DNS lookup
CC block
Normal page
With conditionally commented
CSS file
What…?! Case #1
  <link type="text/css" rel="stylesheet" 
        href="1.css"> 
  <!‐‐[if IE 6 ]> 
    <link type="text/css" rel="stylesheet" 
          href="ie.css"> 
  <![endif]‐‐> 
What…?! Case #2
<!‐‐[if IE 6]> 
    <body class="ie6">  
<![endif]‐‐> 
<!‐‐[if !IE]><!‐‐> 
    <body> 
<!‐‐<![endif]‐‐> 
Solution for case #1
<!DOCTYPE html> 
<!‐‐[if IE 6]><![endif]‐‐> 

<html> 
    ... 
Solution for case #2
<!‐‐[if IE 6]> 
    <html class="ie6">  
<![endif]‐‐> 
<!‐‐[if !IE]><!‐‐> 
    <html> 
<!‐‐<![endif]‐‐> 
Preloads
Preloads
•  Anticipate next page
•  Problems:
 - does next page anticipate you?
 - parsing and execution time
•  <link prefetch="http://..">
Preload sans execute
var preload; 	
if (/*@cc_on!@*/false) { // IE 	
    preload = function (file) {	
        new Image().src = file;	
    };	
} else {	
    preload = function (file) {	
        var obj = document.createElement('object'),	
            body = document.body;	
        obj.width = 0;	
        obj.height = 0;	
        obj.data = file;	
        body.appendChild(obj);	
    };	
}
Blocking favicon
Data URIs
Fewer HTTP requests
•  Inline images:
   in CSS sprites
   with data: URI scheme


                    http://csssprites.com	
                    http://spriteme.org
Fewer HTTP requests
•  data: URI scheme

$ php ‐r "echo base64_encode(file_get_contents('my.png'));” 
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4
DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 
Fewer HTTP requests
•  data: URI scheme

background‐image: url("data:image/png;base64,iVBORw0KG..."); 
Fewer HTTP requests
•  data: URI scheme

<img src="data:image/png;base64,iVBOR..." /> 
Both
•  flushes
•  data: URIs
Fewer HTTP requests
•  data: URI scheme
•  works in IE!...
Fewer HTTP requests
•  data: URI scheme
•  works in IE8!
Fewer HTTP requests
•  data: URI scheme
•  MHTML for IE < 8
MHTML
•  MIME HTML
•  Works in IE 6,7
•  Indeed it actually absolutely
does work in IE7/Vista too


                     http://phpied.com

                     /the-proper-mhtml-syntax/
MHTML - one part
Content-Location: myimage	
Content-Transfer-Encoding: base64	

iVBORw0KGgoAAAANSU....U5ErkJggg==
MHTML - multi parts
Content-Type: multipart/related; boundary="MYSEPARATOR"	

--MYSEPARATOR	

[here comes part one]	                    The
                                          double-
--MYSEPARATOR	                            dash of
                                          doom
[here's part two]	

--MYSEPARATOR--
MHTML.css – all together
/*	
Content-Type: multipart/related; boundary="MYSEPARATOR"	

--MYSEPARATOR	
Content-Location: myimage	
Content-Transfer-Encoding: base64	

iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg==	
--MYSEPARATOR	
Content-Location: another	
Content-Transfer-Encoding: base64	

iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA....U5ErkJggg==	
--MYSEPARATOR--	
*/	
.myclass {	
    background-image:url(mhtml:http://example.org/styles.css!myimage);	
}	
.myotherclass {	
    background-image:url(mhtml:http://example.org/styles.css!another);	
}
MHTML: inline too
<!doctype html>
<html>
 <head>
     <title>Look Ma' No HTTP requests</title>
     <style type="text/css">
/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:locoloco
Content-Transfer-Encoding:base64

iVBOR...CC
--_
Content-Location:polloloco
Content-Transfer-Encoding:base64

iVBOR....gg==
--_--
*/
.image1 {
  background-image: url("data:image/png;base64,iVBOR...CC"); /* normal */
    *background-image: url(mhtml:http://...html!locoloco); /* IE < 8 */
}
.image2 {
  background-image: url("data:image/png;base64,iVBOR...gg=="); /* normal */
    *background-image: url(mhtml:http://...html!polloloco); /* IE < 8 */
}
body {
 font: bold 24px Arial;
}
     </style>
    </head>
    <body>

                                                                              http://phpied.com

  <h1>MHTML + Data:URIs inline in <code>style</code></h1>
  <p class="image1">hello<br>hello</p>
  <p class="image2">bonjour<br>bonjour</p>
 </body>
</html>
                                                                              /inline-mhtml-data-uris/
MHTML + data URI
•  X-browser
   single request
      web apps
Single request
•  WT☠?
•  Separation of concerns
•  Content-presentation-
behavior
•  yes, it’s a tradeoff
MHTML + data URI
•  drawback: repeats the same
encoded image
•  solutions:
    - browser-specific CSS
    - keep close = better gzip
    - or… an ingenious hack
MHTML + data URI
•  image header + css + data
/9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AA0


Reality:

IE:

Others:



http://habrahabr.ru/blogs/webdev/90761/
Animations as distractions…
Distractimations
Parting words
What not to say…
•  “Everyone is on high-speed
these days”
•  “It’s all in the cache”
Do care about
•  Progressive,
     non-blocking,
       asynchronous downloads
•  Progressive rendering
Thank you!


Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com

More Related Content

What's hot

jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesDoris Chen
 
Web performance essentials - Goodies
Web performance essentials - GoodiesWeb performance essentials - Goodies
Web performance essentials - GoodiesJerry Emmanuel
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 
Emerging threats jonkman_sans_cti_summit_2015
Emerging threats jonkman_sans_cti_summit_2015Emerging threats jonkman_sans_cti_summit_2015
Emerging threats jonkman_sans_cti_summit_2015Emerging Threats
 
Two scoops of Django - Security Best Practices
Two scoops of Django - Security Best PracticesTwo scoops of Django - Security Best Practices
Two scoops of Django - Security Best PracticesSpin Lai
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksJSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksMario Heiderich
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
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
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't CodeChristopher Schmitt
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Stoyan Stefanov
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax ApplicationsJulien Lecomte
 
Learning django step 1
Learning django step 1Learning django step 1
Learning django step 1永昇 陳
 
Library Program Technology in Ukraine & Romania
Library Program Technology in Ukraine & RomaniaLibrary Program Technology in Ukraine & Romania
Library Program Technology in Ukraine & RomaniaMark Belinsky
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance PatternsStoyan Stefanov
 

What's hot (20)

jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best Practices
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Web performance essentials - Goodies
Web performance essentials - GoodiesWeb performance essentials - Goodies
Web performance essentials - Goodies
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
Emerging threats jonkman_sans_cti_summit_2015
Emerging threats jonkman_sans_cti_summit_2015Emerging threats jonkman_sans_cti_summit_2015
Emerging threats jonkman_sans_cti_summit_2015
 
Two scoops of Django - Security Best Practices
Two scoops of Django - Security Best PracticesTwo scoops of Django - Security Best Practices
Two scoops of Django - Security Best Practices
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating FrameworksJSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
JSMVCOMFG - To sternly look at JavaScript MVC and Templating Frameworks
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
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
 
Liking performance
Liking performanceLiking performance
Liking performance
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Learning django step 1
Learning django step 1Learning django step 1
Learning django step 1
 
Library Program Technology in Ukraine & Romania
Library Program Technology in Ukraine & RomaniaLibrary Program Technology in Ukraine & Romania
Library Program Technology in Ukraine & Romania
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 

Viewers also liked

JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhereStoyan Stefanov
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social ObjectsJESS3
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Mapfrankieroberto
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.jsBo-Yi Wu
 
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2Paul Adams
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why howbrucelawson
 
The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsPeter Gasston
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptbrucelawson
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0brucelawson
 
Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaOpen Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaIrina (Shumadieva) Micov
 
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsTesting The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsAlex Leonov
 
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Dr. Alexander Schwartz
 
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Appsbrucelawson
 
Being Agile and Seeing Big Picture
Being Agile and Seeing Big PictureBeing Agile and Seeing Big Picture
Being Agile and Seeing Big PictureAlex Leonov
 
Consumer Driven Contracts (DDD Perth 2016)
Consumer Driven Contracts (DDD Perth 2016)Consumer Driven Contracts (DDD Perth 2016)
Consumer Driven Contracts (DDD Perth 2016)Rob Crowley
 
Listening through Customer Insights
Listening through Customer InsightsListening through Customer Insights
Listening through Customer InsightsDelvinia
 

Viewers also liked (20)

JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
The World of Social Objects
The World of Social ObjectsThe World of Social Objects
The World of Social Objects
 
Frameworks
FrameworksFrameworks
Frameworks
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 
Mapping History on Open Street Map
Mapping History on Open Street MapMapping History on Open Street Map
Mapping History on Open Street Map
 
Automating your workflow with Gulp.js
Automating your workflow with Gulp.jsAutomating your workflow with Gulp.js
Automating your workflow with Gulp.js
 
The Real Life Social Network v2
The Real Life Social Network v2The Real Life Social Network v2
The Real Life Social Network v2
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
 
The Home of the Future: CSS Layouts
The Home of the Future: CSS LayoutsThe Home of the Future: CSS Layouts
The Home of the Future: CSS Layouts
 
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScriptWeb Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
 
Leveraging HTML 5.0
Leveraging HTML 5.0Leveraging HTML 5.0
Leveraging HTML 5.0
 
Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in MacedoniaOpen Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in Macedonia
 
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic EffortsTesting The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
 
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!
 
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of AppsBruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
 
Being Agile and Seeing Big Picture
Being Agile and Seeing Big PictureBeing Agile and Seeing Big Picture
Being Agile and Seeing Big Picture
 
Consumer Driven Contracts (DDD Perth 2016)
Consumer Driven Contracts (DDD Perth 2016)Consumer Driven Contracts (DDD Perth 2016)
Consumer Driven Contracts (DDD Perth 2016)
 
Listening through Customer Insights
Listening through Customer InsightsListening through Customer Insights
Listening through Customer Insights
 

Similar to Progressive downloads and rendering optimized for performance

Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićMeetMagentoNY2014
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceAdam Norwood
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimizationStoyan Stefanov
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patternsStoyan Stefanov
 
Website Performance Basics
Website Performance BasicsWebsite Performance Basics
Website Performance Basicsgeku
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsStoyan Stefanov
 
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
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 
High performance website
High performance websiteHigh performance website
High performance websiteChamnap Chhorn
 
Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014Rob Gietema
 
Defeating Cross-Site Scripting with Content Security Policy (updated)
Defeating Cross-Site Scripting with Content Security Policy (updated)Defeating Cross-Site Scripting with Content Security Policy (updated)
Defeating Cross-Site Scripting with Content Security Policy (updated)Francois Marier
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowWordPress
 
Responsive content
Responsive contentResponsive content
Responsive contenthonzie
 

Similar to Progressive downloads and rendering optimized for performance (20)

Build Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje JurišićBuild Better Responsive websites. Hrvoje Jurišić
Build Better Responsive websites. Hrvoje Jurišić
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web Performance
 
Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Website Performance Basics
Website Performance BasicsWebsite Performance Basics
Website Performance Basics
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
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
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Html5
Html5Html5
Html5
 
High performance website
High performance websiteHigh performance website
High performance website
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
 
Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014
 
Defeating Cross-Site Scripting with Content Security Policy (updated)
Defeating Cross-Site Scripting with Content Security Policy (updated)Defeating Cross-Site Scripting with Content Security Policy (updated)
Defeating Cross-Site Scripting with Content Security Policy (updated)
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Responsive content
Responsive contentResponsive content
Responsive content
 

More from Stoyan Stefanov

High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social PluginsStoyan Stefanov
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъдеStoyan Stefanov
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scriptingStoyan Stefanov
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesStoyan Stefanov
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performanceStoyan Stefanov
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scriptingStoyan Stefanov
 
The business of performance
The business of performanceThe business of performance
The business of performanceStoyan Stefanov
 
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss ClinicIgnite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss ClinicStoyan Stefanov
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)Stoyan Stefanov
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptStoyan Stefanov
 
Image Optimization for the Web at php|works
Image Optimization for the Web at php|worksImage Optimization for the Web at php|works
Image Optimization for the Web at php|worksStoyan Stefanov
 
Images - 7 mistakes (first draft)
Images - 7 mistakes (first draft)Images - 7 mistakes (first draft)
Images - 7 mistakes (first draft)Stoyan Stefanov
 

More from Stoyan Stefanov (20)

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
 
The business of performance
The business of performanceThe business of performance
The business of performance
 
JavaScript Patterns
JavaScript PatternsJavaScript Patterns
JavaScript Patterns
 
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss ClinicIgnite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
 
Image Optimization for the Web at php|works
Image Optimization for the Web at php|worksImage Optimization for the Web at php|works
Image Optimization for the Web at php|works
 
Images - 7 mistakes (first draft)
Images - 7 mistakes (first draft)Images - 7 mistakes (first draft)
Images - 7 mistakes (first draft)
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Images - 7 mistakes
Images - 7 mistakesImages - 7 mistakes
Images - 7 mistakes
 

Recently uploaded

Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
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
 
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
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
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
 
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
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 

Recently uploaded (20)

Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
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
 
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
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
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
 
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
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 

Progressive downloads and rendering optimized for performance