• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Dion Almaer

Software, Development, Products

  • @dalmaer
  • LinkedIn
  • Medium
  • RSS
  • Show Search
Hide Search

Stop painting and have a Meaningful Interaction with me!

May 31, 2016 Leave a Comment


When it comes to performance, what do we measure? Our focus has changed over time as we get more of an understanding on the importance of perceived performance vs. some absolute “the bytes came down in X seconds and the view rendered in Y”.

We had a lot of performance related talks at Google I/O, and it was fun to see some of this evolution. There are a series of tricks at play, where you keep the user engaged by showing them progress versus a binary blank view becoming fully available and interactive:

  • As developers we know that loading indicators are lies, but some of our users still buy them
  • We can get something painted ASAP (e.g. a shell) and then spinner until other content shows up
  • We can show fake UI component holders that are then filled in later
  • We can show snapshots of past content (sometimes literally a prior screenshot) and replace when new data comes in
  • We can show the visible content in the viewport and lazily load below the fold (AMP does this and much much more… learn what they do here and how they prerender)
  • We can load tiny images scaled up, and then replace the full images when downloaded (e.g. what Medium does with its images).

There are a lot of tools such as these to give us some slight of hand, and they work especially well when we can progress through the stages. I find that they tend to break down the most when there is a huge delay in one step: e.g. the shell loaded pretty quickly but most of the page is a huge spinner going on and on and you can’t trust if anything is happening.

Recently, we spent a lot of time measuring the time to first paint, which is often great, but it can cause you to trick yourself into thinking you have done a great job when all you have done is sped up one step, and you could have actually slowed the illusion and done harm.

Paul Lewis shared a visualization of how various approaches can differ here:

This is why I prefer Progressive Rendering + Bootstrapping. I’d love to see more frameworks support this approach: pic.twitter.com/dlPUfcQsPd

— Paul Lewis (@aerotwist) May 9, 2016

This brings us to the new topic of the day: Time to First Meaningful Interaction.

Time-to-interactive is pretty much all that matters for mobile. See: https://t.co/1RlaPu1PqH

— Alex Russell (@slightlylate) May 31, 2016

Alex talks about the “time to interactive” measure at length in a fantastic talk, and it is a key subset.

Search for meaningful interaction, and you will see links to a lot of therapy and tips for how to communicate with others. Compared to first paint it is much vaguer and requires you to think through the details of each view and what interactions are meaningful. They may differ based on the type of user, or where they are coming from in a flow, or the time of year. This is the type of thinking that you go through when you are building your UX, not just your performance. It is strategic as well as tactical.

The answers to these questions may change your approach to how you deliver a given view or application.

For example, in a transactional system that doesn’t have a lot of content to consume, you will very much want to wire up application so the user can click that button asap, and you will wait to minimize the time between “I see the button that I need to click on!” and “Why doesn’t it do anything when I tap on it?”

On the other hand, if you have a content heavy site where a user will want to spend some time taking everything in before their next interaction with the application itself, then you will be rushing to paint valuable content and allow them to scroll around to read that content. The actions and other items can lazily load much later.

Often there will be a mix and match. When you get to a product page on an e-commerce application you can quickly load information such as description and price, and load other info later such as reviews and secondary details (dimensions etc).

The right choice here will be the difference between frustration and showing the right level of progress so the user can keep in some sort of flow in your experience.

This is why I am excited for us to search for meaning, rather than blindly rush to paint, and how the Web now has the capabilities to deliver reliable resilient performance.

Share this:

  • Twitter
  • Facebook

Tagged With: Performance, UX, Web Development

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Twitter

My Tweets

Recent Posts

  • I have scissors all over my house
  • GenAI: Lessons working with LLMs
  • Generative AI: It’s Time to Get Into First Gear
  • Developer Docs + GenAI = ❤️
  • We keep confusing efficacy for effectiveness

Follow

  • LinkedIn
  • Medium
  • RSS
  • Twitter

Tags

3d Touch 2016 Active Recall Adaptive Design Agile Amazon Echo Android Android Development Apple Application Apps Artificial Intelligence Autocorrect blog Bots Brain Calendar Career Advice Cloud Computing Coding Cognitive Bias Commerce Communication Companies Conference Consciousness Cooking Cricket Cross Platform Deadline Delivery Design Desktop Developer Advocacy Developer Experience Developer Platform Developer Productivity Developer Relations Developers Developer Tools Development Distributed Teams Documentation DX Ecosystem Education Energy Engineering Engineering Mangement Entrepreneurship Exercise Family Fitness Founders Future GenAI Gender Equality Google Google Developer Google IO Habits Health HR Integrations JavaScript Jobs Jquery Kids Stories Kotlin Language Leadership Learning Lottery Machine Learning Management Messaging Metrics Micro Learning Microservices Microsoft Mobile Mobile App Development Mobile Apps Mobile Web Moving On NPM Open Source Organization Organization Design Pair Programming Paren Parenting Path Performance Platform Platform Thinking Politics Product Design Product Development Productivity Product Management Product Metrics Programming Progress Progressive Enhancement Progressive Web App Project Management Psychology Push Notifications pwa QA Rails React Reactive Remix Remote Working Resilience Ruby on Rails Screentime Self Improvement Service Worker Sharing Economy Shipping Shopify Short Story Silicon Valley Slack Software Software Development Spaced Repetition Speaking Startup Steve Jobs Study Teaching Team Building Tech Tech Ecosystems Technical Writing Technology Tools Transportation TV Series Twitter Typescript Uber UI Unknown User Experience User Testing UX vitals Voice Walmart Web Web Components Web Development Web Extensions Web Frameworks Web Performance Web Platform WWDC Yarn

Subscribe via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Archives

  • February 2023
  • January 2023
  • September 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • November 2021
  • August 2021
  • July 2021
  • February 2021
  • January 2021
  • May 2020
  • April 2020
  • October 2019
  • August 2019
  • July 2019
  • June 2019
  • April 2019
  • March 2019
  • January 2019
  • October 2018
  • August 2018
  • July 2018
  • May 2018
  • February 2018
  • December 2017
  • November 2017
  • September 2017
  • August 2017
  • July 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012

Search

Subscribe

RSS feed RSS - Posts

The right thing to do, is the right thing to do.

The right thing to do, is the right thing to do.

Dion Almaer

Copyright © 2023 · Log in