Intro to Web Performance Ten Ways to a Faster Website Presented by: Sheila Eaton and Mohammad Durrani TechKnowFile, University of Toronto, May 5, 2016

Welcome! What is Web Performance? Why is it Important? Challenges and Solutions Questions and Further Reading Agenda

What is Web Performance? Perceived Performance Optimized progressive rendering. Feels fast. Unoptimized Rendering Feels slow. developers.google.com/web/fundamentals/performance/critical-rendering-path/

Web Page Performance

Why is Performance Important? Puts users first Allows users to accomplish tasks in less than 2 seconds Respect for users builds trust Encourages return visits Reduce time and data costs for mobile users Accounts for international bandwidth Broaden access Small boost to search

Why Performance Matters 47% expect a web page to load in two seconds or less. two seconds or less 57% will abandon a page that takes 3 seconds or more to load 3 seconds or more 79% shoppers [students, faculty, donors ] who have trouble with web site performance say they won’t return to the site to buy again See Also: What does my site costWhat does my site cost

Performance Challenges CHALLENGE 1: Number of HTTP Requests CHALLENGE 2: Bigger File Sizes CHALLENGE 3 : Improving Perceived Perf. CHALLENGE 4: Latency

httparchive.org/trends.php Total Transfer Size & Total Requests

CHALLENGE 1: Number of HTTP Requests

40 requests Goal: Reduce number of requests How – some quick wins: Image svg sprites Remove Font Awesome and Google font Set one feature img each for news and events feeds Reduce size of banner Blur banner image and crop Reduce CSS* *For new USMC website (in progress) CSS is reduced by 36%

Why Reduce Requests A resource is requested Time is spent sending the request to the server and waiting for the server to respond Then downloading the response to add to webpage The less time it takes -- the better CHALLENGE 1: Number of HTTP Requests

Five Ways to Cope with Requests Resource Audit Image Sprites JS/CSS Concat Keep Alive Cache Static Files CHALLENGE 1: Number of HTTP Requests

The fastest and best optimized resource is a resource not sent Ilya Grigorik, Google CHALLENGE 1: Number of HTTP Requests > Reducing Requests

Resource Audit Question everything: css/js/images/fonts/3rd-party CHALLENGE 1: Number of HTTP Requests > Reducing Requests Resource necessary? Value to user? More performant approach? Blocking page load? Place lower in markup? How is value tracked?

Fonts Performance costs of fonts? Aesthetic tradeoffs? CHALLENGE 1: Number of HTTP Requests > Reducing Requests Google Sans and Merriweather Bold, normal, italic Performance Hit 194 Arial and Times New Roman All weights No Performance Hit

Image Sprites Size of file is bigger but fewer http requests CHALLENGE 1: Number of HTTP Requests > Reducing Requests

JS/CSS Concat What is concat? Combining like files to reduce the number of HTTP requests

CHALLENGE 1: Number of HTTP Requests > Reducing Requests JS/CSS Concat File1.js { //content file 1 } FileAll.js { //content file 1 //content file 2 //content file 3 } File2.js { //content file 2 } File3.js { //content file 3 }

CHALLENGE 1: Number of HTTP Requests > Reducing Requests Keep Alive

CHALLENGE 1: Number of HTTP Requests > Reducing Requests Caching Static Files Assets don’t change often (css, images, js) Reduce number of requests by storing assets on client’s machine for a defined period of time Not spending time fetching resources Will only affect subsequent visits Test with webpagetest.org

CHALLENGE 2: Bigger File Sizes

Why Reduce Size of Resources Smaller the resource = the faster it will load Get files to the browser as fast as possible so it can start building the page CHALLENGE 2: Bigger File Sizes

Three Ways to Reduce File Sizes Images Right Size Right Format Compression Minification Gzip CHALLENGE 2: Bigger File Sizes

Image Compression Images count for just over 63% of page weight CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images

Choosing the right file format CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images

Serving the right size CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images Don’t serve a 500x500 image intended as a 150x150 thumbnail

Image Compression Caveat: Strips meta data CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images Lossless compression allows original image to be perfectly reconstructed from compressed data. Lossy compression reconstructs an approximation of original data

Image Compression CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images 69% savings (right) in compressed png. No perceptual difference in quality. tinypng.com/

Image Compression CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Images Tools Popular web tools Plugins for wp/drupal Task runners

Minification HTML/CSS/JS Dev Code Human readability, comments, whitespace Minified Code Remove extra characters, comments, whitespace CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Minification

Minified: 150 characters. Reduced by 63% Source: Google Dev Development: 406 Characters

Minification HTML/CSS/JS Context Matters HTML tags Combining CSS rules CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Minification

Minification HTML/CSS/JS Tools Web based Task runner Plugins for CMS CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > Minification

GZIP Can be applied to any type of data Performs best on text-based assets: css, js, html Compression rates 70-90% for larger files. Little to no benefit for images Modern browsers support GZIP compression CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > GZIP

GZIP Implementation depends on server configuration. Ask your host Apache can be done via.htaccess CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > GZIP

GZIP CHALLENGE 2: Bigger File Sizes > Reducing File Sizes > GZIP LibrarySizeCompressed size Compression ratio jquery js 276 KB 82 KB 70% jquery min.js 94 KB 33 KB 65% angular js 729 KB 182 KB 75% angular min.js 101 KB 37 KB 63% bootstrap css 118 KB 18 KB 85% bootstrap min.css 98 KB 17 KB 83% foundation-5.css 186 KB 22 KB 88% foundation-5.min.css 146 KB 18 KB 88%

Reducing Page Weight Notes We talked about image and text compression Do an audit of the different content types you serve your clients and consider what kinds of content-specific optimizations you can apply PDFs, Audio, Video can be compressed too! CHALLENGE 2: Bigger File Sizes > Reducing File Sizes

CHALLENGE 3: Improving Perceived Performance

How we load resources matters just as much as how many resources we’re loading. ​ Scott Jehl, Filament Group CHALLENGE 3: Improving Perceived Performance

What is it? Techniques used so far improve total load time Perceived performance is more important to user experience “Critical” content loaded first CHALLENGE 3: Improving Perceived Performance

What is critical? Above the fold CHALLENGE 3: Improving Perceived Performance

Two Ways to Improve Perceived Performance Deferring non-critical JS/CSS Identifying critical css – automated tools Identifying critical js – done manually Lazy Loading below the fold images CHALLENGE 3: Improving Perceived Performance

What is critical? Above the fold CHALLENGE 3: Improving Perceived Performance

CHALLENGE 4: Latency

What is it? CHALLENGE 4: Latency

CDN CHALLENGE 4: Latency

How does a CDN work? CHALLENGE 4: Latency

Summary Reducing Number of HTTP Requests Resource Audit Image Sprites JS/CSS Concat Keep Alive Cache static files Managing Bigger File Sizes Image Compression Minification GZIP Improving Perceived Perf Defer non-critical Lazy Loading Latency CDN

Improve. Test. Repeat.

Further Reading Page Speed and Dev Tools tools.pingdom.com/fpt/ developers.google.com/speed/ pagespeed/insights/ developers.google.com/speed/ pagespeed/insights/ Additional Reference developers.google.com/web/ fundamentals/performance/ developers.google.com/web/ fundamentals/performance/ gtmetrix.com/why-use-a-cdn.html varvy.com/pagespeed/ performance-rwd.html performance-rwd.html and-js.html and-js.html v=whGwm0Lky2s v=whGwm0Lky2s Builtwith.com What Your Site Costs Users timkadlec.com/2015/03/ what-your-site-costs/ timkadlec.com/2015/03/ what-your-site-costs/ whatdoesmysitecost.com/ Sprites / Image Compression Grumpicon / Grunticon GrumpiconGrunticon Spritecow tinypng.com Performance Budgets Tim Kadlec tinyurl.com/hqywuk5tinyurl.com/hqywuk5 Etsy codeascraft.com/codeascraft.com/ Smashing Mag tinyurl.com/haghregtinyurl.com/haghreg HTML5 Rocks features/performancewww.html5rocks.com/en/ features/performance Brad Frost Perf Budget Builder bradfrost.com/blog/post/performance-budget- builder/ bradfrost.com/blog/post/performance-budget- builder/

Thank You! Questions?