Loading & Performance

dns-prefetch allows early DNS resolution for an origin. It is a lighter hint than preconnect, which can also establish a connection.

8. Responsive Resource Loading

Use responsive images, sensible image sizes and appropriate resource priorities. Let the browser choose from valid resources instead of downloading oversized assets for every device.

9. Performance Best Practices

• Use efficient image formats and appropriately sized files.
• Specify image dimensions where possible to reduce layout shifts.
• Defer non-critical classic scripts when suitable.
• Use lazy loading for appropriate off-screen images and embeds.
• Preload only resources that are genuinely critical.
• Measure actual performance before adding resource hints.

Common Mistakes

• Using async for scripts that depend on a specific execution order.
• Preloading resources that the page never uses.
• Lazy-loading the most important visible image without testing.
• Adding preconnect hints for too many origins.
• Assuming resource hints guarantee that a resource loads first.

Practice Exercises

1. Write a script tag using defer.
2. Explain when async is preferable to defer.
3. Add lazy loading to an off-screen image.
4. Write a font preload link.
5. Identify which resources on a sample page genuinely need priority.

Revision Quiz

1. When does a deferred classic script execute?
2. Which script attribute is suitable for independent scripts that can execute as soon as ready?
3. What is the purpose of preload?
4. What does preconnect attempt to establish?
5. Why should off-screen images sometimes use lazy loading?
6. Can excessive preloading hurt performance?

Answer Key and Explanations

1. After HTML parsing finishes — Deferred classic scripts execute after parsing and preserve their document order.
2. async — It executes the script as soon as it is ready, without guaranteeing order relative to other async scripts.
3. Fetch an important resource early — It can help reduce discovery delays.
4. An early connection to an origin — It may establish DNS, transport and secure-connection setup.
5. To avoid downloading it too early — This can reduce competition for resources needed by the visible page.
6. Yes. It can consume bandwidth needed by more critical resources.