As each component, also JomSocial contains a large amount of unnecessary KB, mainly in the JS files and images. Today, I will show how to save some of those KB, and thus speed up the social networking site built on this extension.
It is true that we will focus on the contents of only one folder, but savings would be significant, you will see.
- First of all, remember to turn off the service for a while, so users do not feel the changes in the source code.
- Second, copy the entire contents of a folder called “components/com_community/assets” to the local disk.
- Because JomSocial component at start reads (uses) only a few javascript libraries I will try to show how quickly and painlessly optimize their size.
Use compressed files.
<script type="text/javascript" src="components/com_community/assets/joms.jquery.js"></script> <script type="text/javascript" src="components/com_community/assets/script-1.2.js"></script> <script type="text/javascript" src="components/com_community/assets/window-1.0.js"></script> <script type="text/javascript" src="components/com_community/assets/joms.ajax.js"></script>
As you can see, these files come in two versions: normal and pack, which is compressed. It is therefore sufficient to change their names so that the file name of the “pack” in the middle has become default, the downloaded file by JomSocial:
- joms.jquery.js (208 KB) – joms.jquery.pack.js (90 KB) = You will save 118 KB
- script-1.2.js (116 KB) – script-1.2.pack.js (86 KB) = You will save 30 KB
- window-1.0.js (9 KB) – window-1.0.pack.js (6 KB) = You will save 3 KB
- joms.ajax.js (7 KB) – joms.ajax.pack.js (1 KB) = You will save 6 KB
- Together you saved : 157 KB !
Remember to keep a compressed version of JS libraries on the server (in this folder). The same thing you can do with other files, which come in two versions, and in its name you will find the annotation “pack”.
Compressed graphics files
Now take care of the graphics files, especially those that are heavier than 5 KB, for example: default_thumb.jpg, default.jpg, groupAvatar.png etc. Using any graphics program such as Photoshop you will be able to save each file additional few KB.
Of course, without loss of quality. I used an old trick, if the resulting file in PNG format is smaller than a JPG, I used the first format, and only then change the name of the extension on as it is in the original, I do not have to modify additional files. I believe that only on JomSocial graphic files you can save min. 30 KB or even more.
compress CSS files
<link rel="stylesheet" href="(...)/components/com_community/templates/default/css/style.css" type="text/css" /> <link rel="stylesheet" href="(...)/components/com_community/assets/window.css" type="text/css" /> <link rel="stylesheet" href="(...)/components/com_community/templates/default/css/style.green.css" type="text/css" /> <link rel="stylesheet" href="(...)/components/com_community/assets/autocomplete.css" type="text/css" />
When you want to compress your CSS files, you can use one of free online CSS compression tools. They can remove unnecessary characters from code to reduce its size, removing unnecessary spacing, and optimizing the CSS code; thus improving load times. There are some links:
http://www.minifycss.com/css-compressor/
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cssoptimiser.com/