Images are usually the biggest contributors to slow page load times. LiteSpeed Cache handles image optimization in two ways: it converts and compresses images through QUIC.cloud, and controls how images load on the page through lazy loading and viewport detection.

This doc covers both areas and how to configure them correctly for an ElementsKit site.

前提条件 #

• LiteSpeed Cache plugin installed and active
• ElementsKit installed and active
• QUIC.cloud connected to your site (see: How to Configure QUIC.cloud for ElementsKit Sites)
• Admin access to your WordPress dashboard

Part 1: Image Optimization Settings #

Step 1: Configure Image Optimization #

に行く LiteSpeed Cache > Image Optimization > Image Optimization Settings.

セット Auto Request Cron to ON. This automatically queues new images you upload for optimization, eliminating the need for manual processing each time.

セット Next-Gen Image Format に WebP. WebP images are 25 to 35 percent smaller than JPEG and PNG files with no visible quality difference. This is the single most impactful image setting in the entire stack.

セット WebP/AVIF For Extra srcset to ON. This ensures WebP replacement works inside srcset attributes, which is important for ElementsKit image widgets that generate srcset markup outside of WordPress core.

Leave Optimize Original Images そして Remove Original Backups both OFF for now. Keeping backups means you can revert if anything looks wrong after optimization.

セット Preserve EXIF/XMP Data to OFF. EXIF data adds file size with no front-end benefit.

セット Optimize Image Sizes に 全て so every image variant WordPress generates gets optimized, not just the full-size version.

Best Practice: Do not select AVIF as your next-gen format. It is a paid QUIC.cloud feature with limited browser support compared to WebP. WebP gives you excellent compression with near-universal browser compatibility.

Step 2: Send Your Images for Optimization #

に行く LiteSpeed Cache > Image Optimization > Image Optimization Summary そしてクリックしてください Send Optimization Request. This queues your existing image library for WebP conversion through QUIC.cloud.

Once QUIC.cloud finishes processing, click Pull Images to retrieve the optimized versions. Check the Total Reduction figure to see how much file size has been saved across your image library.

Part 2: Lazy Load and Viewport Settings #

Step 3: Configure Lazy Load #

に行く LiteSpeed Cache > Page Optimization > Media Settings.

セット Lazy Load Images to ON. This defers off-screen images until the user scrolls toward them, reducing the amount of data the browser downloads on initial page load.

セット Responsive Placeholder to ON. This generates SVG placeholders with the exact dimensions of each image, which prevents layout shift as images load in. This directly improves your CLS score.

セット Lazy Load Iframes to ON. A single undeferred YouTube embed or iframe can add significant weight to your initial page load. Deferring iframes keeps your initial load fast even on pages with embedded video.

セット Add Missing Sizes to ON. This adds explicit width and height attributes to image tags, which works alongside Responsive Placeholder to prevent layout shift.

セット Generate LQIP In Background to ON. This generates Low Quality Image Placeholders via a background cron job so page loads are not slowed down during the generation process.

Step 4: Configure Viewport Images (VPI) #

に行く LiteSpeed Cache > Page Optimization > VPI.

セット Viewport Images to ON. VPI automatically detects which images are above the fold on each page and excludes them from lazy loading. This is critical for your hero or banner image — lazy loading your LCP element directly increases your LCP time.

セット Viewport Images Cron to ON. This keeps the above-fold detection up to date automatically as your pages change.

After enabling VPI, click Run VPI Queue Manually if you want to process your pages immediately rather than waiting for the next cron run.

Step 5: Set Media Excludes #

に行く LiteSpeed Cache > Page Optimization > Media Excludes.

の中に Lazy Load Image Excludes field, add the following:

.elementor-widget-image img, wp-post-image

This provides a second layer of protection on top of VPI, ensuring that Elementor’s main image widget and WordPress featured images are never lazy loaded, regardless of how VPI detects the viewport. Both lines work together — VPI handles detection automatically, while Media Excludes acts as a manual safety net.

Best Practice: Always protect your hero image from lazy loading using both VPI and Media Excludes together. VPI alone is reliable on most setups, but Media Excludes ensures coverage on pages where VPI has not yet processed the viewport detection.

What’s Next #

With images optimized and lazy loading configured correctly, the next step is optimizing how CSS, JS, and HTML are delivered on your ElementsKit site. See How to Optimize CSS, JS and HTML on ElementsKit Sites with LiteSpeed Cache to continue.