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

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

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

4. Web Page Performance www.webpagetest.org/result/160504_ET_1A6P/1/details/

5. 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

6. Why Performance Matters www.akamai.com/us/en/web-and-mobile-performance.jsp 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

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

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

9. CHALLENGE 1: Number of HTTP Requests

10. 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%

11. 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

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

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

14. 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?

15. 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

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

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

18. 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 }

19. CHALLENGE 1: Number of HTTP Requests > Reducing Requests Keep Alive http://stackoverflow.com/questions/12550973/http-header-keep-alive-misunderstanding

20. 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

21. CHALLENGE 2: Bigger File Sizes

22. 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

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

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

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

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

27. 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

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

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

30. 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

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

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

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

34. 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

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

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

37. 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

38. CHALLENGE 3: Improving Perceived Performance

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

40. 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

41. What is critical? Above the fold CHALLENGE 3: Improving Perceived Performance https://www.filamentgroup.com/lab/weight-wait.html

42. 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

43. What is critical? Above the fold CHALLENGE 3: Improving Perceived Performance https://www.filamentgroup.com/lab/weight-wait.html

44. CHALLENGE 4: Latency

45. What is it? CHALLENGE 4: Latency https://www.keycdn.com/support/what-is-latency/

46. CDN CHALLENGE 4: Latency https://gtmetrix.com/why-use-a-cdn.html

47. How does a CDN work? CHALLENGE 4: Latency https://gtmetrix.com/why-use-a-cdn.html

48. 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

49. Improve. Test. Repeat.

50. Further Reading Page Speed and Dev Tools tools.pingdom.com/fpt/ developers.google.com/speed/ pagespeed/insights/ developers.google.com/speed/ pagespeed/insights/ www.webpagetest.org/ www.browserstack.com Additional Reference developers.google.com/web/ fundamentals/performance/ developers.google.com/web/ fundamentals/performance/ gtmetrix.com/why-use-a-cdn.html varvy.com/pagespeed/ www.filamentgroup.com/lab/ performance-rwd.html www.filamentgroup.com/lab/ performance-rwd.html www.filamentgroup.com/lab/load-css- and-js.html www.filamentgroup.com/lab/load-css- and-js.html www.youtube.com/watch? v=whGwm0Lky2s www.youtube.com/watch? 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 www.html5rocks.com/en/ 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/

51. Thank You! Questions?