Combining Multiple Process CSS Files & CDN

  • Resolved Graham Smith

    (@imjustcreative)


    9 years, 7 months ago

    Hi.
    Hope I can explain this clearly. 🙂

    When I check my site on Pingdom Tools, i get a notification that there are 3 processed ‘minified’ CSS ‘Header’ files being pulled, along with my main theme style.css which I exclude from processing.

    I quite possibly have misunderstood the process of this plugin creating multiple CSS files, depending on the page, post etc.

    I sort of assumed that even if multiple processed files are processed, only one would be picked up when a page is checked by Google, Pingdom Tools etc.

    At the moment I’m not getting the true benefits of combined CSS files, as there are 4 being picked up (as screenshot shows) which seems to defy the idea.

    https://www.dropbox.com/s/xlbwtgt3yxdhm24/Screenshot%202016-09-17%2012.21.29.png?dl=0

    I’m wondering if the CDN/cache aspect is confusing the process, along with my other caches: WP Rocket, Cloudflare and MaxCDN.

    Is there indeed a way to ensure only one processed CSS file is picked up, so as to score mega points with Google Page Speed INsights etc? 🙂

    If you need further info, please shout!

    • This topic was modified 9 years, 7 months ago by Graham Smith.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Raul P.

    (@alignak)

    9 years, 7 months ago

    Hi,

    What you are seeing is the correct behavior (but I get your pain), but take a closer look:

    http://pull1.thelogosmith.netdna-cdn.com/wp-content/plugins/fast-velocity-minify/cache/header-49f42eff-1445783909.min.css.txt

http://pull1.thelogosmith.netdna-cdn.com/wp-content/plugins/fast-velocity-minify/cache/header-1f9704eb-1445783909.min.css.txt

http://pull1.thelogosmith.netdna-cdn.com/wp-content/plugins/fast-velocity-minify/cache/header-3a75236d-1445783909.min.css.txt

    Because CSS executes in order and later css files overwrite previously loaded files… my plugin creates groups in order to keep the order in which scripts have been enqueued.

    When you have let’s say, 20 css files enqueued and you exclude the one at position #5, you will get a merged file with files from #1 to #4, then the excluded #5 file, and then the rest from #6 to #20.

    The same happens when there are mixed mediatypes, for example:

    Most CSS files are going to be of type “all” but somewhere in the middle, you may have a mediatype for mobile or print.

    If you have 10 consecutive files of mediatype “all” they are going to be merged… but if you have 5 of type “all”, 1 of mobile, and again 4 of type “all”… then you are going to get separate merged files.

    How you can solve this is by enqueuing the css files properly in the theme, first those of mediatype “all” and then mobile. This is needed because we cannot merge mobile and “all”, as it would break the layout in most cases.

    My plugin does the best of trying to sort through bad practice in theme developing, but for compatibility I decided to keep the order in which files are included… at the expense of less merged files.

    You could dequeue all css files and then enqueue them in the correct order for it to work the way you want. In your case, enqueuing mediaelement – http://imjustcreative.com/wp-includes/js/mediaelement/mediaelementplayer.min.css after the last one, would probably result on what you want.

    You still get some benefit of merging them, because if you see the logs there were 12 files that became 3… If you put them in the proper order, then you will have 1 or 2 (depending on how many mediatypes you have).

    But on a good note, I am working on an option to automatically merge all mediatypes of the same type together (as an option, because changing order of script might break the design).

    Anything, let me know.

    Thread Starter Graham Smith

    (@imjustcreative)

    9 years, 7 months ago

    Ah, I see. I now understand, all makes sense. Thank you VERY much for the detailed explanatioin.

    I actually have another mystery that has started since installing this plug-in. I keep an ete on my Page Speed and Scores etc, and since installing this plugin I’m seeing that Google Open-Sans is being called and referenced, and this is being caught out by various Speed/Score websites.

    I only have one Google font referenec for my site design, which is Google Lato, but I’m seeing the complete Open Sans family being referenced and called, which is affecting my overall speed and score accordiung to Pingdom etc

    https://www.dropbox.com/s/kj6thaxr76nhq74/Screenshot%202016-09-19%2017.42.48.jpg?dl=0

    I knew that WordPress Admin started calling/using Open Sans for the back-end, so I started finding solutions to address this: using code in functions.php, even using plugins built for the sole purpose of preventing Open Sans being referenced, but nothing has worked.

    So it does turn out that your plugin is seemingly making calls for Open Sans, and it’s being tagged with every page on my website (as per screenshot).

    Is there anyway we can stop this from happening, as it seems quite a performance hit?

    Many thanks

    Thread Starter Graham Smith

    (@imjustcreative)

    9 years, 7 months ago

    My bad. Seems it’s another plug-in that references Open Sans, and obviously your plugin just takes what’s there and bundles it all up. 🙂

    I’m looking at the stylesheets now, and removing them.

    Sorry again for the ‘accusation’. 🙂

    Graham

    Plugin Author Raul P.

    (@alignak)

    9 years, 7 months ago

    I was going to say there must be some other plugin or theme calling open sans somewhere (by the way, wordpress has removed the open sans font from the wp-admin area on 4.6 version).

    If you can find the handle that calls the font, you can dequeue it on the functions.php

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

The topic ‘Combining Multiple Process CSS Files & CDN’ is closed to new replies.

Tags