Making your site run even faster.
srcset
sizes
<img sizes="auto" loading="lazy">
fetchpriority
blocking="render"
<link rel="expect">
Load certain resources only when needed.
<img src="picture.jpg" loading="lazy" /> <iframe src="supplementary.html" loading="lazy"></iframe>
Attributes that allow providing several source images with hints to help the browser pick the right one.
<img srcset="fairy-med.jpg 480w, fairy-large.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="fairy-large.jpg" alt="Elva dressed as a fairy" />
The sizes="auto" attribute reserves layout space for an image before it loads, avoiding some layout shifts.
sizes="auto"
Allows specifying a hint to help the browser prioritize fetching various resources.
<img src="logo.svg" fetchpriority="high" />
Block rendering (but not parsing) until certain resources have been loaded. Available on <link>, <script> and <style>.
<link>
<script>
<style>
<script blocking="render" async src="async-script.js"></script>
Block rendering until the element referenced by the href value is connected and fully parsed.
href
<link rel="expect" href="#hero" blocking="render">
Hints for the browser to proactively download pages in the background to improve performance.
<script type="speculationrules"> { "prefetch": [{ "urls": ["/about", "/pricing"] }], "prerender": [ { "where": { "href_matches": "^/product/\\d+$", "selector_matches": "a.nav-link" } } ] } </script>