Aaron Gustafson
Author, Adaptive Web Design
Performance as User Experience
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.
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.
I gave this presentation at the 2010 Scotch on the Rocks conference. It features a brief explanation of why HTML5 and CSS3 are necessary, and then goes on to cover most of the cool new features of HTML5 and CSS3 that are supported across most browsers at the time of publication., including <video>, <canvas>, HTML5 forms, the new HTML5 elements, box-shadow, text-shadow, web fonts, media queries, and more. Companion code examples are available at http://people.opera.com/cmills/HTML5_CSS3_examples.zip
There Are No “Buts” in Progressive Enhancement [Øredev 2015]Aaron Gustafson
Progressive enhancement sounds practical, but not for your current project, right? Good news: you’re wrong!
In this session, Aaron will debunk the myths that often preclude individuals and organizations from embracing progressive enhancement and demonstrate solid techniques for applying progressive enhancement in your work.
By the end of this session, you’ll walk away with
* a better sense of the devices people are using to access the Web,
* a framework for envisioning experience as a continuum, and
* a solid understanding of how to improve the accessibility and reach of your Web projects.
Come find out why progressive enhancement isn’t just for “content” sites (whatever those are).
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, writing more appropriate copy, and (of course) building accessible experience. But experience is about more than just 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.
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.
I gave this presentation at the 2010 Scotch on the Rocks conference. It features a brief explanation of why HTML5 and CSS3 are necessary, and then goes on to cover most of the cool new features of HTML5 and CSS3 that are supported across most browsers at the time of publication., including <video>, <canvas>, HTML5 forms, the new HTML5 elements, box-shadow, text-shadow, web fonts, media queries, and more. Companion code examples are available at http://people.opera.com/cmills/HTML5_CSS3_examples.zip
There Are No “Buts” in Progressive Enhancement [Øredev 2015]Aaron Gustafson
Progressive enhancement sounds practical, but not for your current project, right? Good news: you’re wrong!
In this session, Aaron will debunk the myths that often preclude individuals and organizations from embracing progressive enhancement and demonstrate solid techniques for applying progressive enhancement in your work.
By the end of this session, you’ll walk away with
* a better sense of the devices people are using to access the Web,
* a framework for envisioning experience as a continuum, and
* a solid understanding of how to improve the accessibility and reach of your Web projects.
Come find out why progressive enhancement isn’t just for “content” sites (whatever those are).
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, writing more appropriate copy, and (of course) building accessible experience. But experience is about more than just 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.
Bruce Lawson: Progressive Web Apps: the future of Appsbrucelawson
Native Apps, like Flash, are a bridging technology. Progressive Web Apps are a new suite of technologies that combine the user experience of native, with the immediacy and reach of the web. Learn why we have them, and how to make them.
More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...Shift Conference
Resource Hints are a great way for developers to make their web pages faster by allowing us to be a little bit smarter than the browser. Although not a new specification—they’ve been around in some form or another for years!—are we truly getting the most out of them? And do we understand them thoroughly enough to use them most effectively? Heck, do we even know what a ‘Resource Hint’ is?! Well, by the end of this talk, we’ll all be experts. Let’s take a look at all of the different Resource Hints we have available to us, real-world examples of how best to use them, and learn about some of the more obscure intricacies and gotchas that we need to be aware of if we want to really get the best out of them (and to make sure that we really are being smarter than the browser).
Optimizing WordPress is a collection of suggestions and strategies for speeding up your WordPress website. Starting with the basics like selecting optimized themes and managing plugins, then move to advanced storage and caching strategies as well as query profiling (and more).
80% of the time it takes for a web page to load is on the client side.
Using all the tips in this presentation should cut 25% to 50% off the load time of optimized page requests.
Drupal (6 or 7) can be used to, fairly easily, implement a whole bunch of these “front-end performance” upgrades, and knock a ton of errors off of the Yahoo! and Google speed-checker tools validation checklists.Get firebug first.
Performance Best Practices - Part 1 - Client Side [JS, CSS, HTML, jQuery]Mindfire Solutions
Sathyan shares and talks about the best practices for day to development and production deployment of web applications that uses JS, CSS, HTML, jQuery.
Ideal web page performance
How to maximize your content view with minimal attention span of your viewers?
Impact of page performance on Business metrics
Profiling a Http request
Browser Architecture, Critical Rendering Path
Applying FFSUx to get optimal webpage performance.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
Bruce Lawson: Progressive Web Apps: the future of Appsbrucelawson
Native Apps, like Flash, are a bridging technology. Progressive Web Apps are a new suite of technologies that combine the user experience of native, with the immediacy and reach of the web. Learn why we have them, and how to make them.
More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS W...Shift Conference
Resource Hints are a great way for developers to make their web pages faster by allowing us to be a little bit smarter than the browser. Although not a new specification—they’ve been around in some form or another for years!—are we truly getting the most out of them? And do we understand them thoroughly enough to use them most effectively? Heck, do we even know what a ‘Resource Hint’ is?! Well, by the end of this talk, we’ll all be experts. Let’s take a look at all of the different Resource Hints we have available to us, real-world examples of how best to use them, and learn about some of the more obscure intricacies and gotchas that we need to be aware of if we want to really get the best out of them (and to make sure that we really are being smarter than the browser).
Optimizing WordPress is a collection of suggestions and strategies for speeding up your WordPress website. Starting with the basics like selecting optimized themes and managing plugins, then move to advanced storage and caching strategies as well as query profiling (and more).
80% of the time it takes for a web page to load is on the client side.
Using all the tips in this presentation should cut 25% to 50% off the load time of optimized page requests.
Drupal (6 or 7) can be used to, fairly easily, implement a whole bunch of these “front-end performance” upgrades, and knock a ton of errors off of the Yahoo! and Google speed-checker tools validation checklists.Get firebug first.
Performance Best Practices - Part 1 - Client Side [JS, CSS, HTML, jQuery]Mindfire Solutions
Sathyan shares and talks about the best practices for day to development and production deployment of web applications that uses JS, CSS, HTML, jQuery.
Ideal web page performance
How to maximize your content view with minimal attention span of your viewers?
Impact of page performance on Business metrics
Profiling a Http request
Browser Architecture, Critical Rendering Path
Applying FFSUx to get optimal webpage performance.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
3 Tips to Deliver Fast Performance Across Mobile WebDynatrace
3 Tips to Deliver Fast Performance Across Mobile Web
On-Demand Webinar
Seems like everyone’s doing Responsive Web Design these days! Are you using React, Angular or others to create a mobile-friendly web experience?
Newsflash: Mobile-friendly doesn’t always equal customer-friendly, when it comes to performance. We’re talking about 60% of your traffic—how do you avoid disaster?
Learn the basics of high-performance mobile development through the examination of real-world, performance-killing code examples. You’ll also hear about:
Why 4.5 seconds on Chrome can be 15 seconds on a Galaxy S5 Chromium
How to identify major issues within mobile page construction
Best practices for managing CSS and JavaScript
Things to consider going global with your Web application
Join web performance experts Klaus Enzenhofer and Stefan Baumgartner from Dynatrace to ensure your mobile properties are delighting your customers!
Have fast, performant, and successful web pages is a great Challenge. There are many layers involved and all of them have to work together.
In this talk I presented at FIBAlumni with collaboration of COEINF and the video recording is at http://media.fib.upc.edu/fibtv/streamingmedia/view/22/1400 (in Catalan).
It shows how all parts are involved in the success of web pages from the server up to the human brain and perception.
It introduces metrics and ways to effectively calculate and measure objectively the impact of the actions taken in the optimisation and also some ways to detect ways to optimise websites.
SPA, isomorphic and back to the server: our journey with JavaScript @ JsDay 2...Alessandro Nadalin
We've been toying around with JS since 4 years, trying to figure out what's the best approach to build mobile-friendly apps that would offer the best performances on mobile devices.
We first went SPA and then decided to take a different approach.
2 years ago we presented a talk, at this very same conference, about how we decided to tackle our problems on mobile with an isomorphic application.
Today, we would like to guide you through 2 years of that choice and why we decided to take a step back and go revamp our mobile website again, with server-side rendering and a pinch of React.
Fast and wicked performance ahead!
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupJonathan Klein
I gave this talk on 4/27/11 at the Boston PHP Meetup Group. It covers both server side and client side optimizations, as well as monitoring tools and techniques.
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
Early on, Internet access was considered a luxury. Those times have passed and the Internet, especially the Web, has become a necessity. Whether your users are trying to access their money, gather health information, attend class, apply for assistance, or any of the other hundreds (if not thousands) of critical tasks people do on the web, your site needs to be prepared to meet their needs. And it needs to work, no matter what.
In this session, I discuss the many challenges to delivering critical information and services as well as the steps you can take to overcome those challenges. He’ll explore ways to make sure you can meet users on a variety of devices—and not the just the latest and greatest high end ones folks are talking about; how to make it accessible to people with disabilities; and how to load—and load quickly—on limited- bandwidth connections.
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
For the last three years, our industry has been coming to terms with Progressive Web Apps (PWAs) and what they mean for the work we do every day. Scores of articles, reams of documentation, and dozens of white papers touting the successes and failures in this space can really get your head spinning. It’s easy to get lost in the complexities of service workers, manifests, and oh so many JavaScript frameworks and toolkits. Aaron believes it’s time to take a step back and refocus our attention on what really matters: building great web experiences. In this session, you’ll learn how to apply modern web design and development best practices to your web projects. You’ll learn how to grow a project from a core, universally-accessible experience to a sophisticated Progressive Web App that ensures users will be able to access your product, no matter what.
Our industry is abuzz with talk about Progressive Web Apps (PWAs) and with good reason: they are a great way to improve the experiences our users have on our sites, especially when it comes to performance. Using Service Workers—a key component of PWAs—we can manage network requests and the cache to an incredibly granular degree. We can also totally abuse the privilege Service Workers grant us when it comes to writing files to disk.
In this session, Aaron Gustafson will discuss some of the potential pitfalls in implementing Service Workers, especially when it comes to managing heavy files like images and video. He’ll provide guidance on current best practices in cache management. And he’ll offer a few simple recipes you can put to use right away to deliver amazing experiences for your users that respect their data usage and disk space.
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different, and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
In this session, you'll learn how to apply modern best practices to grow your Progressive Web Apps fluidly from mobile devices all the way to large screen desktop environments. You’ll even learn how to lay the groundwork for reaching users of future form factors and “headless” UIs. We'll focus on design patterns that set you up for success on every device and across platforms and guarantee your users will be able to access your product, no matter what. Additional topics will include a primer on how your PWA can integrate more tightly with Windows 10—including how to distribute your PWA via the Store—and how to incorporate accessibility from the very beginning.
Designing the Conversation [Concatenate 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
We, as an industry, tend to have a pretty myopic view of experience. Those of us who work day-to-day in accessibility probably have a broader perspective than most, but I would argue that even we all fall short now and again when it comes to seeing the Web as others do.
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
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.
Over time, your users will become more accustomed to and interacting with their computers on the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.
So how do you design a "headless" UI? That's easy: You design the conversation.
Conversation is at the root of every interaction we have, be it with another human being, a game, or with a website. This session will discuss how to design and implement a web application that will allow you to create a web page that will allow you to create HTML documents.
After enjoying more than a decade of relative stability in designing for the 'desktop' web, smartphones had to come along and throw a wrench in the works. It seemed that in an instant, everything changed and nothing was certain any more. The truth is, though, nothing was ever certain.
One of the web’s major strengths is its ability to adapt, to travel anywhere and everywhere in service of its users. All those years we were the ones restraining it with our desire to create a single monolithic experience. But experience is not monolithic. Every person is different and we all bring our unique perspectives, experiences, and capabilities to the table. A one-size-fits-all approach rarely fits anyone well. When we embrace that, our designs, products, and experiences will be all the better for it.
In this talk, Aaron will discuss and dissect several adaptive interfaces and demonstrate how they smartly morph to meet their users’ needs — slow connections, older browsers, narrow screens, and even no screens at all. He’ll also introduce you to a battle-tested tool for planning, discussing, building and testing adaptive interfaces.
Progressive Web Apps and the Windows Ecosystem [Build 2017]Aaron Gustafson
Whether at home or at work, the web plays an increasingly critical role in our daily lives. As we have become more dependent on accessing the tools it powers, we’ve also struggled to overcome some of its limitations—network connectivity, for instance. At Microsoft, we’ve long been interested in the power of the web for software development and we are even more excited for the future possibilities offered by progressive web apps (PWAs). In this session, we discuss what PWAs are, how they can be integrated into the development process of modern websites, the advantages and disadvantages of PWAs vs. native development, and what opportunities they present when installed alongside native apps in Windows.
Designing the Conversation [SmashingConf 2016]Aaron Gustafson
Users are gradually becoming more accustomed to and reliant on voice-based interactions, so enabling users to complete critical tasks without a visual user interface is crucial for the long-term success of websites. This session shows how designing such a “headless” user interface is equivalent to designing the conversation you want to have with your users. Learn how to ensure that the technological decisions you make with respect to HTML, CSS, and JavaScript respect and support that conversation.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
3. JEFF VEEN
“I’ve been amazed at how often those
outside the discipline of design assume
that what designers do is decoration—
likely because so much bad design
simply is decoration. Good design isn’t.
Good design is problem solving.”
18. PERFORMANCE AS USER EXPERIENCE
What we were looking for
๏ Usable pages are delivered in 10kB or less
๏ Pages are accessible via screen readers, the keyboard, etc.
๏ Entries follow the philosophy of progressive enhancement
๏ Users can do what they need to without JavaScript
18
21. time
Your Device The Web
Where can I find a-k-apart.com?
DNS Lookup
Icons by Mahmure Alp
22. time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
DNS Lookup
Icons by Mahmure Alp
23. time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
TCP Handshake
Hello 40.77.56.174
Icons by Mahmure Alp
24. time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
TCP Handshake
Hello 40.77.56.174
Howdy!
Icons by Mahmure Alp
25. time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
Request
Hello 40.77.56.174
Howdy!
I’d like /index.html
Icons by Mahmure Alp
26. time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
Server Processing
Hello 40.77.56.174
Howdy!
I’d like /index.html
Icons by Mahmure Alp
27. time
Your Device The Web
Where can I find a-k-apart.com?
It’s at 40.77.56.174
Response
Hello 40.77.56.174
Howdy!
I’d like /index.html
Ok, here it is.
Icons by Mahmure Alp
30. Icons by Mahmure Alp
Response
Load
Paint
Layout
RenderTree
CSS
DOM
CSS & JavaScript can
delay rendering or cause
these to be run again
31. PERFORMANCE AS USER EXPERIENCE
DOM Parsing
<html>
<head>
<title>Silly example</title>
<script src="head.js"></script>
<link rel="stylesheet" href="main.css">
<style>h2 { font-wight: bold; }</style>
<script>console.log('hi');</script>
</head>
<body>
<img src="my.png" alt="">
<script src="body.js"></script>
</body>
</html>
wait while the browser
fetches & parses the script
32. PERFORMANCE AS USER EXPERIENCE
DOM Parsing
<html>
<head>
<title>Silly example</title>
<script src="head.js"></script>
<link rel="stylesheet" href="main.css">
<style>h2 { font-wight: bold; }</style>
<script>console.log('hi');</script>
</head>
<body>
<img src="my.png" alt="">
<script src="body.js"></script>
</body>
</html>
wait while the browser
fetches & parses the CSS
33. PERFORMANCE AS USER EXPERIENCE
DOM Parsing
<html>
<head>
<title>Silly example</title>
<script src="head.js"></script>
<link rel="stylesheet" href="main.css">
<style>h2 { font-wight: bold; }</style>
<script>console.log('hi');</script>
</head>
<body>
<img src="my.png" alt="">
<script src="body.js"></script>
</body>
</html>
kicks off downloading
the image
34. PERFORMANCE AS USER EXPERIENCE
DOM Parsing
<html>
<head>
<title>Silly example</title>
<script src="head.js"></script>
<link rel="stylesheet" href="main.css">
<style>h2 { font-wight: bold; }</style>
<script>console.log('hi');</script>
</head>
<body>
<img src="my.png" alt="">
<script src="body.js"></script>
</body>
</html> wait while the browser
fetches & parses the script
35. PERFORMANCE AS USER EXPERIENCE
Steps for better performance
1. Use native features whenever possible
2. Only include assets you actually need
3. Optimize everything
4. Think about when you load assets
5. Consider how you load assets
6. Only load assets when they add value
43
38. PERFORMANCE AS USER EXPERIENCE
Por exemplo
<header>
Header content…
</header> not only shorter than
<div id=“header">, but
semantic too
depending on its location in the document, could also provide a landmark for navigation
39. PERFORMANCE AS USER EXPERIENCE
Por exemplo
<input id="n" name="n"
required aria-required="true"
autocorrect="off"
autocapitalize="words"
placeholder="Sir Tim Berners Lee"
autocomplete="name"
>
modern browsers require
users to enter content
browser can inform
assistive tech that
the field is required
don’t let the browser try to correct someone’s name
auto-disappearing suggestion without JavaScript
if the browser already
knows the user’s name,
by all means, let it fill it in
40. PERFORMANCE AS USER EXPERIENCE
Por exemplo
<input type="email"
id="e" name="e"
required aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
placeholder="you@yourdomain.tld"
>
modern browsers validate
the email address
and may supply a
custom keyboard layout
let the browser suggest
an email address if it has one
41. PERFORMANCE AS USER EXPERIENCE
Por exemplo
@media (min-width:600px) {
.layout-container {
display: flex;
}
.primary {
width: 68%;
}
.secondary {
width: 32%;
}
}
So much better than floats
42. PERFORMANCE AS USER EXPERIENCE
Por exemplo
var $radios = document.querySelectorAll(
'input[type=radio]'
);
CSS selector-based
DOM traversal
without a JS library
43. PERFORMANCE AS USER EXPERIENCE
Por exemplo
font-family: Georgia, Times,
"Times New Roman", serif
font-family: "Segoe UI", Frutiger,
"Frutiger Linotype",
"Dejavu Sans", "Helvetica Neue",
Arial, sans-serif;
Serif
Sans Serif
51. time
Your Device The Web
Where can I find cdn.foo.com?
It’s at 123.45.67.89
Hello 123.45.67.89
Howdy!
I’d like /jquery.min.js
Ok, here it is.
Icons by Mahmure Alp
52. time
Your Device The Web
Where can I find cdn.foo.com?
It’s at 123.45.67.89
Icons by Mahmure Alp
You can optimize this
53. PERFORMANCE AS USER EXPERIENCE
Find the server early
<link rel="dns-prefetch"
href="https://cdn.foo.com">
Drop this in the
head of your pages
54. time
Your Device The Web
Where can I find cdn.foo.com?
It’s at 123.45.67.89
Hello 123.45.67.89
Howdy!
Icons by Mahmure Alp
You can optimize this
55. PERFORMANCE AS USER EXPERIENCE
Go for the handshake
<link rel="preconnect"
href="https://cdn.foo.com">
56. time
Your Device The Web
I’d like /jquery.min.js
Ok, here it is.
Icons by Mahmure Alp
You can even optimize this
57. PERFORMANCE AS USER EXPERIENCE
Grab that resource
<link rel="preload"
href="https://cdn.foo.com/jquery.min.js"
as="script">
Helps optimize the process
58. PERFORMANCE AS USER EXPERIENCE
Download isn’t everything
Source: The Filament Group
61. PERFORMANCE AS USER EXPERIENCE
We used some hints though
<link rel="preconnect"
href="//10kapart.blob.core.windows.net">
<link rel="preconnect"
href="//cdnjs.cloudflare.com">
<link rel="preconnect"
href="//www.google-analytics.com">
63. PERFORMANCE AS USER EXPERIENCE
Our approach to CSS (Gulp)
1. Write modular CSS in Sass (+ Breakup for MQ management)
2. Compile CSS with a precision of 4 decimal places (gulp-sass)
3. Fallbacks for the last 2 browser versions (gulp-autoprefixer)
4. CSS shorthand declarations if possible (gulp-shorthand)
5. Remove any unused declarations/rule sets (gulp-uncss)
6. Optimize the files (gulp-csso)
7. Minify (gulp-clean-css)
8. Gzip (gulp-zopfli)
9. Brotli (gulp-brotli)
71
66. PERFORMANCE AS USER EXPERIENCE
After
everyone else
8 kB
browsers that support
brotli compression
2 kB
browsers that support gzip compression 3 kB
67. PERFORMANCE AS USER EXPERIENCE
Our approach to JS (Gulp)
1. Write modular JavaScript, grouped as appropriate
2. Combine files based on folder structure (gulp-folders, gulp-concat)
3. Create an wrapping closure to isolate from other JS (gulp-insert)
4. Minify (gulp-uglify)
5. Gzip (gulp-zopfli)
6. Brotli (gulp-brotli)
74
72. PERFORMANCE AS USER EXPERIENCE
We had 10 JS files
๏ Global
‣ main.js - the site’s library
‣ serviceworker.js - The site’s service worker
๏ Browser-specific
‣ html5shiv.js - local copy of the HTML5 Shiv for < IE9
79
73. PERFORMANCE AS USER EXPERIENCE
We had 10 JS files
๏ Page-specific
‣ enter.js - Entry form-related code
‣ form-saver.js - Used to save form entries locally until submitted
‣ hero.js - Runs the SVG animation on the homepage
‣ home.js - Handles homepage-specific tasks
‣ project.js - Used on project pages during voting
‣ update.js - Handles the winner update form
80
74. PERFORMANCE AS USER EXPERIENCE
Per the common wisdom
<script src="/j/main.min.js"></script>
</body>
</html>
75. PERFORMANCE AS USER EXPERIENCE
No need to run immediately
<script src="/j/main.min.js"></script>
<script src="/j/home.min.js"
defer
></script>
</body>
</html>
run after the DOM is loaded
76. PERFORMANCE AS USER EXPERIENCE
Run whenever you can
<script src="/j/main.min.js"></script>
<script src="/j/home.min.js"
async
></script>
</body>
</html>
run whenever it becomes
available, but don’t
delay page load
77. PERFORMANCE AS USER EXPERIENCE
Consider dependencies
<script src="/j/main.min.js"></script>
<script src="/j/home.min.js" async></script>
78. PERFORMANCE AS USER EXPERIENCE
Consider dependencies
<script src="/j/main.min.js" async></script>
<script src="/j/home.min.js" async></script>
what if this calls a function
in main.min.js?
82. PERFORMANCE AS USER EXPERIENCE
Connections in HTTP/1.1
Browser Per host Overall
IE 9 6 35
IE 10 8 17
IE 11 13 17
Firefox 4+ 6 17
Opera 11+ 6 user defined
Chrome 4+ 6 10
Safari 7+ 6 17
83. time
Your Device The Web
HTTP/1.1
Icons by Mahmure Alp
I’d like /c/main.css
I’d like /j/main.min.js
I’d like /i/o.svg
I’d like /j/home.min.js
I’d like /i/edge.svg
I’d like /i/aea.svg
90. PERFORMANCE AS USER EXPERIENCE
Fault tolerance FTW!
<link rel="stylesheet" href="/c/d.min.css">
<link rel="stylesheet" href="/c/a.min.css"
media="only screen">
browsers that don’t grok
media queries ignore this file
91. PERFORMANCE AS USER EXPERIENCE
Conditional scripting
<!--[if lt IE 9]>
<script src="/j/html5shiv.min.js"></script>
<![endif]-->
delivers this script
to <= IE 8
92. PERFORMANCE AS USER EXPERIENCE
Conditional scripting
<!--[if gt IE 8]><!-->
<script src="/j/main.min.js"></script>
<script src="/j/home.min.js" async
></script>
<!--<![endif]-->
</body>
</html>
hides scripts from <= IE8 (no need to test!)
96. PERFORMANCE AS USER EXPERIENCE
Conditional images
@media (min-width: 36.375em) {
.presented-by [href*=microsoft]::before {
background-image: url(/i/c/edge.png);
background-image: url(/i/c/edge.svg),
none;
…
}
}
browsers that support multiple backgrounds also support SVG
98. PERFORMANCE AS USER EXPERIENCE
How do we get there?
JS?
No
No imageLoad
Yes
<>
SVG support?
Yes
SVG
Ajax request SVG
Yank out script & add to document
No
picture
Save the markup for
next page load
NoYes
Verify browser
width condition
102. PERFORMANCE AS USER EXPERIENCE
Evaluate images case-by-case
๏ Does the image reiterate information found in the surrounding text?
๏ Is the image necessary to understand the surrounding content?
๏ Does the image contain text?
๏ Is the image a graph, chart, or table?
๏ Could the content of the image be presented in a different format
that would not require an image?
๏ Is the image purely presentational?
111
103. PERFORMANCE AS USER EXPERIENCE
53% of the average web page
Source: Internet Archive
108. PERFORMANCE AS USER EXPERIENCE
Quick format recap
๏ GIF
‣ for images with large swaths of solid colors
‣ Binary transparency
๏ JPG
‣ For photographs and images with gradations of color
‣ Can be compressed (introduces artifacts)
117
109. PERFORMANCE AS USER EXPERIENCE
Quick format recap
๏ PNG (8-Bit)
‣ Alternative to GIF
‣ Can support alpha transparency (with the right creation software)
๏ PNG (24-bit)
‣ Alternative to JPG
‣ Usually larger than JPGs
‣ Supports alpha tranparency
118
110. PERFORMANCE AS USER EXPERIENCE
Quick format recap
๏ WebP
‣ Newer format, not universally supported
‣ Smaller than JPGs and 24-bit PNGs
‣ Support alpha transparency
‣ and so much more…
119
114. PERFORMANCE AS USER EXPERIENCE
How it works
<li class="gallery__item h-card"
data-img="/i/j/r.jpg||y"
>
<a href="https://twitter.com/rachelandrew">
<b>Rachel Andrew</b>
</a>
</li>
115. PERFORMANCE AS USER EXPERIENCE
How it works
<li class="gallery__item h-card"
data-img="/i/j/r.jpg||y"
>
<a href="https://twitter.com/rachelandrew">
<b>Rachel Andrew</b>
</a>
</li>
image path
no alt necessary
prepend to
this list item
116. PERFORMANCE AS USER EXPERIENCE
Getting CSS & JS in sync
var $watcher = document.createElement('div'),
re = /['"]/g;
$watcher.setAttribute( 'id', 'getActiveMQ-watcher' );
$watcher.style.display = 'none';
document.body.appendChild( $watcher );
window.getActiveMQ = function() {
return window.getComputedStyle( $watcher, null )
.getPropertyValue( 'font-family' )
.replace( re, '' );
};
119. PERFORMANCE AS USER EXPERIENCE
Getting CSS & JS in sync
var $watcher = document.createElement('div'),
re = /['"]/g;
$watcher.setAttribute( 'id', 'getActiveMQ-watcher' );
$watcher.style.display = 'none';
document.body.appendChild( $watcher );
window.getActiveMQ = function() {
return window.getComputedStyle( $watcher, null )
.getPropertyValue( 'font-family' )
.replace( re, '' );
};
120. PERFORMANCE AS USER EXPERIENCE
Getting CSS & JS in sync
var MQ = getActiveMQ();
if ( MQ == 'larger' || MQ == 'full' ) {
lazyLoadImages();
}
121. PERFORMANCE AS USER EXPERIENCE
How it works
<li class="gallery__item h-card"
data-img="/i/j/r.jpg||y"
>
<a href="https://twitter.com/rachelandrew">
<b>Rachel Andrew</b>
</a>
</li>
133. PERFORMANCE AS USER EXPERIENCE
Indicating alternate formats
<picture>
<source type="image/webp" srcset="my.webp">
<img src="my.jpg" alt="Alt text goes here">
</picture>
first choice if WebP is supported fallback image
if it isn’t
134. PERFORMANCE AS USER EXPERIENCE
Indicating alternate formats
<picture>
<source type="image/svg+xml"
srcset="my.svg">
<source type="image/webp" srcset="my.webp">
<img src="my.jpg" alt="Alt text goes here">
</picture>
137. PERFORMANCE AS USER EXPERIENCE
Steps for better performance
1. Use native features whenever possible
2. Only include assets you actually need
3. Optimize everything
4. Think about when you load assets
5. Consider how you load assets
6. Only load assets when they add value
146