💡 Would you like more free lessons? Please subscribe on YouTube to show your support.
To improve the performance of Dev Tips using native image lazy loading.
Previously, the Dev Tips landing page loaded many thumbnail images on page load. These images were not lazily loaded.
A search for
mdn lazy loading eventually takes us here which explains the lazy loading syntax:
<img src="image.jpg" loading="lazy" alt="..." />
You can configure Local Overrides in DevTools to support this workflow:
<img>tags are updated with the
loading="lazy"attribute and value.
To use Local Overrides:
Overrides panein the
Enable Local Overrides.
Page pane(still within the
Cmd + S/
Ctrl + S.
Various web proxy solutions can be installed on your machines to intercept requests, and serve a completely different resource - one which lives on your desktop for example. This means you can achieve the same thing as DevTools Local Overrides, but a proxy version will be compatible across all browsers, and also supports modifying requests and responses.
The Screenshot above comes from a tool known as Charles Proxy. HTTP & HTTPS interception is possible, and you can also point your mobile phone to the proxy installed on your machine, meaning overrides via a Proxy can be done on your phone too.
Local Overrides in DevTools offers a quick and easy way to map remote resources onto local resources, so you can prototype website variations, and performance profile them to verify they work.