spikes

ES Modules

How can we modularise our client-side JavaScript?

Questions to consider

• What are the different ways we can import/export code? What does "dynamic import" do?

• Why might using hundreds of small modules in the browser cause performance problems?

Useful resources

• Modules | JavaScript for impatient programmers

• ES modules: A cartoon deep-dive

Browser rendering

What is the "critical rendering path" in browsers?

Questions to consider

• How does the browser render an HTML page containing links to CSS and JavaScript files?

• What does "render blocking" mean?

• What do the async and defer keywords do?

Useful resources

• Understanding the Critical Rendering Path

• Efficiently load JavaScript with defer and async

Browser caching

How can we avoid unnecessary network requests?

Questions to consider

• What is HTTP caching?

• How can our server tell browsers to cache our responses?

Useful resources

• HTTP Caching | Web Fundamentals

• The HTTP cache: your first line of defense

Image performance

How we can efficiently serve image assets?

Questions to consider

• How can we optimise image file size?

• How can we render different images at different viewport sizes?

Useful resources

• Image Optimization | Web Fundamentals

• Responsive Images: If you’re just changing resolutions, use srcset

• Native lazy-loading for the web