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.

1. Frontend From
ScratchSupercharge page speed with frontend optimisation alone

2. Yousef
Cisco
@yousefcisco

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

6. Actually
building a
theme from
scratch

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

14. <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

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.

18. Kraken to
optimise image
assets

19. Create a
custom task to
help with
translations

20. Generate your
own iconfont

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

29. Ampersand/Mustache
amp.co/mustache

30. Ditch default
Beat the bloat

31. Build from
scratch

32. Questions?

33. Thank you