I wanted to ask about speed with regards to Discourse. I did a Google PageSpeed Insights test on Discourse and got a score of 81. I had this score even after adding 10 more plugins and more theme components and S3 storage.
I already have S3 so it's not due to any media or images. It's due to JavaScript and CSS. I then tried doing the same test on meta.discourse.org and they got a score of 91.
Here, it shows I have 2.15 seconds due to JavaScript. Some of these I recognize as part of theme components, but some are built-in to Discourse. I had earlier tried Flarum which advertises a faster CSS+JavaScript payload size than Discourse or nodeBB:
It seems the reason for this is because their frontend JavaScript framework is Mithril which is faster? Flarum and Discourse have both been around for 5 years. Are there any plans for further optimization of Discourse or have we reached a saturation point?
JavaScript when downloaded to the browser, will cache it, so it's only slow on initial load, but it still affects first-time users.
Other than just reduce the number of plugins and theme components, use S3 storage, are there any other tips and tricks to optimize speed?
Do you mean other than network bandwidth and computer processing speed?
From reading your post, it sounds like you are interested in how to optimize the performance of an SPA web app in general (Discourse being one of many SPAs), is that right?
Well, anything that I can control on my end of how these scripts are loaded. The network bandwidth and processing speed are factors that are fixed for me currently.
I get a score of 85 on mobile and 95 on desktop, which I think is good, but I wonder why the huge difference for mobiile?
Then, if I enter safe mode and disable all plugins and theme components, I get a score of 92 on mobile and 97 on desktop. This is essentially default Discourse so it's the maximum score possible with the core functions of Discourse.
Essentially, my desktop score only went up by 2 points after disabling all plugins and themes. It's the mobile one that's the issue.
So I tried again but this time I only disabled theme components, not the plugins. Lo behold, I get a 93 on mobile and 97 on desktop. I got the exact same score even with all plugins enabled (even unofficial ones).
Then I checked all my theme components, disabled them one by one to see if the mobile score would change. There was only one that jumped the score after disabling it:
Perhaps the if statement of @if($force_mobile_alignment == "true") in the CSS is slowing it down? If it's in the mobile tab for CSS already, what does this even do?
It's really unfortunate that we can't select which theme components to enable / disable for mobile vs desktop. It's either on for both of them or off.
OBTW (and somewhat tangential to your question @Antimetaman) , I always get similar scores (to your scores) on initial app load; but when I reload the page after the initial load, the score goes to 99 or 100%.
I think it is going to be very hard to get a JS SPA app to load any better than the scores you are seeing; before it is cached by the browser.
My experience is that after the Discourse SPA is in the browser cache, it loads very fast and the pagespeed scores are very high when reloaded.
As you have noticed, Discourse is optimized for the user experience, not for Google and search engines and the SEO is generally suboptimal compared to SEO-optimized LAMP apps.
I am not sure, but my gut feeling is that the statement above is not the root cause of the slowdown, but I could be wrong, for sure.
