Render blocking CSS and Unused CSS

janardhan
(@janardhanjp)

2 years, 8 months ago

I have been using your Plugin WP Meteor quite for some time. I have disabled several plugins with regard to Minification of CSS and JS, Lazyload images, etc. Still the Plugin is giving good performance. I tried to check if any other plugins give such results. But ultimately I have decided to continue with it.

But almost all cache optimization plugins come with Minification etc. So I request to develop one Cache plugin exclusive to use with WP Meteor.

And regarding Unused and Render blocking CSS there is problem. They are downing Initial server response and First Contentful paint. Can you pl suggest some to resolve my problems in this regard.

Render blocking CSS

Resources are blocking the first paint of your page. Consider delivering critical JavaScript and CSS inline and deferring all noncritical JavaScript and CSS.

https://www.samskrutijanardhan.com/wp-content/themes/astra/assets/css/minified/style.min.css?ver=4.3.1

https://www.samskrutijanardhan.com/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=4.3.1

https://www.samskrutijanardhan.com/wp-content/themes/astra-child/style.css?ver=1.0.0

Remove Unused CSS

Consider removing CSS rules from style sheets that are not used to reduce the page weight and load time.

https://www.samskrutijanardhan.com/wp-content/themes/astra/assets/css/minified/style.min.css?ver=4.3.1

Thanking you,

Janardhan Prasad DVS

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter janardhan
(@janardhanjp)

2 years, 8 months ago

In 10Web Blog I got the following narration about Render blocking CSS:

The “Defer” is a Boolean attribute. It works only for external script documents. When it is present, the script is executed after the page performs the parsing. On the other hand, if “async” is present, the script is executed asynchronously with the rest of the page. In other words, “async” works while the page continues parsing, while “defer” works when the page finishes parsing.

If we don’t use “async” or “defer” for the external scripts, the script will execute immediately before the browser continues parsing the page. This will create a “Render-Blocking” flag for that page. It is also important to note that “async” and “defer” will have no effect on the inline code. The best technique is to inline the “Above the Fold” content and defer the “Below the Fold” content.

I request WP meteor team to sort it out.
Thread Starter janardhan
(@janardhanjp)

2 years, 8 months ago
When I tried to fix the render blocking problem with Debloat Plugin it is working, the FCP has come down but CLP has increased and the container is shifting towards left of the page. Now I have unticked the css optimization but enabled Remove unused css in Debloat plugin. Still the Render blocking is showing like this:
```
<link rel='stylesheet' id='astra-menu-animation-css' href='https://www.samskrutijanardhan.com/wp-content/themes/astra/assets/css/minified/menu-animation.min.css?ver=4.3.1' media='all' /> <style id="debloat-wp-block-library-css">
<link rel='stylesheet' id='astra-theme-css-css' href='https://www.samskrutijanardhan.com/wp-content/themes/astra/assets/css/minified/style.min.css?ver=4.3.1' media='all' />
<link rel='stylesheet' id='astra-child-theme-css-css' href='https://www.samskrutijanardhan.com/wp-content/themes/astra-child/style.css?ver=1.0.0' media='all' /> <!--[if IE]>
```
- This reply was modified 2 years, 8 months ago by janardhan.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Render blocking CSS and Unused CSS’ is closed to new replies.