An Event Apart: “Designing for Performance”

Lara Hogan speaking at An Event Apart Orlando 2016 at Disney’s Contemporary Resort in Walt Disney World on October 3, 2016.

As a web designer or front-end developer, you have tough choices to make when it comes to weighing aesthetics and performance. Images, fonts, layout, and interactivity are necessary to engage your audience, and each has an enormous impact on page load time and the overall user experience. This talk will focus on performance basics from a design and front-end perspective, including tips for optimizing design assets and patterns. Lara will also cover some tips for approaching your project with page speed in mind, how to make decisions about aesthetics and speed during the design process, and how to help those around you care about performance.

Photo source: Zeffrey Zeldman
Photo source: Zeffrey Zeldman

Notes

  • Performance is user experience
    • Users expect pages to load in 2 seconds or less
    • After 3 seconds, 40% will abandon your site
  • Etsy:
    • +160k to a page = +12% Etsy’s bounce rate on mobile
    • When we eliminated jank: people favorited more often and favorited more items
    • -1 redirect = +12% double-click click-through rate
  • Our industry has not designed for performance
  • Fast page load time builds trust in your website
  • Performance + aesthetics = the user experience
  • Why is my site slow, especially on mobile?
    • A cellular device has to establish a radio channel before it can send/get data
    • Average round trip:
      • Desktop wi-fi: <50ms
      • Mobile network: >300ms
  • How can we optimize for networks?
    • Use WebPageTest for testing speed performance
    • Perceived performance is more important that actual speed
    • Reduce number of requests
    • Reduce size of requests
  • Images
    • Images make up the majority of the average bytes per page by content type
    • JPEG (Joint Photographic Experts Group)
      • Group began in 1986; first standard in 1992
      • Best for: photos, images with many colors
      • JPEGs are lossy; their algorithm is based loosely on how humans see and process information
      • Good at: smooth gradients, low contrast
      • Bad at: high contrast areas, edges
      • Optimization options:
        • Reduce noise and other complexity
        • Decrease export quality
        • Blur unimportant areas
      • Reducing Image Sizes
    • GIF (Graphics Interchange Format)
      • Introduced by CompuServe in 1987; enhanced version (animation!) in 1989
      • Best for: animations that can’t be replaced with CSS
      • Contain up to 256 colors (per frame)
      • Are lossless
      • Please don’t use them
      • If you must use a GIF: dithering gives the appearance of a smoother blend
      • Their compression algorithm removes horizontal redundancy
        • Vertical patterns greatly increase file size over horizontal patterns
      • The more details or noise, the larger the file will be
      • Suggestions:
        • Replace GIF animations with CSS
        • Replace non-animated GIFs with PNG-8s
        • Replace movie GIFs with asynchronously-loading videos
    • PNG (Portable Network Graphics)
      • Created as an improved, non-patented replacement for GIF in 1996
      • Best for: images with few colors
      • Lossless (like GIFs!)
      • 256 color palette (like GIFs!)
      • Dither (like GIFs!)
      • Recognize horizontal and vertical patterns
      • No restriction on color palette
      • Handles transparency differently
      • Optimization options:
        • Decrease noise
        • Decrease number of colors
      • PNG-32 is actually a PNG-24 with 8-bits of transparency added
      • Much larger file size than JPEG for photos
    • WebP (WebPicture)
      • Google announced WebPicture in 2010
      • Both lossless and lossy compression
      • Supports transparency and animation
      • Predicts a value, then encodes the difference between the prediction and actual value
      • Creation: there’s a Photoshop plugin, and online conversion tools
      • Support: only Chrome, Opera, and Android Browser
    • Save even more bytes and requests
      • Replace simple images with SVG
    • SVG (Scalable Vector Graphics)
      • XML-based vector image format, born out of competing standards submitted to W3C
      • Became a W3C recommendation in 2001
      • Scales up beautifully for retina devices
      • If inline, eliminates an HTTP request
      • Not supported ≤IE8
      • Exports with a lot of cruft
        • Can delete the <?xml version="1.0" encoding="utf-8"?>, the generator comment, and the <!DOCTYPE …>
      • You can apply an SVG as a background image
      • You can inline the SVG into your HTML (eliminates HTTP request)
        • Inlined SVG removes cache-ability and makes your HTML file size larger
        • As with everything else, test it
    • Sprites are useful for reducing requests
    • Serve the right amount of bytes
      • Use srcset to serve the most appropriate image
        • <img srcset="small.jpg 400w, medium.jpg 800w, full.jpg 1300w" sizes="(max-width: 480px) 75vw, (min-width: 960px) 95vw, 60vw" src="medium.jpg" alt="image title" title="image title">
        • <picture><source type="image/svg+xml" srcset="pic.svg"> <img src="pic.png" alt="Description"></picture>
    • Additional lossless compression
  • Fonts
    • IE6-8 downloads all @font-face files, even if they’re not used!
    • Only @import the font weights you absolutely need
    • Try only loading @font-face fonts with a large min-width to prevent them from downloading on mobile
    • Optimize your character subsetting
      • Select only the characters that you need
      • Some tools will let you select or eliminate single characters from a font
      • Document subsetting so others can know and, if needed, edit it
  • Markup: Semantics & Repurposability
    • Save development time and page load time
    • Create repurposable code
    • Rename non-semantic elements
      • Bad: .blue
      • Good : .tags
    • Remove inefficient selectors
      • Bad: .wide #sidebar a.search { }
      • Good: #sidebar .search { } or just .search { }
    • Remove unnecessary elements (divitis)
      • Firefox Tilt 3D add-on: visualize HTML elements
    • Create patterns
      • Consistency, clarity in patterns = better product and brand alignment
      • Eliminate unnecessary font weights
      • Consistency across desktop and apps
  • Culture: Make performance part of everyone’s workflow
    • You need to create a culture of performance
    • Use a mobile-first workflow
    • Create a performance budget
    • Be deliberate about loading assets like images, fonts and JavaScript files
    • At the outset of a project, you may find yourself weighing tough choices
      • Can I put a large hero image at the top of every article?
        • Pro: Represents the brand well
        • Con: This could be a really large file, and we want to minimize page weight
        • Compromise: We’ll make sure that few colors are used in the hero, and it’s compressed correctly
      • Should I @font-face three display weights and a text weight?
        • Pro: Lots of flexibility in typography
        • Con: More requests and page weight
        • Compromise: We’ll use two display weights and a system font for the body content
      • How will I demonstrate how this product works?
        • Pro: A video or animated GIF will clearly convey more information
        • Con: Videos and GIFs can be pretty heavy
        • Compromise: We’ll self-host a video that asynchronously loads
    • A/B test to measure aesthetics vs. performance impact
    • Make it easy for non-developers to do performance
      • Automate compression
      • Utilize style guides
      • Automate performance tests
      • Automate image resizing
    • Who is responsible for performance?
      • Everyone
      • No more performance cops or janitors
    • Changing culture is hard
      • Help people “feel” your site’s performance
      • Publish performance reports
        • Makes performance issues public
        • Forces to iterate on and improve most important pages
        • Reminds that page load times are not secret
        • Motivates development teams to get better
      • Put performance charts, examples, and issues on office status board
  • We need to have empathy
  • Good performance is good design
  • Designing for Performance book — available to read online
  • Q and A:
    • Loading spinners are not interactive; can make user feel like page is loading slowly

Speaker Links and Resources