Parent Theme’s style.css file is render blocking for some reason

Resolved marketing2
(@marketing2)

6 years, 11 months ago

I noticed when I do a Google PageSpeed test that I get the following recommendation every time…

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
Approximately 62% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
• https://1yrg245s3u83m41hp1mu0wgg-wpengine.netdna-ssl.com/wp-content/themes/beatrix/style.css

Do you have any idea how I can fix this?

I find it really strange because it is referencing the style.css file from my parent theme even though I’m using a child-theme with it. Even stranger is the fact that if you look at the contents of that file, it doesn’t have any CSS in it! It only has the following inside of it…

/*
Theme Name: Beatrix
Theme URI: http://demo.teslathemes.com/beatrix/
Description: Awesome theme from TeslaThemes club
Version: 1.0.7
Author: TeslaThemes
Author URI: http://www.teslathemes.com/
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: theme-options,post-formats,custom-colors
Text Domain: beatrix
*/

When I look up how to fix the issue, it says to inline al the critical CSS from the file being referenced but in my case there is no CSS to inline.

Any help would be greatly appreciated.

Thanks,

Chris

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

Plugin Author Optimizing Matters
(@optimizingmatters)

6 years, 11 months ago

evening @marketing2;
first of all; when using Autoptimize (which this support forum is dedicated to), you should not see these warnings for theme or child-theme CSS.

now forgetting AO for a sec; as soon as your HTML references a CSS-file in <head> GPSI will consider it render blocking. if there’s nothing in it, dequeueing could help. or enabling AO CSS optimization … 😉

enjoy the (close-by) weekend!
frank
Thread Starter marketing2
(@marketing2)

6 years, 11 months ago
But I am using Autoptimize and I do see this warning…

I double checked my header and it doesn’t reference style.css anywhere in it although I do see this PHP that might call it somehow…
```
 <?php echo "<script defer type='text/javascript'>var TemplateDir='".TT_THEME_URI."'</script>" ?>
    <?php wp_head(); ?>

</head>
    <body <?php body_class();?>>
    
        <?php
            $page_id = tt_get_page_id();
            $header = get_post_meta($page_id, THEME_NAME . '_header_type', true ) ? get_post_meta($page_id, THEME_NAME . '_header_type', true ) : (_go('header_style') ? _go('header_style') : '');
```
As you can see I already tried adding the defer tag to the first line of that code but it did not work. Do you see anything in here that might be calling the style.css from the parent theme?

I have already enabled AO CSS optimization… Here is how I have it setup…
http://tsunamipremiumvapor.com/wp-content/uploads/2017/05/AOSettings.png

Here is my page source…
view-source:https://tsunamipremiumvapor.com/
- This reply was modified 6 years, 11 months ago by marketing2.
Plugin Author Optimizing Matters
(@optimizingmatters)

6 years, 11 months ago

Confirmed, looks like the child theme (/wp-content/themes/beatrix-child/style.css) is importing the parent theme’s CSS;

@import url("../beatrix/style.css");

Assuming you’re following the child theme guidelines, you could simply remove the @import-line?
Thread Starter marketing2
(@marketing2)

6 years, 11 months ago
That worked, thanks a bunch!
- This reply was modified 6 years, 11 months ago by marketing2. Reason: Forgot to mark as resolved

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

The topic ‘Parent Theme’s style.css file is render blocking for some reason’ is closed to new replies.

Tags