1 private link
"If you’re building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, “what is really important to my users?”"
Altitude NYC 2018: Making Pinterest Fast | Sarah Dapul-Weberman, Michelle Vu, Pinterest
"Accurately measuring layout on the web is hard. There’s no perfect metric to capture style and layout – or indeed, rendering – even though all three can impact the user experience just as much as JavaScript.
However, it’s important to understand how the HTML5 event loop works, and to place performance marks at the appropriate points in the component rendering lifecycle."
"I hope that this post has extended your vision on web performance beyond the well known barrier app vs network, and that this help you to rethink or improve your app architecture."
"In a perfect world, none of our sites would ever block the main thread unnecessarily. We’d all be using web workers to do our non-UI work, and we’d have shouldYield() and a native Scheduling API) built into the browser.
But in our current world, we web developers often have no choice but to run non-UI code on the main thread, which leads to unresponsiveness and jank."
JavaScript is the web’s CO2.
"Improving performance doesn’t mean we should remove all fonts and images. It just means we should be more aware of how the design decisions we make impact user experience. Performance is a balance between content and design."
We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library.
One thing to take away is that web performance optimization is an art not a science. There is no one laid out path to implementing it . So go ahead, start optimizing your sites and have fun while you’re at it (if you can 💁.)
"Web performance is an intricate topic but well worth the effort. Cutting down initial network requests through progressive enhancement and lazy loading is useful to make initial rendering as fast as possible. Showing basic content first, and then loading enhancements like fonts, media, and scripts later, brings the user experience in harmony with aesthetic designs and business goals."
I thought it would be fun to rank the most troublesome technologies in order of tricksiness. I came up with a top four list.
"What I love most about the intervention is the attention it has gotten from developers. JavaScript isn’t a given. Things go wrong."
"We gave the test to 136 people, and the skeleton screen performed the worst by all metrics. Users in the skeleton screen group took longer to complete the task, were more likely to evaluate their wait time negatively (by answering the first question with “Strongly disagree” or “Moderately disagree”), and guessed that the wait time had been longer than users who saw the loading spinner or a blank screen."
"Skeleton screens can improve the feel of any action taking longer than a few hundred milliseconds. Applying them to your rendering bottlenecks will make your UI feel faster and make people happier."
"And, for goodness sake, disable AMP on your website.
Don’t feed the monster – fight it."
"A one year #PWA retrospective", Zack Argyle (@zackargyle) for Pinterest Engineering (@PinterestEng)
"Looking back over one full year since we started rebuilding our mobile web, we’re so proud of the experience we’ve created for our users. Not only is it significantly faster, it’s also our first platform to support right-to-left languages and “night mode.” Investing in a full-featured PWA has exceeded our expectations. And we’re just getting started."
"LazyLoad is a Chrome optimization that defers loading below-the-fold images and certain third-party iframes on the page until the user scrolls near them"