Skip to main content
Media optimization changes how the browser loads images and fonts. The free tier on Noxity covers lazy loading, font optimization, and image dimensions. (Image conversion to WebP and image minification are premium-only and not included.)

​
Lazy load images

Toggle: LazyLoad images. When on, the browser only loads images that are visible in the viewport. Images further down the page wait until the user scrolls toward them. Major win on long pages with many images (galleries, blog archives, product listings).
Sub-toggleWhat it does
LazyLoad iframes and videosSame idea for <iframe> and <video> tags. YouTube and Vimeo embeds get their thumbnail right away but only load the player iframe on scroll.
Replace YouTube videos with preview imagesStronger version: even the iframe waits until click. The thumbnail is shown statically. Largest perf win for sites with many video embeds.

​
What lazy load doesn’t catch

LazyLoad hooks into <img> and <iframe> tags in the HTML. It misses:
  • Images set via CSS (background-image: url(...)).
  • Images injected by JavaScript after page load.
  • Images inside <style> tags with embedded data URIs.
  • Page builder content (Elementor and friends) that renders via shortcodes.
For those cases the optimization quietly does nothing. Real-image lazy loading should be added in the theme/plugin layer.

​
Font optimization

Toggle: Reduce font-related layout shifts. Web fonts are a common source of CLS (Cumulative Layout Shift, a Core Web Vitals metric). When the page renders with the fallback font, then re-renders when the web font loads, every text element shifts. Browsers grade you on this. When enabled, AccelerateWP injects @font-face rules with CSS metric overrides that match the web font’s metrics to the fallback. The fallback renders with the web font’s spacing, so when the swap happens, nothing visibly moves. Default: on. There’s no real downside to leaving it on. Supports:
  • Google Fonts URL imports.
  • @font-face declarations in your stylesheets.
  • font-family declarations that resolve to web fonts.

​
Image dimensions

Toggle: Add Missing Image Dimensions. When an <img> tag is missing the width and height attributes, the browser doesn’t know how much space to reserve until the image loads. The page reflows when it does, causing layout shift. When on, AccelerateWP scans HTML output, fetches image metadata server-side, and injects width and height attributes into <img> tags that are missing them. What it doesn’t touch:
  • Images that already have width and height set (no need).
  • <picture> tags.
  • SVGs (intrinsic dimensions come from the SVG).
  • External images (anything not on your domain; AccelerateWP can’t fetch the metadata reliably).
This one’s almost always safe to enable. The PageSpeed boost on image-heavy pages is solid.

​
Common issues

Likely lazy load is hiding them behind a JavaScript trigger that isn’t firing. Check the browser console for JS errors. If a deferred or delayed script is breaking, File optimization → Excluded JavaScript Files can let it run normally.
Lazy load every image including the hero hurts LCP, the Largest Contentful Paint metric. Add a class="no-lazy" attribute to the <img> tag in the theme. AccelerateWP recognizes that class as an opt-out.
Elementor and Divi render images via background-image CSS or via JS hydration. AccelerateWP’s lazy load only catches <img> tags in the HTML. Use the page builder’s own lazy-load setting alongside AccelerateWP’s.
The fallback font’s metrics don’t match closely enough to the web font for a clean handoff. Disable Reduce font-related layout shifts and accept the small CLS hit, or pick a fallback font with closer metrics in your CSS.
AccelerateWP fetched stale dimensions for an image that was later resized in WordPress. Re-upload the image, or clear the AccelerateWP cache after re-saving the image in WordPress.

​
Need a hand?