CSS Minification Incorrect, possible to disable minify but still Aggregate?

  • Resolved benamada

    (@benamada)


    4 years, 11 months ago

    Hello. With CSS Optimization enabled, some styles are not being applied despite the rules coming through in the minified CSS. Checking into it, the styles within the minified CSS are within a media query block (max-width:479px) and when reducing the screen to 479 or less pixels, the styles are indeed applied. However, these styles in the original CSS files are not within a media query block, and with CSS Optimization disabled, the styles are applied all the time which is the intended behavior.

    If I untick “Aggregate all linked CSS-files”, the minified styles are correct — they are not within a media query block. Where performance is particularly hurting though is the number of CSS files (about 39 in total), and having the CSS files aggregated to one file in particular helps on performance tests, more so than the minification.

    Unfortunately the site has a lot of CSS. The minified/aggregated CSS file is 1.7 MBs uncompressed. I’m not sure if the incorrect minification is due to the overall size of the CSS, or if there’s a glitch with the minifier or if there are any syntax issues with the original CSS that is leading to the incorrect minification. With 39 CSS files, it’d take time to go through each of them looking for syntax issues, if there actually is a syntax issue, which might not be the case.

    The best solution would be if the minification to a single CSS file worked correctly. The next best solution would be if Autoptimize had an option to still Aggregate the files without minifying them as that alone would help with performance… reducing 39 CSS files down to 1. It seems like this would not be a particularly involved option to add? Any suggestions are appreciated, many thanks.

    Ben

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    can you share the site’s URL Ben, so I can have a look at what is (not) happening?

    Thread Starter benamada

    (@benamada)

    Hi, sure of course. I have 2 versions of the site, one with Autoptimize enabled and one without it so you can see the difference.

    Autoptimize disabled (Live site): https://masteel.co.uk/corten-b/
    Autoptimize enabled (Dev site): https://masteeldev.wpengine.com/corten-b/

    Notice the “category” link at the top — “Weathering Steel”. On the Dev site, it’s not styled correctly – it’s a red square with red lettering. There are some styles targeting that element with this selector: .single-post-header-wrapper.dt-parallax-bg>.container .post-categories a. On the Live site with Autoptimize disabled, the styles are in this CSS file: https://45ztdn1v6vav4dfbpaephc01-wpengine.netdna-ssl.com/wp-content/themes/patrai/css/blog-single.css?ver=1.1. On the Dev site, the styles kick in once the screen width is <= 479px due to the media query, but this style on the Live site (in the original CSS file) isn’t in a media query so should be applied at all times. P.S. if you search for that CSS selector on the Live site in that CSS file I linked to, it has spaces before and after the > which get removed in the minification (this is of course normal, bringing it up just in case you search and don’t immediately find it).

    Thanks in advance for taking a look.

    Regards,
    Ben

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Looks like the problem is a missing } in wp-content/themes/patrai/framework/js/magnific/magnific-popup.css to close the media-query there?

    frank

    Thread Starter benamada

    (@benamada)

    Great find Frank, thank you. That was it… the missing } in that CSS file! Everything is styled correctly now as you can see here https://masteeldev.wpengine.com/corten-b/. In retrospect, an Aggregate-Only option in Autoptimize probably wouldn’t have helped here since the missing } would cause the same issue once the CSS files were aggregated. Thanks very much for taking the time to find the problem.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    You’re welcome Ben, feel free to leave a review of the plugin and support here! ??

    happy end-of-year celebrations!
    frank

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Minification Incorrect, possible to disable minify but still Aggregate?’ is closed to new replies.