How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join this discussion of the synchronous and asynchronous nature of web components, and how they can impact the rendering of the entire page.
Making users happy is a goal that unifies everyone on the team. The key then is to establish metrics that reflect user happiness. In the world of performance, we haven’t always done a great job of this. Often, performance metrics track how our pages are built which might not be correlated with a joyous user experience, and we start optimizing our stack for the sake of optimizing our stack. Luckily, momentum is building around UX-centered metrics such as start render time, time-to-interact, and first meaningful paint. Steve Souders discusses these new metrics that help us build web apps that produce the fast, joyous experiences our users want.
Which would you rather have: A rich design or a fast user experience? Users want both, but sometimes the interplay between design and performance feels like a fixed sum game: One side’s gain is the other side’s loss. Design and performance are indeed connected, but it’s more like the yin and yang. They aren’t opposing forces, but instead complement each other. Users want an experience that is rich and fast. The trick for us as designers and developers is figuring out how to do that.
The answer is to adopt an approach that considers both design and performance from the outset. With this approach, designs are conceived by teams of designers and developers working together. Developers benefit by participating in the product definition process. Designers benefit from understanding more about how designs are implemented. There’s an emphasis on early prototyping and tracking performance from the get-go.
With new metrics that focus on what a user actually sees as the page loads, we can now bridge the technical and language gaps that have hindered the seamless creation of great user experiences. In this presentation, Steve Souders, former Chief Performance Yahoo! and Google head performance engineer, explains how promoting a process that brings design and performance together at the beginning of a project helps deliver a web experience that is both fast and rich.
How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join this discussion of the synchronous and asynchronous nature of web components, and how they can impact the rendering of the entire page.
Making users happy is a goal that unifies everyone on the team. The key then is to establish metrics that reflect user happiness. In the world of performance, we haven’t always done a great job of this. Often, performance metrics track how our pages are built which might not be correlated with a joyous user experience, and we start optimizing our stack for the sake of optimizing our stack. Luckily, momentum is building around UX-centered metrics such as start render time, time-to-interact, and first meaningful paint. Steve Souders discusses these new metrics that help us build web apps that produce the fast, joyous experiences our users want.
Which would you rather have: A rich design or a fast user experience? Users want both, but sometimes the interplay between design and performance feels like a fixed sum game: One side’s gain is the other side’s loss. Design and performance are indeed connected, but it’s more like the yin and yang. They aren’t opposing forces, but instead complement each other. Users want an experience that is rich and fast. The trick for us as designers and developers is figuring out how to do that.
The answer is to adopt an approach that considers both design and performance from the outset. With this approach, designs are conceived by teams of designers and developers working together. Developers benefit by participating in the product definition process. Designers benefit from understanding more about how designs are implemented. There’s an emphasis on early prototyping and tracking performance from the get-go.
With new metrics that focus on what a user actually sees as the page loads, we can now bridge the technical and language gaps that have hindered the seamless creation of great user experiences. In this presentation, Steve Souders, former Chief Performance Yahoo! and Google head performance engineer, explains how promoting a process that brings design and performance together at the beginning of a project helps deliver a web experience that is both fast and rich.
Every URL visited from the Facebook iPhone app is done through a webview. Same with Twitter. Even if you don't have a mobile app, your website gets a lot of traffic from webviews. And yet, testing on webviews is challenging. There are significant performances differences between UIWebView vs WkWebView, and similarly for Android webview vs the new Chromium webview. And what about home screen apps?! In this talk, Steve Souders discusses the differences across webviews and how that affects performance of mobile web apps.
Presentation at WebPerfDays Amsterdam, May 18 2013.
This newish browser API can be used to gain insight in the load time of individual page resources. Does the API behave consistently and as expected? Short answer: no, not really. Long answer: view the presentation ;-)
What to look for and avoid when it comes to 3rd party snippets. How to test your site for frontend SPOF. Use the self-updating script pattern to increase the cacheability of bootstrap scripts.
All of us have a lurking failure in our websites: 3rd party scripts from ads, widgets, and analytics. How is it that one script can bring down your website?
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG🎤 Hanno Embregts 🎸
What source control software did you use in 2010? Possibly Git, if you were an early adopter or a Linux kernel committer. But chances are you were using Subversion, as this was the product of choice for the majority of the software developers. Ten years later, Git is the most popular product. Which makes me wonder: what will we use another ten years from now?
In this talk we will think about what features we want from our source control software in 2030. More speed? Better collaboration support? No merge conflicts ever?
I’ll also discuss a few products that have been published after Git emerged, including Plastic, Fossil and Pijul. I’ll talk about the extent to which they contain the features we so dearly desire and I’ll demonstrate a few typical use cases. To conclude, I’ll try to predict which one will be ‘the top dog’ in 2030 (all information is provided “as is”, no guarantees etc. etc.).
So attend this session if you’re excited about the future of version control and if you want to have a shot at beating even (!) the early adopters. Now if it turns out I was right, remember that you heard it here first.
Java REST API Framework Comparison - PWX 2021Matt Raible
Use Spring Boot! No, use Micronaut!! Nooooo, Quarkus is the best!!!
There's a lot of developers praising the hottest, and fastest, Java REST frameworks: Micronaut, Quarkus, and Spring Boot. In this session, you'll learn how to do the following with each framework:
✅ Build a REST API
✅ Secure your API with OAuth 2.0
✅ Optimize for production with Docker and GraalVM
I'll also share some performance numbers and pretty graphs to compare community metrics.
Related blog post: https://developer.okta.com/blog/2021/06/18/native-java-framework-comparison
The Case for HTTP/2 - GreeceJS - June 2016Andy Davies
HTTP/2 is here but why do we need it, how is it different to HTTP/1.1 and what does the mean for developers?
Slides from my talk at GreeceJS in Athens, June 2016
Slides from my talk at NCC Group's Web Performance Day in May 2016.
Compares the features of apps and the web, what's great about each and explores some of the technologies that will allow us to build websites that can deliver native like experiences.
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
Building an Appier Web - Velocity Amsterdam 2016Andy Davies
Explores progressive web apps, what advantages they have versus native apps, how to build, and test them, and some of the challenges we still have ahead.
Slides from talk at Velocity Amsterdam 2016
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
Ever wonder why the page appears frozen or why you get a dialog saying, "this script is taking too long"? Inside of the browser, JavaScript and the page's UI are very intertwined, which means they can affect each other and, in turn, affect overall page performance. Ensuring the fastest execution time of JavaScript code isn't about geek cred, it's about ensuring that the user experience is as fast and responsive as possible. In a world where an extra second can cost you a visitor, sluggishness due to poor JavaScript code is a big problem. In this talk, you'll learn what's going on inside the browser that can slow JavaScript down and how that can end up creating a "slow page". You'll also learn how to overcome the conspiracy against your code by eliminating performance bottlenecks.
When Web Performance Optimization was emerging as a new field of engineering we had a handful of rules to follow. Gzip here, minify there, do some caching. This was 15 years ago.
This year’s Smashing Magazine performance checklist has 62 items with hundreds of links for further research.
Have we learned so much or has the Web become so complicated?
In this talk I will try to make sense of today’s most pressing Web Performance issues with easily digestible lessons about metrics, budgets, JavaScript frameworks, functional programming, browsers and plain old HTML.
Every URL visited from the Facebook iPhone app is done through a webview. Same with Twitter. Even if you don't have a mobile app, your website gets a lot of traffic from webviews. And yet, testing on webviews is challenging. There are significant performances differences between UIWebView vs WkWebView, and similarly for Android webview vs the new Chromium webview. And what about home screen apps?! In this talk, Steve Souders discusses the differences across webviews and how that affects performance of mobile web apps.
Presentation at WebPerfDays Amsterdam, May 18 2013.
This newish browser API can be used to gain insight in the load time of individual page resources. Does the API behave consistently and as expected? Short answer: no, not really. Long answer: view the presentation ;-)
What to look for and avoid when it comes to 3rd party snippets. How to test your site for frontend SPOF. Use the self-updating script pattern to increase the cacheability of bootstrap scripts.
All of us have a lurking failure in our websites: 3rd party scripts from ads, widgets, and analytics. How is it that one script can bring down your website?
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG🎤 Hanno Embregts 🎸
What source control software did you use in 2010? Possibly Git, if you were an early adopter or a Linux kernel committer. But chances are you were using Subversion, as this was the product of choice for the majority of the software developers. Ten years later, Git is the most popular product. Which makes me wonder: what will we use another ten years from now?
In this talk we will think about what features we want from our source control software in 2030. More speed? Better collaboration support? No merge conflicts ever?
I’ll also discuss a few products that have been published after Git emerged, including Plastic, Fossil and Pijul. I’ll talk about the extent to which they contain the features we so dearly desire and I’ll demonstrate a few typical use cases. To conclude, I’ll try to predict which one will be ‘the top dog’ in 2030 (all information is provided “as is”, no guarantees etc. etc.).
So attend this session if you’re excited about the future of version control and if you want to have a shot at beating even (!) the early adopters. Now if it turns out I was right, remember that you heard it here first.
Java REST API Framework Comparison - PWX 2021Matt Raible
Use Spring Boot! No, use Micronaut!! Nooooo, Quarkus is the best!!!
There's a lot of developers praising the hottest, and fastest, Java REST frameworks: Micronaut, Quarkus, and Spring Boot. In this session, you'll learn how to do the following with each framework:
✅ Build a REST API
✅ Secure your API with OAuth 2.0
✅ Optimize for production with Docker and GraalVM
I'll also share some performance numbers and pretty graphs to compare community metrics.
Related blog post: https://developer.okta.com/blog/2021/06/18/native-java-framework-comparison
The Case for HTTP/2 - GreeceJS - June 2016Andy Davies
HTTP/2 is here but why do we need it, how is it different to HTTP/1.1 and what does the mean for developers?
Slides from my talk at GreeceJS in Athens, June 2016
Slides from my talk at NCC Group's Web Performance Day in May 2016.
Compares the features of apps and the web, what's great about each and explores some of the technologies that will allow us to build websites that can deliver native like experiences.
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
Building an Appier Web - Velocity Amsterdam 2016Andy Davies
Explores progressive web apps, what advantages they have versus native apps, how to build, and test them, and some of the challenges we still have ahead.
Slides from talk at Velocity Amsterdam 2016
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
Ever wonder why the page appears frozen or why you get a dialog saying, "this script is taking too long"? Inside of the browser, JavaScript and the page's UI are very intertwined, which means they can affect each other and, in turn, affect overall page performance. Ensuring the fastest execution time of JavaScript code isn't about geek cred, it's about ensuring that the user experience is as fast and responsive as possible. In a world where an extra second can cost you a visitor, sluggishness due to poor JavaScript code is a big problem. In this talk, you'll learn what's going on inside the browser that can slow JavaScript down and how that can end up creating a "slow page". You'll also learn how to overcome the conspiracy against your code by eliminating performance bottlenecks.
When Web Performance Optimization was emerging as a new field of engineering we had a handful of rules to follow. Gzip here, minify there, do some caching. This was 15 years ago.
This year’s Smashing Magazine performance checklist has 62 items with hundreds of links for further research.
Have we learned so much or has the Web become so complicated?
In this talk I will try to make sense of today’s most pressing Web Performance issues with easily digestible lessons about metrics, budgets, JavaScript frameworks, functional programming, browsers and plain old HTML.
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
The amount of 3rd-party content included on websites is exploding (social sharing buttons, user tracking, advertising, code libraries, etc). Learn tips and techniques for how best to integrate them into your sites without risking a slower user experience or even your sites becoming unavailable.
Video is available here: http://www.youtube.com/watch?v=JB4ulhFFdH4&feature=plcp
This is Steve Souders's talk at Amazon which I couldn't read in it's original pptx format (http://stevesouders.com/docs/amazon-20091030.pptx) since Keynote sucks at importing. It seems to render well here.
A presentation for Dundee University's Hack Day explaining the technologies to use and how to hack your own APIs by using Yahoo! Pipes and scraping RSS feeds.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
Overhauling one of the most visited web sites in the world is a major task, and add on top of it the pressure of keeping performance the same while adding a ton of new features, and you have quite a task. Learn how the Yahoo! homepage team achieved performance parity with the previous version even while adding a ton of new features.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.
Similar to Web Directions South - Even Faster Web Sites (20)
Everyone loves fast sites. While "make your site faster" is a simple mantra, the actual steps to achieve this can be daunting. Fortunately, we know where to start: JavaScript. JavaScript consumes more CPU than loading, layout, and rendering combined. Byte-for-byte, JavaScript inflicts more delays on sites than any other resource, and yet the amount of JavaScript on sites continues to grow.
In this session you'll learn the latest techniques for measuring and improving the impact JavaScript on your site, including: using the User Timing Spec and Long Tasks API to track the CPU cost of JavaScript for real users, moving expensive JavaScript off the main thread, using code coverage tools to reduce your JavaScript, and understanding why defer is probably a better technique than async for loading JavaScript.
Which would you rather have: a website that’s fast or a website that’s perceived as fast? The answer is “Both!” The list of performance best practices is long and well known, but there’s been less focus on the user’s perception of speed. In this presentation Steve Souders provides examples of how the perception of speed is completely independent of actual speed, and techniques for leveraging this perception gap to create websites that feel fast.
How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join this discussion of the synchronous and asynchronous nature of web components, and how they can impact the rendering of the entire page.
Presented at SXSW '09, this talk covers five best practices from my next book: Load scripts without blocking, Coupling asynchronous scripts, Don't scatter inline scripts, Use iframes sparingly, and Flush the document early.
1. Even Faster Web Sites stevesouders.com/docs/wdx-20101014.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. flickr.com/photos/ddfic/722634166/
2. how exciting is web dev? flickr.com/photos/joshme17/1557627176/
14. Site speed in search rank Screen shot of blog post …we've decided to take site speed into account in our search rankings. googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
15.
16. Both combine scripts combine stylesheets add an Expires header gzip responses put stylesheets at the top put scripts at the bottom avoid CSS expressions make JS and CSS external reduce DNS lookups minify JS and CSS avoid redirects remove duplicate scripts make Ajax cacheable reduce cookie size use cookie-free domains don't scale images YSlow use CSS sprites use a CDN configure ETags use GET for Ajax requests reduce # of DOM elements no 404s avoid image filters optimize favicon Page Speed defer loading JS remove unused CSS use efficient CSS selectors optimize images optimize order of CSS & JS shard domains leverage proxy caching
31. <script src="A.js"> blocks parallel downloads and rendering 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3 7 secs: IE 8-9, FF 3.6, Chr6, Saf 4 Why focus on JavaScript?
32. 29% avg 229 K avg initial payload and execution
33. split the initial payload split your JavaScript between what's needed to render the page and everything else defer "everything else" split manually (Page Speed), automatically (Microsoft Doloto) load scripts without blocking http://www.flickr.com/photos/devcentre/108032900/
34. Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
35. XHR Eval varxhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script & page must be same domain
36. Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se); script & page domains can differ may not preserve execution order
37. MeeboIframed JS var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; doc.open().write('<body onload="insertJS()">'); doc.close(); loads asynchronously delays parent’s load event: FF, Chr, Saf great for 3rd party scripts better for sandboxing & security avoids iframe src roundtrip
38. GMail Mobile <script type="text/javascript"> /* var ... */ </script> get script DOM element's text remove comments eval() when invoked inline or iframe awesome for prefetching JS that might (not) be needed
58. http://2.2.2.2/irscripts/imgreload.js function FN_ImageReload(){ var FN_IR_TIMEOUT=2000; var FN_IR_SUFFIX="_hyuncompressed"; var FN_IR_ALT="please wait 2 seconds for an uncompressed image, or press Ctrl+F5 for original quality page"; varFN_IR_register=function() { ... vardocAll=document.getElementsByTagName("*"); for(i=0;i<docAll.length;i++) { varcurrEl=docAll[i]; }
59. WebP image format googlecode.blogspot.com/2010/09/webp-new-image-format-for-web.html 39% size reduction based on VP8 codec loss of quality? http://englishhard.com/2010/10/01/real-world-analysis-of-googles-webp-versus-jpg/
60. W3C Web Timing Spec window.[webkit|moz|ms]Performance test.w3.org/webperf/specs/NavigationTiming/
61. speed matters focus on the frontend run Page Speed and YSlow progressive enhancement progressive rendering be excited! takeaways flickr.com/photos/34771728@N00/361526991/
62. Steve Souders @souders, souders@google.com stevesouders.com/docs/wdx-20101014.pptx flickr.com/photos/nj_dodge/187190601/
Editor's Notes
Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
“if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
http://www.webpagetest.org/video/compare.php?tests=100607_SN,100607_SM,100607_SK,100607_SJ,100607_S6http://www.google.com/search?q=flowershttp://search.yahoo.com/search?p=flowershttp://www.bing.com/search?q=flowershttp://www.ask.com/web?q=flowershttp://search.aol.com/aol/search?q=flowersIE7, Dulles VA, DSL
All of these allow for parallel downloads, but none of them allow for parallel JS execution – that's not possible (currently, WebKit is doing some stuff on that).