Signocore Slate loads only the stylesheets and scripts a page needs, serves Google Fonts from your own server by default, and builds its CSS from your settings as the page renders. The speed settings live under Appearance → Customize → General → Performance. This page explains what each one does and what the theme loads.
Host Google Fonts on your server
Load Google Fonts Locally is on by default. With it on, the Google Fonts you choose for the theme's typography and in Slate blocks are downloaded to your server and served from there. Visitors' browsers never contact Google for them.
How it works:
- The first time a page needs a set of fonts, the theme fetches the font stylesheet from Google, downloads each font file in WOFF2 format and saves both on your server. That page view takes a little longer.
- The page links the local stylesheet. Every later visit uses the saved files.
If your server cannot reach Google, nothing is saved. The page links the font stylesheet on Google for the time being, and the theme tries the download again an hour later.
The files are stored in wp-content/fonts/signocore-slate/: one stylesheet per combination of fonts, and the font files in a folder per font family. The fonts of the theme's typography settings and of the Slate blocks in your content are combined into one stylesheet. The block editor uses the same local files.
Fonts use font-display: swap, so text shows in a fallback font while the web font loads. Developers can turn that off with the signocore_slate_display_swap_google_fonts filter.
With Load Google Fonts Locally off, pages link the font stylesheet on fonts.googleapis.com directly, and visitors' browsers download the fonts from Google.
Flush the local fonts
The theme deletes its local font folder once a month and downloads the fonts again on the next visit, so the files stay current. To do it right away, click Flush Local Font Files under Flush Local Fonts Cache. The option shows while Load Google Fonts Locally is on. Flush when your fonts do not show correctly on the site.
You do not need to flush after you change fonts. A new combination of fonts gets its own stylesheet.
Flushing deletes only the theme's own wp-content/fonts/signocore-slate/ folder. Fonts that WordPress or other plugins keep in wp-content/fonts/ are not touched. Font files that versions before 2.0 saved directly in wp-content/fonts/ are no longer used, and you can delete them if no plugin needs them.
Preload the fonts
Preload Local Fonts is on by default and shows while Load Google Fonts Locally is on. It adds a <link rel="preload"> tag to the page head for the Latin font files of each font family, so the browser starts downloading them before it reads the stylesheet. Developers can turn preloading off with the signocore_slate_local_fonts_preload filter.
Each weight and style you pick is usually a separate file, and each one is preloaded. Two families with a few weights load faster than many weights of several families.
The other performance settings
| Setting | Default | What it does |
|---|---|---|
| Enable CSS Preload | Off | Instead of adding every stylesheet the page needs to the head, the theme preloads them in the head and prints each one next to the part of the page that uses it. It is always off on AMP pages. Test your pages after you turn it on |
| Enable Lightbox | Off | Opens links to image files, and images in core Gallery blocks that link to the file, in a lightbox. Loads a small script and stylesheet on every page. Add the class slate-no-lightbox to a link to leave it out |
| Enable Scroll To ID | On | Scrolls to in-page anchor links and leaves room for a sticky header |
| Enable Microdata Schema | On | Adds schema.org microdata attributes to the page markup, such as the page type on the html element |
| Disable Default Sitemap | Off | Turns off the XML sitemap that WordPress creates at /wp-sitemap.xml |
If an SEO plugin such as Signocore SEO already adds structured data and a sitemap, you can turn off Enable Microdata Schema and turn on Disable Default Sitemap, so each is produced in one place.
What the theme loads
Stylesheets
| Stylesheet | Loads |
|---|---|
global.min.css |
On every page. The CSS built from your Customizer settings is added right after it |
header.min.css |
When the page shows the theme header |
content.min.css |
When the page has content |
sidebar.min.css |
When the page has a sidebar |
comments.min.css |
When comments are shown |
author-box.min.css |
On single posts with the author box turned on |
related-posts.min.css |
On single posts with related posts turned on |
footer.min.css |
When the page shows the theme footer |
woocommerce.min.css |
On every page while WooCommerce is active, plus an account stylesheet on the My Account page |
rtl.min.css |
On sites in a right-to-left language |
Each Slate block has its own small stylesheet, which loads only on pages that contain that block. The same goes for its script, if it has one.
Scripts
| Script | Loads |
|---|---|
| Navigation script | On every page, without blocking rendering. It runs menus, drawers, the sticky header, Enable Scroll To ID and the scroll to top button. When Enable Sticky Header? and Enable Sticky for Mobile? are set to No and Enable Scroll To ID and Enable Scroll To Top are off, a lighter version loads |
| Small inline scripts | On every page, for smooth scrolling and a lazy-loading helper |
| Lightbox | When Enable Lightbox is on |
| Slider | On single posts that show related posts as a carousel |
| Infinite scroll | On archives where infinite scroll is on and there is more than one page |
| Dark mode | When dark mode is on, see Dark mode |
| WooCommerce features | Only for the features you turn on, such as the grid and list toggle, sticky add to cart, AJAX add to cart on product pages and opening the popout cart |
CSS built from your settings
The theme turns your Customizer settings, such as colors, fonts and header layout, into CSS each time it builds a page, and prints that CSS inline in the page head. Slate blocks work the same way: each block's CSS is built from its settings as the page renders and printed in the page.
There are no generated CSS files to clear. Because the CSS is part of the HTML, a page cache stores it together with the page. After you change Customizer settings, clear your page cache so visitors get the new CSS.
Lazy loading and avatars
- Images: WordPress adds
loading="lazy"to images in your content. - Embedded frames: the theme adds
loading="lazy"to everyiframein post content that has noloadingattribute, such as embedded videos and maps. - Block backgrounds: the performance optimizer, which is off by default, defers background images and video posters of Slate blocks below the fold until they scroll into view. To turn it on, open the Slate Blocks Controls sidebar from the block editor's options menu and turn on Globally Enable The Performance Optimizer under Performance Optimizer.
- Avatars: Gravatar images are copied to
wp-content/gravatars/the first time they appear and served from your server from then on. The folder is cleared once a week and filled again as avatars are shown. The theme spends at most five seconds per page copying new avatars. Avatars it has not copied yet load from Gravatar until a later page view copies them.
Tips
- Use a page cache. The theme builds its CSS on every uncached page view, and a page cache turns that into a single build per page.
- Keep Load Google Fonts Locally on. It saves a connection to another server, and visitors' browsers do not contact Google.
- Use few font families and weights. Each weight is a file to download and preload.
- Leave Enable Lightbox off unless you link images to their full size.
- If you do not use a sticky header, scroll to top or anchor links, turning those settings off lets the lighter navigation script load.