How to speed up a site on Bitrix for pagespeed?

Question

Google

How to speed up a site on Bitrix for pagespeed?

When testing a site for google on the pagespeed service https://developers.google.com/speed/pagespeed/insi...
, the service reports that the site's pages are loading slowly, due to the fact that the page loading speed is a lot of superfluous and JS, but these styles and scripts are needed for the normal operation of the site, some of them are styles and scripts of the site template, others are system JS scripts that are loaded by Bitrix itself.

In general, it is not very clear what exactly could be the reason that the page loads so slowly.

In the settings for the main module, I specified that JS was connected to the bottom of the page, but the speed only grew a little


In the Preload key requests block, pagespeed indicates that fonts affected the loading speed the most. To speed up page loading,
pagespeed


suggests using the link rel=preload attribute when including CSS.

I tried to follow the pagespeed recommendation and include CSS styles like this

<link href="/local/templates/.default/css/style.min.css"  type="text/css" rel="preload" />

but then the page styles fall off in the FireFox browser. How can I make pagespeed load fonts faster and not set the rel=preload recommendation, and is it even possible to add this recommendation to the link tag so that styles are not disabled in FireFox?

pagespeed recommends adding compression as I understand it can be added using the gzip compression settings in .htaccess and nothing else needs to be done?



Eliminate render-blocking resources - here the service recommends removing resources blocking rendering of the page, in my case for some reason it is the resulting CSS file of the site, where Bitrix combined the CSS style file of the site template, CSS files of component templates and system files


Remove unused CSS - here the service indicates the system CSS and site template styles as unused, why is this happening, because these files are used in the project?

Answer 1

but these styles and scripts are needed for the normal operation of the site, some of them are styles and scripts of the site template, others are system JS scripts that are loaded by Bitrix itself.

And something tells me that there is half of the unnecessary trash.
You need to start with a normal, concise layout, neatly integrated into the site, where you will understand what resource files are needed for what.

In the settings for the main module, I specified that JS should be connected to the bottom of the page, but the speed only grew a little

If you require this setting, then you no longer control the download and do not understand what is happening.
It is just what is needed in this case, in order to somehow help users who use standard templates and do not have the opportunity to make their own layout and integration.

To speed up page loading, pagespeed suggests using the link rel=preload attribute when including CSS.

Actually fonts.

I tried to follow the pagespeed recommendation and include CSS styles like this

You parsed the recommendation incorrectly.
If you want to preload styles you must add the preloy meta tag:

<link rel="preload" href="/local/templates/.default/css/style.min.css">

Instead of replacing them with loading styles.

Eliminate render-blocking resources - here the service recommends removing resources blocking rendering of the page, in my case for some reason it is the resulting CSS file of the site, where Bitrix combined the CSS style file of the site template, CSS files of component templates and system files

What does "for some reason" mean? Because it is a blocking resource. Take out the page and header styles in a separate file that you insert inline into html for users visiting the site for the first time in the head, and include two css files at the end of the page - this one (yes the styles will be loaded twice) and the general one.
And for users who visit again, connect only files, but already at the top of the page.

Remove unused CSS - here the service indicates the system CSS and site template styles as unused, why is this happening, because these files are used in the project?

It is possible that they are not used on this page that you are testing - here you have to choose - how you want to load the project - all the styles in whole, or only those that are needed on the current page - what is more important to you and how users navigate your site.

Answer 2

forget it, the only thing you can really do is:
1.optimize photos
2.use gzip compression
the easiest way to improve download speed is to connect a CDN for js/css and images + well, hardware is more powerful
In the case of cms like bitrix where there is no direct access to content cms/plugins, it is impossible to fulfill the requirements of Google without dancing with a tambourine - when clients are completely bruised, then you can add a post-filter of the page returned by cms ie. we get the finished page and optimize the code to which we did not have access. For example, we transfer js plugins to the footer of the site.