Extreme Web Performance

Optimization

slides.com/joekarlsson | @joekarlsson1

I am
Joe Karlsson

How is this going to work?

Goals

  • Why #perfMatters

  • How to measure performance

  • Practical performance tips

  • Creating a performance culture at Best Buy

What is WPO?

WPO occurs by monitoring and analyzing the performance of your web application and identifying ways to improve it.

Why is WPO
important?

Conversions

The reason why we build stuff

store => orders

blog => read articles

app => interact & engage

+100ms delay

-1% Amazon’s sales

http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

$1070000000

2015

2015

+60% faster

+14% donations

Source: Obama Campaign

500ms delay

-20% Google’s traffic

Source: http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

- The Google

we’ve decided to take site speed into account in our search rankings

Source: https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

How to Measure Performance

Usability Engineering 101

Delay

User reaction

0 - 100 ms Instant
100 - 300 ms Feels sluggish
300 - 1000 ms Acceptable for changing views

> 1 s

Mental context switch

> 10 s

Frustrated, leave,
may or may not return

https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail

Chrome Dev Tools

Chrome Dev Tools

Lighthouse

  • Available in Chrome DevTools, as a Chrome Extension, as a Node.js module, and within WebPageTest.

     

  • Runs a series of audits on the page, and then gives you a report on load performance, as well as suggestions on how to improve.

WebPageTest

#WebPerf

optimize-fu

Caching & Content Delivery Networks

You can increase the performance of your website by caching these files on servers closer to where your users are. This offloads the traffic from your servers and makes your site load faster.

gzip all the plaintext

What about images?

PNG v. JPEG v. SVG v. WebP

Pros of PNG

  • Lossless
  • Supports transparency
  • Good for images with text in them
  • PNG-8 has small file size and is most lightweight
  • Exports without jagged edges

 

Cons of PNG

  • File sizes grow quickly for large files such as images
  • Some older email clients have trouble with rendering them

Pros of JPEG

  • Great for high color and photography
  • Easy to reduce file sizes
  • Renders consistently in email clients
  • Great for large photos

Cons of JPEG

  • Lossy format
  • No transparency
  • Creates jagged edges for text
  • No animation

Pros of SVG

  • Great for high color and photography
  • Easy to reduce file sizes
  • Renders consistently in email clients

Cons of SVG

  • Lossy format
  • No transparency
  • Creates jagged edges for text
  • No animation

tl;dr

JPEG = Large imgs

PNG = Smallish imgs with text

SVG = Icons and logos

WebP

  • Lossless compression

  • Lossy compression, similar to JPEG

  • Lossless transparency/alpha layers

  • Compressed transparency/alpha layers

  • Animated images, similar to WebM

Responsive Images

<img srcset sizes>

<img src="logo.small.png"
     srcset="logo.large.png 1024w, logo.medium.png 640w, logo.small.png 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="DevLeague">

https://responsiveimages.org

Facebook's 200 Byte

Preview Photos

https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

this helped speed up profile and page loads by 30 percent

https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/

Do not block the critical rendering path

...what happens in the intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels

load html > load resources > parse > display

JS blocks parsing HTML

Worse than blocking rendering

</body>

<script>

  1. html starts parsing

  2. hits <script>

  3. html pauses parsing

  4. download js (if external)

  5. execute js (blocks)

  6. html continues parsing

<script defer>

  1. html starts parsing

  2. hits <script>

  3. html continues parsing

  4. while downloading js (if external)

  5. html finishes parsing

  6. deferred js executes in order

<script async>

  1. html starts parsing

  2. hits <script>

  3. html continues parsing

  4. while downloading js (if external)

  5. html pauses parsing to execute js

  6. html completes parsing

Use <script async>

if it doesn't depend on script order

else use <script defer>

http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Progressive Rendering

Lazy Load Images

(typically) some javascript will load an image when it comes into the browsers viewport instead of loading all images at page load.

Prioritizing Visible Content

Include only the minimum css/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible

Set a
performance budget

After putting in the hard work of improving your site performance, use a performance budget to prevent your site performance from regressing over time.

Lighthouse Bot

Webpack Performance Hints

Options allows you to control how webpack notifies you of assets and entry points that exceed a specific file limit.

Let's make performance a part of our culture

Ask your peers:

 

  • "How does this affect performance?"

  • "Can we make this faster?"

  • "What's inside of our bundle?"

  • "Have these images been compressed and put on our CDN?"

Final Thoughts

Don't make it so pretty that it doesn't work for the end user

Balance your desire for developer experience with the user experience

Devs: Advocate for performance
 

Product: Allow devs time to work on performance

Include performance checks into your build process

Talk about performance often!

  • Use caching and CDNs

  • Bundle and Minify all plaintext

  • Optimize Image Usage

    • PNGs v. JPEGs v. SVGs

  • Do NOT block the critical rendering path

  • Set a performance budget

  • Make performance a part of your team culture

Questions?

Additonal Resources

Thank you!

I am
Joe Karlsson

Extreme Web Performance Optimization

By Joe Karlsson

Extreme Web Performance Optimization

The web has made great progress in enabling fast experiences, but building a fast site today isn’t trivial. At Best Buy, we want to build a performance culture in order to create a better shopping experience for our customers. In this talk, I will show you how to find and fix the most common web performance bottlenecks to improve your UX by using tools like Lighthouse and Chrome DevTools, and discover the latest browser APIs (e.g. Service Workers, Async Images, Fetch Priorities) to get more control over your loading experience. https://www.youtube.com/watch?v=Mv-l3-tJgGk

  • 450
Loading comments...

More from Joe Karlsson