Faster pages with the header cart
Overview
When the Dirigible theme shows the cart in the header (Appearance → Customize → Header & Menus → Desktop → Show Cart), WooCommerce loads the styles for the cart panel, the drawer that slides out when a visitor clicks the cart, at the top of every page. That's about 140 KB of styles (13 KB once compressed), the largest set of styles holding up first view on a shop site, for a panel most visitors never open.
With Dirigible Optimize active, those styles aren't downloaded with the page at all. They load a few seconds after the page has finished loading, or as soon as a visitor points at, taps or tabs to the cart, whichever comes first. So the page's own styles, fonts and images get the connection to themselves, which is what PageSpeed's lab test measures.
- The cart button, its count and its amount look exactly the same from the first moment, and don't move when the styles arrive.
- The panel opens and works as before, including the count updating when someone adds a product to the cart.
- A visitor who clicks the cart before the styles are in sees the panel slide in blank, and its contents appear as soon as the styles have arrived (usually a fraction of a second). They never show unstyled.
There's nothing to set up.
Which pages
| Page | What happens |
|---|---|
| Pages and posts with the header cart | The cart panel's styles load after the page has loaded, or when a visitor heads for the cart. |
| Cart, Checkout and My Account | Left as WooCommerce ships them. |
| A page with another WooCommerce block, such as a product grid or Product Collection | Left as WooCommerce ships them, because that block uses the same styles. |
| Sites without the header cart | Nothing changes. |
After a WooCommerce update
Optimize checks WooCommerce's files once after each WooCommerce update. If an update changes the cart panel's styles in a way Optimize wasn't built for, the styles load as WooCommerce ships them until Optimize is updated, and the Shop Cart card on Optimize Settings says so. It needs WooCommerce 11.1 or newer.
Turn it off
On Optimize Settings, check Load the cart panel's styles with the page on the Shop Cart card. Pages then load the styles at the top, as WooCommerce ships them. Pages already cached keep the change until the site cache is purged. Deactivating Optimize turns it off too.
