big-optimisation.png

Website Optimisation

By Ladoo posted on 08 Nov 2011

The Yahoo Developer Network has an excellent and comprehensive guide to reducing the time a website takes to load. Some of the recommendations that can easily be applied to your Matrix system are:

Combine all CSS into a single external CSS file

Use:

  <link rel="stylesheet" ... />
instead of:
  @import
directly after the opening tag. A fast loading style sheet has been related to a user's perception on the speed of your site.

  • Use the CSS File asset, and set Use Static Cache File and Strip Whitespace to "On". The first option ensures Matrix doesn’t need to parse the contents of the CSS File as often as it otherwise would, and the second reduces the overall size of the CSS File.
  • For background CSS images, avoid using url (./?a=123) because Matrix can't cache these images. Instead use:
  url(http://example.com/__data/image.gif) or; 
  url(mysource_files/image.gif) or; 
  url(%asset_url:X%) (where X is the asset ID)
  • For buttons and icons, use a single CSS sprite  instead of several separate images.

Combine all JavaScript into a single file

  • If the JavaScript is written in-house, ensure it's as lightweight as possible, and minified.
  • If you're using a JavaScript framework, consider including it from Google’s content delivery network .
  • Include all JavaScript just before the closing </body> tag so that it loads last. Because the browser can load the other content first, it allows the user to start interacting with the page sooner.

Asset Listings

For Asset Listings to load faster, and to minimise their impact on Matrix, select a single, parent Root Node rather than several child Root Nodes. Also:
  • use the Direct Links Only checkbox when you don’t need to list more than one level of assets;
  • avoid Asset Grouping, especially by Metadata.

Search

For Search Results to load faster, and to minimise their impact on your Matrix System:
  • Set Search as Public User to "Yes" (if searching across live, public content).
  • Set No Roles Check to "Yes" (if you're not using Roles).
  • Set No Group Access Check to "Yes" (if searching across live, public content).
  • Consider using a third party search engine for the majority or all of your search requirements - more on this later.

Caching

In the Design, edit the Design File and set all Design Areas to have an attribute of cache=1. This allows Matrix to cache these Design Areas.
Don’t cache the "body" Design Area because it will cache all content for the current asset, and ignore each asset's caching rules, possibly affecting the functionality of Custom Forms and other dynamic assets.

The __data URL

Any asset that has a __data URL will load significantly faster than assets from other URLs because no status or permission checking is done. By default, all file assets should use __data unless Allow unrestricted access is set to "No", or the file isn’t live with Public Read permissions applied.


Comments


  1. Avatar
    07 Jun 2013 12:52pm Scott Hall
    Some great tips. I think the CSS example code there (third option that mentions X) may be missing data?

    For a similar discussion that outlines CSS file options for referring to image assets in the same system see http://forums.squizsuite.net/index.php?showtopic=8604&view=&hl=&fromsearch=1

    For some extra tips on asset listing performance (including extensive performance report) see http://www.squizlabs.com/squiz-matrix/matrix-performance-report-asset-listing-page

    Cheers

    Scotty
  2. Avatar
    07 Jun 2013 12:52pm Anton Babushkin
    Thanks Scott. I've updated the code block.
    1. Avatar
      03 Aug 2013 7:08pm Makendra
      Mighty useful. Make no mistake, I apiatcpree it.
  3. Avatar
    07 Jun 2013 12:52pm Ayaz
    I sure have learned a lot about keys. I ofrgot how much I liked map keys when I was a kid--I used to make these fake maps with really silly keys. I wish I still had some of those!
  4. Avatar
    03 Aug 2013 7:28pm Tessa
    In the colmipcated world we live in, it's good to find simple solutions.
Post a new comment Post a new comment