Critical CSS

I think you fixed it, no? 99/99 score ??

The fact that GPSI sometimes shows the CSS-file twice is a known bug in GPSI.

enjoy your sunday,
frank

HI,

I tried to use another critical css code which leads to 99 score however with this code I get several issue on my page. I now have re-included the previous https://criticalcss.com/generate code – with this code I have no issue on my website but the issue with the https://www.ausbildungernaehrungsberater.com/wp-content/cache/autoptimize/css/autoptimize_a6988cfccc3c9320449931063b0d5dfd.css

Do you know how to get it fixed?

Cheers
Ben

• This reply was modified 7 years, 5 months ago by ausbildung-berater.de.

Do you know how to get it fixed?

afraid the fix is in tweaking the critical CSS until GPSI is happy about it. but it can take some trial and error ??

at first sight the problem is with the image for which the critical CSS adds no placeholder. see if you find the relevant CSS for that article-image in the generated criticalCSS which Google was happy with but broke your site and add that to the critical CSS which Google was not happy with but did not break your site.

hope this helps,
frank

hmm…at least I allocated now the issue in the following code part

@media only screen and (min-width:1024px) {
  .et_extra_layout .et_pb_column_1_3 {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

} 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .et_extra_layout .et_pb_row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .et_extra_layout .et_pb_column {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .et_pb_extra_column_main,
  .et_pb_extra_column_sidebar {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    float: none;
    clear: both;
  }

  .with_sidebar .et_pb_extra_column_main,
  .with_sidebar .et_pb_extra_column_sidebar {
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
    -ms-flex-preferred-size: 100% !important;
    flex-basis: 100% !important;
    padding: 0 !important;
    float: none;
    clear: both;
  }

  .et_extra_layout .et_pb_column_1_3,
  .et_extra_layout .et_pb_column_4_4 {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  header.header li ul {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: block;
  }

  #top-header {
    display: none;
  }

  #et-info {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 0 0 10px;
    margin: 0;
  }

  #et-info .et-top-search {
    margin: 0 10px 10px 0;
  }

  #et-navigation .mega-menu-featured>ul,
  #et-navigation .mega-menu>ul {
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  .et_fixed_nav .logo {
    -webkit-transform: none;
    transform: none;
  }

  .logo {
    height: 50px;
  }

  #et-navigation {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  #et-navigation>ul {
    display: none;
  }

  #et-navigation li li {
    padding: 0 0 0 30px;
  }

  #et-navigation a {
    display: block;
    padding: 20px 0;
  }

  #et-navigation .mega-menu>ul>li {
    padding: 0;
  }

  #et-navigation .mega-menu ul {
    padding: 0 0 0 20px;
  }

  #et-navigation .mega-menu-featured>ul {
    padding: 20px 0 0 20px;
  }

  #et-navigation .mega-menu-featured>ul>li {
    padding: 0 0 20px;
  }

  #et-navigation .mega-menu-featured>ul>li:first-child .title {
    display: block;
  }

  #et-navigation .mega-menu-featured .title {
    display: none;
  }

  #et-navigation .mega-menu-featured .post-meta a {
    padding: 0;
  }

  #et-mobile-navigation {
    display: block;
  }

  #et-mobile-navigation nav {
    display: none;
    width: 100%;
    padding: 40px 40px 20px;
    border-radius: 0 0 3px 3px;
    overflow: hidden;
  }

  .et_pb_extra_module {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .et_pb_extra_module .main-post {
    width: 50%;
    border-right: 1px solid rgba(0,0,0,.1);
    border-bottom: 0;
  }

  .et_extra_layout .et_pb_column_1_3 .et_pb_extra_module .main-post {
    padding: 20px 20px 0;
    width: 50%;
  }

  .et_extra_layout .et_pb_column_1_3 .et_pb_extra_module .main-post .post-content {
    padding: 0;
  }

  .et_pb_extra_module .posts-list {
    width: 50%;
  }

  .module-head {
    width: 100%;
  }

  .et_pb_column_4_4 .featured-posts-slider-module .post-content h3 {
    font-size: 16px;
  }

}

But I don’t know exactly where in this code snippet….If I remove the whole part I am back on 99% and the https://www.ausbildungernaehrungsberater.com/wp-content/cache/autoptimize/css/autoptimize_a6988cfccc3c9320449931063b0d5dfd.css issue is gone.

For me the following part looks strange:

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

Is there not a bracket missing? Do you have any idea?

Cheers
Ben

yes, that indeed looks wrong. Maybe ask Jonas of criticalcss.com what is going on there (using the contact link)?