Web Perf Metrics & Measurement in 2018
The landscape of measuring your page’s performance has been evolving quick. Paul will provide an insider’s view to the modern approaches for evaluating page load and runtime responsiveness. We’ll cover lab-based tooling and client-side APIs so you can get a complete and accurate understanding of your page’s performance.
About Paul Irish
Chrome developer tools aficionado (understatement) and Google web performance engineer, will present web performance metrics and measurements in 2018
Modern Performance in the Year of the Dog
It’s 2018 and with the explosion of people joining the internet for the first time, building a performant application is more crucial than ever before. Unfortunately with all the new tools, libraries, and measurements, it’s difficult to even know where to start when it comes to building an application from scratch. In this talk, we’re going to cover the steps and methodologies that the modern web developer should keep in mind when crafting code. From choosing the right libraries and understanding application architecture, all the way to debugging common performance issues, we’re going to learn how to build a modern, production ready web application.
About Jem Young
There’s more to performance than meets the eye
About Léonie Watson
Léonie Watson (AKA Tink) began using the internet in 1993, turned it into a web design career in 1997, and (despite losing her eyesight along the way) has been enjoying herself thoroughly ever since.
As a member of the W3C Advisory Board, and co-chair of the W3C Web Platform WG (working on specs like HTML5), Léonie is closely involved with the web standards community. She is frequently asked to talk about web standards and/or accessibility at conferences.
In her spare time Léonie blogs on tink.uk, writes for tech journals like Smashing magazine, SitePoint.com and Net magazine. She also loves cooking, dancing and drinking tequila (although not necessarily in that order).
React/Virtual DOM and accessibility
About Marcy Sutton
Marcy Sutton works on web accessibility tools at Deque Systems, a company focused on digital equality. In 2016, O’Reilly gave Marcy a Web Platform Award for her work in accessibility. She loves co-leading the Accessibility Seattle meetup and a code club for Girl Develop It Bellingham. When away from the keyboard, Marcy can be found hiking with her dog, riding a bicycle, or snowboarding.
Workshop: Get Up to Speed
Websites may be slow, but the web itself moves fast. Every day new techniques and tools emerge, promising to make your site faster and lighter. New articles are written about the latest "best practices" in performance, only to have yet newer articles contradict them. When the technologies and techniques we use to make websites more performant change so quickly, it’s easy to feel like you’re falling behind.
But if you pull back the layers and the hype, drilling into the core concepts of how the network and browsers we rely on actually work, it suddenly becomes much easier to recognize which best practices are actually appropriate for you, and what trade-offs you’re making.
In this workshop, we’ll go beyond the latest and greatest techniques and tools to understand what is going on at the core. We’ll explore:
· How the browser renders pages, from the very first request on the network to the final pixel on your screen
· What the critical rendering path is and how to optimize for it
· How HTTP/2 differs from HTTP/1 and what that means for popular opimizations
· How to identify common performance bottlenecks in your sites and applications
By the time we’re done, you’ll have a firm understanding of what makes sites fast, and how to separate the hype from reality.
About Tim Kadlec
Tim is head of developer relations at Snyk—a company focused on making open source code more secure. He is the author of Implementing Responsive Design: Building sites for an anywhere, everywhere web, and was a contributing author for Smashing Book #4: New Perspectives on Web Design, and the Web Performance Daybook Volume 2. Along with Katie Kovalcin, he also co-hosts The Path to Performance Podcast.
Perceived Performance: The only kind that really matters
Web performance has made incredible strides in the last few years, which has presented developers with a new problem: How do we efficiently improve our app’s performance now that we’ve plucked the low hanging fruit from the vine? How do we make an API driven app faster when the performance bottleneck are API requests? The answer is directly manipulating users' perceptions in order to make our projects *feel* faster than they really are.
This isn’t easy. Humans are imprecise beings, and how we perceive the world around us is fraught with fascinating quirks. Improving perceived performance is likewise an incredibly challenging prospect. If people don’t perceive time accurately, how can you possibly hope to build to meet this nebulous standard?
In this talk, Eli will discuss the psychological basics of how people sense time, and how to use this understanding to create experiences that feel fast, tactile, and create the illusion of speed. He’ll break down real world, actionable guidelines on:
- When it makes sense to focus on perceived performance over outright speed
- How to turn the difference between active and passive mental states to our advantage
- How to make "fake" progress bars feel genuine
- How to cleverly craft animations to make loading seem faster
- When to use unconventional event listeners to increase perceived speed
- Predictive preloading: The art of anticipating user behavior and loading assets just in time
About Eli Fitch
Eli Fitch is a developer with a passion for web performance, animation, and WebGL. He makes tools to create beautiful interactive maps at Mapbox, a startup in his hometown of Washington, DC. He also organizes the DC CodePen meetup and dabbles in design, 3D art, and game development. When not in front of a computer, he restores his perpetually broken stable of 1970s motorcycles and attempts to keep his historic row house from collapsing in on itself like a dying star.
Raiders of the Fast Start: Frontend Performance Archaeology
There are a lot of books, articles, and online tutorials out there with fantastic advice on how to make your websites performant. It all seems easy in theory, but applying best practices to real-world code is anything but straightforward. Diagnosing and fixing frontend performance issues on a large legacy codebase is like being an archaeologist excavating the remains of a lost civilization. You don’t know what you will find until you start digging!
Pick up your trowels and come along with Etsy’s Frontend Systems team as we become archaeologists digging into frontend performance on our large, legacy mobile codebase. I’ll share real-life lessons you can use to guide your own excavations into legacy code:
- What tools and metrics we used to diagnose issues and track progress.
- How we went beyond server-driven best practices to focus on the client.
- Which fixes successfully increased conversion, and which didn’t.
Our work, like all good archaeology, went beyond artifacts and unearthed new insights into our culture. We at Etsy pride ourselves on our culture of performance, but, like all cultures, it needs to adapt and reinvent itself to account for changes to the landscape. Based on what we’ve learned, we are making the case for a new, organization-wide, frontend-focused performance culture that will solve the problems we face today.
About Katie Sylor-Miller
Katie Sylor-Miller is a Senior Software Engineer on the Frontend Systems team at Etsy, where she advocates for and implements frontend best practices in collaboration with product engineers and designers. She is passionate about frontend architecture, design systems, style guides, accessibility, frontend performance, and teaching others. Katie created ohshitgit.com to share her hard-won knowledge of how to get out of your git messes with a bit of humor (and a lot of swears).
Making the browser faster
There are lots of talks about how web developers can make their sites run faster. In this talk, let’s turn the tables and look at how browser developers can make their browsers faster.
We’ll see how a CSS engine can be modified to run up to 18x faster, and how you can get up to 400 frames per second by rendering like a 3D game engine. Then we’ll talk about other future directions to explore in speeding up the browser.
About Lin Clark
Lin Clark is a code cartoonist. She takes complex coding concepts and turns them into cartoons. She also works in Mozilla’s Emerging Technologies group, where she gets to tinker with things like WebAssembly, Servo, and Rust. In previous lives, she worked at npm, was a core contributor to open source projects like Firefox’s developer tools, and contributed to HTML data standards.
Third-party content: the weak link in the chain
Third-party content is the thorn in the side of many a good website. From A/B testing that delays render to advertising networks that bleed user data, we depend on services over which we have no control. In an ideal world we could attribute a user experience cost to each third-party provider, allowing marketing, eCommerce and business intelligence to make educated decisions about which providers should stay and which should go.
The Resource Timing API allows site owners to measure how third-parties perform for every single pageview. Combining this data with business intelligence provides new insight to the impact of third-party providers on business performance.
This talk explores some of the toughest questions in web performance, backed up with huge amounts of data:
- Will moving to a new advertising network increase ad revenue?
- Is A/B testing losing more revenue that it gains?
- Does measuring web performance impact web performance?
Data for this talk has been gathered from over 500,000 websites, with detailed investigation performed on millions of pageviews from a small number of sites.
You will leave this talk armed with the tools and knowledge to measure the performance of third-party providers and provide compelling arguments for whether they should stay or go.
About Simon Hearne
Simon is an engineer who specializes in web performance visualizations.
Optimize your life
Javier has been focused on optimizing the Web for over a decade, working with the largest Companies who are changing the world to ensure the Web is fast and secure for everybody. On this inspiring talk Javier will explain how this quest for optimizing everything expanded from his work, to other areas of his life (like for example reducing a long commute in half), and what you can do with all that extra time.
About Javier Garza
Multi-lingual technology evangelist that loves taking things apart, understanding how they work and finding the best/most practical way of improving them. Started hacking basic-based computer games at the age of 9. I have been working with computers the past 25 years in Spain, Germany and USA (half of those at Akamai helping the largest Websites on the Internet run faster and more secure).
The Past, Present and Future of Resource Loading: Why the web is slow and what can we do about it
Loading resources on the Web has always been a performance hurdle. Suboptimal protocols and late discovery caused it to be the common performance bottleneck. In recent years advances in network protocols and performance APIs improved resource loading significantly, but there's still room to make it even faster.
In this talk, Yoav Weiss will go over resource loading improvements browsers have made in recent years, discuss related best practices and describe various innovations that are being worked on to improve resource loading even further.
About Yoav Weiss
Yoav Weiss is a principal architect at Akamai, where he focuses on making the Web platform faster by adding performance-related features to browsers as well as to Akamai’s CDN. Yoav has been working on mobile Web performance for longer than he cares to admit. He takes image bloat on the Web as a personal insult, which is why he joined the Responsive Image Community Group and implemented the various responsive images features in Blink and WebKit. When he’s not writing code, he’s probably slapping his bass, mowing the lawn in the French countryside, or playing board games with his family.
Making Pinterest Fast
Pinterest.com serves millions of requests per day internationally across a myriad of network conditions and devices. This is the story of how the web performance team tackled the task of gathering data, applying a strategic roadmap across the organization, prevented performance regression slips as developers were shipping new features, and executed on the best opportunities to improve the Pinterest experience for our users and made performance a priority for the company.
About Jessica Chan, Michelle Vu, and Sarah Dapul-Weberman
Sarah Dapul-Weberman is a software engineer on the Pinterest Core Experience Web team. She focuses specifically on server-side web technologies. She is passionate about attempting to automate away more and more parts of her job.
Building a Performance Engineering Culture
Building a performance engineering culture can be challenging. Competing demands of feature delivery, security, emerging technologies and operations can push performance to the bottom of the priority list. How can you influence your organization? You need effective methods for getting your message to engineers, product managers and the business. In this session, we share techniques that have proven effective. These include:
- Framing your Vision
- Office Hours
- Embedding with a Team
- Developing Relationships
- Building Frameworks
All of these methods can be implemented at a grass-roots level. After this session, you’ll have concrete tools to drive the performance engineering culture you envision.
About Gopal Brugalette
Gopal is a Performance Architect/Principal Engineer. His experience spans e-Commerce, Financial and various Technology industries. He is currently developing a machine-learning based system for analyzing production and test data. His responsibilities have included preparing sites for peak events, user behavior insights, DevOps transformations, applying data science and machine learning to performance problems, developing engineering frameworks and expanding performance engineering activities into the development cycle and production. He has presented at numerous industry events and been featured in online magazines. Previous to IT, he was a researcher at the Center for Experimental Nuclear Physics. Outside of IT, he enjoys developing his permaculture farm and woodworking.
Demystifying Performance Timings
If you’ve ever experimented with the navigation and resource timing APIs in the browser, it can be a daunting task to understand the performance timings they provide. What’s the difference between connectStart and fetchStart? Where does SSL time figure in? What the heck does domInteractive mean, and how is that different from domComplete? What order do these timings even occur in?
About Jeremy Wagner
Jeremy Wagner is a web developer living and working in Saint Paul, Minnesota. He is the author of the Manning Publications book Web Performance in Action, a companion guide for the performance-minded web developer. Read his meandering ramblings on the web at https://jeremywagner.me, or check him out on Twitter @malchata.
The Power of Storytelling
If you want people to pay attention, learn, or remember something important, tell them a story. Stories help us connect with others and are easy for our brain to remember. Stories are all around us in tech from the user stories we create when developing features to the marketing messages crafted. But did you know stories are also hidden inside of metrics?
Organizations today are measuring hundreds or even thousands of metrics to measure performance including front-end, back-end, and business metrics. What story are these metrics telling us? In this session learn how to identify who your audience is and craft a story using metrics that will resonate with them. Understand which metrics matter and should be the star of your story and who the supporting characters are.
About Dawn Parzych
Dawn Parzych is a Director at Catchpoint. Prior to entering the tech field, Dawn obtained a masters degree in Psychology. She enjoys researching, writing and speaking about the intersection of technology and psychology with a focus on application performance, bias, and culture. She has spent over 15 years working in the application performance space in a wide variety of roles at Instart Logic, F5 Networks and Gomez.
Measure the Change You Want to See in the World
A stairway at Netflix costs over $100,000 each year because it turns left instead of right. Lurking in Gulp build times we found an entire engineer. One sneaky getBoundingClientRect launched a million laptop fan hurricanes.
There’s a hidden world around us, and our only hope of cracking it open is keeping a measurement-oriented mindset. Kick off your path to performance glory with a lightning talk on what we miss when we’re not looking.
About Jacques Favreau
Jacques Favreau is a senior UI engineer at Netflix. He’s the tech lead for the Web Core team, which covers web performance, developer productivity, cross-team libraries, and best practices. Jacques is an ardent supporter of accessible websites and removing magic from code – something future-Jacques is always happy about. When not watching or working on Netflix, he can usually be found at home in San Mateo with his wife and daughter, or out pursuing their passion for travel.
Accelerated Mobile Pages: The good, the bad and the ugly
The purpose of this talk is to introduce the Accelerated Mobile Pages (AMP) project, a way to make web pages load insanely fast on mobile devices. How it works, its benefits —and why it’s a hot topic for media publishers—, its downsides —and why developers are criticizing it.
About Vitor Talaia
Developer at Codeminer 42 that also likes to watch Formula One races; Currently working on implementing an AMP blog version for a big brazilian e-commerce platform.
Increasing Performance Developing Accessible Sites Through Semantic HTML
<section> and <button> and <div>, Oh my! HTML is extensible enough to create almost anything you need, but for developers making accessible websites (which should be all of us) semantic markup has a number of advantages and built-in features to make accessible sites more performant. Learn about them in this talk.
About Kimberly Munoz
Kimberly Muñoz is a front-end developer creating fast, accessible online experiences. She is currently on Slacks Customer Acquisition Team where she worked on the recent redesign of Slack.com. Previously she was recently a Technology and Innovation Fellow at the Consumer Financial Protection Bureau where she helped launch the redesign of Consumerfinance.gov, a new responsive website built on Django.
Progressive Web Apps: Show Up for Offline First, but Stay for the Killer Performance Boost
There is a big push for Offline First development, with a new buzzword — "Progressive Web App", or PWA — making the rounds for the last year or two. But a lot of what’s being said sounds like the coding equivalent of "eat your vegetables!".
What is in it for ME? Quite a bit, it turns out.
In this talk, Jason Lengstorf will share the surprising ways that online apps will see huge benefits when they’re built to support offline users. Learn how to add blazing speed gains to existing sites with just a few simple changes — and how you can easily add Offline First support to your apps with just a few lines of code.
Learn how going Offline First will improve the connected experience, including:
- better performance
- increased stability and reliability
- improved user experience
- and more!
So in addition to eating your vegetables — you know, making your web apps usable for people with slow and unreliable connections and whatnot — you will ALSO see your apps perform even better for connected users. All with minimal effort required.
About Jason Lengstorf
Jason Lengstorf is a developer, designer, author, and friendly bear. He focuses on work-life balance, efficiency, processes, and productivity to help people get more done in less time — so they can spend more time on the things that matter most. He recently joined IBM Design as a senior front-end developer in Austin, TX, where he can often be spotted in the forest foraging for nuts and berries.
Panel: Accessibility and Performance
Moderating the Accessibility and Performance panel.
About Mina Markham
Mina Markham is a Senior Engineer at Slack. She's a lover of design systems and prolific public speaker, appearing at events worldwide, including CSS Dev Conf, Fluent, and Future of Web Design. Mina also co-organizes Front Porch Conference.
Previously at Hillary for America, her work on the Pantsuit pattern library has been spotlighted in WIRED, Fast Company, and Communication Arts. Mina likes ampersands, Oreos, traveling, cupcakes, and the color pink. She lives in Oakland, California.
Stylable: The Musical
The world premier of "Stylable: The Musical", featuring Standards Studmuffin Bruce Lawson.
About Bruce Lawson
Register for #PerfMatters Conference
March 27-28, 2018 at Cañada College
Prices subject to change. No refunds. Tickets are transferable with notice. Getting tickets for a 5 or more people? Get $50 off for the fifth person and everyone thereafter. Group of 10 or more? Contact us at email@example.com