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

1. CHEAT SHEET TO
A LEANW
EBSITE

2. HEJ KOMPISAR
@bbinto | #leanwebsites

3. DISCLAIMER!
@bbinto | #leanwebsites

4. @bbinto | #leanwebsites

5. SOME AUTHOR STATS
Time of the day
Days

6. SHAPE A PERFORMANCE
CULTURE
@bbinto | #leanwebsites

7. SHAPE A PERFORMANCE CULTURE
MAKE EVERYBODY CARE ABOUT PERFORMANCE
BECAUSE IT IS EVERYBODY’S BUSINESS

8. SHAPE A PERFORMANCE CULTURE
FEEL EMPOWERED AND ENCOURAGED
TO SAY “NO”

9. SHAPE A PERFORMANCE CULTURE
CELEBRATE SUCCESS!

10. SHAPE A PERFORMANCE CULTURE

11. SHAPE A PERFORMANCE CULTURE

12. SHAPE A PERFORMANCE CULTURE

13. PERFORMANCE =
PERCEPTION AND RESPECT
@bbinto | #leanwebsites

14. PERFORMANCE IS ABOUT RESPECT
HOW LONG DOES ITTAKE MY USERTO
START INTERACTING WITH MY PAGE?

15. –Ilya Grigorik
“Treat speed as a feature”
PERFORMANCE IS ABOUT RESPECT

16. PERFORMANCE IS ABOUT RESPECT
OPTIMIZE FROM A USER’S PERSPECTIVE

17. WIREFRAMING FOR
PERFORMANCE
@bbinto | #leanwebsites

18. THE PERFORMANCE
POINT SYSTEM
WIREFRAMING FOR PERFORMANCE

19. WIREFRAMING FOR PERFORMANCE

20. WIREFRAMING FOR PERFORMANCE

27. MEASURABLE PERFORMANCE MODULES
(MPM)
WIREFRAMING FOR PERFORMANCE

28. WIREFRAMING FOR PERFORMANCE

32. MEASURE FIRST
THEN OPTIMIZE
(AND REPEAT)
@bbinto | #leanwebsites

33. MEASURE FIRST, THEN OPTIMIZE
PERFORMANCE BUDGET

34. – Aristophanes
“The wise learn many things
from their enemies.”
MEASURE FIRST, THEN OPTIMIZE

35. MEASURE FIRST, THEN OPTIMIZE

36. Speed Index
the average time at which visible parts of the page are displayed
MEASURE FIRST, THEN OPTIMIZE

37. PageSpeed
score that goes from 0 to 100 points where a higher score is
better
MEASURE FIRST, THEN OPTIMIZE

38. MEASURE FIRST, THEN OPTIMIZE

39. THE BROWSER
@bbinto | #leanwebsites

40. THE BROWSER

41. DETERMINEYOUR CRITICAL
RENDERING PATH
@bbinto | #leanwebsites

42. DETERMINEYOUR CRP

43. DETERMINEYOUR CRP

44. DETERMINEYOUR CRP

45. DETERMINEYOUR CRP

46. DETERMINEYOUR CRP

47. TEASER ALERT!
@bbinto | #leanwebsites

48. DETERMINEYOUR CRP

49. DETERMINEYOUR CRP

50. • 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

51. DETERMINEYOUR CRP
14KB RULE
SERVETHE MOST IMPORTANT CONTENT FIRST

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

53. • 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

54. REDUCE BYTES
@bbinto | #leanwebsites

55. • 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

56. REDUCE HTTP REQUESTS
@bbinto | #leanwebsites

57. • 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

58. FIGHT LATENCY
@bbinto | #leanwebsites

59. LATENCY
is the time it takes for the content to be requested
by, and sent to your browser
@bbinto | #leanwebsites

60. • 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

61. • 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

62. MAKE FRIENDS WITHTHE
SERVER
(ORTHE PERSON WHO MANAGESTHEM)
@bbinto | #leanwebsites

63. MAKE FRIENDS WITHTHE SERVER
GZIP UNCOMPRESSED ASSETS SUCH
AS HTML, XML, JSON AND CSS

64. MAKE FRIENDS WITHTHE SERVER
http://checkgzipcompression.com

65. MAKE FRIENDS WITHTHE SERVER
HAVEYOU CACHEDYET?

66. MAKE FRIENDS WITHTHE SERVER

67. TAMETHE MOBILE BEAST
@bbinto | #leanwebsites

68. • 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

69. • 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

70. AUTOMATEYOUR
PERFORMANCE ROUTINES
@bbinto | #leanwebsites

71. AUTOMATEYOUR PERFORMANCE ROUTINES
• Use task runners such as Grunt, Gulp, Maven or
Ant
• Include task runners and performance APIs in your
continuous integration system

72. AUTOMATEYOUR PERFORMANCE ROUTINES

73. AVOIDTHEYO-YO-EFFECT
@bbinto | #leanwebsites

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

75. –Larry Page
“Browsing should be as simple and fast
as turning a page in a magazine.”

76. ÄNDE
leanwebsites.bbinto.m
e
25%
off eBook @bbinto | #leanwebsites