Last Updated on June 4, 2019 EDT by Jordan
The following was a post I made on the WordPress Speed Up FaceBook Group. I thought it was worth posting here in-case someone else might be looking for something similar.
Olly Bee Excellent! First load for me was a white page without CSS being applied. Which is weird, I haven’t gone to the site before. So you might want to watch out for that, or maybe you were just making changes.
You’re not loading many assets which is great, mostly due to breeze combining css and js (assumption here since I see breeze.css). Just to note minification isn’t required for a great experience for customers. It’ll get you get you good scores on GTMetrix/PageSpeed but you’ll have to way usability for great gtmetrix scores.
Ue the built in Dev Tools in Chrome and look specifically at the Network page and waterfalls. Find items that are taking a long time to load, and see if they have any cache headers. Reload the page and see if they’re loading faster and if the cache headers appear.
When looking at all the items loading, the document items are usually html or PHP. This is where server resources come into play. If you’re getting higher load times on documents, it’s most likely due to caching not being in-play. Or it’s just a dynamic page (PHP) that can’t be cached (WooCommerce checkout, but even then LiteSpeed can use ESI blocks which makes it easier). If you can’t cache a page, then the server resources come into play. Specifically CPU, PHP its a CPU hog. Facebook tried to fix this by implementing compiled PHP using HHVM, but ditched PHP all together. Each time you have to load a PHP page, it has to be compiled by the server. You want to limit this as much as possible. WordPress deals with this fine as a vanilla installation. Once you add plugins, load times start to increase.
When I first loaded your portfolio page, I noticed it took about 3ms to load all assets. I looked at all the headers of each request and found that the main request for /portfolio had a x-cache miss and a high load time. Once I refreshed the page this load time went down. So it’s possible caching was put into play here either through Varnish or NGiNX fastcgi cache. Hard to tell, would have to look at your stack more.
If there’s caching in play, a header should appear. Most of the time this is configured, but not always.
Once your cache is filled, it looks like your pages load faster. So you might need to tweak your cache TTL. Which just tells the cache how long to keep things. This is great for static pages, but for anything dynamic it might cause issues. Most caching plugins deal with this automatically. Even CloudFlare does well with this if you setup the proper page rules. CloudFlare by default doesn’t do well with a WordPress site.
Aside from that, I see that .tff files aren’t being cached and have 400ms load tims where all your images are loading within 20ms which is great. That’s because most of them are from your StackPath CDN. And they’re small, which helps!
Another issue I noted is that your query stringed static assets aren’t being cached. Which is a common issue, so you can either enable this in CloudFlare via a rule. Or you can look at a plugin like Clearfy or Perf Matters. If you want to save money, there is code out there to simply just do this specific task.
Also, with the above plugins you can remove the wp-emoji-release.min.js and dashicons.min.css from loading. Again you most likely aren’t using them, but test anyways.
Hope that helps, Cheers!