Fronted From Scratch - Supercharge Magento page speed
4 likes1,348 views
The document discusses optimizing frontend performance while building a custom Magento theme from scratch. It emphasizes reducing technical debt, improving maintainability, and utilizing various tools and techniques for page speed enhancement, such as custom layouts, modular design, and asset optimization. Additionally, it suggests integrating build tools like Grunt/Gulp and techniques for script and image management to streamline the development process.
![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](https://image.slidesharecdn.com/magetitans-151110091959-lva1-app6891/85/Fronted-From-Scratch-Supercharge-Magento-page-speed-9-320.jpg)
![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](https://image.slidesharecdn.com/magetitans-151110091959-lva1-app6891/85/Fronted-From-Scratch-Supercharge-Magento-page-speed-10-320.jpg)
![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](https://image.slidesharecdn.com/magetitans-151110091959-lva1-app6891/85/Fronted-From-Scratch-Supercharge-Magento-page-speed-11-320.jpg)
Fronted From Scratch - Supercharge Magento page speed
- 1. Frontend From ScratchSupercharge page speed with frontend optimisation alone
- 3. Frontend From ScratchSupercharge page speed with frontend optimisation alone
- 4. Disclaimer
- 5. But why • Reduce technical debt • Build only the website your client needs • Improve performance & maintainability • Magento recommends you build your own theme
- 7. The basics • Create a new package • Create a new theme • Create empty page.xml
- 8. 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 on http://git.io/BaseBlocker
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 15. Hand craft your layout • Don't copy Magento layout • Create your own layout files • Create modular layout
- 16. Create your own templates • Write clean templates • Use native templates for inspiration (don't copy!) • Use native blocks when required • Structure your templates well
- 17. Integrate Grunt/Gulp into your workflow Use these tools to help you build your websites faster, there's a lot you can do with this.
- 19. Create a custom task to help with translations
- 21. Use LESS/Sass
- 22. Merge & Minify JS Customise the task to handle theme setup
- 23. 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>
- 24. 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
- 25. Turn off Magento's CSS & JS merging
- 26. Use your JS
- 27. Mustache
- 28. Mustache Allows you to render the same template server side and client side
- 30. Ditch default Beat the bloat
- 32. Questions?
- 33. Thank you