Wordpress Performance Plea

#help #wordpress #performance #learndash

How can I improve codingcat.dev's performance without giving up functionality. Or is this just not possible with Wordpress?

What I have done so far

Added CDN from WPEngine
Started using WP Rocket to get more performance gains
All images are served from cloudinary with q_auto to serve in webp (most of the time).
Utilizing AMP with AMPforWP to hope for better results in Google (although this isn't my main focus).

Twitter Example

Here is a comparable site that I check often https://css-tricks.com. There is no learndash that I am aware of so might not be a 100% comparison.

https://codingcat.dev performance

My plea for help.

My Background

I come from a JAMStack world, I could make all of this better with Next.js or Gatsby or Angular Universal...but I just don't know Wordpress. I have been running my JAMStack site with sanity.io and Gatsby for years for free but I wanted more control over adding Tutors so that we can start producing some solid content with a Turn Key solution.

Financial Concern

However the finances on this project already are getting out of control as illustrated here...

What I want in the end

I hope to be able to provide a solid platform for Tutors and Users to collaborate like on Dev.to, but also get paid content similar to how egghead.io operates. However with the performance issues I just don't know if people will be happy.

Try out the site and comment below on what you thing the performance is like?
https://codingcat.dev

Top comments (7)

Gary Bell • Nov 5 '20

I find the Lighthouse Audit from Chrome's developer tools useful in these instances. They give a whole host of things to investigate. Quickly running it against your site, there's some really quick wins:

Set height and width attributes on images. The rendering engine will know explicitly what needs to be set for sizing, rather than calculating it
Either increase the size of the thumbnail space on screen, or reduce the size of the thumbnail images served to the user. That will either reduce the required bandwidth (for smaller images) or reduce computation for scaling (if there's more space allocated)
Combine CSS and Javascript where possible. The page has over 100 requests just to serve the home page. That's a lot of things to download for the browser, even over HTTP/2. 78 Javascript files - that's a lot to get and have to wait for.

In terms of performance - I have Gigabit broadband, and I've seen load times on the page from 1.5 seconds up to 7 seconds. the lower of which is when the assets are cached. For someone on a lower speed connection, it's potentially prohibitively slow (and that's just the home page).

Louise • Nov 6 '20

Similar to what Gary said, make sure your image optimisation plugin resizes images to minimum size needed and install a plugin like Hummingbird to combine and minify CSS/JS files (though that can break some things so you may need to add exclusions.)

Hummingbird will scan you site based on Google Lighthouse and make it easy for you to action what it recommends. Make sure you have GZIP compression enabled too for all content types.

Alex Patterson • Nov 9 '20

I actually use cloudinary for all images so they are off the server, but I will for sure checkout hummingbird!

Sean M Davis • Nov 8 '20 • Edited

Hi! I run a Buddy Boss and LearnDash site. Those are very performance-intensive plugins and the BoddyBoss theme is pretty heavyweight too. We have a $2k a month WPEngine server running those plugins and our performance is just ok. That is just the realities of running a social media site where almost nothing can be cached. If you want to save money, your best bet is to set up your own infrastructure in Google Cloud or AWS. Take advantage of managed databases, auto-scaling groups, using S3 with a CDN for uploads, and see if you can use Redis and Elastisearch to speed up db queries. You will achieve a lot more performance for cheaper, but it is a pain to manage all that infrastructure. That's why we just ended up paying WPEnging a lot more money to do that for us.

Alex Patterson • Nov 9 '20

I've actually moved the site three times in two weeks from Kinsta to WPEngine and now to Flywheel, which is part of WPE
getflywheel.com/

The cost to performance makes me a little happier. I also am considering using Learnpress with Edu theme. I have an example of this setup as well now and I am much more impressed.
docspress.thimpress.com/eduma/

I still feel like we will end up using Next.js to create our own frontend and this WordPress setup for our backend. The blog, Tutorials can be static builds and the rest of the bbpress and things can run more dynamic.