Performance: Small Tweaks, Big Gains

Recently I have been focusing a lot around performance on Hillarys and Id like to share some of the quick wins with you all.

Transcript

2. Performance: Small tweaks. Big gains By Matt Claffey @mattclaffey1
3. § Frontend Developer @ Code § Based in Manchester § Twitter - @mattclaffey1 § Github – code-mattclaffey About Me
4. Don’t worry about notes: http://slides.co.uk
5. I <3 performance
6. L
7. L - Time constraints - It doesn't block sites from going live - Client/PM doesn’t priorities it over features - “Gets lost in the backlog”
8. Stats!
9. 40% of users will leave a page that takes longer than three seconds to load. https://blog.kissmetrics.com/loading-time/
10. 79% of shoppers who are dissatisfied with site performance say they're less likely to purchase from the same site again. https://blog.kissmetrics.com/loading-time/
11. Amazon reduced their page load by 100 ms. They lost 1%. Amazon makes $15.7 billion. 1% = $157 million. :o
12. That’s pretty scary…
13. Bad performance kills good websites
15. Dulles, VA - Moto E - Chrome - 3G
16. My targets! Start Render Load time Speed Index Page Weight < 3s < 3s < 1500 500kb
17. 01 FOUC VS FOIC
18. FOIC (Flash of invisible content)
19. FOUC (Flash of unstyled content)
20. I prefer FOUC
27. If you’re using TypeKit
28. https://helpx.adobe.com/typekit/using/font-events.html
31. Benefits § Content appears on the page quicker § Improves perceived performance § Easy to implement § Can be implemented on TypeKit Fonts § Progressively enhancing our site
32. 02 Hidden Images
33. On Desktop I would like to see images in the navigation but have them hidden on mobile…
38. Note: Remember to add picturefill https://cdn.rawgit.com/scottjehl/picturefill/master/dist/picturefill.min.js
39. Benefits § Can dramatically reduce page weight on mobile § Reduces a lot of requests § Reduces total page load
40. 03 Responsive Images
41. 1600 x 900
42. 480 x 270
45. Example: calc(9/16 * 100%) = 56.25%;
47. Pros & Cons § Reduces page weight § Improves perceived performance (if using placeholders) § Implementing the placeholder can be tricky on images that do not contain their aspect ratios.
48. 04 Lazy Loading
49. Lazysizes
57. Pros & Cons § Reduces page weight on first load § Reduces images requests on first load § Removes images that are render blocking § 3G connections will take a lot longer to load in assets.
58. 05 Render Blocking Scripts
63. How to measure the value?
66. Pros & Cons § Improves start render times § Removes jQuery from render blocking the page § Might not work if something depends on jQuery. (Third party scripts)
67. 06 Preload
68. Styles.css Assets 1 Asset 2 Asset 3 Asset 4 Important Asset
70. Styles.css Assets 1 Asset 2 Asset 3 Asset 4 Important Asset
71. What's this good for?
72. Preloading
73. Note: Be careful for render blocking
74. Improving above the fold performance with preload – Harry Roberts http://bit.ly/2pwwgfv
75. Pros & Cons § Improves perceived performance § Allows you to load assets in priority over others § Very quick to implement § Preloading everything has no value § Preloading large assets can slow your start render down § Browser Support is’nt great yet.
76. 07 Preconnect & DNS Prefetch
77. DNS Prefetch
78. Preconnect
79. Iya Grigorik – “Preconnect is an important tool in your optimization toolbox… it can eliminate many costly roundtrips from your request path – in some cases reducing the request latency by hundreds and even thousands of milliseconds” https://www.keycdn.com/blog/resource-hints/
80. How it works https://www.keycdn.com/blog/resource-hints/
81. Preconnect Browser support
82. DNS-prefetch Browser support
86. Pros & Cons § Removes any costly roundtrips from your request path § Reduces page load § Very quick to implement § Browser Support isn't great yet.
87. 08 YouTube Player
89. Assets YouTube Needs: § OUB6zKc-Tos - 22.5kb (11.5kb Gzip) § www-embed-player-sprite-mode-2x.css 256kb (43.4kb Gzip) § www-embed-player 92.4kb (34.3kb Gzip) § base.js 1.2mb (405kb Gzip) § Roboto font 13kb § sddefault.jpg 36.8kb § player-cougar-2x-id.png 98.6kb 635kb!!!!!! :o
90. Option one – Lazy load
91. Pros & Cons § Using existing code § Easy to implement § It will still load the element if it sits in the fold § Can take a while to load when scrolled down on 3G
92. Option two – YouTube Placeholder
93. Before After
96. Pros & Cons § - 635kb in page weight § The component image can be lazy loaded § Easy to implement § ?autoplay doesn't work on mobile. § YouTube could take a few seconds on 3G to load when play is clicked.
97. 09 Font Types
100. 48kb – ttf 36kb – woff2
101. 10 Critical CSS
102. Request Page Build DOM Build CSS idle idle Gets HTML Render Blocking - GET CSS -> Render Page
103. Request Page Build DOM Build Critical CSS idle Gets HTML Render Page Load Async CSS Load Async CSS
104. Header Banner Article The fold
105. What should we embed? § Font styles § Layout styles § Components that sit in the fold
106. Critical CSS is hard…
107. Header Banner Article Header Form section Header Product Product Product Product
108. No more than 16kb Gzipped
110. Header Banner Article Header Form section Header Product Product Product Product Critical-home.css Critical-application.css Critical-product.css
112. .hbs, .mustache, .cshtml, … .php
114. Filamentgroup LoadCSS
116. Preloading
120. How to see the value?
121. Pros & Cons § Removes any render blocking for css § Improving start render times § Preload is not massively support yet § Difficult to implement on a CMS site
122. Hello world website results
125. Reflection § Getting the content to the user quicker with FOUC § Use image-hidden when images have display none; § Use responsive images to reduce page weight § Load images that are only in the fold with Lazy loading § Reduce our time to first byte by removing render blocking scripts § Preloading important assets in the fold § Reducing costly roundtrips with preconnect & dns-prefetch § Not to embed YouTube videos straight away § Use woff & woff2 § Loading in the fold styles and loading the rest async
126. Performance Kit
127. code-mattclaffey/performance-kit Performance Kit
128. Made with Computerlove