Since Google is making a big deal of fast loading sites I thought it would be good to start a discussion around what people are doing with Sage to meet good page speed standards. Some topics to start might be the following which mostly help with eliminating render blocking and improve perceived performance.
Optimum technique to generate inline critical css for either the entire site or on a page by page basis and use conditional statements to determine what critical css to inline based off page templates etc. Perhaps something like Penthouse could be integrated into Sage?
How to best handle loading of stylesheets, for example with LoadCSS
How to best handle loading of main.js with say LoadJS
Handling jQuery and other scripts loaded from a CDN
HTML/PHP minification
Serving custom fonts, either locally or with a service like Typekit
If you have any solutions as part of your workflow it would be great to see how you do things and how your experience has been. Other things like browser caching or caching plugins, while related to page speed aren’t probably related to Sage as such but still relevant for anyone who is developing a Wordpress site.
Just a quick question about critical css - the issue usually occurs because you have different stylesheets for different media / dependencies, which leads to lots of GET requests and lots of latency. However the entire design of Sage is to pull all that into a single minified file injected into the head.
I just checkout out one of my heaviest (on the CSS) sites, which has multiple modules being imported into the same file, and the transferred size was 294B, expanding to 160KB, duration 0.06s and latency of 0.5s. It’s true you could inline the sheet to cut that 0.5s, however I think that would prevent browsers using proper caching across pages.
You could benefit from using something like LoadCSS. If you could separate out your critical CSS it would likely be less than 10KB, which you inline in the head of your page and then LoadCSS loads your full 160KB file without render blocking.
I can see your point, especially if was a simple task to embed the critical css. But I feel it’s worth noting that almost all the latency associated with CSS loading and hence the issue with render blocking is in the GET requests, which Sage avoids though packaging the CSS properly - see manifests.json and the asset builder docs.
You could knock half second off the perceived load time using critical css embedding, and that would be well worth it, but it may be more efficient to use the rel="preload" attributes as opposed to requiring LoadCSS as a dependency, certainly for an initial test.
I’d give a similar recommendation when it comes to LoadJS, support is spreading fast for the async defer attributes, and unlike most cases where LoadJS is useful, Sage is only makes minimal GET requests, and neither the main.js nor jQuery require conditional logic.
Edit: I forgot preload had such low support, but I still think using prefetching would be a good first step.
It’s been 3 years since I first posted about this so I thought I would post a follow up about what I’ve learned since then and what I’m doing.
Poor performance isn’t Sage’s fault, it is more of a Wordpress thing in general. Back in 2016 I would sometimes spend weeks working at all the best practices to speed up my Wordpress sites and while there were some improvements I eventually discovered GatsbyJS last year and it is a game-changer. If I were part of the Roots dev I’d be working on a Gatsby starter for Wordpress because this is almost certainly where the future is headed. My website performance consultant site is built using Gatsby. I haven’t used Wordpress for the data source but I could have and it wouldn’t impact on performance at all.
If you are struggling with slow Wordpress sites then I highly recommend you take a look at Gatsby. You can test any site using Google’s Web.dev site analysis
I’m interested in messing around with this setup. How does something like GatsbyJS work with very dynamic sites, like sites constantly being updated from the backend and/or WooCommerce sites?
As long as your backend supports GraphQL then it will work well with Gatsby. Below are a few links relating to ecommerce sites with Gatsby. Shopify for example works well with Gatsby, Wordpress can be used with Gatsby, see the docs for sourcing from WordPress. Here’s a source plugin for WooCommerce.
What’s cool about all this is what’s been termed as the “content mesh”. Basically you don’t need to have a server or manage software anymore. Your sites requirements will determine the best approach but for many ecommerce sites you can use a backend like Shopify, Snipcart or whatever meets your needs and then push your site to a CDN like Netlify.