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.

Cheat Sheet to a Lean Website

1,653 views

Published on

https://internetdagarna.se/program/faster_than_lightning/#cheat-sheet-to-a-lean-website

Published in: Internet

Cheat Sheet to a Lean Website

  1. 1. CHEAT SHEET TO 
 A LEANW EBSITE
  2. 2. HEJ KOMPISAR @bbinto | #leanwebsites
  3. 3. DISCLAIMER! @bbinto | #leanwebsites
  4. 4. @bbinto | #leanwebsites
  5. 5. SOME AUTHOR STATS Time of the day Days
  6. 6. SHAPE A PERFORMANCE CULTURE @bbinto | #leanwebsites
  7. 7. SHAPE A PERFORMANCE CULTURE MAKE EVERYBODY CARE ABOUT PERFORMANCE 
 BECAUSE IT IS EVERYBODY’S BUSINESS
  8. 8. SHAPE A PERFORMANCE CULTURE FEEL EMPOWERED AND ENCOURAGED 
 TO SAY “NO”
  9. 9. SHAPE A PERFORMANCE CULTURE CELEBRATE SUCCESS!
  10. 10. SHAPE A PERFORMANCE CULTURE
  11. 11. SHAPE A PERFORMANCE CULTURE
  12. 12. SHAPE A PERFORMANCE CULTURE
  13. 13. PERFORMANCE =
 PERCEPTION AND RESPECT @bbinto | #leanwebsites
  14. 14. PERFORMANCE IS ABOUT RESPECT HOW LONG DOES ITTAKE MY USERTO START INTERACTING WITH MY PAGE?
  15. 15. –Ilya Grigorik “Treat speed as a feature” PERFORMANCE IS ABOUT RESPECT
  16. 16. PERFORMANCE IS ABOUT RESPECT OPTIMIZE FROM A USER’S PERSPECTIVE
  17. 17. WIREFRAMING FOR PERFORMANCE @bbinto | #leanwebsites
  18. 18. THE PERFORMANCE 
 POINT SYSTEM WIREFRAMING FOR PERFORMANCE
  19. 19. WIREFRAMING FOR PERFORMANCE
  20. 20. WIREFRAMING FOR PERFORMANCE
  21. 21. MEASURABLE PERFORMANCE MODULES 
 (MPM) WIREFRAMING FOR PERFORMANCE
  22. 22. WIREFRAMING FOR PERFORMANCE
  23. 23. MEASURE FIRST
 THEN OPTIMIZE 
 (AND REPEAT) @bbinto | #leanwebsites
  24. 24. MEASURE FIRST, THEN OPTIMIZE PERFORMANCE BUDGET
  25. 25. – Aristophanes “The wise learn many things from their enemies.” MEASURE FIRST, THEN OPTIMIZE
  26. 26. MEASURE FIRST, THEN OPTIMIZE
  27. 27. Speed Index 
 the average time at which visible parts of the page are displayed MEASURE FIRST, THEN OPTIMIZE
  28. 28. PageSpeed 
 score that goes from 0 to 100 points where a higher score is better MEASURE FIRST, THEN OPTIMIZE
  29. 29. MEASURE FIRST, THEN OPTIMIZE
  30. 30. THE BROWSER @bbinto | #leanwebsites
  31. 31. THE BROWSER
  32. 32. DETERMINEYOUR CRITICAL RENDERING PATH @bbinto | #leanwebsites
  33. 33. DETERMINEYOUR CRP
  34. 34. DETERMINEYOUR CRP
  35. 35. DETERMINEYOUR CRP
  36. 36. DETERMINEYOUR CRP
  37. 37. DETERMINEYOUR CRP
  38. 38. TEASER ALERT! @bbinto | #leanwebsites
  39. 39. DETERMINEYOUR CRP
  40. 40. DETERMINEYOUR CRP
  41. 41. • Keep HTML as clean as possible • Clean up your DOM by removing unused elements • Order matters • Don't put third-party features—such as scripts or web fonts—in your critical path. DETERMINEYOUR CRP
  42. 42. DETERMINEYOUR CRP 14KB RULE SERVETHE MOST IMPORTANT CONTENT FIRST
  43. 43. Follow the 14KB rule Focus on the above the fold content first, and load other assets afterwards. • CSS is critical. Remove render-blocking CSS by using the media attribute (remembering, however, that the file will still be downloaded) • The most important styles, especially above the fold styles, should go inline DETERMINEYOUR CRP
  44. 44. • Unblock the parser by using attributes such as defer or async for JavaScript tags where possible • Put scripts at the bottom of the page to avoid render blocking DETERMINEYOUR CRP
  45. 45. REDUCE BYTES @bbinto | #leanwebsites
  46. 46. • Minify your page assets such as HTML, CSS and JavaScript • The biggest optimization results can be achieved for images • Use image formats such as PNG, GIF, JPEG, SVG or even encode the image into a base64 format (data URI) for the web • Avoid custom web fonts, using them only if really necessary (and consider a web font loader) • Use Gzip techniques, to reduce the file size sent over the wire REDUCE BYTES
  47. 47. REDUCE HTTP REQUESTS @bbinto | #leanwebsites
  48. 48. • Concatenate where applicable, to reduce the amount of HTTP requests but be smart about it • Don't blindly use JavaScript libraries and frameworks just because they are convenient • Use image sprites to reduce HTTP requests • For small images, consider using the data URI technique to remove additional HTTP requests REDUCE HTTP REQUESTS
  49. 49. FIGHT LATENCY @bbinto | #leanwebsites
  50. 50. LATENCY is the time it takes for the content to be requested by, and sent to your browser @bbinto | #leanwebsites
  51. 51. • Reduce HTTP requests as much as possible • The highest latency occurs on mobile devices • Reduce the amount of polling on your page • Send the most important styles down the wire as soon as you can (14KB rule) FIGHT LATENCY
  52. 52. • Remove redirects (DNS lookups) where possible • Use the keep-alive header that keepsTCP connections open • Use offline storage techniques such as appcache, local storage,Web SQL database, or IndexedDB • Use content delivery networks to avoid high latency • Use HTTP/2 (and “formerly” SPDY) provide efficient use of network resources and reduced latency FIGHT LATENCY
  53. 53. MAKE FRIENDS WITHTHE SERVER
 (ORTHE PERSON WHO MANAGESTHEM) @bbinto | #leanwebsites
  54. 54. MAKE FRIENDS WITHTHE SERVER GZIP UNCOMPRESSED ASSETS SUCH AS HTML, XML, JSON AND CSS
  55. 55. MAKE FRIENDS WITHTHE SERVER http://checkgzipcompression.com
  56. 56. MAKE FRIENDS WITHTHE SERVER HAVEYOU CACHEDYET?
  57. 57. MAKE FRIENDS WITHTHE SERVER
  58. 58. TAMETHE MOBILE BEAST @bbinto | #leanwebsites
  59. 59. • Don't make the user pay for your bad performance • More HTTP requests and DNS lookups will result in higher latency • Weigh the advantages and disadvantages of different mobile strategies. Choose between mdot, RWD, RESS or RESS with ESI • RESS with ESI redirect offers an additional advantage over regular server-side redirects TAMETHE MOBILE BEAST
  60. 60. • Remember, mobile devices are powered by batteries • Consider offline storage techniques • Test your mobile experience on real devices, as much as possible (including collecting RUM) TAMETHE MOBILE BEAST
  61. 61. AUTOMATEYOUR PERFORMANCE ROUTINES @bbinto | #leanwebsites
  62. 62. AUTOMATEYOUR PERFORMANCE ROUTINES • Use task runners such as Grunt, Gulp, Maven or Ant • Include task runners and performance APIs in your continuous integration system
  63. 63. AUTOMATEYOUR PERFORMANCE ROUTINES
  64. 64. AVOIDTHEYO-YO-EFFECT @bbinto | #leanwebsites
  65. 65. AVOIDTHEYO-YO EFFECT • Constant measuring and monitoring of your website's performance will help you identify performance bottlenecks and deal with them • Automation can be incredibly helpful in fighting the yo-yo effect by triggering appropriate warnings
  66. 66. –Larry Page “Browsing should be as simple and fast 
 as turning a page in a magazine.”
  67. 67. ÄNDE leanwebsites.bbinto.m e 25% off eBook @bbinto | #leanwebsites

×