Over the last few months I have been working on getting the latest version of jsLex coded, packaged and tested.  A few weeks ago, I wrote up my thoughts on the new release 2009 will be a Rockstar year. If you want to check out the features in the new version go to the products section of the site.

Product releases are more than just the bits and JAR files, you need to update documentation and Web pages to reflect the new stuff. If you can’t find it on Google does it really exist? In the past I had been using three separate methods.

• Static HTML homepage
• Wordpress
• A wiki

Going forward, I felt this was too many solutions and none of them appropriate to manage a 50 page website where I will be updating it in real time.  So… in order to move the site forward I needed to find a CMS system.  The thought of this gave me the shivers; but it needed to be done.

Joomla

I would love to tell you that I went through a long list of all the options evaluated them in great detail, did a POC.  But that time would be better spent on other things.  Instead, I had been seeing a lot of Joomla articles floating around lately and installed it (Developer marketing really does work, especially if it seems grassroot).

During the process of getting started with Joomla, I wrote down my thoughts:

• Installation – Simple.
• Community – Active.
• Plugins – A lot of them. I like that I can install them from the control panel and don’t need to FTP them to the server.  This is a huge advantage and saves time.
• Flexibility – very nice. Templates, Plugins, Modules, Locations
• Templates – A lot of them. I ended up using the Mocha template because it was professional and clean, cost me $49, but worth it for the piece of mind that the site looks good.  Can everyone using Mocha, change their template, and also can the people thinking about using the template, not
• Documentation – Pretty good.
• Ease of Use – OK once you get the hang of it.
• Speed – OK, I have been tweaking it to get it more optimized.
• SEO friendly.  This is huge, I am already on the first page for many searches that people would do for my site.  Just change the settings in the “Global Configuration” page and make the supplied .htaccess file active.

Issues I ran into getting up and running, mostly just monkeying with stuff I didn’t understand:

• Menus – This was thing that took me the longest to figure out. I still have spare menus hanging around in the menu manager. When I first started, I went to the menu manager and added several top-level menus that I though would show up as top level menus in the application.  This didn’t work.  You need to add the Top level menus to the “Main Menu”.  They will show up in the menu bar correctly.
• Sub Menus – I wanted to display a submenu in each section of the site, I again created top level menus and then attached them in the module page.  But now I had two menus for every page and this was difficult to manage.

The way I finally got it to work the best was as follows:

1.) Go to the “Main Menu” in the menu manager and create the complete menu tree.
2.) Go to the Module manager and create a Menu module.
3.) Set the properties for the Menu module as I did in the screen shot below.

4.) Set the Menu selection to be all the menus items you want the sub menu to be displayed on.
5.) Need to set the start level to be “1″. This part is a little magic, there is no setting that says I want to display the Products menus but it just knows.

• Can’t create an article from the menu manager.  When starting from scratch it would be nice to allow the user to create an article once the menu is created.  Otherwise I need to:
  1.) Hit save.
  2.) Go to the article manager.
  3.) Create a blank article.
  4.) Save it.
  5.) go back to the Menu Manager.
  6.) Open the menu item.
  7.) Select the article.
• Names of the Menu types aren’t that intuitive – Use the “Article Layout” to display a single article.  Didn’t use any other ones Menu types.
• Connecting the modules to different “positions” in the template. I love this feature, but figuring out where the module will show up is related to the template. So I need to refer to the template layout sheet.  “Print out the layout sheet if our template has one” it will make it easier.
• Sub directory installation. I installed my Joomla into a joomla-1.5.8 directory but want the urls to be in the root directory.  Not even sure if this is possible but have been playing with the .htaccess try rewriting the URLs.

Optimizing Joomla

Rockstarapps’ tagline is “Optimizing the Web” – so how could I have my site scoring an “F” in YSlow!.  Once I got the site running and populated with my pages, the next step was getting Joomla optimized. Front-end performance is the quickest and easiest way to get the site running the faster.  Front-end Web Optimization is also the focus of Rockstarapps’ tools. So it was a good test, to see if I could optimize the site.

Before starting the optimization process I a snap shot of the sites performance, so I could compare it to the results of the optimization. Below are screen shots from YSlow and Firebug (I ran these on the home page www.rockstarapps.com). The important numbers are:

• YSlow Grade = F(48)
• Request Count = 28
• Load Time = 6.96 seconds
• Download Size =  356KB

Onto the Optimizations:

Optimizing the Requests – Templates, Plugins, Modules all have CSS, and JavaScript so I needed to see what was being loaded then chase them down in the code.  Once the resources were found, I used the jsLex CSS and JavaScript Optimizer to create the minified and GZipped versions.  Many of the extension and templates have resource bundling and GZip features, but this won’t get you down to a single JavaScript and CSS file.

Note: It would be nice to build into the extension mechanism a way to specify the CSS and JavaScript that is needed, then Joomla could create the single JavaScript and CSS file.  This would create a far great optimization than leaving up to the individual extensions. This would also allow for Joomla to remove duplicate scripts as well.

Moving to the Cloud – One of the areas of the new jsLex release is making it easy for developers to interact with Amazon WS.  To developers CloudFront and S3 are a good way to deliver high performance websites.  CDNs have long been used by the Big Guys.  Think ESPN or CNN.com run their sites on a shared server in Milwaukee? I doubt it to.  So once the JavaScript and CSS were optimized and GZipped, I uploaded the templates directory to S3 and setup a CloudFront distribution with a CNAME cdn.rockstarapps.com.

Once the files were put in S3 and everything was configured, I just needed to set the resources directory to be the CDN path.  I manually set the path on the CSS and JavaScript, this was less risky changing the “$this->baseurl”

The Results:

After the optimization the metrics are now: (I need a drum roll plugin for wordpress)

• YSlow Grade = B(89)
• Request Count = 19
• Load Time = 2.69 seconds
• Download Size =  204KB

Improvements below are good, but could be better, I want to get an “A” on everything so more fine tuning could be done, one reason I didn’t get an “A” was not using a CDN. The resources that were marked down with from google and the video hosted by vimeo. I can live with that.

• YSlow Grade = Increased by 85%
• Request Count = Decreased by 32%
• Load Time = Decreased by 61%
• Download Size =  Decreased by 42%

 

Summary:

I am not sure of the proper way to say Joomla yet; but it has been a good choice and I’m glad I went that direction. But in the end, content is King and as long as the words are written they can be moved to any CMS system.  Also to everyone looking to optimize their site or interact with Amazon WS give the new version of jsLex a try and feedback the positives and negatives so it can be made better.

Bob (Buffone)