What OLObuild does on its own
Some optimizations are always on and have no toggles.
- Only what's needed. OLObuild's stylesheets and scripts load only on pages built with OLObuild, and a tile's scripts, such as the map's, only if the tile is on the page.
- Fonts from your own server. The Google Fonts the site uses are downloaded once and served from the site, with no calls to Google on every visit. If the download fails, the page uses system fonts.
- Content on demand. From the fourth tile on, the content is mounted when it's about to enter the screen. The first 3 tiles, forms, maps and menus are always ready.
- Lazy images. Images load when they're about to become visible.
- Lightweight videos. The Video tile, with Lazy Load (Facade) on by default, shows the cover image and loads the YouTube or Vimeo player only on click.
- Weightless animations. Entrance animations start when the element enters the screen. Visitors who've asked their operating system to reduce motion see the elements right away, without animation.
The Performance & Cache settings
You'll find them in System › Configuration › Performance & Services › Performance & Cache, and from the Performance tab of the dashboard.
- Defer JavaScript — OLObuild's scripts download without blocking the page and run when it's ready. (default: On)
- Cache CSS in static files — Puts each template's style into a file that the browser keeps, instead of rewriting it into the page. (default: On)
- Minify CSS — Strips spaces and comments from OLObuild's stylesheets. (default: On)
- Preload custom fonts — Starts downloading the text and heading fonts right away, at the weight in use: the text appears in its own font, without changing look a moment later. (default: On)
- fetchpriority hero image — The first image of the first section loads immediately and with high priority. The others stay lazy. (default: On)
- Lazy load self-hosted video — Videos uploaded to the site, set to autoplay and without sound, start when they enter the screen. (default: On)
- Full-page cache — Saves ready-made pages and serves them to visitors without rebuilding them. Read chapter 3 before turning it on. (default: Off)
- UIkit subset — Reduces the UIkit stylesheet to the parts the pages actually use. It learns by visiting the pages and corrects itself. (default: Off)
- Per-tile CSS — Loads the style of certain tile families only where they're needed, such as maps, galleries and menus. (default: Off)
- Browser cache for media (.htaccess) — Tells the browser to keep images, fonts, CSS and JS for a long time. It works on Apache and LiteSpeed servers. (default: Off)
- Automatic DNS prefetch & preconnect — Prepares the connection to YouTube and Vimeo in advance on pages that contain them. Domains entered in Custom domains are always included. (default: On)
- Head cleanup — Removes WordPress scripts and styles that many sites don't use: jQuery Migrate, emoji, block styles and classic theme styles. (default: Off)
- Critical CSS — Writes the style of the first sections (2, in Above-the-fold sections) into the page and loads the rest right after. It's rebuilt after the number of days in Cache duration and when you save the template. Regenerate critical CSS rebuilds it immediately. (default: Off)
Warning. Remove Block CSS also removes WordPress's global styles. With a block theme, after turning it on, check that the site still has its colors and fonts.
At the top of the tab, Cache status counts the pages in the full-page cache, the style files and the pages with Critical CSS, and tells you when the cache was last cleared. Clear all deletes them all together, along with the UIkit subset and OLObuild's temporary data.
The full-page cache
The full-page cache saves every page ready-made and serves it to visitors without rebuilding it. It's the setting that matters most on a high-traffic site.
- It doesn't apply to logged-in users, to the WooCommerce cart and checkout, to sitemaps, or to addresses with parameters other than tracking ones.
- It keeps separate versions for computer and phone, and for each language.
- Each page stays in the cache for 8 hours.
- It empties itself when you save in the builder or in WordPress, change menus, theme, active header or footer, global colors and fonts, assignment rules or Performance settings, and on every OLObuild update.
Warning. Don't turn it on if the site already uses a caching plugin such as LiteSpeed Cache or WP Rocket. In that case OLObuild doesn't install it, and next to the toggle the tab says why.
External caches and cleanup
OLObuild doesn't control external caches. If the site uses LiteSpeed Cache, WP Rocket, the hosting cache or Cloudflare, clear it yourself after changing colors, fonts, header or footer: otherwise visitors may still see the previous version.
System › Tools › OLObuild cache › Delete files and data deletes the generated style files, the full-page cache and OLObuild's temporary data, which are recreated on the next visit. Use it when a page shows an old style. It does the same as Clear all in the Performance tab.
A fast page, in practice
- Images at the right size. Upload images no wider than the space they occupy, 2000 pixels for a full-width photo, in WebP or compressed JPEG format.
- The first image, immediately. With fetchpriority hero image on, as it is by default, the first image of the first section loads on its own with high priority. If the main photo sits lower down, in its Image tile open Advanced › SEO & Accessibility and choose Eager in Image loading and High in Fetch Priority.
- Few fonts. 2 families are enough, with 3 or 4 weights in total. Every extra weight is another file to download.
- Videos with a cover image. Use the Video tile with Lazy Load (Facade) on, instead of pasting YouTube code into an HTML tile.
- Effects where they count. Animated backgrounds, parallax and background videos weigh more than a photo. Use them where they tell something.
Measuring
Measure the page with Google's PageSpeed Insights or with Lighthouse, in Chrome's developer tools. Run the test in an incognito window: when logged in, you see the page without the full-page cache, slower than what visitors get.
Repeat the measurement 2 or 3 times and look mainly at the loading of the largest element (LCP) and the layout stability (CLS). The score varies from one test to the next, and from one phone to another.