25 lines
2.2 KiB
Markdown
Executable File
25 lines
2.2 KiB
Markdown
Executable File
# Images
|
|
|
|
**Dotjuice → Page speed → Images**
|
|
|
|
## What this tab controls
|
|
|
|
Lazy loading of images and iframes, and automatic width/height attributes to prevent layout shift.
|
|
|
|
## Settings
|
|
|
|
| Setting | Default | What it does |
|
|
|---|---|---|
|
|
| **Lazy Load Images** | On | Adds native browser lazy loading to images below the fold, using the standard `loading="lazy"` attribute — no JavaScript library involved. Images already handled by another lazy-load plugin, marked as always-load, or that WordPress itself has already flagged as your highest-priority image (see below) are automatically skipped. |
|
|
| **Lazy Load Iframes and Videos** | On | Same native lazy loading applied to embedded iframes (YouTube embeds, maps, and similar). |
|
|
| **Add Missing Width and Height Attributes** | On | Scans images in your post/page content and adds explicit width and height where they're missing, so the browser can reserve the right amount of space before the image downloads — preventing the page from visibly jumping around as images load in (this is what Google's Cumulative Layout Shift metric measures). Only applies to images inside your actual post/page content; images in theme templates, widgets, or headers/footers aren't covered. |
|
|
| **Serve WebP Images (when available)** | Off | Not yet active in this version — enabling it currently has no effect. We'll update this guide when it ships. |
|
|
|
|
## How this connects to your LCP image
|
|
|
|
If you've set an **LCP Image URL** on the [Preload](preload.md) tab, that specific image is automatically excluded from lazy loading and instead forced to load with maximum priority — regardless of the Lazy Load Images setting above. You don't need to do anything extra here; setting the LCP image on the Preload tab is enough.
|
|
|
|
## Why native lazy loading
|
|
|
|
Older lazy-load techniques rely on JavaScript to detect scroll position and swap in a placeholder image, which adds its own script weight and can cause a visible blank flash before the real image appears. The `loading="lazy"` attribute used here is built into every modern browser, adds no extra script, and the browser itself decides the ideal moment to start fetching each image — typically well before it scrolls into view, so there's no visible delay.
|