- This topic has 82 replies, 5 voices, and was last updated 2 years, 6 months ago by David.
-
AuthorPosts
-
September 17, 2020 at 2:02 pm #1447764TomLead DeveloperLead Developer
Hi there,
Which stylesheets are you trying to defer, exactly?
September 17, 2020 at 10:41 pm #1448085DeepakHello,
I can plan to defer main.min.css from secondary navigation, widget areas and mostly will defer and run some tests and accordingly finalise the list.
It is just that currently I am not sure how I can dequeue and enqueue with defer for stylesheets
Regards
DeepakSeptember 18, 2020 at 11:12 am #1449076TomLead DeveloperLead DeveloperIt’s possible, but it involves dequeue-ing those files and re-adding them to the footer.
I would agree if they were big files, but they’re quite small. Is there a reason why you’re not just using a plugin like Autoptimize to combine them?
September 18, 2020 at 11:28 am #1449091DeepakHi Tom,
I thought the whole idea of having component specific stylesheet was to load them only when necessary. If I use autoptimize then I am combining the entire sheet which becomes around 50kb (using other plugin’s stylesheets).
Also most importantly with HTTP2 it is not recommended to combine JS or CSS files. With generatepress I see all the CSS are already combined, JS combine is breaking my site for which I have already raised a ticket with plugin developer.
I prefer to use WP Rocket which already provides Minify CSS so again using another cache plugin will just create problems.
If you can help me with a sample code to dequeue and enqueue with defer a stylesheet (or send it to body or footer), I can do some trial runs to make sure if it has any significant impact.
Currently I just preload all the stylesheets which in a way helps but I really don’t want to load 7-8 css files when I know only two of them are important while others can be deferred
Regards
DeepakSeptember 18, 2020 at 2:14 pm #1449270TomLead DeveloperLead DeveloperTry this:
add_action( 'wp_enqueue_scripts', function() { wp_dequeue_style( 'generate-widget-areas' ); wp_dequeue_style( 'generate-comments' ); wp_dequeue_style( 'generate-secondary-nav' ); wp_dequeue_style( 'generate-secondary-nav-mobile' ); }, 200 ); add_action( 'get_footer', function() { if ( is_singular() && comments_open() ) { wp_enqueue_style( 'generate-comments' ); } if ( is_active_sidebar( 'top-bar' ) || is_active_sidebar( 'footer-bar' ) || is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) || is_active_sidebar( 'footer-3' ) || is_active_sidebar( 'footer-4' ) || is_active_sidebar( 'footer-5' ) ) { wp_enqueue_style( 'generate-widget-areas' ); } wp_enqueue_style( 'generate-secondary-nav' ); wp_enqueue_style( 'generate-secondary-nav-mobile' ); } );
The only issue here is that you’re assuming the location of these files. We may decide to move things around in the future which will break your styles. Personally I would focus elsewhere, as this kind of thing won’t make a huge performance difference.September 21, 2020 at 9:04 pm #1453206DeepakThanks a ton Tom π
September 22, 2020 at 9:28 am #1454127TomLead DeveloperLead DeveloperLooked into this a bit more and it turns out WordPress keeps the resources registered even if you dequeue them, so you don’t need to re-add the URLs etc.. Updated the code above π
June 15, 2021 at 10:35 am #1823228OnurHi Tom,
I have used that code with it or without it, I am also facing a CLS problem that I could not solve completely.
You can also test it via this link: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.swtestacademy.com%2Frest-assured-tutorial-api-testing%2F&tab=desktop
If you can help, I will be very much appreciated it. I am very close to have a score of 100 π
I also want to thank all team for the awesome theme. I am very much happy to be onboard.
Btw, I am using WP-Rocket and I have done regenerate critical CSS (this helped a lot to reduce CLS but at the desktop, it did not make it around 0. For mobile, I am getting 0 CLS. If you need extra information, please let me know.
June 16, 2021 at 4:31 am #1823961DavidStaffCustomer SupportHi there,
try adding the CSS that Tom provides here:
June 16, 2021 at 4:51 am #1823973OnurHi David,
Thanks for the reply. I have tried but no luck. The results were the same. I think maybe it is about deferring some js files.
I have most of the time below 0.1 CLS not 0 but still, it is ok but if we can make it 0. That will be awesome. π
June 16, 2021 at 5:04 am #1823989OnurSample page: https://www.swtestacademy.com/xpath-selenium/
As I see when I use 2G speed on Firefox’s network tab, as Tom mentioned content area loading faster and moving to the most left to middle. Then right and left sidebars loaded.
June 16, 2021 at 5:14 am #1823995OnurHi David,
I tweaked the CSS a bit and for my case below CSS worked better. Now CLS reduced to 0.02-0.03 which is quite good. It is not 0 but still not bad and with the below CSS tweaks, my page speed score increased from 98 to 100.
Maybe, you can suggest better CSSs which makes the CLS exactly 0.
Here are the my CSS additions as custom CSS:
.left-sidebar {
margin-left: auto;
}.right-sidebar {
margin-right: auto;
}.site-content .content-area {
margin:auto;
}June 16, 2021 at 5:18 am #1824001DeepakI finally settled with following hack which will hide your content until the DOM content is loaded so CLS is 0.
Give it a try if it works for you.
June 16, 2021 at 8:47 am #1824429DavidStaffCustomer SupportOnur, sorry but i can’t see what exactly is causing it that minor shift as there are a lot of scripts running that will affect the layout. At those levels of CLS i would happily ignore it.
June 16, 2021 at 1:04 pm #1824639OnurHi @Deepak,
That js hook created a flashing effect as I see. That’s why I reverted back again. I think I will continue to use the CSSs that I have shared. I have currently around 96 mobile and 100 desktop scores which are not bad.
Hi @David,
I also don’t know the details but I think this is not happening only to me as I see but as you mentioned with that level CLS I am ignoring it. At least with those CSSs the CLS reduced from 0.09 to 0.03 level. Thanks for your reply.
-
AuthorPosts
- You must be logged in to reply to this topic.