Com minify

From Walter Cedric Wiki
Jump to: navigation, search

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

I'm not easily impressed. . . but that's imrepsisng me! :)

IJWTS wow! Why can't I think of tinhgs like that?

Features

Kudos to you! I hadn't tohhugt of that!

+ 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


What a joy to find smeoone else who thinks this way.

Installation

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

Minify4joomla.check.system.png


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

Minify4joomla.settings.png

Minifying your site

Golden Rules

Make a backup of each file before modifying it!

Kewl you souhld come up with that. Excellent!

Using the URL builder

The URL builder

  1. 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.
  2. Will pop up in Minify4Joomla administrator panel when you click on the menu entry "Url Builder"
  3. 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.

AKAIK you've got the asnewr in one!

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

Wow! That's a rlelay neat answer!

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>