Goedendag allen 
Ik gebruik al een enige tijd Joomla als CMS voor mijn website en toen ik laatst een beetje kritisch aan het kijken was naar de grootte van de pagina's schrok ik daar een beetje van. Wat blijkt echter, het zijn niet de pagina's zelf die te bloated zijn (al zit daar ook nog wel ruimte voor verbetering in) maar vooral de scripts die gebruikt worden op de website. Denk hierbij aan mootools, lightbox script en een script voor het comment systeem. Mootools is de grootste pain in the ass met zijn 73kb.
Nu vond ik via google een manier om javascripts e.d. via Gzip te compressen en te serveren aan de browser echter heeft het nog een voordeel, het stript de complete css van onnodige karakters. De vraag is alleen of het verstandig is dit te gaan gebruiken.
De code ziet er als volgt uit, Javascript en css aanroepen in het template gebeuren van Joomla gaat als volgt.
En dan mag dit er nog bij in het template:
De vraag is, is het slim om naar een dergelijke manier te gaan kijken OF is het slimmer om de zaak links te laten liggen? Naast dit alles ben ik overigens al bezig met optimalisatie van zaken als template images door ze vanuit 1 sprite aan te gaan roepen e.d. maar bovenstaand leek me daarnaast ook een aanlokkelijke optie.
Ik gebruik al een enige tijd Joomla als CMS voor mijn website en toen ik laatst een beetje kritisch aan het kijken was naar de grootte van de pagina's schrok ik daar een beetje van. Wat blijkt echter, het zijn niet de pagina's zelf die te bloated zijn (al zit daar ook nog wel ruimte voor verbetering in) maar vooral de scripts die gebruikt worden op de website. Denk hierbij aan mootools, lightbox script en een script voor het comment systeem. Mootools is de grootste pain in the ass met zijn 73kb.
Nu vond ik via google een manier om javascripts e.d. via Gzip te compressen en te serveren aan de browser echter heeft het nog een voordeel, het stript de complete css van onnodige karakters. De vraag is alleen of het verstandig is dit te gaan gebruiken.
De code ziet er als volgt uit, Javascript en css aanroepen in het template gebeuren van Joomla gaat als volgt.
code:
1
| <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/gzipcache.php?files=mootools.js,othercode1.js,othercode2.js" type="text/javascript" /> |
En dan mag dit er nog bij in het template:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| <?php
ob_start('ob_gzhandler');
$files = $_GET["files"];
$found = false;
$filearray = explode(",", $files);
foreach ($filearray as $f)
{
if (substr($f, -4) == ".css")
{
header('Content-Type: text/css; charset: UTF-8');
$found = true;
$ext = ".css";
$extlength = -4;
break;
}
else if (substr($f, -3) == ".js")
{
header('Content-Type: text/javascript; charset: UTF-8');
$found = true;
$ext = ".js";
$extlength = -3;
break;
}
}
if (!$found || !isset($ext) || !isset($extlength))
{
die("Invalid Call");
return;
}
header('Cache-Control: must-revalidate');
$expire_offset = 0; // set to a reaonable interval, say 3600 (1 hr)
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expire_offset) . ' GMT');
foreach ($filearray as $f)
{
if (substr($f, $extlength) == $ext)
{
if ($ext == ".css")
dump_css_cache($f);
else
echo file_get_contents($f);
}
}
//Now the functions
function css_compress($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);// remove comments
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' '), '', $buffer);// remove tabs, spaces, newlines, etc.
$buffer = str_replace('{ ', '{', $buffer);// remove unnecessary spaces.
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;
}
function dump_css_cache($filename) {
$cwd = getcwd() . DIRECTORY_SEPARATOR;
$stat = stat($filename);
$current_cache = $cwd . $filename . '.' . $stat['size'] . '-' . $stat['mtime'] . '.cache';
// the cache exists - just dump it
if (is_file($current_cache)) {
include($current_cache);
return;
}
// remove any old, lingering caches for this file
if ($dead_files = glob($cwd . $filename . '.*.cache', GLOB_NOESCAPE))
foreach ($dead_files as $dead_file)
unlink($dead_file);
if (!function_exists('file_put_contents')) {
function file_put_contents($filename, $contents) {
$handle = fopen($filename, 'w');
fwrite($handle, $contents);
fclose($handle);
}
}
$cache_contents = css_compress(file_get_contents($filename));
file_put_contents($current_cache, $cache_contents);
echo $cache_contents;
}
?> |
De vraag is, is het slim om naar een dergelijke manier te gaan kijken OF is het slimmer om de zaak links te laten liggen? Naast dit alles ben ik overigens al bezig met optimalisatie van zaken als template images door ze vanuit 1 sprite aan te gaan roepen e.d. maar bovenstaand leek me daarnaast ook een aanlokkelijke optie.
:strip_exif()/u/18996/GoT_avatar.gif?f=community){kind=avatar}
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
:strip_icc():strip_exif()/u/4421/sas.jpg?f=community)
