Overview
Summary
When a user visits your site, their browser reads the code from top to bottom. Normally, it won't start downloading an image or a font until it "sees" it in the code. Preloading moves those essential files to the front of the line, ensuring they are ready to display the moment they are needed. This is a key factor in improving your Largest Contentful Paint (LCP) score.
Google Fonts Preload
Fonts are often one of the last things a browser loads, which causes the “flash of unstyled text” (where the font jumps or changes after the page loads).
- What it does: This setting forces the browser to fetch your Google Fonts immediately.
- The Benefit: Text renders correctly the first time, providing a smoother, more premium user experience.
- Deep Dive: Full Guide
Preload Featured Images on Singles
This tool is designed for Single Post Templates (Posts, Projects, etc.). Since these pages almost always feature a prominent “Featured Image” at the top, we want that image to be the highest priority.
Key Settings:
- Post Types: Select which categories should use this feature. It is currently optimized for Single Custom Post Types (CPTs) rather than archive/list pages.
- Preload Image Size (1200×630): By preloading the OG Image version, you ensure consistency between what the browser loads and what social media crawlers see. This specific size is a perfect balance of quality and speed.
- WebP Auto-Conversion: * If using LiteSpeed, choose Append (
.jpg.webp).- If using ShortPixel, choose Replace (
.webp). - Note: If you select both, “Replace” will take priority.
- If using ShortPixel, choose Replace (
Per-Page Preloads
Sometimes, a specific page has a unique asset that isn’t used anywhere else—like a large hero video on the homepage, a custom font on the “About” page, or a specific CSS file for a gallery.
How to use it:
- Asset URLs: Paste the full link to the file (Image, Font, CSS, or JS) into the box corresponding to that page.
- Use Case: Use this for any “above-the-fold” asset that isn’t a standard featured image.
- Availability: This is available for standard WordPress Pages. Since other Post Types (like Projects or FAQs) typically use a shared template, they are handled by the “Singles” settings above.
Admin Tip: Only preload what is absolutely necessary. If you preload too many files, they will “compete” for bandwidth, which can actually slow your site down. Stick to the 1-2 most important items visible the moment a page loads.