Transcript

Frontend From Scratch

Supercharge page speed with frontend optimisation alone

Yousef Cisco

@yousefcisco

Frontend From Scratch

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

Kraken to optimise image

assets

Create a custom task to

help with translations

Generate your own iconfont

Use LESS/Sass

Merge & Minify JSCustomise 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

MustacheAllows you to render the same

template server side and client side

Ampersand/Mustache amp.co/mustache

Ditch defaultBeat the bloat

Build from scratch

Questions?

Thank you


Top Related