-
- srinigenie
 -
Total Posts: 539
Joined: 2008-02-04
|
Hi all,
On the Magento home page, the number of CSS file requests are many and in order to use the flexibility of proxy.php to cater to CSS files so that all CSS files would be clubbed as one file and be sent to the browser. This will save the time and minimize the http requests.
1. Copied js/proxy.php into skin/frontend/default/default folder
2. Change the proxy.php in the new folder for enabling CSS
if ($contentType===true) {
$contentTypes = array(
'js' => 'text/javascript',
'css' => 'text/css',
// 'gif' => 'image/gif',
// 'png' => 'image/png',
// 'jpg' => 'image/jpeg',
);
3. On the file Mage/Page/Block/Html/Head.php, ensure that all CSS files are chunked and directed through the new proxy.php file. Modified the function getCssJsHtml() in the below manner to ensure this happens:
public function getCssJsHtml()
{
$lines = array();
$baseJs = Mage::getBaseUrl('js');
$html = '';
$script = '<script type="text/javascript" src="%s" %s></script>';
$stylesheet = '<link type="text/css" rel="stylesheet" href="%s" %s></link>';
$alternate = '<link rel="alternate" type="%s" href="%s" %s></link>';
foreach ($this->_data['items'] as $item) {
if (!is_null($item['cond']) && !$this->getData($item['cond'])) {
continue;
}
$if = !empty($item['if']) ? $item['if'] : '';
switch ($item['type']) {
case 'js':
#$lines[$if]['other'][] = sprintf($script, $baseJs.$item['name'], $item['params']);
$lines[$if]['script'][] = $item['name'];
break;
case 'js_css':
//proxying css will require real-time prepending path to all image urls, should we do it?
$lines[$if]['other'][] = sprintf($stylesheet, $baseJs.$item['name'], $item['params']);
#$lines[$if]['stylesheet'][] = $item['name'];
break;
case 'skin_js':
$lines[$if]['other'][] = sprintf($script, $this->getSkinUrl($item['name']), $item['params']);
break;
case 'skin_css':
// $lines[$if]['other'][] = sprintf($stylesheet, $this->getSkinUrl($item['name']), $item['params']);
$lines[$if]['skin_css'][] = $item['name'];
break;
case 'rss':
$lines[$if]['other'][] = sprintf($alternate, 'application/rss+xml'/*'text/xml' for IE?*/, $item['name'], $item['params']);
break;
}
}
foreach ($lines as $if=>$items) {
if (!empty($if)) {
$html .= '<!--[if '.$if.']>'."\n";
}
if (!empty($items['script'])) {
foreach ($this->getChunkedItems($items['script'], $baseJs.'proxy.php?c=auto&f=') as $item) {
$html .= sprintf($script, $item, '')."\n";
}
// foreach (array_chunk($items['script'], 15) as $chunk) {
// $html .= sprintf($script, $baseJs.'proxy.php/x.js?f='.join(',',$chunk), '')."\n";
// }
}
if (!empty($items['stylesheet'])) {
foreach ($this->getChunkedItems($items['stylesheet'], $baseJs.'proxy.php?c=auto&f=') as $item) {
$html .= sprintf($stylesheet, $item, '')."\n";
}
// foreach (array_chunk($items['stylesheet'], 15) as $chunk) {
// $html .= sprintf($stylesheet, $baseJs.'proxy.php/x.css?f='.join(',',$chunk), '')."\n";
// }
}
if (!empty($items['skin_css'])) {
$items['skin_css'] = str_replace ("css/","",$items['skin_css']);
foreach ($this->getChunkedItems($items['skin_css'], $this->getSkinURL().'css/proxy.php?c=auto&f=') as $item) {
$html .= sprintf($stylesheet, $item, '')."\n";
}
// foreach (array_chunk($items['stylesheet'], 15) as $chunk) {
// $html .= sprintf($stylesheet, $baseJs.'proxy.php/x.css?f='.join(',',$chunk), '')."\n";
// }
}
if (!empty($items['other'])) {
$html .= join("\n", $items['other'])."\n";
}
if (!empty($if)) {
$html .= '<![endif]-->'."\n";
}
}
return $html;
}
4. On doing this I was delighted to find that the CSS files were being requested through the new proxy.php. However, to my disappointment, all the page alignment went haywire. I saved the webpage and checked the proxy.css file that gets saved alongwith. Here I don’t observe anything fishy and all the CSS format appears to be present intact in one file.
WIsh if someone can point to me where I am going wrong!!
Thanks in advance!!
|
