CSS and JS compression

[BvdH]

Hello developer,

to make elgg a little bit more efficent it would be great if the CSS and JS-files would be compressed. I have looked for something like that and found a solution (​http://www.php-vision.de/plugins-scripte/javascript-css-compressor-code.php) for the simple-cache-case. I poste the code under this comment.

Now my questions: Is this a good way to safe load time? Is it possible to add that (ore something like that) into the next elgg-Version?

Best,

BvdH

Here is the new code:

/

• Regenerates the simple cache. *
• @see elgg_view_register_simplecache * */

function elgg_view_regenerate_simplecache() {

global $CONFIG;

@todo elgg_view() checks if the page set is done (isset($CONFIG->pagesetupdone)) and
triggers an event if it's not. Calling elgg_view() here breaks submenus
(at least) because the page setup hook is called before any
contexts can be correctly set (since this is called before page_handler()).
To avoid this, lie about $CONFIG->pagehandlerdone to force
the trigger correctly when the first view is actually being output.
$CONFIG->pagesetupdone = TRUE;

if (isset($CONFIG->views->simplecache)) {

if (!file_exists($CONFIG->dataroot . 'views_simplecache')) {

@mkdir($CONFIG->dataroot . 'views_simplecache');

}

if (!empty($CONFIG->views->simplecache) && is_array($CONFIG->views->simplecache)) {

foreach($CONFIG->views->simplecache as $view) {

$viewcontents = elgg_view($view);
Add for compression
if(strpos($view, 'css') !== FALSE) $viewcontents = clean_css_code($viewcontents);
if(strpos($view, 'js') !== FALSE) $viewcontents = clean_js_code($viewcontents);
$viewname = md5(elgg_get_viewtype() . $view);
if ($handle = fopen($CONFIG->dataroot . 'views_simplecache/' . $viewname, 'w')) {

fwrite($handle, $viewcontents);
fclose($handle);

}

}

}

datalist_set('simplecache_lastupdate', 0);

}

unset($CONFIG->pagesetupdone);

}

/ This Functions Cleans CSS Stylesheet Code

• @author M. Schwarz (​http://www.php-vision.de/plugins-scripte/javascript-css-compressor-code.php)
• @param String $jscode
• @return String */

function clean_css_code( $code )
{

$code = clean_comments ( $code );
$code = preg_replace('/\s+/',' ', $code);
$code = preg_replace('/([\ ]?)\{([\ ]?)/',"{\r\n\t", $code);
$code = preg_replace('/\;([\ ]?)/',";\r\n\t", $code);
$code = preg_replace("/([\ ]?)\:([\ ]?)/",":", $code);
$code = preg_replace("/([\t]?)([\ ]?)\}([\ ]?)/","}\r\n", $code);
return $code;

}

/ This Functions Cleans Javascript Code

• @author M. Schwarz (​http://www.php-vision.de/plugins-scripte/javascript-css-compressor-code.php)
• @param String $jscode
• @return String */

function clean_js_code( $jscode )
{

$code = clean_comments ( $jscode );
$code = preg_replace('#(.*)(\n|\r|\r\n)#',, $code);
$code = preg_replace('/([\ ]+)/',' ', $code);
$code = preg_replace('/([\t]+)/',' ', $code);
$code = preg_replace('#([\n\r]{1,2}?)( ?)\{( ?)([\n\r]{1,2}?)#',"{", $code);
$code = preg_replace('/\;( ?)([\n\r]{1,2}?)/',";", $code);
return $code;

}

/ This Functions Cleans Standard Block Comments( /* )

• @author M. Schwarz (​http://www.php-vision.de/plugins-scripte/javascript-css-compressor-code.php)
• @param String $code
• @return String */

function clean_comments ( $code )
{ $code = preg_replace('#(/\*)(.*)(\*/)#',, $code);

do{ $start = strpos($code ,'/*');

$ende = strpos($code ,'*/', $start);
$comm = substr( $code, $start+2,$ende-$start-2 );
$code = str_replace('/*'.$comm.'*/',,$code);

}while( $ende );
return $code;

}

[ewinslow]

I'm 100% behind this suggestion. Our team has been using ​Minify for some time to this end. Good stuff.

[milan]

I made a similar trac report for css (​http://trac.elgg.org/ticket/1962). Although compacting JavaScript is more problematic than CSS as most JavaScript libraries (i.e. jQuery) have been highly compacted using the google closure library (or something like it), so in some cases you could make the files bigger.

Maybe a special view function that takes a parameter to compact custom javascript? You'll also need to compare which of the many algorithms is best suited to Elgg, but the best I've seen is in (​http://fatfree.sourceforge.net/#optimize) and they balance out a trade off between processing (lots of preg_replaces()) and actually compacting.

Also these functions need a fair amount of testing as if you see my trac report on CSS we had to modify the original algorithm as certain versions of IE didn't like our compacted CSS and because of that I wouldn't want it in 1.7.2 imho

[BvdH]

I think your version for CSS is more restrictive. I tested my version also on IE8 and it works. So for a first step you can use this code (eventually you can disable it in the backend) and in a later step (e.g. for 1.8) you can use other codes for compression.

[ewinslow]

I've created a simple plugin for this ​here.

[BvdH]

Thanks, it works.

[milan]

You may want to wait till this bug (​http://trac.elgg.org/ticket/2115) in simplecache is fixed before deploying this.

[ewinslow]

Let's integrate minify into core. This is a best practice that every site should be doing.

[sembrestels]

PR: ​https://github.com/Elgg/Elgg/pull/379

[Sem]

Refs #2110. Added Minfy as vendor.

Changeset: 85f5d4b3eb382948a012006e758bfb539d0ee191

[Sem]

Fixes #2110. Added hook handler to minify css and js when generating simplecache.

Changeset: ba3126f0f64cf709c8dfb0a31db6f50643bb6039

[Steve Clay]

Merge pull request #393 from sembrestels/minify-rebased

Fixes #2110: Adds options to compress CSS/JS in simplecache

Changeset: 406ee0ee85a92403f98515882c5f17ecf4555aa0

[Steve Clay <steve@…>]

In 406ee0ee85a92403f98515882c5f17ecf4555aa0/elgg:

Merge pull request #393 from sembrestels/minify-rebased

Fixes #2110: Adds options to compress CSS/JS in simplecache

[sembrestels]

In ba3126f0f64cf709c8dfb0a31db6f50643bb6039/elgg:

Fixes #2110. Added hook handler to minify css and js when generating simplecache.

[sembrestels]

In 85f5d4b3eb382948a012006e758bfb539d0ee191/elgg:

Refs #2110. Added Minfy as vendor.