In our years of working with ExpressionEngine, we’ve tweaked our standard setup quite a few times. We generally handle most every asset, including CSS and JavaScript, as a template. Being a bit obsessed with organization and overall maintainability of code, we separate out our styles and scripts into separate templates for each major concern (e.g. typography, color, screen layout, etc.).
A while back, it was not uncommon for us to include each of these assets into the document separately, but, as website optimization and performance folks will tell you, all of that separation leads to a lot of additional overhead because the browser must request each of those files individually. In the interest of streamlining the download process, we decided to merge all of the stylesheets together at the template level before sending them over the wire. Here’s the simple recipe we devised:
| /* ——————————— | |
| * Core Stylesheet | |
| * Created by Easy! Designs, LLC | |
| * http://easy-designs.net | |
| * ——————————— */ | |
| {embed="styles/reset"} | |
| {embed="styles/typography"} | |
| @media screen { | |
| {embed="styles/layout-screen"} | |
| } | |
| @media print { | |
| {embed="styles/layout-print"} | |
| } | |
| {embed="styles/color"} | |
| {embed="styles/effects"} |
This framework allows us to pull in each template in the optimum way for progressive enhancement with only a single download on the user end, which is much faster. And server-side caching only adds to the speed improvements. Beyond that, we can continue to add new @media blocks (including media queries) as necessary either within the embedded files or in this master one.
We use a similar setup for our JavaScript:
| {embed="javascripts/jquery.FunctionHandler"} | |
| {embed="javascripts/jquery.hoverIntent"} | |
| {embed="javascripts/eCSStender"} | |
| /* Individual page handlers go here */ |
In this particular example, we’re including two jQuery plugins: FunctionHandler and hoverIntent, along with eCSStender before adding our page-specific code in FunctionHandler registrations. (jQuery itself is loaded in from Google.)
Using ExpressionEngine’s template system to manage the munging like this is dead simple and (from our experience evaluating other people’s EE setups) often underused. Give it a shot on your next project.
Comments
Thanks for share.I do not know much about CSS but I will apply my blog
Hi Easy
What’s the advantage of loading in jQuery from Google as opposed to storing it locally?
How do you handle JS chunks that you only load on specific page templates such as a simple slide show plugin, or Google map integration JS for templates with maps?
This is absolutely brilliant I will be dedicating an evening to doing this on several sites.
Cheers!
Google’s hosting of jQuery (and other libraries) is great because it speeds up page delivery and execution. First off, their servers are probably much faster than whatever you have and it’s likely they have a server closer in proximity to your users than yours is. Secondly, by spreading your assets out over several servers, it speeds up downloads because browsers put a limit on simultaneous same-domain requests. And finally, if any other sites are using the same file from Google, the user may not even need to download it again because it will already be cached in the browser.
Well, we try to write our JS in as generic a way as possible so it can run in any situation. But then, using FunctionHandler, we assign page-specific (or multiple page-specific) JS chunks. We used to manage the per-page JS in separate page-specific files, but have found the FunctionHandler setup to be much easier from a management perspective as well as from a performance perspective.
Is it correct in saying though that if you’re running any of your site through an SSL, such as a cart page, that you’d have to run the jquery library locally anyway?
Thanks Aaron for sharing the information though…the next site will definitely look at implementing it in this fashion, or at least something like it.
Never mind, just checked and found this:
http://googleajaxsearchapi.blogspot.com/2008/07/ajax-libraries-ssl-support-is-live.html
Sorry for being lazy.
Great tips even just for organization. Are you embedding your core stylesheet via {embed} or {stylesheet}? Motivation either way?
I actually use a straight-up
linkelement with no EE tags because I figure there’s no point in creating extra overhead.