Put Your CMS Made Simple Site on Steroids

There are often discussions about site speed, and Google doesn’t make their goals of speeding up the whole internet experience a secret. CMSMS already does a fairly good job, compared to some of their competition, but you can still improve it with few easy steps and get your rating on PageSpeed or YSlow up.

1. Clean up your markup

Ok, I admit it. You will not gain much speed by removing a few bytes of useless code. However, if you care about your website and it’s rankings, then write a clean markup instead of using many tools out there that will insert sloppy code.

2. Optimize your images

You should reduce the file size of your images. This doesn’t mean you should only take care of images used for your site design, but also for content.
There is a fairly new module called ImageCompressor that makes this job very easy. It uses the smush.it API and compresses all of your images through FileManager using smush.it service from your back-end.

3. Combine your Stylesheets and JavaScript

To reduce http requests and gain some speed, you should combine your Stylesheets and JavaScript. There is another great module available in the forge that does exactly this: ScriptDeploy. If you haven’t tried it yet, you really should since it makes your life easier (combining Stylesheets, JavaScript, compressing css, js and html output…).

With upcoming CMSMS 1.10 version Stylesheets, the same media type will already be combined. If you don’t want to use ScriptDeploy and stick with built in tools, you can also do some sort of compression with Smarty strip tag, simply wrap your CSS inside [[strip]]. You can use the same for your Template markup or module specific templates, simply wrapping these inside {strip} {/strip}. For example, default MenuManager produced code will become very long with all those breaks in the code, so use {strip}.

[[strip]]
#your {
 css-rule: property;
}
[[/strip]]

If you use inline JavaScript, then the CGExtensions module becomes very handy.
To compress your inline JavaScript, simply use {jsmin} modifier that comes with CGExtensions.

{jsmin}
//your js code
{/jsmin}

4. Use .htaccess for gziping, ETags, Expires rules

Default CMSMS install comes with a folder/doc containing a htaccess.txt file. A lot of users miss that file, not knowing how useful .htaccess rules are. Next time you install CMSMS; find the file, rename it to .htaccess, and place it in the root folder of your CMSMS install.

I have my standard rule set that serves me well, pushing my PageSpeed and YSlow rating up considerably.

# Deactivate compression for buggy browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Set header information for proxies
Header append Vary User-Agent

# Set header information for proxies
Header append Vary User-Agent

# compress css, text...
<FilesMatch “\.(js|css|html|htm|php|xml|htc|eot)$”>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml
</FilesMatch>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript image/gif text/x-js application/javascript image/x-icon
</IfModule>

# set expires headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 seconds"
  ExpiresByType text/html "access plus 1 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/x-component "access plus 1 years 1 days"
</ifModule>

<ifModule mod_headers.c>
  <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|ttf|eot|woff|svg)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch "\\.(css)$">
    Header set Cache-Control "max-age=604800, public"
  </filesMatch>
  <filesMatch "\\.(js|htc)$">
    Header set Cache-Control "max-age=216000, private"
  </filesMatch>
  <filesMatch "\\.(xml|txt)$">
    Header set Cache-Control "max-age=216000, public, must-revalidate"
  </filesMatch>
  <filesMatch "\\.(html|htm|php)$">
    Header set Cache-Control "max-age=1, private, must-revalidate"
  </filesMatch>
</ifModule>

# enable gzip
<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl|htc|eot|ttf|woff|svg|ico|pdf|flv)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# disable ETags
<ifModule mod_headers.c>
  Header unset ETag
</ifModule>
  FileETag None

<ifModule mod_headers.c>
  Header unset Last-Modified
</ifModule>

Please note that you should adjust this to your needs.

5. Cache your menu

In MenuManager, there is an option “set this template cachable”. Use it.

6. Cache your module templates

With CGExtensions module installed, you can cache the whole module outputs or your template code with {cge_cache} modifier.

7. Use data uri to reduce http requests

A nice way of reducing https requests is by using data uri, base64 encoded images.
To accomplish this in CMSMS, you have two options. The first option is the SuperSizer plugin. The other option is the CGSimpleSmarty module. Read module helps to get most out of it.

8. Output CSS or JS only when needed

With some projects, your CSS or JS code could become very lengthy, but only parts of that code are actually used on every page.
Reduce a files size that is loaded on each page by only loading relevant code when it is really needed.

This is very simple to achieve. For example, let’s say you are loading a very nice jQuery “Slider” in a Products Summary template. Now, as we don’t need all those CSS styles and JavaScript code relevant to that slider, you can do the following:
Create a new Stylesheet that contains only Styles relevant to your “Slider” code and remove it from your overall Stylesheet.

In your “Products” Summary template, add this line of smarty code:

{assign var='set_slider' value='1'}

Now, in your page Template, you can load a relevant stylesheet using this method.

I usually assign content on top of my Template so I always have all the content relevant data available.

{strip}
{process_pagedata}

{* assign content tag *}
{content assign='get_content'} {* now in your template you will be using {$get_content} instead of {content} *}
{/strip}
// the rest of template doctype and head part
{* now we load relevant styles *}
{cms_stylesheet}
{if isset($set_slider)}
{cms_stylesheet name='name-of-slider-stylesheet'}{* this one should not be attached to template *}
{/if}
// and the rest of template

In summary: First, in the template we have assigned a value to a variable $set_slider. Then, in our template we checked if variable $set_slider had the value showing. In combination with the ScriptDeploy module, you can load the whole Style or JS file grouping on demand, all you need to do is take care of when and where the correct file or style should be loaded.

9. Load browser dependant code only if needed

We all know that there are browsers out there requiring a number of CSS hacks or special JS scripts; like our friend Internet Exlporer.
Basically, you can use IE conditional comments for that part. However, if you care about your Markup and don’t want a number of comments in it, you can use a nice plugin written by Jeremy Bass for browser sniffing called BrowserTools (hint: you can also use this same tool for building a mobile version of your site).

As already mentioned above on step 8, I usually add this sort of code at the very top of the Template. So how can you make use of BrowserTools plugin?
First, upload the plugin to your /plugins folder and use the following code:

{browsertools output='browser' assign='family'} {* get browser family like IE... *}
{browsertools output='full' strip_space=true strip_dot=true assign='version'} {*get full version name like IE70 *}

Now we have two variables available ($family and $version) that we can use to load specific Stylesheets, JS or code.
For example, to load additional stylesheets for Internet Explorer 7 we can use the following:

    {if ($family == 'IE') && ($version == IE70)}
    {cms_stylesheet name='ie7_only'}
    {/if}

That’s it! Now, if  the browser is recognized as Internet Explorer 7, the Stylesheet named “ie7_only” will be loaded (note: don’t attach that stylesheet to your Template)

10. Disable uneeded Modules

When you are done with your CMSMS website and happy with it’s outcome, you should have a look under “Extensions -> Modules” and see if there are any modules that you previously installed but didn’t use after all. To save some memory you should disable or uninstall these modules.

There are also modules shipped with the Core that you don’t need regularly like nuSOAP (only used by ModuleManager), ModuleManager (you are not going to install or update your modules daily), ThemeManager (unless you are going to upload new theme XML file every day, you don’t need it). So feel free to disable these modules after you are done with your setup.

I hope some of these tips will help you in speeding up your next CMSMS installation!

Looking for CMS Made Simple Hosting? Look no further than Arvixe Web Hosting.

Tags: , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

Goran Ilic

Goran Ilic is a designer, all-rounder, husband, father, and founder of a CMS Made Simple related blog called: I do this (www.i-do-this.com). After long search for a perfect tool for his clients he has found CMSMS and devoted his passion to it.

3 Comments on Put Your CMS Made Simple Site on Steroids

  1. Goran nice article but unfortunately I am not able to implement most of your suggestions could you please expound on this article to elaborate first how to work with step 3 and 6

  2. Goran Ilic says:

    Hi Moses,

    for Step 3 did you install ScriptDeploy module? If yes simply create new Stylesheets in ScriptDeploy module from your regular Stylesheets and Group these.
    Basically ScriptDeploy is very straight forward to use, but look at module Help to know more about it.
    In module you have for example “Grouped Scripts” tab, simply click there, create new grouping and drag/drop Stylsheets created in this module.
    This will be grouped in one Stylesheet and by clicking on “get tag” tag will be copied which you can then use in your page Template.

    On step 6 it’s the same install CGExtensions and read Help for more information. For caching you can then use for example {cge_cache}{Products}{/cge_cache} this will cache Products summary for time set in CGExtensions settings.

  3. Sheldon says:

    Hеya i’m for the primary time here. I found this board and I in finding It really helpful & it helped me out a lot. I am hoping to offer something back and aid others like you helped me.

Leave a Reply

Your email address will not be published. Required fields are marked *


− 4 = 4

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>