An introduction to Web Performance

A brief introduction to web site performance. What is it, why does it matter and some current data for how well the UC Santa Cruz home page currently performs.

Transcript

1. Down the rabbit hole of web performance July 2, 2015 ITS Web Developers Meet-up
2. What is web performance?
3. –Ilya Grigorik, Google [1] “Performance is not just milliseconds, frames, and megabytes. It's also how these ,milliseconds, frames, and megabytes translate to how the user perceives the application.”
4. A combination of server and content optimizations that result in a web page rendering as fast or faster than users expect.
5. Why does it matter?
6. "Google Testing 'Slow To Load' Warning Label In Mobile Search Results" –AJ Ghergich https://twitter.com/SEO/status/613350043748319232
7. On average, it took 15 seconds for ucsc.edu to load in China in June 2015
8. What do users expect?
9. What do users expect? How do users behave?
10. –Steve Souders [6] How do users behave?
11. How do users behave? –Raelene Wilson [8] "According to Kissmetrics, nearly half of web users expect a site to load in two seconds or less, and they tend to abandon sites that don’t load within three seconds. A total of 79 per cent of online shoppers who have trouble with site performance won’t return to the site to buy again and about 44% of them would tell a friend if they had a poor experience shopping online." How do users behave?
13. What about accessibility? June 1 - July 1, 2015
14. June 1 - July 1, 2015 What about accessibility?
15. Google Analytics, June 1 - July 1, 2015 18% of traffic from India to the UCSC homepage comes through proxy web browsers.
16. – Wikipedia [7] Opera Mini requests web pages through Opera Software's servers, which process and compress them before sending them to the mobile phone, speeding up transfer by two to three times and dramatically reducing the amount of data transferred, chargeable on many mobile phone data plans. The pre-processing increases compatibility with web pages not designed for mobile phones. However, interactive sites which depend upon the device processing JavaScript do not work properly. Proxy web browsers
17. Why does it matter? • While it is only one of more than 200 metrics used by Google to assign PageRank, they are considering warning users about slow sites. • Slow-loading sites are quickly abandoned by users, possibly forever. • Access to UCSC sites varies across browsers, devices, networks, and countries.
18. Why does it matter? Optimizing web performance is a way of showing empathy for the user, regardless of the circumstances by which they are trying to access the site. Solve for: • hostile browsers • tiny screens • slow connections
19. How is ucsc.edu doing?
20. http://www.webpagetest.org/result/140306_0S_6PV/ Pre-responsive: March 5, 2014 No optimizations, 3 billboards
21. http://www.webpagetest.org/result/150603_EG_YC6/ Baseline: June 3, 2015 No optimizations, 4 billboards
22. http://www.webpagetest.org/result/150603_XF_11M0/ Gzip static assets: June 3, 2015 gzip enabled on static, 4 billboards
23. What about other campuses?
24. http://www.webpagetest.org/result/150702_7H_14N2/ UCLA: July 2, 2015
25. Let's compare http://www.webpagetest.org/result/150603_XF_11M0/ UCSC: June 3, 2015 http://www.webpagetest.org/result/150702_7H_14N2/ UCLA: July 2, 2015
26. Let's compare http://www.webpagetest.org/video/compare.php?tests=150603_XF_11M0-r%3A1-c%3A0%2C150702_7H_14N2-r%3A1-c%3A0&thumbSize=200&ival=100&end=visual
27. Let's compare UCLA website has 20 more HTTP requests, 200 more DOM nodes, and is 2x weight of UCSC website. But the user sees content on UCLA.edu 1.5s sooner.
28. Why?
29. HTTP Headers UCSC: ucsc.css UCLA: main.css
30. • cache-control: tell the browser it doesn't need to re- download this file until [some future date]. • connection: keep the connection between the browser and the server open for additional requests. • gzip: tell the server to zip text files (html, css, javascript) before sending them to the browser to reduce file size in transit. • expires: tell the browser a future date when it should request a new version of this file. HTTP Headers
31. cache-control: coming soon connection: coming soon gzip: Already doing this on static.ucsc.edu; coming soon to other sites expires: coming soon Progress on ucsc.edu
32. What about the page content?
33. Images
34. Images reduce image file size: developer does this responsive images: someday? lazy-load billboard images: coming soon lazy-load images below the fold: someday?
35. Scripts & Styles compress: we remove whitespace and comments from .js and .css files concatenate javascript: not yet move scripts to footer: not yet async javascript files: someday?
36. Scripts & Styles compress: we remove whitespace and comments from .js and .css files concatenate javascript: not yet move scripts to footer: not yet async javascript files: someday? Images reduce image file size: developer does this responsive images: someday? lazy-load billboard images: coming soon lazy-load images below the fold: someday? cache-control: coming soon connection: coming soon gzip: Already doing this on static.ucsc.edu; coming soon to other sites expires: coming soon HTTP Headers
37. How do I get started?
38. How do I get started?
39. How do I get started?
40. How do I get started?
41. How do I get started?
42. How do I get started?
43. How do I get started? 1. Test 2. Low-hanging fruit (server-side config) 3. Image sizes 4. Static asset size, order 5. Rinse, repeat
44. Link-o-rama! 1. Speed, Performance, and Human Perception by Ilya Grigorik 2. Faster Mobile Websites by Dean Hume 3. How fast is fast enough? by Tammy Everts 4. Critical rendering path by Patrick Sexton 5. PageSpeed Insights by Google 6. Design+Performance by Steve Souders 7. Opera Mini (Wikipedia) 8. Why Trying to Get 95+ on Google PageSpeed Insights for Your WordPress Site Will Drive You Mad! by Raelene Wilson 9. Infographic: Loading Time by Kissmetrics 10. Even Faster Websites by Steve Souders
45. Thank you.