- This topic has 17 replies, 3 voices, and was last updated 2 years, 9 months ago by
.
-
Posts
-
Are there any ways to reduce the following CSS files? Only for the Mobile version. These are the top slow files on your page
style.min.css
main.min.css
columns.min.css
offside.min.cssCustomer Support
Hi there,
Unfortunately not – we only add code that are absolutely necessary to the theme and premium plugin.
Hope this helps.
Are there any other ways to reduce the size of those files? I don’t mind reducing graphics or additional features. I just need very bare minimal things.
style.min.css -> Is this something I can do? Any tips on how to achieve this?
Making files smaller is a simple way to make pages faster. The solution is to remove unused rules in this stylesheet.
The solution is to load style.min.css in the
<head>before script tags. This can be ignored only if a stylesheet is being loaded asynchronously for critical rendering. It is expected that third-party scripts get appended to the top of the<head>. This is acceptable as long as they wait until after DOM-Content-Loaded or window.load events.WHAT “SIZE” FIX IS THIS:
Unfortunately the code in those files are necessary for GP to work correctly and should not be modified.
What does this mean .. I know GeneratePress is promoted as the most lightweight theme. However, there is no option to reduce the size by disabling the style and making the website a very fundamental one?
Unfortunately there isn’t such an option available.
You could try manually removing the CSS you aren’t using there – but those files will get overwritten during updates so you’d have to do that every time you update the theme and also make sure nothing breaks.
Do you have some examples of this process? Is there any option to add asynchronously load these for critical rendering so that these won’t block other threads …
Customer Support
Hi there,
first off the
style.min.csson your site is not a GP stylesheet. Its a core style sheet for the core block styles. Which happens to be larger in size (9kb) then the 3x stylesheets (total 7kb) that GP loads. GP has no control over that file.You can try dequeueing that style on the home page, where it is most likely not required, using a PHP snippet:
function db_dequeue_block_styles_on_home(){ if (is_home()) { wp_dequeue_style( 'wp-block-library' ); wp_dequeue_style( 'wp-block-library-theme' ); } } add_action( 'wp_enqueue_scripts', 'db_dequeue_block_styles_on_home', 100 );NOTE: this assumes there are no core blocks being loaded on the front page.
Secondly GP loads CSS dynamically where possible. For example you only have the minimal columns.css loading for your blog page, whereas selecting other blog options would combine this with the other necessary styles and load a larger file.
Modifying the core theme styles is not recommended. And any issues that arise from doing so is going to make it difficult for us to support.
If you really feel the need to trim off a few bytes of CSS on initial load then you would need to look at plugins and other services to generate critical CSS and defer unused CSS. But for 7kb of browser cacheable styles i am not sure its worth the aggravation.
first off the style.min.css on your site is not a GP stylesheet. It’s a core style sheet for the core block styles. Which happens to be larger in size (9kb) than the 3x stylesheets (total 7kb) that GP loads. GP has no control over that file.
Thank you much for the reply.
Can you help me to get the change these 3xstulesheets that GP loads instead of the ones I have now. I don’t know how come I got the larger file 🙂
Some other changes I have done is discussed in the following thread https://generatepress.com/forums/topic/remove-sticky-min-js-mobile-theme/
I am not sure what you mean – Your site is loading just these files from GP:
main.min.css columns.min.css offside.min.cssWhich are the ones i mentioned and they total only 7kb in size.
first off, the style.min.css on your site is not a GP stylesheet. It’s a core style sheet for the core block styles. Which happens to be larger in size (9kb)
It seems you identified that style.min.css on my site is not a GP stylesheet. My point was related to that discussion. Do you know the chances of not using a GP stylesheet that is lesser in size than the current stylesheet? Does this make sense?
Unfortunately not.
You would have to create your own custom style sheet for the block editor that only loads the CSS for the blocks you’re using. And then dequeue the core file. The risk with doing that is if WP updates the HTML or CSS for those blocks is that things may break. Again the best approach is to only load them when required, like the snippet i provide does, and to look into critical CSS methods of only loading whats required.I already use the plugin to load critical CSS. The snipper that you have provided is for home page. Can you share the one for posts as well, please?
You can add any condtional template tags to the code i provided:
https://developer.wordpress.org/themes/basics/conditional-tags/
So this for example will remove it from home, archives and single posts:
function db_dequeue_block_styles_on_home(){ if (is_home() || is_archive() || is_single() ) { wp_dequeue_style( 'wp-block-library' ); wp_dequeue_style( 'wp-block-library-theme' ); } } add_action( 'wp_enqueue_scripts', 'db_dequeue_block_styles_on_home', 100 );But as you’re using the core Blocks on your Single posts i would not recommend including the single post tag:
|| single()But as you’re using the core Blocks on your Single posts I would not recommend including the single post tag: || single()
Thank you…..
Is there any better option to present single posts without core blocks for mobile (in terms of performance)?
- You must be logged in to reply to this topic.