Docs / Image / Preload Critical Images

Preload Critical Images

Critical images are images required for the initial render, the images in the viewport.

FlyingPress will try to automatically detect critical images like featured images. These images will be set to preload as well as exclude from the lazy load.

Preload tells the browser to load the resource on high priority.

Before:

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <img src="https://example.com/wp-uploads/cat.png" class="featured-image" />
    ...
  </body>
</html>

After:

<html>
  <head>
    <link
      rel="preload"
      href="https://example.com/wp-uploads/cat.png"
      as="image"
    />
    ...
  </head>
  <body>
    ...
    <img
      src="https://example.com/wp-uploads/cat.png"
      class="featured-image"
      loading="eager"
    />
    ...
  </body>
</html>