xPerformance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser.
The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that?
In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works *with* the browser, not against it, and ultimately improves your users’ experience.
This document summarizes techniques for optimizing image delivery for fast page loads, including: reducing image quality, using optimized formats like WebP and SVG, sizing images appropriately, and lazy loading images below the fold. It provides examples of each technique and data on their impact, such as median savings of 2.83 seconds and 419KB from quality optimization. Recommended tools for optimizing and measuring performance are also listed. The overall message is that with the right optimizations, images can be both beautiful and fast loading.
The key to a successful mobile site is high performance and reliability across a wide range of device capabilities and network latencies. However, the mobile web is a hostile environment with support for HTML5, JavaScript and CSS varying widely across browsers and devices. This talk will explain best practices to build high performance mobile sites that work across a wide range of devices and capabilities. The focus will be on lessons learnt at Betfair while rewriting the entire mobile web stack and how we used techniques to maximise performance and reliability. After discussing the problems faced in mobile the talk will explain how adaptive techniques can be used to provide progressive enhancement. This will be followed by an explanation of why and where performance bottlenecks occur and how these can be solved.
According to HTTPArchive.org the average web page is now larger than the original DOOM installation application. Today's obese web is leading to decreased user satisfaction, customer engagement and increased cost of ownership. Research repeatedly tells us customers want faster user experiences. Search engines reward faster sites with better rankings. Small, fast sites are cheaper to develop, maintain and operate.
- Why has the web become obese?
- What actions can developers and stakeholders do to combat their morbid obesity?
- Are these actions expensive or hard to implement?
This session reviews what customers want and how to identify your web site's love handles. More importantly you will learn simple techniques to eliminate the fat and create a healthy, maintainable, affordable web development lifestyle that produces the user experiences your customers want to engage with over and over.
Service workers your applications never felt so goodChris Love
If you have not heard of service workers you must attend this session. Service Workers encompass new browser capabilities, along with shiny new version of AJAX called Fetch. If you have every wanted your web applications to experience many native application features, such as push notifications, service workers is the gateway to your happiness. Have you felt confused by application cache and going offline? Well service workers enable offline experiences in a much cleaner way. But that is not all! If you want to see some of the cool new, advanced web platform features that you will actually use come to this session!
https://love2dev.com/blog/what-is-a-service-worker/
This document discusses optimizing images for faster page loads. It recommends four simple optimizations: reducing image quality to 85%, using smaller file formats like WebP and SVG, sizing images appropriately through responsive images, and lazy loading images not initially visible. Implementing these optimizations can significantly reduce page weight and load times. The document provides examples and tools for each technique and data on their real-world impacts on mobile sites.
This document provides tips for optimizing images for fast loading on mobile devices. It recommends profiling network conditions and device capabilities to understand real-world performance. Images should be compressed and resized for different devices. Formats like JPEG, PNG, and WebP work best. Lazy loading and responsive images can further improve speed. Caching, gzip encoding, and a quality focus on differences imperceptible to humans can make large files much smaller without reducing quality.
This document provides tips for optimizing images for fast loading on mobile websites. It discusses how image size, quality, format, caching, and lazy loading can significantly impact performance. Specific techniques recommended include resizing images to appropriate screen sizes, using formats like WebP and SVG that compress well, lazy loading images below the fold, and adding responsive breakpoints to serve optimized images for different devices. Benchmarking tools are suggested for testing image performance in various scenarios. The overall message is that with the right optimizations, images can load quickly without sacrificing quality.
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
This document provides an overview of techniques for developing high performance web applications. It discusses why front-end performance matters, and outlines best practices for optimizing page load times, using responsive interfaces, loading and executing JavaScript efficiently, and accessing data. The presentation recommends tools for monitoring and improving performance, such as Firebug, Page Speed, and YSlow.
How I learned to stop worrying and love UX metricsTammy Everts
This talk at the 2018 performance.now() conference (Amsterdam) walks through a brief history of UX and web performance research, highlighting landmark studies that helped connect the dots between performance and user experience. I also demystify the current state of performance metrics and help you understand what you need to focus on for your site and your users.
Advanced front end debugging with ms edge and ms toolsChris Love
All browsers have developer tools that help developers troubleshoot their applications. But each browser's tools are different and all have strengths and weaknesses. Microsoft Edge is no different.This session will highlight some deeper insights you can gain through the Edge developer tools and some advanced tools available from Microsoft. We will dive into advanced CSS and JavaScript debugging capabilities. We will also review how to chase memory leaks and diagnose common performance rendering issues. Finally we will do a quick review of Vorlon.js, a remote debugging library that enables you to troubleshoot issues on devices you do not have developer tool access.
The document discusses how the mobile web is growing rapidly but many web developers are not optimizing their sites for mobile. It provides statistics on the growth of mobile phones and their usage. It then details tests the author conducted on various mobile browsers to analyze support for technologies like gzip compression and parallel HTTP requests. The author provides recommendations for optimizing sites for mobile like using gzip, minimizing files, caching aggressively, and limiting cookies. The document advocates for testing sites across mobile browsers due to variations in support.
The document discusses optimizing image delivery for fast page loads by covering techniques like reducing image quality, using smaller file formats, sizing images responsively, and lazy loading images below the fold to reduce initial payload size and speed up rendering. It provides examples and metrics on how these optimizations can significantly improve page load speeds and reduce data usage.
Delivering Fast and Beautiful Images outlines 4 simple optimizations for image performance:
1) Reduce image quality for smaller file sizes without noticeable quality loss. 2) Use optimized formats like WebP and responsive images. 3) Resize images to actual display size. 4) Lazy load images to speed page loads. The document provides examples and data showing these techniques can significantly reduce data usage and page load times.
This document provides a summary of techniques for optimizing image performance on mobile websites. It discusses optimizing image quality, format, sizing through responsive images, and lazy loading images. The techniques can significantly reduce data usage and improve page load speeds. Optimizing images is one of the most effective ways to improve mobile performance.
The document discusses optimizing images for fast loading on mobile websites. It recommends four simple image optimizations: 1) reducing image quality to 85%, 2) using optimized formats like JPEG, WebP and SVG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. Implementing these techniques can significantly reduce data usage and speed up page load times. The document also provides examples and tools for implementing each optimization technique.
These are the slides from my talk "Your WebPerf Sucks" at HK CodeConf 2015 (http://hongkong.codeconf.io) at Science Park in Hong Kong, October 24th.
Web Performance is an important aspect of building for the web and this talk highlights different aspects of what is important and what can be done to improve web performance and build faster sites. While mentioning different aspects of possible improvements, the main focus lies on optimising the critical rendering path to get pages on the screen faster and what tools can help to do so.
The document discusses progressive web apps (PWAs) and outlines key considerations for creating a PWA. It addresses questions around what a PWA is, how to make a website feel like an app, offline functionality, push notifications, and creating a roadmap. Examples from companies that implemented PWAs successfully are provided. The conclusion recommends developing a progressive roadmap that starts with baseline PWA features and builds out functionality over time based on priorities and initiatives.
Performance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser. The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that?
In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works *with* the browser, not against it, and ultimately improves your users’ experience.
Performance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser. The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that?
In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works with the browser, not against it, and ultimately improves your users’ experience.
This document provides an agenda for an HTML5 workshop. The agenda includes discussions of differences between HTML5 and XHTML, building with HTML5 syntax like DOCTYPEs and character sets, and features like audio/video, geolocation, forms, and accessibility. It also outlines exercises for validating HTML5 markup and exploring new HTML5 elements.
HTML Web Devlopment presentation css.pptraghavanp4
CSS is a style sheet language used to determine the formatting of HTML documents. It separates the presentation of HTML elements from the document's structure and semantics. The key benefits of CSS include separation of concerns, cascade of rules, specificity of selector types, and the ability to control layout, colors, fonts and other stylistic aspects of HTML documents. The document provides an overview of CSS fundamentals including the anatomy of style sheets, applying styles via selectors, shorthand properties, and specificity which determines which styles get applied based on an element's selector types and order of rules.
CSS is a style sheet language used to determine the formatting of HTML documents. It separates the presentation of HTML elements from the document's structure and semantics. The key benefits of CSS include separation of concerns, cascading style sheets, and selector-based rules. CSS fundamentals include the anatomy of style sheets with selectors, declarations, and properties. Specificity rules determine which styles take precedence when multiple selectors apply to an element.
CSS is a style sheet language used to determine the formatting of HTML documents. It separates the presentation of HTML elements from the document's structure and semantics. The key benefits of CSS include separation of concerns, cascade of rules, specificity of selector types, and the ability to control layout, colors, fonts and other stylistic aspects of HTML documents. The document provides an overview of CSS fundamentals including the anatomy of style sheets, how rules are applied based on selector types and specificity, and formatting techniques.
This document provides an agenda and overview for an HTML5 and CSS3 workshop. The agenda includes explaining differences between HTML5 and XHTML, building with HTML5 elements like <header>, <nav>, <article>, <aside>, and <footer>, bringing back semantic HTML tags, figures and captions, editable elements, drag and drop, HTML5 metadata like microformats, and page structure. It discusses syntax changes in HTML5 and introducing new elements and attributes to improve semantics and accessibility.
Even though the specification is still being written, HTML5 can be implemented for your website today. In this workshop presented by Christopher Schmitt focused on real world solutions, attendees will learn about the new HTML elements and their semantics, HTML5 form elements, incorporate audio and video without Flash, new JavaScript API like geolocation, and more.
The document discusses new elements and syntax in HTML5 for building web pages. It covers using the <!DOCTYPE html> declaration, specifying character encodings and languages, including <script> and <style> elements, and bringing back semantic HTML tags like <b>, <i>, and <abbr>. It also discusses new structural elements like <header>, <nav>, <section>, <article>, <aside>, and <footer>. Finally, it covers other new features in HTML5 like figures, details, drag and drop, and microformats.
This guide will not bring you a magic formula to optimize critical render path. When the subject is web performance: there's no magic formula. Analyze performance is careful and meticulous process, and it can bring different results based on various existing variables.
This document summarizes strategies for making content responsive including pruning content like images and secondary content for mobile using CSS classes. It discusses linking to content instead of showing it all at once using JavaScript or CSS interactions. Lazy loading images with AJAX calls after page load is also covered to improve performance. The document emphasizes testing content strategies based on device capabilities and making sites functional even without full media query support.
The document discusses various ways that web performance can be improved, including reducing the number of server requests, minimizing file sizes through compression and minification, leveraging caching, optimizing browser rendering through techniques like deferred parsing of JavaScript, and using tools to automate optimizations. It emphasizes that most of the end user response time is spent in the frontend and recommends starting performance improvements there.
Progressive downloads and rendering allow content to be delivered and displayed to the user incrementally to improve perceived performance. JavaScript should be placed at the bottom of the page to avoid blocking. CSS can block rendering so should also be delivered non-blocking when possible. Techniques like flushing output, non-blocking scripts, and data URIs can help deliver content progressively. MHTML and preloading can help optimize delivery across multiple HTTP requests. The overall goal is to start displaying content as soon as possible while content continues downloading in the background.
Design is problem solving. Each and every day, we are tasked with finding ways to reduce the friction our users experience on the Web. That means streamlining flows, reducing cognitive load, and writing more appropriate copy, but user experience goes far beyond the interface. Our users’ experiences begin with their first request to our servers. In this intensely practical session, Aaron will explore the ins and outs of page load performance by showing how he made the web site of the 10K Apart meet its own contest rules, by having a site that was functional and attractive even without JavaScript, and was less than ten kilobytes at initial load. You’ll walk away with a better understanding of the page load process as well as numerous ways you can improve the projects you are working on right now.
The document discusses minimalism in web development. It advocates for building simple things using simple tools where appropriate. This includes using microframeworks that do just enough rather than full-featured frameworks, and taking advantage of CSS3 features to simplify layouts and designs. SQLite is recommended for low to medium traffic sites due to its small size and simplicity. Graceful degradation is also discussed to ensure sites still function acceptably in older browsers.
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
We go over what parts of HTML5 and CSS3 you can use right away and how to degrade gracefully in order to appease the older browsers. Then, we play with some of the awesome visual candy you can make using the latest properties.
- Presented at PyGotham
Sinatra is a micro web framework for Ruby. It uses Rack, supports RESTful routing, and allows defining URL patterns. Haml can be used as a templating language with Sinatra to generate HTML. Sass can also be used for CSS preprocessing. The presentation provided examples of defining routes and rendering templates in Sinatra using ERB and Haml.
Diazo: Bridging Designers and ProgrammersTsungWei Hu
This document introduces Diazo, an open source theme engine for bridging web designers and developers. It discusses how Diazo works by using XML rules and XSLT to transform unthemed HTML content into themed content. It provides examples of common rules for replacing elements, including and dropping content, and merging navigation. Diazo allows maintaining design templates separately from dynamic content and deploying transformed content through an XSLT processor. The conclusion recommends starting with example codes, using the editor for common tasks, and keeping organizational themes consistent.
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)Eran Zinman
Client performance is what shapes your product and determines the satisfaction of your users. Users don't expect things to happen fast, they expect things to happen immediately. In the presentation we will cover some real-life examples of how to greatly improve performance in web products and share a lot of tricks and cool stuff we've learned along the way.
Presented in the YGLF conference in Israel by Eran Zinman (dapulse.com)
Why speed is something developers should be in charge of? Product people rarely know what to ask “Can you make this faster?” Invest in speed, It’s one of the best things to spend your time on.
Similar to Happy Browser, Happy User! NY Web Performance Meetup 9/20/19 (20)
Design Systems are most successful when they have a solid process in place to manage, maintain, and share component code across multiple teams and codebases. The best way to achieve this is to manage code using a version control system like Git. Git is the defacto industry standard tool for storing and editing code for a reason - it's powerful, scalable, flexible... but can be confusing or intimidating, whether you're a newbie or you use it every day!
In this workshop, Katie Sylor-Miller, the creator of OhShitGit.com, and co-author of The Design Systems Handbook, will teach you all you need to know to use Git as a tool for managing your Design System code.
We'll walk through everything you need to know to create, contribute to, maintain, and share your design system code as a standalone repo in Git. We'll go over how the fundamental structures in Git and how it all works under the hood. We'll create our own repos and get comfortable running common git commands in the terminal. We'll learn about best practices, workflows, and tools that will keep your commits in order and reduce the panic caused by merge conflicts. And, we'll cover some cool features in the Github UI to help you document, manage, and share your Design System code.
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018Katie Sylor-Miller
This document summarizes the results of performance testing and experiments on the Etsy mobile listing page. It describes testing lazy loading images, reducing CSS file size, switching to SVGs, and reducing JavaScript file size. Synthetic tests and real user monitoring showed improvements in load times, especially on mobile. Further work is still needed to fully optimize frontend performance and architecture to better match the development culture. Performance directly impacts conversion rates, so continued optimization can increase sales.
We developers and designers are obsessed with getting our images “just right” before we display them to our users. We perfect their art direction, selecting images that set the right mood or convey the right information. We fine-tune their performance characteristics and ensure that we serve the right image for a multitude of devices. But what about users who can’t see our finely-tuned images or distinguish between the colors in our beautiful infographics? How do we ensure that our images are accessible so that everyone can experience your site to the fullest ?
In this session, we’ll learn about the different types of visual, auditory, cognitive, and motor impairments that affect how users interact with images and other media, and we’ll cover practical techniques for ensuring that your images are accessible to everyone, regardless of how they experience the web.
Git, the widely popular version control tool that just about everyone who works on the web seems to use, is powerful, scalable, flexible. . .and difficult to learn. If you’ve used Git for any amount of time, you’ve probably gotten yourself into some confusing, frustrating, or downright terrifying situations. But don’t panic. You are not alone. Katie Sylor-Miller explains how to avoid getting into Git messes in the first place, demonstrating how the fundamental structures in Git actually work under the hood and sharing best practices, workflows, and tools that will keep your commits in order and reduce the panic caused by merge conflicts. Katie then shows you how to leverage Git’s powerful features to save yourself when everything seems to go wrong.
From FrontendConf Zurich 2016
As the web development landscape rapidly changes, good communication and collaboration between multiple job functions is key to not just a project’s success, but to a successful career as a front end developer. In this talk, we’ll discuss why it is important to grow yourself into a “T-shaped” developer - someone with deep knowledge in front end development, who can collaborate across multiple other disciplines. You'll leave knowing how to incorporate essential empathy and communication skills into your daily work life, leveling up your career, and the career of those around you.
Agricultural Profitability through Resilience: Smallholder Farmers' Strategie...IJAEMSJORNAL
This study investigated the knowledge strategies and coping utilized by smallholder farmers in Guimba, Nueva Ecija to reduce and adjust to the effects of climate change. Smallholder farmers, who are frequently susceptible to climate change, utilize various traditional and innovative methods to strengthen their ability to withstand and recover from these consequences. Based on the results of this study, farmers in Guimba, Nueva Ecija demonstrate a profound comprehension of the adverse weather conditions, such as typhoons, droughts, and excessive rainfall, which they ascribe to climate change. While they have a fundamental understanding of climate change and its effects, their knowledge of scientific intricacies is restricted, indicating a need for information that is particular to the context. Although farmers possess knowledge about climate change, they are not actively engaging in proactive actions to adapt to it. Instead, they rely on reactive coping mechanisms. This highlights the necessity for targeted educational and communicative endeavors to promote the acceptance and implementation of approaches. Furthermore, the absence of available resources poses a significant barrier to achieving successful adaptation, highlighting the importance of pushing for inexpensive and feasible measures for adaptation. Farmers recognize the benefits of agroforestry and have started integrating the growth of fruit trees, particularly mangoes, into their coping techniques.
Modified O-RAN 5G Edge Reference Architecture using RNNijwmn
Paper Title
Modified O-RAN 5G Edge Reference Architecture using RNN
Authors
M.V.S Phani Narasimham1 and Y.V.S Sai Pragathi2, 1Wipro Technologies, India, 2Stanley College of Engineering & Technology for Women (Autonomous), India
Abstract
This paper explores the implementation of 6G/5G standards by network providers using cloud-native technologies such as Kubernetes. The primary focus is on proposing algorithms to improve the quality of user parameters for advanced networks like car as cloud and automated guided vehicle. The study involves a survey of AI algorithm modifications suggested by researchers to enhance the 5G and 6G core. Additionally, the paper introduces a modified edge architecture that seamlessly integrates the RNN technologies into O-RAN, aiming to provide end users with optimal performance experiences. The authors propose a selection of cutting-edge technologies to facilitate easy implementation of these modifications by developers.
Keywords
5G O-RAN, 5G-Core, AI Modelling, RNN, Tensor Flow, MEC Host, Edge Applications.
Volume URL: https://airccse.org/journal/jwmn_current24.html
Abstract URL: https://aircconline.com/abstract/ijwmn/v16n3/16324ijwmn01.html
Youtube URL: https://youtu.be/rIYGvf478Oc
Pdf URL: https://aircconline.com/ijwmn/V16N3/16324ijwmn01.pdf
#callforpapers #researchpapers #cfp #researchers #phdstudent #researchScholar #journalpaper #submission #journalsubmission #WBAN #requirements #tailoredtreatment #MACstrategy #enhancedefficiency #protrcal #computing #analysis #wirelessbodyareanetworks #wirelessnetworks
#adhocnetwork #VANETs #OLSRrouting #routing #MPR #nderesidualenergy #korea #cognitiveradionetworks #radionetworks #rendezvoussequence
Here's where you can reach us : ijwmn@airccse.org or ijwmn@aircconline.com
Fix Production Bugs Quickly - The Power of Structured Logging in Ruby on Rail...John Gallagher
Rails apps can be a black box. Have you ever tried to fix a bug where you just can’t understand what’s going on? This talk will give you practical steps to improve the observability of your Rails app, taking the time to understand and fix defects from hours or days to minutes. Rails 8 will bring an exciting new feature: built-in structured logging. This talk will delve into the transformative impact of structured logging on fixing bugs and saving engineers time. Structured logging, as a cornerstone of observability, offers a powerful way to handle logs compared to traditional text-based logs. This session will guide you through the nuances of structured logging in Rails, demonstrating how it can be used to gain better insights into your application’s behavior. This talk will be a practical, technical deep dive into how to make structured logging work with an existing Rails app.
I talk about the Steps to Observable Software - a practical five step process for improving the observability of your Rails app.
5. @ksylor
UX
WHAT MAKES USERS HAPPY?
▸ Fast rendering of content
(e.g. "fast loading")
▸ Instant feedback for clicks/taps/
keyboard interactions
▸ Smooth animations
▸ Don't use up their mobile data!
15. @ksylor
NAVIGATION
the
internet
ClientHello
ServerHello & Certificate
Client key
FINISHED
FINISHED
DNS server
what is the IP address for
mindblowncat.com?
162.144.26.144
SYN
SYN ACK
ACK
mindblowncat.com
162.144.26.144
HTTP GET
5. Server stuff
6. Send response
ACK
2nd HTTP RESPONSE (29kb)
3rd HTTP RESPONSE (57kb)
ACK
etc…
1st HTTP RESPONSE (14kb)
https://mindblowncat.com
3. SSL handshake
1. DNS lookup
2. TCP handshake
4. Request
7. TTFB
8. Parse
16. @ksylor
NAVIGATION
WHAT DO WE CONTROL?
▸ Reduce server response time
▸ Cache cache cache cache cache
▸ Use a CDN
▸ Smaller files = fewer roundtrips
▸ Compression, tree-shaking, code-splitting
▸ First 14kb
▸ Preloading/prefetching, resource hints, HTTP/2
17. @ksylor
HOW DO BROWSERS WORK?
https://mindblowncat.com
4 PHASES
▸ Navigation
▸ Parsing
▸ Rendering
▸ Interaction
21. @ksylor
PARSING - HTML TO DOM
HTML
html
DOM NETWORK
RESPONSE HTML
Main
Worker
Network
Process
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
22. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM
HTML
html
DOM
REQUEST STYLE.CSS
NETWORK
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
Main
Worker
Network
Process
23. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM
HTML
html
DOM
head
REQUEST STYLE.CSS
NETWORK
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
Main
Worker
Network
Process
24. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM
HTML
html
DOM
head
title
REQUEST STYLE.CSS
NETWORK
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
Main
Worker
Network
Process
25. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM
HTML
html
DOM
head
title
REQUEST STYLE.CSS
NETWORK
link
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
Main
Worker
Network
Process
26. @ksylor
PARSING - HTML TO DOM
HTML
html
DOM
head
link
title
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
REQUEST STYLE.CSS
NETWORK
RESPONSE HTML
REQUEST SCRIPT.JS
script
REQUEST CAT.JPG
Main
Worker
Network
Process
27. @ksylor
PARSING - HTML TO DOM
HTML
html
DOM
head
link
title
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
REQUEST STYLE.CSS
NETWORK
RESPONSE HTML
REQUEST SCRIPT.JS
script
REQUEST CAT.JPG
JAVASCRIPT IS RENDER BLOCKING*
*when included without defer or async attributes
Main
Worker
Network
Process
28. @ksylor
PARSING - HTML TO DOM
HTML
html
DOM
head
link
title
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
REQUEST STYLE.CSS
NETWORK
RESPONSE HTML
REQUEST SCRIPT.JS
script
REQUEST CAT.JPG
BUT FIRST... CSS BLOCKS JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
36. @ksylor
PARSING - HTML TO DOM
HTML
html
DOM
head
link
title
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
REQUEST STYLE.CSS
NETWORK
RESPONSE HTML
REQUEST SCRIPT.JS
script
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
38. @ksylor
PARSING- JAVASCRIPT AST
JS ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Program
body:
Main
Worker
Network
Process
39. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
body:
FunctionDeclaration
id:
body:
40. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "badIdea"
id:
body:
body:
41. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "badIdea"
id:
body: BlockStatement
body:
42. @ksylor
VariableDeclaration
body:
id:
init:
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "badIdea"
id:
body: BlockStatement
body:
43. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
VariableDeclaration
Identifier
name: "badIdea"
id:
id:
body:
Identifier
name: "cat"
BlockStatement
body:
body:
init:
44. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "cat"
VariableDeclaration
Identifier
name: "badIdea"
id:
init:
id:
body: BlockStatement
body:
body:
CallExpression
callee:
arguments:
45. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "cat"
VariableDeclaration
Identifier
name: "badIdea"
CallExpression
id:
init:
id:
body: BlockStatement
body:
body:
callee:
arguments:
MemberExpression
object:
property:
46. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "cat"
VariableDeclaration
Identifier
name: "badIdea"
CallExpression
id:
init:
id:
body: BlockStatement
body:
body:
MemberExpressioncallee:
object: Identifier
name: "document"
property:
arguments:
47. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "cat"
VariableDeclaration
Identifier
name: "badIdea"
CallExpression
id:
init:
id:
body: BlockStatement
body:
body:
Identifier
name: "document"
MemberExpressioncallee:
object:
property: Identifier
name: "getElementById"
arguments:
48. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "cat"
VariableDeclaration
Identifier
name: "document"
Identifier
name: "badIdea"
MemberExpression
CallExpression
id:
init:
callee:
object:
Identifier
name: "getElementById"
id:
body: BlockStatement
Literal
value:"cat"
arguments:
body:
body:
property:
49. @ksylor
PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST)
ASTJS
function badIdea() {
var cat =
document.getElementById("cat");
cat.src = "another-cat.gif";
}
badIdea();
Main
Program
FunctionDeclaration
Identifier
name: "cat"
VariableDeclaration
Identifier
name: "badIdea"
CallExpression
id:
init:
id:
body: BlockStatement
body:
body:
Identifier
name: "document"
MemberExpressioncallee:
object:
property: Identifier
name: "getElementById"
Literal
value:"cat"
arguments:
ExpressionStatement
AssignmentExpression
operator: "="
left:
right:
expression:
60. @ksylor
PARSING - HTML TO DOM (AGAIN)
HTML
html
DOM
head
link
title
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
REQUEST STYLE.CSS
NETWORK
RESPONSE HTML
REQUEST SCRIPT.JS
script
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
61. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM (AGAIN)
HTML
html
DOM
head
link
title
NETWORK
script
REQUEST STYLE.CSS
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
62. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM (AGAIN)
HTML
html
DOM
head
link
title
NETWORK
body
script
REQUEST STYLE.CSS
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
63. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM (AGAIN)
HTML
html
DOM
head
link
title
NETWORK
body
h1
class:“title”
Hi!
script
REQUEST STYLE.CSS
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
64. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM (AGAIN)
HTML
html
DOM
head
link
title
NETWORK
paragraph
Here is a cat.
body
h1
class:“title”
Hi!
script
REQUEST STYLE.CSS
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
65. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM (AGAIN)
HTML
html
DOM
head
link
title
NETWORK
paragraph
Here is a cat.
div
class:”border”
body
h1
class:“title”
Hi!
script
REQUEST STYLE.CSS
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
66. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM (AGAIN)
HTML
html
DOM
head
link
title
NETWORK
paragraph
div
class:”border”
Here is a cat.
body
h1
class:“title”
Hi!
script
REQUEST STYLE.CSS
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
image
id="cat"
Main
Worker
Network
Process
67. @ksylor
<html>
<head>
<title>Cats are fun!</title>
<link href="style.css".../>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">Hi!</h1>
<p>Here is a cat.
<div class="border">
<img src="cat.gif" id="cat"
alt="Cat!"/>
</div>
</body>
</html>
PARSING - HTML TO DOM (AGAIN)
HTML
html
DOM
head
link
title
NETWORK
paragraph
div
class:”border”
Here is a cat.
body
h1
class:“title”
Hi!
script
image
id="cat"
REQUEST STYLE.CSS
RESPONSE HTML
REQUEST SCRIPT.JS
REQUEST CAT.JPG
RESPONSE SCRIPT.JS
RESPONSE STYLE.CSS
Main
Worker
Network
Process
68. Validate your HTML. We
didn't when we published
an article yesterday... A mis-
nested <span><del>
</span></del> caused this
on iPhone's Reader app.
Not every renderer of
HTML is as forgiving as
browsers.
Bruce Lawson @brucel
PARSING - A CAUTIONARY TALE
82. @ksylor
+ BROWSER DEFAULT STYLES
+ USER-PROVIDED STYLESHEETS
RENDERING - STYLE CALCULATION
html
DOM
head
link
title
body
h1
class:“title”
paragraph
image
div
class:”border”
Hi!
Here is a cat.
CSSOM
body
font-family: sans-serif;
.border
border: 1px solid gray;
img
display:block;
margin: 1em;
.title
font-family: serif;
COMPUTED STYLE
root
<body>
font-family: sans-serif;
<h1>
color: magenta;
font-family: serif;
Hi!
<p>
font-family: sans-serif;
<div>
border: 1px solid gray;
font-family: sans-serif;
<img>
display:block;
margin: 1em;
Here is a cat.
h1
color: magenta;
script
Main Raster/
Compositor
Network
Process
89. @ksylor
RENDERING - LAYOUT
html/viewport
body
h1
Hi!
Here is a cat. p
root/html
<body>
font-family: sans-serif;
<h1>
color: magenta;
font-family: serif;
Hi!
<p>
font-family: sans-serif;
<div>
border: 1px solid gray;
font-family: sans-serif;
<img>
display:block;
margin: 1em;
Here is a cat.
COMPUTED STYLE
Main Raster/
Compositor
Network
Process
90. @ksylor
root/html
<body>
font-family: sans-serif;
<h1>
color: magenta;
font-family: serif;
Hi!
<p>
font-family: sans-serif;
<div>
border: 1px solid gray;
font-family: sans-serif;
<img>
display:block;
margin: 1em;
Here is a cat.
COMPUTED STYLE
RENDERING - LAYOUT
html/viewport
body
h1
Hi!
Here is a cat. p
div
Main Raster/
Compositor
Network
Process
91. @ksylor
RENDERING - LAYOUT
html/viewport
body
h1
Hi!
Here is a cat.
div
p
img
root/html
<body>
font-family: sans-serif;
<h1>
color: magenta;
font-family: serif;
Hi!
<p>
font-family: sans-serif;
<div>
border: 1px solid gray;
font-family: sans-serif;
<img>
display:block;
margin: 1em;
Here is a cat.
COMPUTED STYLE
Main Raster/
Compositor
Network
Process
95. @ksylor
RENDERING - PAINT
PIXELS ARE PAINTED ON LAYERS
RASTERIZE
Main Raster/
Compositor
Network
Process
*layers pictured are imaginary for
demonstration purposes only
▸ 3D transforms
▸ CSS animation using
opacity or transform
▸ will-change
▸ "accelerated" CSS
filters
▸ <video> or <canvas>
▸ z-index above another
layer
CREATE A NEW LAYER
108. @ksylor
RENDERING
THE MAIN THREAD DOES IT ALL
▸ Parsing HTML into DOM
▸ Parsing CSS into CSSOM
▸ JS into JS AST
▸ JS Execution
▸ Style Calculation (and re-style)
▸ Layout (and re-layout)
▸ Paint (and re-paint)
109. @ksylor
HOW DO BROWSERS WORK?
https://mindblowncat.com
4 PHASES
▸ Navigation
▸ Parsing
▸ Rendering
▸ Interaction
Hi!
Here is a cat.
110. @ksylor
INTERACTION
THE MAIN THREAD DOES IT ALL
▸ Parsing HTML into DOM
▸ Parsing CSS into CSSOM
▸ JS into JS AST
▸ JS Execution
▸ Style Calculation (and re-style)
▸ Layout (and re-layout)
▸ Paint (and re-paint)
▸ User interaction
113. @ksylor
INTERACTION
INPUT DELAY
parse & execute js
async request js
FirstPaint
style paint
composite
layoutparse html parse css parse html
preload scanner
DomInteractive &
DomContentLoaded
request html
Main
Worker
Network
Process
NavigationStart TTFB
User taps
button
First Input Delay
114. @ksylor
INTERACTION - INPUT DELAY
UNBLOCK THE MAIN THREAD
▸ Ship less Javascript
▸ Code-splitting - load what you need to
render, then lazy load the rest
▸ Break up execution into smaller, async
tasks (requestIdleCallback)
▸ Measure first input delay and total
blocking time
▸ Audit frameworks & third party scripts
118. @ksylor
INTERACTION - JANK
"DROPPING" FRAMES FROM THE MAIN THREAD
16.67ms
frame! frame!
re-style re-layoutjs event handler
button click opens
an overlay dialog
frame! frame! frame!
<div>'s style changes
from display: none;
to display: block;
re-paint
jank :( jank :( jank :( jank :(
re-composite
on the GPU
119. @ksylor
RENDERING - LAYERS
LAYERS ARE AWESOME
Main Raster/
Compositor
Network
Process
▸ Repaint only the layer that changed, all
other layers stay the same
▸ Easier to move/animate layers without
repainting the whole page.
▸ But layers are expensive in memory!
▸ Don't create layers that don't change how
the page is rendered.
121. @ksylor
INTERACTION - LESS JANK!
DROP FEWER FRAMES!
16.67ms
frame! frame!
stylejs event handler
button click opens
an overlay dialog
frame! frame! frame!
<div>'s style changes
from visibility: hidden;
to visibility: visible;
and uses css animations
jank :( jank :(
re-composite
on the GPU
frame! frame!frame!
122. @ksylor
HOW DO WE MAKE BROWSERS HAPPY?
https://mindblowncat.com
4 PHASES
▸ Navigation
GET IT OVER WITH!
▸ Parsing
DOM + CSSOM, ASAP
▸ Rendering
DO LESS WORK (ON THE CPU)
▸ Interaction
IMMEDIATE & JANK FREE
Hi!
Here is a cat.