|
<?php |
|
|
|
function arrayToAttributeString( array $attr ) |
|
{ |
|
$string = null; |
|
foreach ( $attr as $k => $v ) { |
|
$string .= ' ' . $k . ( empty($v) ? null: '="' . $v . '"' ); |
|
} |
|
|
|
return trim($string); |
|
} |
|
|
|
function doCriticalCss( $headHtml, array $criticalFiles=array() ) |
|
{ |
|
if ( empty($criticalFiles) ) { |
|
return $headHtml; |
|
} |
|
|
|
$_noscript = array(); |
|
$_loop = array( |
|
'link' => array('rel'=>'', 'type'=>'', 'href'=>'', 'media'=>''), |
|
'script' => array('src'=>'') |
|
); |
|
$_attributes = array('rel'=>'', 'type'=>'', 'href'=>'', 'media'=>'', 'async'=>'', 'defer'=>''); |
|
$_allowedPreloads = array('script','image','font','style'); |
|
|
|
// determine stylesheets and scripts within our $headHtml string |
|
preg_match_all('|(<([a-z]+)[^>]+>)|', $headHtml, $matches); |
|
foreach( $matches[1] as $j => $elm ) |
|
{ |
|
$tag = $matches[2][$j]; |
|
if ( !isset( $_loop[ $tag ] ) ) { |
|
continue; |
|
} |
|
|
|
$_attributes = $attrs = $_loop[ $tag ]; |
|
if ( !empty($_attributes) ) { |
|
preg_match_all('/(' . implode('|', array_keys( $_attributes ) ) . ')=("[^"]*")/i', $elm, $list, PREG_SET_ORDER); |
|
foreach ( $list as $opts ) { |
|
$attrs[ $opts[1] ] = trim($opts[2],'"'); |
|
} |
|
} |
|
|
|
// only adjust/mutate links if non-printable stylesheet (so, no canonical) |
|
if ( $tag == 'link' && $attrs['rel'] == 'stylesheet' && $attrs['media'] !== 'print' ) { |
|
|
|
$media = null; |
|
if ( strpos($attrs['media'],'(') !== false ) { |
|
$media = $attrs['media']; |
|
} |
|
|
|
$attrs['media'] = 'print'; |
|
$attrs['onload'] = 'this.media=\'' . ( $media ? $media: 'all' ) . '\';this.onload=null'; |
|
|
|
// add the stylesheet to noscript, as we wan't to fall back to direct/render blocking styling when JS has been disabled by visitors |
|
$_noscript[] = $elm; |
|
|
|
// and change original link-element to a lazyloading (onload) stylesheet-link |
|
$attrs = array_filter( $attrs ); |
|
$newStylesheet = '<link ' . arrayToAttributeString( $attrs ) . ' />'; |
|
$headHtml = str_replace( $elm, $newStylesheet, $headHtml ); |
|
} |
|
else if ( $tag == 'script' && !empty($attrs['src']) ) { |
|
// add defer to script |
|
$attrs['defer'] = ''; |
|
$newScript = '<script ' . arrayToAttributeString( $attrs ) . '>'; |
|
$headHtml = str_replace( $elm, $newScript, $headHtml ); |
|
} |
|
} |
|
|
|
// echo critical css and noscript |
|
echo ' |
|
<style type="text/css">' . str_replace( array("\n","\r","\t"), null, implode( null, array_map('file_get_contents', $criticalFiles ) ) ) . '</style> |
|
<noscript>' . implode( null, $_noscript) . '</noscript>'; |
|
|
|
// return adjusted $headHtml |
|
return $headHtml; |
|
} |
|
|
|
|
|
$headHtml = file_get_contents('getCssJsHtml.txt'); // Magento 1 function call: $this->getCssJsHtml(); |
|
$criticalCss = array(); |
|
$criticalCss[] = 'critical-all.css'; |
|
$criticalCss[] = 'critical-pdp.css'; |
|
|
|
/* |
|
// decide when to do critical magic in Magento 1 |
|
if ( Mage::registry('current_product') ) { |
|
// if on product page |
|
$criticalCss[] = $skin_url.'critical-general.css'; |
|
$criticalCss[] = $skin_url.'critical-product.css'; |
|
} |
|
else if ( Mage::registry('current_category') ) { |
|
// if on category page |
|
$criticalCss[] = $skin_url.'critical-general.css'; |
|
$criticalCss[] = $skin_url.'critical-category.css'; |
|
} |
|
else { |
|
// on other pages, such as text-only or homepage, do nothing special |
|
} |
|
*/ |
|
|
|
// inline critical css and adjust $headHtml accordingly |
|
$headHtml = doCriticalCss( $headHtml, $criticalCss ); |
|
|
|
// business as usual: |
|
echo $headHtml; |
|
|
|
?> |
$skin_url = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN);
Should work for all