Experiment with lazy loading youtube videos

[invisibleroads]

• [x] #2
• [ ] Check console for number of files loaded over network
• [ ] Test https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743
• [ ] Remove box-shadow
• [ ] Define iframe directly in innerHtml instead of as a DOM element
• [ ] Verify whether lazy loading reduced number of files loaded over network
• [ ] Run Google PageInsights after deploying to production

[kashfifahim]

Google PageInsights for Mobile: 39

Google PageInsights Opportunities:

• Reduce unused JS (10.35 s)
• Eliminate render-blocking resources (1.48 s)
• Reduce unused CSS (1.05 s)

Google PageInsights Diagnostics

• Ensure text remains visible during Webfont load
• Reduce the impact of third-party code Third-party code blocked the main thread for 7,900 ms
• Some third-party resources can be lazy-loaded with a facade
• Does not use passive listeners to improve scrolling performance
• Minimize main-thread work 14.6 s
• Reduce JavaScript execution time 11.2 s
• Avoid enormous network payloads Total size was 3,415 KiB

[kashfifahim]

Google PageInsights for Desktop: 59

Google PageInsights Opportunities:

• Reduce unused JS (1.52 s)
• Eliminate render-blocking resources (0.44 s)
• Reduce unused CSS (0.2 s)

Google PageInsights Diagnostics

• Ensure text remains visible during Webfont load
• Reduce the impact of third-party code Third-party code blocked the main thread for 1,150 ms
• Some third-party resources can be lazy-loaded with a facade
• Does not use passive listeners to improve scrolling performance
• Minimize main-thread work 3.5 s
• Reduce JavaScript execution time 2.6 s
• Avoid enormous network payloads Total size was 3,414 KiB

[kashfifahim]

completed in an earlier sprint