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>
html starts parsing
hits <script>
html pauses parsing
download js (if external)
execute js (blocks)
html continues parsing
<script defer>
html starts parsing
hits <script>
html continues parsing
while downloading js (if external)
html finishes parsing
deferred js executes in order
<script async>
html starts parsing
hits <script>
html continues parsing
while downloading js (if external)
html pauses parsing to execute js
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!