ThemeShaper Forums » Thematic

[closed]

Performance Challenge for Thematic Child Themes

(6 posts)
  • Started 4 years ago by theorib
  • Latest reply from middlesister
  • This topic is not resolved
  1. I'm working on performance of a Thematic Child Theme and I'm faced with an issue.

    * Automatically compressing multiple CSS files into one *

    It's a long post so read it if you will and of you do, I'd be delighted if you shared your thoughts!

    In developing my own personal website: http://theoribeiro.com, I test driven most of the nice cache and optimization plugins out there. I ended up with a list of 4 favorites which can be used in two combos:

    Combo 1:
    * DB Cache Reloaded (for caching database queries)
    * WP CSS (for joining multiple @import CSS declarations into one CSS file and minifying the content)
    * Hyper Cache (for caching pages and serving as static HTML files)

    Combo 2:
    * W3 Total Cache (works for almost everything plus more but doesn't join multiple @import declarations into one CSS file)
    * ??????? (for joining multiple @import CSS declarations into one CSS file and minifying the content - WP CSS doesn't work here in conjunction with the previous)

    I don't actually need such a performance boost at this time but for the sake of science and, love for experimentation and all, my first option was Combo 1 but combo 2 offered one irresistible temptation:
    Trying Amazon's Cloudfront Content Delivery Network for speeding delivery of static content around the globe so I ended up choosing the former.

    Only trouble is I couldn't find a solution to joining and minifying @import declared CSS that would work along W3 Total Cache (in my opinion the great plugin biggest flaw).

    I thought, what the heck, why not come up with an "in-theme" solution for doing this job and serve an already combined and minified file to start with??
    Though I managed to build all the website myself I'm a kind of PHP and Javascript illiterate that kind of guess my way through it combining the help and knowledge of others with my intuition but some stuff are still beyond my reach.

    I came across a couple of interesting posts on the web, specially these three:
    http://www.catswhocode.com/blog/3-ways-to-compress-css-files-using-php
    http://rakaz.nl/code/combine
    http://www.sonassi.com/blog/2009/06/04/combine-and-compile-css-and-js-into-gzipped-files/

    and begun trying to build a solution inside my functions.php file.

    It's on the early stages but so far, only putting the following function works but compresses all my HTML and CSS and is probably not very nicely done or written. Creating a cache file on the fly would be much more elegant.

    ob_start("compress");
    function compress($buffer) {
      /* remove comments */
      $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
      /* remove tabs, spaces, newlines, etc. */
      $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
      return $buffer;
    }
    
    function compress_css() {
    ?><style><?php
      /* your css files */
      include('library/styles/reset.css');
      include('library/styles/typography.css');
      include('library/layouts/1c-fixed.css');
      include('library/styles/images.css');
      include('library/styles/access-essencials.css');
      include('library/styles/access.css');
      include('library/styles/screen.css');
      include('library/styles/plugins.css');
      include('library/styles/jquery.ad-gallery.css');
      include('library/styles/colorbox-plus.css');
      include('library/styles/photoshelter.css');
    ?></style>
    <?php
    }
    add_filter('thematic_create_stylesheet', 'compress_css');

    Anyone interested in sharing their thoughts or helping with the challenge? :)

    Posted 4 years ago #
  2. sqlwiz
    Member

    Interesting Approach. Just a quick note.

    I am going to use Total Cache as well. FYI: The issue is with minify not W3TC and Total Cache may support other minify engines in the future.

    Note that with regards to CSS, Link is better than Import for page rendering. I decided to replace import with link anyway in my child theme, so now Total Cache can function as intended.

    Read about link vs. import here:

    http://themeshaper.com/modular-css-wordpress-child-themes/

    To implement this, you need to filter thematic_create_stylesheet. An example using thematic_create_stylesheet filter can be found here:

    http://themeshaper.com/thematic/guide/?page_id=12

    A side benefit - I can support a mix of 1, 2 and 3 column layouts within this filter by checking is_page_template('...')

    Posted 3 years ago #
  3. Thanks for the reply @sqlwiz I did read the "Modular CSS" article prior to posting this.

    Linking to the multiple CSS files instead of importing and using W3TC is indeed a practical approach. As a matter of fact, I hadn't connected the dot's for combining both approaches until you pointed out, thanks!

    On the other hand, the in-theme solution still sounds interesting to me so I might give it another shot...

    Thank you!

    Posted 3 years ago #
  4. snackmaster
    Member

    Thank you!! I went with @sqlwiz's method, W3 Total cache slurped up the files and I added them all, reset the order so my custom CSS was called last and boom.

    Posted 3 years ago #
  5. interesting. i have mostly just stopped using the import, copy everything into style.css and let wp_minify or autoptimize minify that

    anybody care to comment on performance differences between total cache and super cache? i always use super cache b/c i don't have to do anything. it works almost automagically, but i don't really know just how well it is working.

    Posted 3 years ago #
  6. middlesister
    Member

    There is a quite nice comparison of caching solutions at http://www.tutorial9.net/tutorials/web-tutorials/wordpress-caching-whats-the-best-caching-plugin/
    It was done a year ago, don't know if there is a more recent comparison around. The author prefers total cache over super cache, even though super cache is slightly faster in the benchmarks. Apparently the fastest plugin is hyper cache - though that does not include minifying so you have to fix that yourself.

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.