fronted from scratch - supercharge magento page speed

of 33/33
Frontend From Scratch Supercharge page speed with frontend optimisation alone

Post on 26-Jan-2017

947 views

Category:

Technology

2 download

Embed Size (px)

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

  • Vendor Default page/html.phtml vendor_page 1 0

    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 vendor/dst/global_lib_default.min.js

    vendor/dst/global_lib_mobile.min.js

  • 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