Com minify
From Walter Cedric Wiki
Contents |
Minify4Joomla (com_minify)
Forewords
This plugin Minify4Joomla! is in no way mandatory to install, it is only required for high traffic Joomla! sites where the number of HTTP requests to include JavaScripts and CSS is detrimental to the visitors experience. It is targeted at non beginners and people who are interested in increasing the performance of their website.
Minify4Joomla combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads
So instead of having n HTTP requests for including all JavaScripts and m HTTP requests for including all your CSS in frontend, you'll be able to reduce n+m HTTP requests to only two (one for including all JavaScript code and one for including all CSS code).
Introduction
Minify (BSD license)
Minify is a PHP5 app that can combine multiple CSS or JavaScript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching. This helps you follow several of Yahoo!'s Rules for High Performance Web Sites.
This is the engine, the homepage of the project minify is http://code.google.com/p/minify and it is totally independent of the Joomla! framework.
Minify4Joomla (GPL v3 license)
Is theJoomla! component that wrap the engine minify and provide ease of administration.
Features
All features of minify
- Combines and minifies multiple CSS or JavaScript files into a single download
- Uses an enhanced port of Douglas Crockford's JSMin library and custom classes to minify CSS and HTML
- Caches server-side to avoid doing unnecessary work
- Responds with an HTTP 304 (Not Modified) response when the browser has an up-to-date cache copy
- Most modules are lazy-loaded as needed (304 responses use minimal code)
- Automatically rewrites relative URIs in combined CSS files to point to valid locations
- With caching enabled, Minify is capable of handling hundreds of requests per second on a moderately powerful server.
- Content-Encoding: deflate/gzip, based on request headers. Caching allows it so serve deflated files faster than Apache's mod_deflate option!
- Test cases for most components
- Easy integration of 3rd-party minifiers
- Separate utility classes for HTTP encoding and cache control
- Memcache support
- An AJAX powered URL builder that simplify the creation of minify urls
- The possibility to define URL's groups to increase performances even more.
+ the features of Joomla! component
- Installation and removal like any Joomla! component
- A real back end administration panel, multilingual,
- Version check to always keep up to date,
- Some security measure inherited from Joomla! framework and best practices.
- Cache statistics: number of objects in cache, objects size by type, rendered in chart.
- GPL v3 license for com_minify,
- BSD license for the engine minify
Principles
Minify4Joomla combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.
So instead of having N HTTP requests for including all javascripts and M HTTP requests for including all your CSS in frontend, you'll be able to reduce N+M HTTP requests to only 2 (one for including all Javascripts code and 1 for including all CSS code)
Starting with release 1.1.0, I did write an optimized JDocumentRendererHead (Joomla!) named M4JDocumentRendererHead which automatically render all JavaScript and CSS resources into minified URL resources!
Installation
- Install the component com_minify like any other Joomla! component.
- Download at http://www.waltercedric.com/updater.php?option=com_versions&catid=16
- Check after installation that under "Check/System" (administrator/index.php?option=com_minify&task=checkSystem)
That the file cache is writable (directory at components/com_minify/cache has to be writable)
Note: you will get a chart only with an internet access as the component use Google Chart API
Recommended settings
The default settings are highly recommended.
- ENter your Joomla Live URL in the field, on my homepage it is for example: http://www.waltercedric.com
- YES: Cache file locking. Set to false if filesystem is NFS. Memcache is used if it is detected on localhost port 11211. Use always the file cache at least to avoid rebuilding cache in files at each request.
- NO: Allow use of the Minify URI Builder app. If you no longer need this, set to false.
- NO: To allow debugging, set this option to true and add &debug=1 to a URI. E.g. /min/?f=script1.js,script2.js&debug=1
- 1800: Maximum age of browser cache in seconds. After this period, the browser will send another conditional GET. You might want to shorten this before making changes if it's crucial those changes are seen immediately.
- NO: If you'd like to restrict the 'f' option to files within/below particular directories below DOCUMENT_ROOT, set this here. You will still need to include the directory in the f or b GET parameters. If YES a new field will appear.
EX: '//js', '//css'
- NO: Set to true to disable the 'f' GET parameter for specifying files. Only the "g" parameter will be considered.
- 10: Maximum # of files that can be specified in the 'f' GET parameter
- 0: If you upload files from Windows to a non-Windows server, Windows may report incorrect mtimes for the files. This may cause Minify to keep serving stale cache files when source file changes are made too frequently (e.g. more than once an hour).Immediately after modifying and uploading a file, use the touch command to update the mtime on the server. If the mtime jumps ahead by a number of hours,set this variable to that number. If the mtime moves back, this should not be needed. In the Windows SFTP client WinSCP, there's an option that may fix this issue without changing the variable below. Under login > environment, select the option "Adjust remote timestamp with DST". @link http://winscp.net/eng/docs/ui_login_environment#daylight_saving_time
Minifying your site
Golden Rules
Make a backup of each file before modifying it!
Forewords
Unlucky there is a lot of way to add CSS and JavaScript to a Joomla! page
Modifying the site templates index.php
There resources URL are statically included: CSS and JavaScript are always included in all your site pages, removing them and minifying them is easy as you just need to replace them with their minified versions. Open index.php and modify it, that's all.
3rd Party extensions (Plugins, Components and Modules) using Joomla! API's
3rd Party extensions (Plugins, Components and Modules) are able to modify on the fly the HTML content to add new functionalities, some of them do add JavaScript and CSS...
Starting with version 1.1.0, a special JdocumentHeadRenderer is changing the way Joomla! render the HTML head part of your document. Basically activating the patch will automatically minify all scripts and CSS and be able to learn and modify groupsURL at runtime (learningMode=true). After you have been through some representative page of your site (logged in or not, in some heavy javascript pages), the Minify4Joomla Cache and groupConfig.php file will be full of URL and data ready to server any visitors.
3rd Party extensions (Plugins, Components and Modules) NOT using Joomla! API's
If 3rd party extensions are NOT using Joomla API's to include their CSS and JavaScripts, then you will be force to either:
- Contact the author and ask him to support Minify4Joomla! please dont contact me! I can't modify all 3rd party extensions for all of You!!
- Patch the code yourself to your needs, it is not difficult at all, search for the css inclusion and correct the URL to go through com_minify
Tracking down all URL Resources inclusions
Using the URL builder
The URL builder
- Is a Javascript tool that use JQuery (AJAX) to easily create a list of Javascript or CSS files (or 1 is fine) you'd like to combine.
- Will pop up in Minify4Joomla administrator panel when you click on the menu entry "Url Builder"
- May also be access at any time by pointing a browser to http://yousite.com/administrator/components/com_minify/builder/
It's usage is quite straighforward.
Bookmarklet
The second help is the bookmarklet:
A bookmarklet is an applet, a small computer application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page
- You can use the bookmarklet below to fetch all CSS & Javascript URIs from a page on your site. When you active it, this page will open in a new window with a list of available URIs to add.
- I recommend You to drag it to the Bookmark Toolbar of Firefox by drag and drop.
- This tool only work in the same domain where minify4joomla is installed
Identifying JavaScript/CSS Manually
Go to your frontpage, and make view source (HTML)
Between <head> and </head> you may find for CSS something like:
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="/templates/rhuk_milkyway/css/template.css" type="text/css" /> <link rel="stylesheet" href="/templates/rhuk_milkyway/css/blue.css" type="text/css" /> <link rel="stylesheet" href="/templates/rhuk_milkyway/css/blue_bg.css" type="text/css" />
In this case, things are easy, 5 HTTP request are needed to render your front page, and with com_minify it may be replaced by only one:
<link rel="stylesheet" href="/components/com_minify/?f=/templates/system/css/system.css,/templates/system/css/general.css,/templates/rhuk_milkyway/css/template.css,/templates/rhuk_milkyway/css/blue.css,/templates/rhuk_milkyway/css/blue_bg.css" type="text/css" />
In the example above, I use the ?f= to specify all files that have to be included, a better choice would have to use ?g= as it avoid com_minify to parse the URL and thus this variant is faster
<link rel="stylesheet" href="/components/com_minify/?g=uniqueID" type="text/css" />
Where uniqueID is an arbitrary key that is unique in the file groupsConfig.php
return array( 'uniqueID' => array( '/templates/system/css/system.css,/templates/system/css/general.css', '/templates/rhuk_milkyway/css/template.css', '/templates/rhuk_milkyway/css/blue.css', '/templates/rhuk_milkyway/css/blue_bg.css'));
Things get more complex as soon as you have different CSS per media. Different types of mediums can have different CSS files ("screens", "print", "mobile", etc). You can't use only one minify URL for all your CSS, one per media is mandatory!
Defining URL groups for more performances
In the frontend, use the menu entry "URL Builder"
example of components/com_minify/groupsConfig.php</b>
return array(
'fjs' => array('//media/system/js/caption.js', '//media/system/js/mootools.js'),
'css' => array('//templates/system/css/system.css',
'//templates/system/css/general.css',
'//templates/rhuk_milkyway/css/template.css',
'//templates/rhuk_milkyway/css/blue.css',
'//templates/rhuk_milkyway/css/blue_bg.css'),
);
This allow you to iclude in your /templates/***/index.php the following:
I am not satisfied by the security issue it may created to inject a php code by POST, so for the moment, you'll have to edit the file components/com_minify/groupsConfig.php manually to add/remove new group url!
Usage Examples
Attention
Note1
Minifying and reducing the number of http request is not integrated in Joomla! core, nor Joomla! provide any hooks that allow me to intercept the insertion of javascript and CSS in document head or any other part of the
This is because classes
- JHTMLBehavior at libraries\joomla\html\html\behavior.phpinclude many different Javascript
*JHTML at \libraries\joomla\html\html.php which <br>include javascript with function script($filename, $path = 'media/system/js/', $mootools = true) and<br>include css with function stylesheet($filename, $path = 'media/system/css/', $attribs = array())
Do not trigger any event where Minify4Joomla can plug itself. In Fact I could have patch JDocument and hook my code in there, but at the moment, I dont want to hack the core of Joomla! anymore.
Note2
Note all 3rd party components, plugins, templates go throught the API of Joomla to add their CSS and Javascript -> to view which CSS/Javascript is used, the best way is to
view source code of the HTML page
OR
You can use the bookmarklet below to fetch all CSS & Javascript URIs from a page on your site. When you active it, this page will open in a new window with a list of available URIs to add.
Note3
Using Minify4Joomla is something is a tradeoff in all pages: you loose the dynamic of code adding dynamically javascript and css depending on external conditions by replacing them with static include that will give you more speed.
Minify the Joomla! frontend
todo
Minify the Joomla! backend
You'll have to manually modify the administrator templates, the default templates is name khepri
In the directory administrator/templates/khepri you'll find some files
- component.php
- cpanel.php
- index.php
- login.php
Attention always use <?php echo JURI::root(); ?> in the URL otherwise the URL will be pointing to administrator/components/com_minify/
<script src="<?php echo JURI::root(); ?>components/com_minify/?g=XXXXXX" type="text/javascript"></script>
