The Kat's Work - Blog
Main | Blog | Registration | Login
Tuesday
2024-04-23
6:03 AM
Welcome Guest | RSS
Main » 2009 » November » 19 » Speed Optimising Part 3 – Minification.
4:10 PM
Speed Optimising Part 3 – Minification.

Is that even a word? Be that as it may it is very important if your trying to optimise your website.


Essentially minification is the process of making your code as small as possible, to speed load times. Mostly when you talk about minification we are talking about CSS and Javascript, even more specifically seperate files downloaded by web pages.


If your not using js and css files to share common code between pages, then do so! Sorry! Not only does this allow one change to effect all pages at once , but you also get much more control over the loading as opposed to in-line (on page) code. Which i'll come to in a future article.


There are many minification routines out there some that just remove white space, some that actually take your code and process it to make it much more efficient but infinitely less readable (shared classes, multiple references etc). A word of warning though, the more savings made the more you have to be careful of the minified code not working the same as the original code. I tend to go for the safe option of the removal of unnecessary white space and try to work the efficiency myself. Even using the above I see dramatic savings in file sizes.


An advancement of this process is to make it so that each page only uses one CSS file and one JS file. This prevents excessive Httprequests being sent from the users browser.


I set up my directories as follows. I have a Scripts directory which contains a JS folder and a CSS folder. Each of these folders has the sub folders src, mini, build, and ref.(oh and yes that was an oxford comma.) In src we hold the original easily read files in the original devleopment phase this is all we need. In build we hold the collected files ( where we add src files to make one file). In reference I hold an xml file that holds details of which source files map to which build file.


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE files [

  <!ELEMENT files (sourceFile+)>

  <!ELEMENT sourceFile (Equivalents*, BuildFiles)>

  <!ELEMENT Equivalents (file*)>

  <!ELEMENT file EMPTY>

  <!ELEMENT BuildFile EMPTY>

  <!ATTLIST sourceFile name CDATA "">

  <!ATTLIST file name CDATA "">

  <!ATTLIST BuildFile name CDATA "">

]>

<files>

  <sourceFile name="PlanForm_build.js">

    <BuildFiles>

      <BuildFile name="Forms_src.js"/>

      <BuildFile name="Plans_src.js"/>

      <BuildFile name="DynamicTabbedTable_src.js"/>

      <BuildFile name="CreateTable_src.js"/>

    </BuildFiles>

  </sourceFile>

</files>

As you can see the build file PlanForm_build is made from Forms_src, Plans_src, DynamicTabbedTable_src, and CreateTable_src. Its not really necessary but it does come in handy when you leave a project for some time to know what files link to which on your return. Which brings us to the mini which is where you put the minified versions of your build files.


My recommendations are JSMin, and CssMin which apparently is no longer avaliable(if anyone asks i'll post the file with instructions). YUI compressor comes highly recommended but I haven't personally used it.

Views: 927 | Added by: The_Kat | Tags: css, optimising, javascript, minify, minification, optimisation | Rating: 0.0/0
Total comments: 0
Name *:
Email *:
Code *:
Login form
Adverts
Search
Calendar
«  November 2009  »
SuMoTuWeThFrSa
1234567
891011121314
15161718192021
22232425262728
2930
Entries archive
Site friends
  • Create your own site
  • Spree4.com
  • My Blog
  • Statistics

    Total online: 1
    Guests: 1
    Users: 0
    spree4
    Copyright MyCorp © 2024
    Website builderuCoz