Table Of Contents
Who is this for
Agency devs / future maintainers
Overview
Summary
Asset preloading tells the browser to fetch critical resources early — typically above-the-fold fonts and single-template featured images — before HTML parsing discovers them. SCOS exposes toggles for Google Fonts preload and featured image preload on singles. Enable only assets that truly block LCP; over-preloading wastes bandwidth on interior pages.
Preload only true LCP candidates — pair with Font Optimisation so you are not preloading fonts you have self-hosted elsewhere.
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.