Frontend From
ScratchSupercharge page speed with frontend optimisation alone

Yousef
Cisco
@yousefcisco

Frontend From
ScratchSupercharge page speed with frontend optimisation alone

Disclaimer

But why
• Reduce technical debt
• Build only the website your client
needs
• Improve performance &
maintainability
• Magento recommends you build your
own theme

Actually
building a
theme from
scratch

The basics
• Create a new package
• Create a new theme
• Create empty page.xml

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

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 workflow
Use these tools to help you build your
websites faster, there's a lot you can
do with this.

Kraken to
optimise image
assets

Create a
custom task to
help with
translations

Generate your
own iconfont

Use LESS/Sass

Merge & Minify JS
Customise the task to
handle theme setup

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

Turn off
Magento's CSS
& JS merging

Use your JS

Mustache

Mustache
Allows you to render the same
template server side and client side

Ampersand/Mustache
amp.co/mustache

Ditch default
Beat the bloat

Build from
scratch

Questions?

Thank you