Optimization: combine (some) CSS files before output?

Home Forums Icelander Optimization: combine (some) CSS files before output?

Viewing 10 posts - 1 through 10 (of 11 total)
  • Author
    Posts
  • #21019

    wdc_dolphin
    Participant

    Optimization: combine (some) CSS files before output?

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi,

    A. To reduce requests is it possible to please combine some of the CSS before final output, for example:

    1. first_css_file.css:
    – main.css
    – woocommerce.css
    – custom-styles-woocommerce.css
    – shortcodes.css
    – custom-styles.css
    2. second_css_file.css:
    – style.css (child theme CSS)
    3. third_css_file.css:
    – print.css

    Print needs to be different I’ve noticed, at least in some cases, because otherwise it will get overridden. Also combining everything may cause a large file, and breaking it up can make it into smaller loadable files, which may aid in performance.

    Reason: getting warning from optimizing sites that there are too many requests. Have been working on improving load performance. I’m going through the theme and plugins to see where there are gains to be had in this use case.

    In this usage case using a combination plugin (like Autoptimize) causes possible issues and is possibly not compatible with the caching implementation.

    #21020

    wdc_dolphin
    Participant

    P.s.

    I lost my user login unfortunately, and don’t know which email I used. I switched domains a while ago, and could have sworn I changed it. Ended up making a new login, apologies for the inconvenience.

    • This reply was modified 1 week ago by  Oliver Juhas. Reason: Making the post public as there is no sensitive information shared
    #21025

    Oliver Juhas
    Keymaster

    Hi wdc_dolphin,

    Please note that you can combine and optimize your website with plugins. I personally use paid WP Rocket plugin, but you can find some free ones to try too.

    I believe by tweaking settings of such plugin you can achieve your desired results.

    Many of my theme users actually use Autoptimize and I don’t think there is any CSS combination issue reported. Not sure how the plugin can cause a caching issue though, but you could ask the plugin support for that.

    I’ve had a CSS combination issue with one other plugin reported and you can check the support ticket for more info. Everything depends on how good the plugin is coded.

    As a general rule, you can actually experience some issues combining JavaScript files, but with CSS you should be perfectly fine.

    As for your login, no worries, you can use the new user account from now on. The old account was (most likely) under the username of design_dolphin and email of ...@[ ADMIN EDIT: REMOVED ] if that helps.

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 4 days, 15 hours ago by  Oliver Juhas. Reason: Removing the email domain info
    #21041

    wdc_dolphin
    Participant

    Hi Oliver,

    Thanks for the reply.

    Can you please remove my info from the ticket, this is for web admins only!!! Not for public publishing!!!

    • This reply was modified 4 days, 15 hours ago by  Oliver Juhas. Reason: Making the post public as there is no sensitive information shared
    #21043

    Oliver Juhas
    Keymaster

    Hi wdc_dolphin,

    What info do you mean? I can’t see any sensitive info provided in our conversation here.

    If you mean the username and email in my previous reply to you, then please note that username is not sensitive info as you can see it in any reply too. As for an email, I was careful not to reveal it and I’ve only provided the part after @. Is this a problem?

    If this is not an issue, please provide a screenshot of the disclosed info so I can immediately remove it.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21045

    Oliver Juhas
    Keymaster

    Oh, I understand now. I’ve removed the email domain from my reply. Please use your username to reset the password for the old user account if needed.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21046

    Oliver Juhas
    Keymaster

    Sorry for any inconvenience I’ve caused. Please note though that I haven’t actually revealed any sensitive information, the email address was not complete, I only revealed the domain, which is the same like I’ve written ...@gmail.com.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21061

    wdc_dolphin
    Participant

    Hi Oliver,

    Thanks for fixing it.

    The blog is using server/cloud caching as opposed to plugin caching solution like WP Rocket Cache and Autoptimize (and yes, Rocket can interact with some server setups too). Without getting into a technical discussion too much:

    1. Plugins like Autoptimize randomize the css file name, so the caching servers can get out of sync if there were to be a CSS update.
    2. Plugins (can) cause extra overhead on the hosting side, which can hurt performance. Some disk based caching systems can be slower then other caches in my experience.

    I don’t think it is fair that as theme developer you would have to account for all the different server caching setups.

    (Temporary) Solution:
    I used Autoptimize to combine some of the CSS (when I did this manually I got errors), and then pasted the combined CSS in the child theme style.css. Then I dequeud and deregistered the style sheets.

    Most of the Javascript (still checking accessibility for that) and all of the cookies have been removed using similar hooks for visitors. Getting rid of cookies (which aren’t being used for visitors afaik) allows to get rid of a plugin to do that, and the javacsript it uses. Also it helps with GDRP compliance, and get rids of the ugly and annoying ‘cookie notice’. I understand the reasoning behind it, but it could be done better I feel.

    At some point I may write a PHP script to do this with CSS automatically. I just need to figure out how to combine the CSS sheets, because I’m running into errors. Maybe because of SASS/LESS or something like that, and I have little to no experience with that. For now I will keep an eye on the updates to update CSS if needed.

    A bit longer thread but hope it helps in explaining this complicated subject concisely.

    #21062

    Oliver Juhas
    Keymaster

    Hi wdc_dolphin,

    Thank you for sharing the possible solution.

    Please understand that as a theme developer making themes according to WordPress best practices I tend to stay out of the way as much as possible. Assets optimization is one of those areas that should be left for plugins or other solutions.

    I’m not really an expert on similar plugins, but there maybe should be a settings option to use only CSS combination of the files from such plugin and then you can use your server caching?

    As for randomization or versioning of stylesheet file names, I think it is actually a good thing that helps preventing caching issues. But probably depends on your situation/server.

    As for SASS, you don’t have to worry. The theme stylesheets were produced by SASS, but all of the stylesheets are pure CSS so there should be no issue at all with their combination. SASS is not being outputted/enqueued on front-end of the website at all.

    Fun fact: The trend nowadays seems to be actually to split the CSS into even more partial files (and loading them as needed per page). This should help speed up the website promoting HTTP/2 parallel loading environments.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21063

    wdc_dolphin
    Participant

    Hi Oliver,

    Thank you for the reply. This can be marked as resolved.

    The way WordPress loads scripts and styles is something I’ve found an annoyance for years, it is something I’ve worked on in the past (e.g. conditional loading) with others in the community. It’s cool to see some of that being put into practice more. :D

    Yes, I’ve found a better solution possibly. Using hooks to clear a cache when there is a plugin or theme update for example.

    Reference examples:
    https://codex.wordpress.org/Plugin_API/Action_Reference/upgrader_process_complete
    https://stackoverflow.com/questions/24187990/plugin-update-hook
    https://wordpress.stackexchange.com/questions/75294/hook-into-wordpress-update

    Also removing any CSS in the parent theme that isn’t used by the child theme can make a difference too. I might do this as well, although this can be time encompassing.

    Thanx for the heads up on the CSS combination.

    • This reply was modified 3 days, 15 hours ago by  wdc_dolphin.
Viewing 10 posts - 1 through 10 (of 11 total)

You must be logged in to reply to this topic.