Jump to content


Photo

Consolidating Page Resources


  • Please log in to reply
1 reply to this topic

#1 Seth Ellsworth

Seth Ellsworth

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 31 posts

Posted 21 April 2016 - 10:30 AM

Alex, wondering your thoughts on this...

 

As you build in more add-ons what happens is a new css file is created and added to the head. How do you control this?

 

This most recent update was designed to increase speed and decrease server load, what are your future thoughts on this and how you're going to do it?

 

As it stands right now if we use all of the available plugins and add-ons there are 7 or 8 css files called. How could we consolidate this? Not sure how much it matters but is there a way to have the plugins NOT output the css and then just copy the css into the child theme's style.css?

 

SETH

 

P.S. I appreciate your focus on speed and keeping the files lean and useful and not loading useless scripts unless they are used on that page. I come from the old MD that worked with Thesis. One of the things I really love about thesis is that there aren't very many plugins needed and that all css is consolidated and the external calls are minimized.

 

For all intents and purposes, not sure how much it matters but every site I've run with Thesis loads amazingly fast.

 

 



#2 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 23 April 2016 - 11:06 AM

Hey Seth,

 

Thanks for bringing these questions up, I thought about this thread a lot over the past couple days and performance / optimization are very important to me and I know just about everyone who uses MD.

 

 

I'd say the main areas of performance regarding MD right now go something like:

 

1. Page Leads - You're right, each Page Lead loads its own CSS file which adds an extra HTTP request. These files are all very small but still require separate HTTPs. I think something I can do in the more immediate future is simply add the Page Lead CSS to the main MD style.css file.

 

2. Database Queries - MD performs a lot of checks to the database to load a page with the different layout option combinations. This was something I hadn't tested very much during the initial development and are what I'm going to focus on reducing big time as I continue working on MD.

 

3. AddonsPerformance with addons was something I thought about and my goal was to build these addons so they can just click right in and reuse some of the code that's core in MD to keep them lightweight—which they do. Of course each addon needs its own unique resources and I try to minimize those as well (example: the MD Popups script is only 5kb unminified, no jQuery required).

 

All 3 of those things tie into each other fairly closely so I feel like I have a controlled environment to continue optimizing them as MD advances. I tried to keep a balance of functionality vs. optimization because at the end of the day, all of these extra database queries and resources amount to a few extra milliseconds of processing (I don't take that extra time lightly, I'm just playing the tradeoff game).

 

Thanks to the advances in server technology and WordPress optimization plugins like caching + minifying, these "sins" can be covered up by doing a few things:

 

1. Use a cache plugin to prevent database calls

 

A cache plugin, like WP Super Cache, W3TC, or Rocket Cache for example will take a "screenshot" of your site and load static pages rather than dynamically building every page on load. A cache plugin prevents the need for those database calls to be made and loads that static prebuilt version instead.

 

2. Combine files with a minifying plugin

 

To reduce HTTP requests you can use a plugin like WP Minify that will combine all CSS + JS files into one file to load. I usually don't combine my JS files since I've found these types of plugins break scripts, but they work perfectly for CSS files.

 

-----

 

There are optimization tools I'd like to build into MD that I've been thinking about for a while and the biggest one is a way to combine all MD CSS files by default—and that's including your child theme too. Some ideas are not far off from what Thesis does, and I won't kid myself or you when I say this, you won't find a theme anywhere (including MD) that is as optimized for performance as Thesis is.

 

I think MD has a solid base and as I continue building new functionality I'll learn new ways to continue optimizing and reducing as the platform advances and continues to get more popular. The next big thing I'm working on in MD is a revamped Page Leads system and apart from making Page Leads more flexible (i.e. closer to a real page builder) my biggest goal is to significantly reduce the queries being made to generate Page Leads as well as removing those extra CSS files (and save those milliseconds!).


- Alex
Check out the Kolakube blog or follow me on Twitter.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users