fronted from scratch - supercharge magento page speed
TRANSCRIPT
But why• Reduce technical debt
• Build only the website your client needs
• Improve performance & maintainability
• Magento recommends you build your own theme
BaseBlocker• Magento forces base/default as a final
fallback
• Rewrite Mage_Core_Model_Design_Package
• Stop fallback to base/default
• Add exceptions for some modules/vendors
• Example can be found onhttp://git.io/BaseBlocker
class Mage_Core_Model_Design_Package{ protected function _fallback( $file, array &$params, array $fallbackScheme = array(array()) ) { if ($this->_shouldFallback) { foreach ($fallbackScheme as $try) { $params = array_merge($params, $try); $filename = $this->validateFile($file, $params); if ($filename) { return $filename; } } $params['_package'] = self::BASE_PACKAGE; $params['_theme'] = self::DEFAULT_THEME; } return $this->_renderFilename($file, $params); }
http://git.io/BaseBlocker
if ($this->_shouldFallback) { foreach ($fallbackScheme as $try) { $params = array_merge($params, $try); $filename = $this->validateFile($file, $params); if ($filename) { return $filename; } } $params['_package'] = self::BASE_PACKAGE; $params['_theme'] = self::DEFAULT_THEME;}
http://git.io/BaseBlocker
if ($this->_shouldFallback) { foreach ($fallbackScheme as $try) { $params = array_merge($params, $try); $filename = $this->validateFile($file, $params); if ($filename) { return $filename; } } // This condition is added to allow certain files // to fallback to base/default if ($this->shouldFallbackToBase($file)) { $params['_package'] = self::BASE_PACKAGE; $params['_theme'] = self::DEFAULT_THEME; }}
http://git.io/BaseBlocker
protected function shouldFallbackToBase($file)
{
// Allow fallback in adminhtml
if ($this->getArea() != self::DEFAULT_AREA) {
return true;
}
$exceptions = array(
'vendor'
'paypal',
'sagepay',
'payment',
);
// Allow exceptions
foreach ($exceptions as $exception) {
if (stripos($file, $exception) !== false) {
return true;
}
}
return false;
}
http://git.io/BaseBlocker
Add new page type• Break the shackles of 1column and
2column-left
• Create your own template
• Works well with responsive sites
Tip: create a Page module to add all these customisations
<global>
<page>
<layouts>
<vendor_page module="page">
<label>Vendor Default</label>
<template>page/html.phtml</template>
<layout_handle>vendor_page</layout_handle>
<is_default>1</is_default>
</vendor_page>
<one_column>
<is_default>0</is_default>
</one_column>
</layouts>
</page>
</global>
http://git.io/config.xml
Hand craft your layout
• Don't copy Magento layout
• Create your own layout files
• Create modular layout
Create your own templates• Write clean templates
• Use native templates for inspiration (don't copy!)
• Use native blocks when required
• Structure your templates well
Integrate Grunt/Gulp into your workflowUse these tools to help you build your websites faster, there's a lot you can do with this.
Merge & Minfiy JS<action method="addJS">
<name>vendor/dst/global_lib_default.min.js</name>
</action>
<action method="addJS">
<name>vendor/dst/global_lib_mobile.min.js</name>
</action>
Optimise your JS• Use inline scripts only to output
JSON data
• Load all scripts at the bottom of the page
• Merge scripts based on pages
• Preload scripts on linear user journey