Why is WPO
important?

The reason why we build stuff

+100ms delay

-1% Amazon’s sales

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

$1070000000

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

Chrome Dev Tools

https://developers.google.com/web/fundamentals/performance/rail#devtools

Chrome Dev Tools

Lighthouse

https://developers.google.com/web/fundamentals/performance/rail#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

https://developers.google.com/web/fundamentals/performance/rail#webpagetest

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>

https://responsiveimages.org

Facebook's 200 Byte

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

JS blocks parsing HTML

<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

https://github.com/GoogleChromeLabs/lighthousebot

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