Minified CSS

From Kunena Wiki
Jump to: navigation, search


Definition and usage

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Obfuscation is an alternative optimisation that can be applied to source code. It's more complex than minification and thus more likely to generate bugs as a result of the obfuscation step itself. In a survey of ten top U.S. web sites, minification achieved a 21% size reduction versus 25% for obfuscation. Although obfuscation has a higher size reduction, minifying JavaScript is less risky.

In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. Even if you gzip your scripts and styles, minifying them will still reduce the size by 5% or more. As the use and size of JavaScript and CSS increases, so will the savings gained by minifying your code. Kunena 1.6

Minified CSS is a utilised in Kunena 1.6 in order to achieve lower page load times. It also adds a few additional overheads to the process of constructing customised Kunena templates.

How CSS minification works

If you are already familiar with Cascading Style Sheets, you will also be aware that CSS is used to modify the font styles, colours, positioning and layout of web pages. CSS files are basically text files with the extension .css. Using a standard text editor (like Windows Notepad) you can construct CSS files setting them out in a format that makes sense for you to be able to read but that can also be interpreted by web browser software.

The CSS files that you create are sometimes called "clear text" CSS. Your CSS files may have your own comments, line-breaks and other "formatting" that make them easier for you to maintain. Web browsers, on the other hand, do not need these human-friendly inclusions but they still have to load them even if such in-line documentation is ignored. These things take time to load and your users aren't interested in how well you've documented your CSS files; they're only interested in how quickly the pages renders on their screens.

If we look at the clear text version of the Blue Eagle template for K 1.6 (../components/com_kunena/template/default/, you will see that it is over 72.8 Kbytes. Although it's great for you to be be able to read this file and make sense of it, it's still a 72.8 Kb file that has to be downloaded when your users run Kunena.

If we examine a small section of the clear text file, it looks likes like this:

Forum highlight/dark colors
Green forum highlight:		#d2f8db 		RGB: 210/248/219
Green forum dark:		#bfe5c7 		RGB: 191/229/199
Orange forum highlight:		#ffeb8c 		RGB: 255/235/140
Orange forum dark:		#ffd475 		RGB: 255/212/117
Blue forum highlight:		#c3f0ff 		RGB: 195/240/255
Blue forum dark:		#b1e3ff 		RGB: 177/227/255
Grey forum highlight:		#e5e5e5 		RGB: 229/229/229
Grey forum dark:		#d5d5d5 		RGB: 213/213/213
Pink forum highlight:		#ffddff 		RGB: 255/221/255
Pink forum dark:		#ffd0ff 		RGB: 255/208/255

/* ------------------------- FONT SIZES FOR BLUE EAGLE

PX EM PCT PT 6px .5em 50% 5pt 7px .583em 58.3% 5pt 8px .667em 66.7% 6pt 9px .75em 75% 7pt 10px .833em 83.3% 8pt 11px .917em 91.7% 8pt 12px 1em 100% 9pt (Base size) 13px 1.083em 108.3% 10pt 14px 1.167em 116.7% 11pt 15px 1.25em 125% 11pt 16px 1.333em 133.3% 12pt 17px 1.417em 141.7% 13pt 18px 1.5em 150% 14pt 19px 1.583em 158.3% 14pt 20px 1.667em 166.7% 15pt 21px 1.75em 175% 16pt 22px 1.833em 183.3% 17pt 23px 1.917em 191.7% 17pt 24px 2em 200% 18pt


----------------------------------------------------------------------------------------------- */

/* MAIN STYLES ----------------------------------------------------------------------------------------------- */ #Kunena { padding: 0; margin: 0; line-height: 1.333em; }

Most of this is commentary. When this CSS is minified, the result looks like this:

Forum highlight/dark colors Green forum highlight:#d2f8db RGB:210/248/219 Green forum dark:#bfe5c7 RGB:191/229/199 Orange forum highlight:#ffeb8c RGB:255/235/140 Orange forum dark:#ffd475 RGB:255/212/117 
Blue forum highlight:#c3f0ff RGB:195/240/255 Blue forum dark:#b1e3ff RGB:177/227/255 Grey forum highlight:#e5e5e5 RGB:229/229/229 Grey forum dark:#d5d5d5 RGB:213/213/213 Pink forum highlight:#fdf 
RGB:255/221/255 Pink forum dark:#ffd0ff RGB:255/208/255 ----------------------------------------------------------*/ #Kunena{padding:0;margin:0;line-height:1.333em;}

This isn't very intelligible or readable to you or me, but it contains everything that web browsers need to know. As you can see from this trivial example, minification cuts down on the amount of space needed to make perfectly good, executable CSS. In comparison with the clear text version of the Blue Eagle template, the minified CSS file is 57 Kb that takes nearly 25% less time to download to your users.

Kunena 1.6 and minified CSS

Kunena templates ship with two versions of CSS files in the default template when Kunena is installed.

  • The clear text version: ../components/com_kunena/template/default/
  • The minified version: ../components/com_kunena/template/default/

The template that is normally loaded when you first use Kunena is the minified version. Therefore, if you edit the clear text version, you may be surprised to see that none of your changes has been applied. This is because you are still using the minified version.

How to use the clear text CSS version

If you are testing your own customising of the CSS for a Kunena template - and you are editing the clear text CSS file - you may want to see these changes before you go through the procedure of minifying the CSS file. This is easily done by changing the configuration setting (Forum Configuration » General)

Enable Debug Mode = Yes

Although this will result in a small overhead in processing, you can now use the clear text form of CSS instead of the minified CSS. If you still do not see any changes, you may need to force a refresh of you web browser cache:

  • Windows: Ctrl + F5
  • Mac/Apple: Apple + R or Cmd + R
  • Linux: F5

How to create a minified CSS for K 1.6

Visit any online CSS minification service, copy and paste your original clear text CSS into the input area, press convert, then create a new file (using a text editor like Notepad) and save the file as in your template directory.

The following online CSS compression services may be useful:

Personal tools