Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hyperlight Websites - Chris Zacharias

47 views

Published on

The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.

No matter how well you optimize, there is no better way than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.

Published in: Internet
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Hyperlight Websites - Chris Zacharias

  1. 1. Chris Zacharias Hyper-Light Websites CEO, FOUNDER @ chris@imgix.com @zacman85 FITC Spotlight: Web Performance
  2. 2. “If they can build an entire Quake clone1 in LESS than 100KB, WHY can’t we get YouTube to load in under 1MB?” 1. https://en.wikipedia.org/wiki/.kkrieger Mike Solomon Early engineer at YouTube.
  3. 3. YouTube Feather A hyper-light version of YouTube, back in 2010. Constraints • Start the video as fast as possible. • Maintain >80% of the user experience. • Use the latest technologies (circa 2010). • Make as few requests as possible.
  4. 4. Results • 98KB for “everything but the video”. • 14 total requests from 3 domains. • First production HTML5 video player. • Opened up new regions around the world. YouTube Feather A hyper-light version of YouTube, back in 2010.
  5. 5. High latency environments are EVERYWHERE, even to this day.
  6. 6. A hyper-light website is a RECONCEPTION of a web-based user interface designed for the purposes of pushing the limits of performance.
  7. 7. Buildinga hyper-lightwebsite.
  8. 8. The goal is to provide an experience, roughly consistent with the real thing, that can be delivered to an end user AS FAST AS POSSIBLE.
  9. 9. Steps to build a hyper-light website: 1. Identify the most active page on your website. 2. Build a new version of that page from scratch with a singular focus on optimization. 3. Assemble all of the HTML, CSS and Javascript into a single “hyper-light” HTML page. 4. Serve the hyper-light page behind a CDN with compression and HTTP/2 pipelining. 5. Measure both the original page, uncached, and the hyper-light page. 6. Analyze the results.
  10. 10. Things you want to KEEP doing: • Serve real content, preferably dynamically. • Responsive layouts (at minimum, common breakpoints). • Responsive images. • Sprites, in some cases. • SVG graphics (optimized responsibly). • Accessibility.
  11. 11. Things you want to STOP doing: (for the purposes of this exercise) • Ads and social media trackers. • CMS integrations. • Javascript libraries. • CSS layouts via frameworks. • Lazy loading content (except images). • Data URIs, unless absolutely certain. • Javascript and CSS compilation. • Custom web fonts.
  12. 12. Arealworldexample.
  13. 13. Walking through an example
  14. 14. Original Requests 181 Domains 50 Bandwidth Total Content Size 8.7 MBs Total Transfer Size 5.9 MBs Non-Image Content 2.0 MBs Image Content 3.9 MBs Billed By CDN 4.9 MBs Response Times (First Paint —> Fully Loaded) 2G 22 sec —-—> 2 min 47 sec 3G 6.4 sec ——> 53 sec Hi-Speed 1.5 sec ——-> 16.7 sec
  15. 15. Hyper-Light
  16. 16. Walking through an example Original
  17. 17. Original Hyper-Light Requests 181 🥁 Domains 50 Bandwidth Total Content Size 8.7 MBs Total Transfer Size 5.9 MBs Non-Images Content 2.0 MBs Image Content 3.9 MBs Billed By CDN 4.9 MBs Response Times (First Paint —> Fully Loaded) 2G 22 sec —-—> 2 min 47 sec 3G 6.4 sec ——> 53 sec Hi-Speed 1.5 sec ——-> 16.7 sec
  18. 18. Original Hyper-Light Requests 181 32 -82.3% Domains 50 2 -96.0% Bandwidth Total Content Size 8.7 MBs Total Transfer Size 5.9 MBs Non-Images Content 2.0 MBs Image Content 3.9 MBs Billed By CDN 4.9 MBs Response Times (First Paint —> Fully Loaded) 2G 22 sec —-—> 2 min 47 sec 3G 6.4 sec ——> 53 sec Hi-Speed 1.5 sec ——-> 16.7 sec
  19. 19. Original Hyper-Light Requests 181 32 -82.3% Domains 50 2 -96.0% Bandwidth Total Content Size 8.7 MBs 1.1 MBs -87.4% Total Transfer Size 5.9 MBs 1.0 MBs -83.1% Non-Images Content 2.0 MBs 19 KBs -99.1% Image Content 3.9 MBs 999.4 KBs -74.4% Billed By CDN 4.9 MBs 1.0 MBs -79.6% Response Times (First Paint —> Fully Loaded) 2G 22 sec —-—> 2 min 47 sec 3G 6.4 sec ——> 53 sec Hi-Speed 1.5 sec ——-> 16.7 sec
  20. 20. Original Hyper-Light Requests 181 32 -82.3% Domains 50 2 -96.0% Bandwidth Total Content Size 8.7 MBs 1.1 MBs -87.4% Total Transfer Size 5.9 MBs 1.0 MBs -83.1% Non-Images Content 2.0 MBs 19 KBs -99.1% Image Content 3.9 MBs 999.4 KBs -74.4% Billed By CDN 4.9 MBs 1.0 MBs -79.6% Response Times (First Paint —> Fully Loaded) 2G 22 sec —-—> 2 min 47 sec 773 msec ——-> 11 sec 15.7x 3G 6.4 sec ——> 53 sec 556 msec ——> 3.7 sec 14.3x Hi-Speed 1.5 sec ——-> 16.7 sec 435 msec ——> 621 msec 26.9x
  21. 21. Some improvements!
  22. 22. Original Improved Hyper-Light Requests 181 🥁 32 Domains 50 2 Bandwidth Total Content Size 8.7 MBs 1.1 MBs Total Transfer Size 5.9 MBs 1.0 MBs Non-Images 2.0 MBs 19 KBs Image Content 3.9 MBs 999.4 KBs Billed By CDN 4.9 MBs 1.0 MBs Response Times (First Paint —> Fully Loaded) 2G 22 sec —> 2 min 47 sec 773 msec —-> 11 sec 3G 6.4 sec —> 53 sec 556 msec —> 3.7 sec Hi-Speed 1.5 sec —-> 16.7 sec 435 msec —> 621 msec
  23. 23. Original Improved Hyper-Light Requests 181 234 32 Domains 50 74 2 Bandwidth Total Content Size 8.7 MBs 1.1 MBs Total Transfer Size 5.9 MBs 1.0 MBs Non-Images 2.0 MBs 19 KBs Image Content 3.9 MBs 999.4 KBs Billed By CDN 4.9 MBs 1.0 MBs Response Times (First Paint —> Fully Loaded) 2G 22 sec —> 2 min 47 sec 773 msec —-> 11 sec 3G 6.4 sec —> 53 sec 556 msec —> 3.7 sec Hi-Speed 1.5 sec —-> 16.7 sec 435 msec —> 621 msec
  24. 24. Original Improved Hyper-Light Requests 181 234 32 Domains 50 74 2 Bandwidth Total Content Size 8.7 MBs 6.2 MBs 1.1 MBs Total Transfer Size 5.9 MBs 2.8 MBs 1.0 MBs Non-Images 2.0 MBs 1.9 MBs 19 KBs Image Content 3.9 MBs 993.5 KBs 999.4 KBs Billed By CDN 4.9 MBs 1 MBs 1.0 MBs Response Times (First Paint —> Fully Loaded) 2G 22 sec —> 2 min 47 sec 773 msec —-> 11 sec 3G 6.4 sec —> 53 sec 556 msec —> 3.7 sec Hi-Speed 1.5 sec —-> 16.7 sec 435 msec —> 621 msec
  25. 25. Original Improved Hyper-Light Requests 181 234 32 Domains 50 74 2 Bandwidth Total Content Size 8.7 MBs 6.2 MBs 1.1 MBs Total Transfer Size 5.9 MBs 2.8 MBs 1.0 MBs Non-Images 2.0 MBs 1.9 MBs 19 KBs Image Content 3.9 MBs 993.5 KBs 999.4 KBs Billed By CDN 4.9 MBs 1 MBs 1.0 MBs Response Times (First Paint —> Fully Loaded) 2G 22 sec —> 2 min 47 sec 7.6 sec —-> 1 min 12 sec 773 msec —-> 11 sec 3G 6.4 sec —> 53 sec 2.7 sec —> 19.3 sec 556 msec —> 3.7 sec Hi-Speed 1.5 sec —-> 16.7 sec 627 msec —> 9.7 sec 435 msec —> 621 msec
  26. 26. Techniquesyoushoulduse.
  27. 27. Inline as much as possible server-side. <!DOCTYPE html> <html> <head> <title>Car and Driver</title> <style type=“text/css”> {% include “styles.css” %} </style> <script type=“application/javascript”> {% include “main.js” %} </script> </head> <body> {% include “sprite.svg” %} <div>Hello World</div> </body> </html>
  28. 28. <!DOCTYPE html> <html> <head> <title>Car and Driver</title> <style type=“text/css”> {% include “styles.css” %} </style> <script type=“application/javascript”> {% include “main.js” %} </script> </head> <body> {% include “sprite.svg” %} <div>Hello World</div> </body> </html> Inline as much as possible server-side.
  29. 29. Use HTML5 semantic elements. <!DOCTYPE html> <html> <head> <title>Car and Driver</title> </head> <body> <header> <nav></nav> </header> <section> <aside> </aside> <article> Hello World! </article> </section> <footer> </footer> </body> </html>
  30. 30. <!DOCTYPE html> <html> <head> <title>Car and Driver</title> </head> <body> <header> <nav></nav> </header> <section> <aside> </aside> <article> Hello World! </article> </section> <footer> </footer> </body> </html> 95% of users Use HTML5 semantic elements.
  31. 31. Relative layout using root em sizing. <style type=“text/css”> html { font-size: 16px; /* root ems */ } h1 { font-size: 2rem; /* 32 px */ } img.splash { width: 50rem; /* 800 px */ height: 40rem; /* 600 px */ } </style>
  32. 32. Relative layout using root em sizing. 96% of users <style type=“text/css”> html { font-size: 16px; /* root ems */ } h1 { font-size: 2rem; /* 32 px */ } img.splash { width: 50rem; /* 800 px */ height: 40rem; /* 600 px */ } </style>
  33. 33. CSS grids. 1. https://material.io/design/layout/responsive-layout-grid.html <html> <head> <style type=“text/css”> #body { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; align-items: top; } header { grid-column: 1 / span 3; } article { grid-column: 1 / span 2; } </style> </head> <body> <header>Header</header> <article>Content</article> <aside>Side</aside> </body> </html> Header Side Content
  34. 34. CSS grids. 1. https://material.io/design/layout/responsive-layout-grid.html <html> <head> <style type=“text/css”> #body { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; align-items: top; } header { grid-column: 1 / span 3; } article { grid-column: 1 / span 2; } </style> </head> <body> <header>Header</header> <article>Content</article> <aside>Side</aside> </body> </html> Header Side Content 87% of users
  35. 35. <html> <head> <template id=“article-template”> <article> <h1>Title</h1> <p>Description</p> </article> </template> <script type=“text/javascript”> function addArticle(title, description) { var template = document.getElementById(“article-template”); var clone = document.importNode(template.content, true); /* Make changes to the clone’s DOM. */ document.getElementById(“articles”).appendChild(clone); } </script> </head> <body> <section id=“articles”></section> </body> </html> HTML templates.
  36. 36. <html> <head> <template id=“article-template”> <article> <h1>Title</h1> <p>Description</p> </article> </template> <script type=“text/javascript”> function addArticle(title, description) { var template = document.getElementById(“article-template”); var clone = document.importNode(template.content, true); /* Make changes to the clone’s DOM. */ document.getElementById(“articles”).appendChild(clone); } </script> </head> <body> <section id=“articles”></section> </body> </html> HTML templates. 89% of users
  37. 37. <style type=“text/css”> #search-form { display: none; } #search-form:target { display: block; } </style> … <a href=“#search-form”>Show Search</a> <form id=“search-form”> <input type=“text” name=“search-query”> <input type=“submit” value=“Search”> <a href=“#”>Cancel</a> </form> State transitions using the CSS :target selector
  38. 38. <style type=“text/css”> #search-form { display: none; } #search-form:target { display: block; } </style> … <a href=“#search-form”>Show Search</a> <form id=“search-form”> <input type=“text” name=“search-query”> <input type=“submit” value=“Search”> <a href=“#”>Cancel</a> </form> Fragment identifier changes WILL get added to the browser history. ⚠ State transitions using the CSS :target selector
  39. 39. <style type=“text/css”> #search-form { display: none; } #search-form:target { display: block; } </style> … <a href=“#search-form”>Show Search</a> <form id=“search-form”> <input type=“text” name=“search-query”> <input type=“submit” value=“Search”> <a href=“#”>Cancel</a> </form> Fragment identifier changes WILL get added to the browser history. ⚠ State transitions using the CSS :target selector 96% of users
  40. 40. Replacing SVG with HTML and CSS. Original 2 x SVG arrow graphics = ~5KBs Hyper-light Angle quotes + border-radius = 1KB <style type=“text/css”> .arrow { background-color: #4D80AB; border-radius: 50%; color: white; font-weight: bold; height: 1rem; width: 1rem; } … </style> … <a href=“#prev” class=“arrow”>&lasquo;</a> <span class=“pages”><em>1</em> of <em>5</em></span> <a href=“#next” class=“arrow”>&rasquo;</a>
  41. 41. Replacing SVG with HTML and CSS. Original 2 x SVG arrow graphics = ~5KBs Hyper-light Angle quotes + border-radius = 1KB <style type=“text/css”> .arrow { background-color: #4D80AB; border-radius: 50%; color: white; font-weight: bold; height: 1rem; width: 1rem; } … </style> … <a href=“#prev” class=“arrow”>&lasquo;</a> <span class=“pages”><em>1</em> of <em>5</em></span> <a href=“#next” class=“arrow”>&rasquo;</a> 93% of users
  42. 42. Using an SVG sprite with fragment identifiers. <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="icon-comments" viewBox="380 0 20 20"> <title>Comments</title> <path d=“M394.57,4.19H385a1.2,…” style=“fill: #1383b3;” /> </symbol> … </svg> … <svg><use xlink:href=“#icon-comments” /></svg> 1. https://css-tricks.com/svg-symbol-good-choice-icons/
  43. 43. Using an SVG sprite with fragment identifiers. <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <symbol id="icon-comments" viewBox="380 0 20 20"> <title>Comments</title> <path d=“M394.57,4.19H385a1.2,…” style=“fill: #1383b3;” /> </symbol> … </svg> … <svg><use xlink:href=“#icon-comments” /></svg> 1. https://css-tricks.com/svg-symbol-good-choice-icons/ 91% of users
  44. 44. Image-based sprites. <style type=“text/css”> .car-image { background-image: url(/car-sprite.jpg); background-size: 100%; height: 60px; width: 140px; } #sports-car.car-image { background-position: -280px -120px; } </style> <div id=“sports-car” class=“car-image”></div>
  45. 45. In most cases, HTTP/2 pipelining is the better approach. ⚠ Image-based sprites. <style type=“text/css”> .car-image { background-image: url(/car-sprite.jpg); background-size: 100%; height: 60px; width: 140px; } #sports-car.car-image { background-position: -280px -120px; } </style> <div id=“sports-car” class=“car-image”></div>
  46. 46. In most cases, HTTP/2 pipelining is the better approach. ⚠ Image-based sprites. <style type=“text/css”> .car-image { background-image: url(/car-sprite.jpg); background-size: 100%; height: 60px; width: 140px; } #sports-car.car-image { background-position: -280px -120px; } </style> <div id=“sports-car” class=“car-image”></div> 96% of users
  47. 47. <img src=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress” srcset=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress 1x, https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress&dpr=2 2x” width=“200” alt=“Honda”> Responsive images using srcset.
  48. 48. <img src=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress” srcset=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress 1x, https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress&dpr=2 2x” width=“200” alt=“Honda”> Responsive images using srcset.
  49. 49. <img src=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress” srcset=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress 1x, https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress&dpr=2 2x” width=“200” alt=“Honda”> Responsive images using srcset.
  50. 50. <img src=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress” srcset=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress 1x, https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress&dpr=2 2x” width=“200” alt=“Honda”> Responsive images using srcset.
  51. 51. <img src=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress” srcset=“https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress 1x, https://cnd.imgix.net/honda.jpg?w=200&fm=pjpg&auto=format,compress&dpr=2 2x” width=“200” alt=“Honda”> Responsive images using srcset. 88% of users
  52. 52. GZIP compression. # A simple nginx.conf with gzip turned on. server { listen 8080; server_name localhost; gzip on; gzip_comp_level 9; location / { root /usr/share/nginx/html; index index.html index.htm; } }
  53. 53. GZIP compression. # A simple nginx.conf with gzip turned on. server { listen 8080; server_name localhost; gzip on; gzip_comp_level 9; location / { root /usr/share/nginx/html; index index.html index.htm; } } Make sure to vary on Accept-Encoding in your caching layers. ⚠
  54. 54. 99% of users GZIP compression. # A simple nginx.conf with gzip turned on. server { listen 8080; server_name localhost; gzip on; gzip_comp_level 9; location / { root /usr/share/nginx/html; index index.html index.htm; } } Make sure to vary on Accept-Encoding in your caching layers. ⚠
  55. 55. Experiment with Brotli. tom@servo:/www$ cd /data/repos && git clone https://github.com/google/brotli.git tom@servo:/www$ sudo ln -s /data/repos/brotli/python/bro.py /usr/local/bin/bro.py tom@servo:/www$ bro.py -i index.html -o index.html.br
  56. 56. Experiment with Brotli. tom@servo:/www$ cd /data/repos && git clone https://github.com/google/brotli.git tom@servo:/www$ sudo ln -s /data/repos/brotli/python/bro.py /usr/local/bin/bro.py tom@servo:/www$ bro.py -i index.html -o index.html.br
  57. 57. Experiment with Brotli. tom@servo:/www$ cd /data/repos && git clone https://github.com/google/brotli.git tom@servo:/www$ sudo ln -s /data/repos/brotli/python/bro.py /usr/local/bin/bro.py tom@servo:/www$ bro.py -i index.html -o index.html.br 84% of users
  58. 58. HTTP/2 pipelining.
  59. 59. HTTP/2 pipelining.
  60. 60. HTTP/2 pipelining. 84% of users
  61. 61. Measuringandactingonthedata.
  62. 62. Measuring the results using Sitespeed. tom@servo:/data$ docker run -v “$(pwd)”:/sitespeed.io > sitespeedio/sitespeed.io:7.3.6 https://www.caranddriver.com
  63. 63. Zeroing in on the biggest wins. 15 images requests ~600KBs 1 image request ~50KBs
  64. 64. Zeroing in on the biggest wins. 15 images requests ~600KBs 1 image request ~50KBs An SVG sprite sheet would be even better at ~15KBs.
  65. 65. • Repeat the process with other pages. • Run a 1% test in the wild. • Build a performance budget. • Run Sitespeed (or similar) regularly. { "browsertime.pageSummary": [{ "metric": "statistics.timings.firstPaint.median", "max": 1500 }], "pagexray.pageSummary": [{ "metric": "transferSize", "max": 1000000 }, { "metric": "requests", "max": 45 } } 1. https://www.sitespeed.io/documentation/sitespeed.io/performance-budget/ Taking the next steps…
  66. 66. Source code: https://github.com/zacman85/hyperlight-websites Live demo: http://hlw.chriszacharias.com Special thanks to Miguel Cardona. Thankyou! Chris Zacharias CEO, FOUNDER @ chris@imgix.com @zacman85

×