Page speed: Server responded slowly

[SebGbs]

Hello!
I've made a few sites with bootScore and I've recently seen this problem when I analyze the website with https://pagespeed.web.dev/.
The problem is regarding Delay for document request where I get the following error: Server responded slowly (observed 1674 ms).
I've tried running the test again with Twenty Twenty-Five enabled where the error seems to disappear.

I've installed bootScore v. 6.3.0 with a child theme.

Thanks in advance!

[neralex]

Are you compiling the scss-code online on-the-fly or before deploying?

[SebGbs]

Hello neralex
I'm just compiling online on-the-fly :)

[neralex]

Reason:

This is just causing the slow responding time of your webserver because on each pageload the used environment and a lot of files will be checked before the first paint of the frontend get a chance for rendering. When the file system of your server is running slower as usual too, you will feel it much stronger.

Why:

When you are developing on a local server environment for example, there are a some tools available to compile scss locally, which is much faster than a pageload of a cms. In a perfect world, you would have only one file as scss-endpoint, which you have to trigger for start the compiling. Endpoints like this are on this theme the main.scss and editor.scss because in there are all other scss-files included. On this workflow you would do your changes on some of the included scss-files while the local scsss-compiler is watching the main endpoint for a change. So you would have to do a simple change on the main.scss or editor.scss and the whole scss-code will be compliled in only one run.

But on this theme, the online scss-compiler is watching for more than one of endpoint-files if changes are made. With PHP you can check all these files only one by one and when your file system is slow and your network maybe too, it will cost more and more time and so it grows up... When you would try to compile scss on the same way on a local computer while watching more than one endpoint-files for changes, it could cause a heavy race condition. I had seen very strong mashines going down on their knees, while compiling scss this way. For this exists at the moment no well-painted solution in this theme.

@crftwrk Here it would help to watch only the main.scss and editor.scss (at parent or child, depends where are you working) and not watching all other scss-files which are already included in these files. As described before, sure - you would have do an extra change in one of these files to let it run but the pageload will be much faster instead of watching all possible files for changes inside of the chain. Another idea could be to hang on the compiler on an admin-hook with all the needed checks to let run it away from the frontend.

Conclusion:

So if you are really need compiling on-the-fly, I would suggest you to disable the compiler in wp-config.php and only activate it, when you have to do some changes. When you have to do some changes, just comment-out this line and the compiler is back in service.

Knitting pattern:

Open wp-config.php and add before: /* That's all, stop editing! Happy publishing. */

define('BOOTSCORE_SCSS_DISABLE_COMPILER', true);

https://bootscore.me/documentation/theme/css-scss-compiler/#disable-scssphp

I provided some extra guards in the last days, which are preventing all these checks a bit stronger, when the compiler is already disabled. If you are familar with PHP you can add it by your own or just download the main-branch of this theme and copy over the files /inc/enqueue.php and /inc/scss-compiler.php. Here is the related commit for my added guards: a9330ff and the PR: #1116.

[SebGbs]

Thanks for the detailed explanation - I'll into disabling the compiler :)

[crftwrk]

Using a vanilla Wordpress with no plugins, just the theme on an average hosting shows me this results. The result changes on each new scan:

Mobile	Desktop

I honestly do not understand why this values are so different in mobile/desktop.

Reduce unused CSS

Theme loads the entire Bootstrap with all components, utilities etc in parts in child-theme. You can remove all unwanted stuff in child-theme's main.scss. For example, if you do not use the dark mode, then you can disable dark mode styles in _bootscore-variables.scss as well. Check https://getbootstrap.com/docs/5.3/customize/options/ for more options how to customize Bootstrap.

The compiled main.css has an overall size of round about 290kb which is:

• 200kb Bootstrap
• 30kb Bootscore default theme
• 60kb Woo part

By removing unused styles, it is possible to reduce compiled main.css down to a very small file size.

Eliminate render-blocking resources

Theme loads:

• style.css, Theme's meta info
• main.css, Styles
• all.min.css, Font Awesome.

We had several discussions in the past to compile all together into one style.css file. But we need the option to disable Font Awesome and keep things separated.

• WordPress loads jquery.min.js.

A plugin like Autoptimize combines all CSS/JS into one file and has the option to render them as inline CSS/JS. This will remove the render-blocking resources entirely.

@SebGbs Twenty Twenty-Five is a block theme. Means this has no stylesheet anymore, instead it writes bad inline CSS into the HTML. This is a completely different approach. If you want to compare Bootscore to a default WordPress theme, use the latest classic theme Twenty Twenty-One. BTW, going the block based theme way is no option for Bootscore.

Serve static assets with an efficient cache policy

Use a plugin like W3 Total Cache

SEO

• The logo has no fixed width and height. We will add this in v7 and combine it with a filter to change the size in child-theme. For now, we can't do it, because it will crash logo sizes on all installations. Fix that on your site with 2 lines:

#masthead .navbar-brand img {
  height: 40px;
  width: 40px;
}

• The footer has class bg-body-tertiary and the links are in the blue primary color. The tool thinks that the contrast between this two colors is not enough. But we have eyes and you can change everything with SCSS and filters, ignore that part.

Conclusion

Page Speed Insides is a tool provided by Google. If you are checking the values for bootscore.me, you will see that the site has a very bad score. This is because the site uses two other tools, provided by Google as well: reCaptcha and Analytics. This two tools costs round about 30-40 score points. Just by using Google own tools ;-)

But bootscore.me is by far the no. 1 search engine result if you are searching for Bootstrap in combination with WordPress. This is because the overall site is good and follows best practices. The framewok is popular, unique and people are talking about it.

What i want to say with this: The pagespeed is important, but pay not too much attention to it. #1116 by @neralex is a first step to improve pagespeed values.

You can check https://bootscore.me/blog/new-plugin-new-feature-speed/. This post is old and outdated but describes well how theme and plugins affects the pagespeed and how to improve it.

[SebGbs]

Hello @crftwrk,
Thanks for the clarification - I'll look into removing assets I don't need for each project.