class: center, middle # More Speed = More Money Bobby Schultz [@puppybits](https://twitter.com/puppybits)
View these slides at: bit.ly/more-speed-more-money
--- class: center, middle ## Slow pages lose users and money. --- # Fast Pages Case Studies - barackobama.com ### Obama’s campaign website found that faster page loads increase conversion rate 14%.
([Kyle Rush](http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/))
* Obama’s online fund raising earned $250 million dollars. * $250,000,000 / 14% = $35,000,000 * If every donar gave the same amount, the potential lose for a slow site would be as high as $35 million dollars. --- # Fast Pages Case Studies - bing.com ### Bing lost -4.3% revenue per user on slow page loads.
([Bing](http://velocityconf.com/velocity2009/public/schedule/detail/8523) [sildes](http://cdn.oreillystatic.com/en/assets/1/event/29/The%20User%20and%20Business%20Impact%20of%20Server%20Delays,%20Additional%20Bytes,%20and%20HTTP%20Chunking%20in%20Web%20Search%20Presentation.pptx))
--- # Fast Pages Case Studies - Yottaa.com ### Yotta found that slow pages had 40% abandonment rate and 80% of users never returned.
([Yottaa](http://www.yottaa.com/blog/application-optimization/marketing-web-performance-101-how-site-speed-impacts-your-metrics-))
--- class: center, middle # Quantifiy UX Targets --- # Targets * Speed - How fast is fast enough? * Size - How much data can be loaded? * Type - What gives the best results? --- # Targets * Speed -
How fast is fast enough?
* Size - How much data can be loaded? * Type - What gives the best results? --- # Targets - 2 seconds *
Speed - TTI (Time to Interact) 2 seconds
* Size - How much data can be loaded? * Type - What gives the best results? Numerous case studies from Bing, Amazon, Facebook, Shopzilla, Firefox and others all talk around the same threshold. Decreasing speeds down to 2 seconds have major impact on retention and revenue. Faster than a 2 second have diminishing returns.
[guypo](http://www.guypo.com/17-statistics-to-sell-web-performance-optimization/)
Time to Interact the best metric to quanitify the user persepction on speed. It can be the same as Time to First Paint as long as there is usage content on the page. --- # Targets * Speed - TTI (Time to Interact) 2 seconds * Size -
How much data can be loaded?
* Type - What gives the best results? --- # Targets - 400KB * Speed - TTI (Time to Interact) 2 seconds *
Size - 400KB to render above the fold
* Type - What gives the best results? Time is relative to the user’s internet connection. In 2015 users coming from mobile connections on major web sites was between 38% to 58% depending on the content type.
[Clickz](http://www.clickz.com/clickz/column/2388915/why-mobile-web-still-matters-in-2015)
3G only mobile users account for 50.3% of the users.
[OpenSignal](http://opensignal.com/reports/state-of-lte/usa-q1-2014/)
LTE Mobile users are only on LTE 56.5% of the time.
[OpenSignal](http://opensignal.com/reports/state-of-lte/usa-q1-2014/)
This means most mobile users are accessing your site over a 3G connection. A decent 3G connection is 0.2 Megabytes Per Second (1.6Mbps). With the 2 second threshold that provide 400KB of data total to render the page in the target. --- # Targets * Speed - TTI (Time to Interact) 2 seconds * Size - 400KB to render above the fold * Type -
What gives the best results?
--- # Targets - 63.4% of page weight is `
` * Speed - Time to Interact 2,000 milliseconds (2 seconds) * Size - 400KB
Type - Images are 63.4% (1.3MB) of the page weight
In September 2015, HTTP Archive has the average site is 2.2MB (2,182KB). The largest type of resource are images, which account for 1.3MB (2.1KB).
[HTTP Archive](http://httparchive.org/interesting.php)
On 3G mobile connections where bandwidth is the most limited, the average site would take 11 seconds to load the page. ![Page Weight](resize-page-weight.png) --- # Real-world page loads (3G)
--- class: center, middle # Reduce page weight, increase reveune --- # Reduce page weight, increase reveune 1. Create alternate sized images. 1. Optimize/minimize each of the images. 1. Include the image links in your source file 1. Select the best image using: 1. screen pixel density 1. browser viewport size 1. supported image file type 1. user’s current connection speed 1. browser supported features 1. image layout sizing. 1. Include all image variants in your distribution folder. 1. Profit --- # Reduce page weight, increase reveune ### Media Queries * ~~multiple file types~~ * **manually** media queries account for viewport, layout size & pixel density * fallback for old browsers ```javascript @media(min-width:600px) { background-image: url(img-600w.png); } @media(min-width:300px) { background-image: url(img-300w.png); } ``` --- # Reduce page weight, increase reveune ### Picture * multiple file types * **manually** media queries account for viewport, layout size & pixel density * fallback for old browsers ```javascript
``` --- # Reduce page weight, increase reveune ### SRCSET * ~~multiple file types~~ * **automatically** accounts for pixel density, viewport size and **network connection** * fallback for old browsers ```javascript
``` --- # Reduce page weight, increase reveune ### HTTP Client Hints (future spec) * multiple file types * manually accounts for pixel density, viewport size * fallback for old browsers ```HTTP GET /img.jpg HTTP/1.1 User-Agent: Any Browser Accept: image/webp, image/jpg DPR: 3.0 HTTP/1.1 200 OK Server: Any Server Content-Type: image/jpg Content-Length: 9999 Vary: DPR Content-DPR: 3.0 ```
first release will be in the upcoming Chrome 46
--- # Reduce page weight, increase reveune ### FLIF image format (flif.info) * New lossless image format * In the majority of cases FLIFs are small than JPG, PNG & WEBP * Responsive images in a single file * No patents * No browser support --- class: center middle ### Yeah that’s too much work --- # Reduce page weight, increase reveune ### Minified (3G over ngrok)
--- # Reduce page weight, increase reveune ### Minified (3G over ngrok) ![optimized-load-time](resize-optimized-image-3g.png) --- class: center, middle # Speed with Ease --- # Speed with Ease ### Resize-Image-Loader (
bit.ly/resize-image
) + ResponsiveImage (
bit.ly/react-image
) **Resize-Image-Loader** for Webpack will create and optimize multiple image variants and include them with your distribution folder. ```bash npm install resize-image-loader --save-dev ``` **ResponsiveImage** component will take the multiple links, size and information and connect them together so that the browser can inteligently choose the optimal image. ```bash bower install ResponsiveImage ``` --- # Speed with Ease ### Resize-Image-Loader (
bit.ly/resize-image
) + ResponsiveImage (
bit.ly/react-image
) ```javascript let ResponseImage = require('ResponsiveImage'); let image = require(`resize-image? sizes[]=200w, sizes[]=900w !assets/img/my-image.png`); let MyComponent = React.createClass({ render(){ return (
); } }); ``` --- # Speed with Ease ## Minified + Responsive (3G over ngrok)
--- # Speed with Ease ## Minified + Responsive (3G over ngrok) ![optimized-load-time](resize-responsive-image-3g.png) --- # Speed with Ease
Page weight went from 2,199KB, down to 453KB.
That’s 1,746KB savings!
Load time went from 17s, down to 6s.
That’s 11 seconds faster!
--- class: center middle # Speed with Ease - Bonus Round
--- # Speed with Ease - Bonus Round ### "Perception" of speed is just as important actual speed. We can make the page feel faster by having a complete rendering faster. Loading a tiny inlined image and then blurring it with an SVG filter. It adds ~2KB per image. This will slow the initial render by ~0.1s but the page will feel much faster because it’s completely rendered. Once the responsive image loads, we’ll cross-fade between the two images. --- # Speed with Ease - Bonus Round ### Resize-Image-Loader (
bit.ly/resize-image
) + ResponsiveImage (
bit.ly/react-image
) BEFORE ```javascript let ResponseImage = require(‘ResponsiveImage’); let image = require(`resize-image? sizes[]=200w, sizes[]=900w, !assets/img/my-image.png`); let MyComponent = React.createClass({ render(){ return (
); } }); ``` --- # Speed with Ease - Bonus Round ### Resize-Image-Loader (
bit.ly/resize-image
) + ResponsiveImage (
bit.ly/react-image
) FASTER ```javascript let ResponseImage = require(‘ResponsiveImage’); let image = require(`resize-image? sizes[]=200w, sizes[]=900w, placeholder !assets/img/my-image.png`); let MyComponent = React.createClass({ render(){ return (
); } }); ``` --- # Speed with Ease - Bonus Round ### Minified + Responsive + Placeholder (3G over ngrok)
--- # Speed with Ease - Bonus Round ### Minified + Responsive + Placeholder (3G over ngrok) ![placeholder-load-time](resize-responsive-placeholder-3g.png) --- # Speed with Ease - Bonus Round ##### Minified
##### Responsive
##### Placeholder + Responsive
--- # Don’t have Webpack? ### LevelMoney’s Megatome (Webpack + React generator) * Dynamically switchable render between the browser & NodeJS (w/o JSDom/Phantom) * Bring your own data/flux (we use ClojureScript). * React 0.13 or 0.14-rc1 * React Router 0.13 or 1.0-rc2 w/ animateable page transitions and data fetching * Hot swap code (1s dev cycles w/o page reloads) * High-level webpack config options to dev, prod or static rendering * Code-splitting built-in * Proxy-server for any back-end service [bit.ly/megatome](https://bit.ly/megatome) ---
resize-image-loader
bit.ly/resize-image
ResponsiveImage
bit.ly/react-image
Megatome (Webpack + React generator)
bit.ly/megatome
Level Money is hiring (Jr. & Sr. Devs).
levelmoney.com/jobs
Resources: [HTTP Client Hints](https://github.com/igrigorik/http-client-hints) [Responsive Images](https://responsiveimages.org/) [HTTP Archive](http://httparchive.org/interesting.php) [OpenSignal](http://opensignal.com/reports/state-of-lte/usa-q1-2014/) [Clickz](http://www.clickz.com/clickz/column/2388915/why-mobile-web-still-matters-in-2015) [guypo](http://www.guypo.com/17-statistics-to-sell-web-performance-optimization) [Yottaa](http://www.yottaa.com/blog/application-optimization/marketing-web-performance-101-how-site-speed-impacts-your-metrics-) [Bing](http://velocityconf.com/velocity2009/public/schedule/detail/8523) [Kyle Rush](http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/) [@puppybits](https://twitter.com/puppybits)
View these slides at: bit.ly/more-speed-more-money