SlideShare a Scribd company logo
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Making the Magento2 JavaScript loading great again
Javascript, RequireJS, Bundling, Merging, Minifying, r.js Optimizer, Baler
© 2019 Adobe. All Rights Reserved. Adobe Confidential. 2
Robin van Raan
Magento technical Architect
vanraan@adobe.com
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Magento 1 issues
§ Loading JavaScript libraries?!
§ Double loading by extensions
§ Multiple versions of libraries
§ Problematic sorting orders
3
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Magento 2
4
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
The issue
5
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Waterfall
6
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Waterfall
7
Module Dependencies
AAA BBB, CCC
BBB DDD
CCC EEE
DDD
EEE
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Waterfall
8
AAA.js
BBB.js
CCC.js
DDD.js
EEE.js
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Waterfall
9
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Magento Bundling to the rescue!
10
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Dead code
11
Bundled Total JS
No 495 KB (1.5 MB uncompressed)
Yes 2.1 MB (7.6 MB uncompressed)
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Bundles vs Non Bundled on 3G mobile
12
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Magento Advanced Bundling to the resque!
13
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
14
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
15
§ https://github.com/magento/m2-devtools
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
16
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
17
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
18
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools – live demo
19
Live demo of M2 Devtools
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools - issues
20
§ Cannot read property 'sectionLoadUrl' of undefined
§ Totals
§ Minicart
§ < 2.3.3
§ https://github.com/magento/m2-devtools/issues/56
§ ES6
§ Syntax errors
§ Minification breaks
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
M2 DevTools
21
§ Pro’s
§ 3x JS loading speed increase
§ ”simple”
§ Con’s
§ From start of project or possible work
§ Changes to JS might require new optimizer file
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler
22
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler - Alpha
23
§ https://github.com/magento/baler
§ https://github.com/adifucan/m2-baler
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler - run
24
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler - compare
25
Setup Non-Blocking Gzip Raw Requests
Unbundled X 495 KB 1.5 MB 176
Bundled 2.1 MB 7.6 MB 10
Baler X 400 KB 1.2 MB 77
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler – M2.3.3 or fix the core!
26
§ Core fixes:
https://github.com/magento/magento2/commit/db43c11c6830465b764ede32abb7262258e5f574
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler – mixins support
27
§ Mixins are not applied for bundles (yet!)
§ https://github.com/magento/baler/issues/23
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Baler – Alpha testers
28
§ Install baler
§ Install the M2 extension
§ Run baler
§ Let us know your results and issues
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Summary
29
§ Magento 2 RequireJS needs optimizing
§ RequireJS optimizations can have a huge performance impact
§ Optimize now? Advanced bundling with M2-devtools
§ Optimize in the future -> Baler
§ We need alpha testers on custom stores with Baler
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Thank you
30
Questions?
© 2019 Adobe. All Rights Reserved. Adobe Confidential.
Thank you
31
Thank you

More Related Content

What's hot

Blazor
BlazorBlazor
Building resuable and customizable Vue components
Building resuable and customizable Vue componentsBuilding resuable and customizable Vue components
Building resuable and customizable Vue components
Filip Rakowski
 
Spring boot vs spring framework razor sharp web applications
Spring boot vs spring framework razor sharp web applicationsSpring boot vs spring framework razor sharp web applications
Spring boot vs spring framework razor sharp web applications
Katy Slemon
 
List of 7 popular java frameworks for 2019
List of 7 popular java frameworks for 2019  List of 7 popular java frameworks for 2019
List of 7 popular java frameworks for 2019
kritikumar16
 
Type script vs javascript come face to face in battleground
Type script vs javascript come face to face in battlegroundType script vs javascript come face to face in battleground
Type script vs javascript come face to face in battleground
Katy Slemon
 
Guide To Web Development
Guide To Web DevelopmentGuide To Web Development
Guide To Web Development
FaisalBinHassan
 
Building Cloud Native Progressive Web Apps with Angular and Spring Boot - Dev...
Building Cloud Native Progressive Web Apps with Angular and Spring Boot - Dev...Building Cloud Native Progressive Web Apps with Angular and Spring Boot - Dev...
Building Cloud Native Progressive Web Apps with Angular and Spring Boot - Dev...
Matt Raible
 
Max Yekaterinenko - Magento 2 & Quality
Max Yekaterinenko - Magento 2 & QualityMax Yekaterinenko - Magento 2 & Quality
Max Yekaterinenko - Magento 2 & Quality
Meet Magento Italy
 
Vue Storefront Basics
Vue Storefront BasicsVue Storefront Basics
Vue Storefront Basics
Filip Rakowski
 
IMMERSE'16 Introduction to adobe experience manager back end
IMMERSE'16 Introduction to adobe experience manager back endIMMERSE'16 Introduction to adobe experience manager back end
IMMERSE'16 Introduction to adobe experience manager back end
AdobeMarketingCloud
 
Hyvä from a developer perspective
Hyvä from a developer perspectiveHyvä from a developer perspective
Hyvä from a developer perspective
vinaikopp
 
DNN Launch Webinar: DNN Platform 8.0 and Evoq 8.3
DNN Launch Webinar: DNN Platform 8.0 and Evoq 8.3DNN Launch Webinar: DNN Platform 8.0 and Evoq 8.3
DNN Launch Webinar: DNN Platform 8.0 and Evoq 8.3
DNN
 
Polymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in RealtimePolymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in Realtime
Juarez Filho
 
IMMERSE'16 Introduction to AEM Tooling
IMMERSE'16 Introduction to AEM ToolingIMMERSE'16 Introduction to AEM Tooling
IMMERSE'16 Introduction to AEM Tooling
AdobeMarketingCloud
 
Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017
Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017
Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017
Matt Raible
 
Sample google app engine applications
Sample google app engine applicationsSample google app engine applications
Sample google app engine applications
Aurel Medvegy
 
30 JavaScript optimization tips
30 JavaScript optimization tips30 JavaScript optimization tips
30 JavaScript optimization tips
Hovhannes Avoyan
 
Secrets of a Blazor Component Artisan
Secrets of a Blazor Component ArtisanSecrets of a Blazor Component Artisan
Secrets of a Blazor Component Artisan
Ed Charbeneau
 
AEM target Integration
AEM target IntegrationAEM target Integration
AEM target Integration
Kanika Gera
 
PWA for PHP Developers
PWA for PHP DevelopersPWA for PHP Developers
PWA for PHP Developers
Ben Marks
 

What's hot (20)

Blazor
BlazorBlazor
Blazor
 
Building resuable and customizable Vue components
Building resuable and customizable Vue componentsBuilding resuable and customizable Vue components
Building resuable and customizable Vue components
 
Spring boot vs spring framework razor sharp web applications
Spring boot vs spring framework razor sharp web applicationsSpring boot vs spring framework razor sharp web applications
Spring boot vs spring framework razor sharp web applications
 
List of 7 popular java frameworks for 2019
List of 7 popular java frameworks for 2019  List of 7 popular java frameworks for 2019
List of 7 popular java frameworks for 2019
 
Type script vs javascript come face to face in battleground
Type script vs javascript come face to face in battlegroundType script vs javascript come face to face in battleground
Type script vs javascript come face to face in battleground
 
Guide To Web Development
Guide To Web DevelopmentGuide To Web Development
Guide To Web Development
 
Building Cloud Native Progressive Web Apps with Angular and Spring Boot - Dev...
Building Cloud Native Progressive Web Apps with Angular and Spring Boot - Dev...Building Cloud Native Progressive Web Apps with Angular and Spring Boot - Dev...
Building Cloud Native Progressive Web Apps with Angular and Spring Boot - Dev...
 
Max Yekaterinenko - Magento 2 & Quality
Max Yekaterinenko - Magento 2 & QualityMax Yekaterinenko - Magento 2 & Quality
Max Yekaterinenko - Magento 2 & Quality
 
Vue Storefront Basics
Vue Storefront BasicsVue Storefront Basics
Vue Storefront Basics
 
IMMERSE'16 Introduction to adobe experience manager back end
IMMERSE'16 Introduction to adobe experience manager back endIMMERSE'16 Introduction to adobe experience manager back end
IMMERSE'16 Introduction to adobe experience manager back end
 
Hyvä from a developer perspective
Hyvä from a developer perspectiveHyvä from a developer perspective
Hyvä from a developer perspective
 
DNN Launch Webinar: DNN Platform 8.0 and Evoq 8.3
DNN Launch Webinar: DNN Platform 8.0 and Evoq 8.3DNN Launch Webinar: DNN Platform 8.0 and Evoq 8.3
DNN Launch Webinar: DNN Platform 8.0 and Evoq 8.3
 
Polymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in RealtimePolymer and Firebase: Componentizing the Web in Realtime
Polymer and Firebase: Componentizing the Web in Realtime
 
IMMERSE'16 Introduction to AEM Tooling
IMMERSE'16 Introduction to AEM ToolingIMMERSE'16 Introduction to AEM Tooling
IMMERSE'16 Introduction to AEM Tooling
 
Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017
Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017
Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017
 
Sample google app engine applications
Sample google app engine applicationsSample google app engine applications
Sample google app engine applications
 
30 JavaScript optimization tips
30 JavaScript optimization tips30 JavaScript optimization tips
30 JavaScript optimization tips
 
Secrets of a Blazor Component Artisan
Secrets of a Blazor Component ArtisanSecrets of a Blazor Component Artisan
Secrets of a Blazor Component Artisan
 
AEM target Integration
AEM target IntegrationAEM target Integration
AEM target Integration
 
PWA for PHP Developers
PWA for PHP DevelopersPWA for PHP Developers
PWA for PHP Developers
 

Similar to Making the Magento 2 Javascript Loading Great Again - Robin van Raan

Adobe Behance Scales to Millions of Users at Lower TCO with Neo4j
Adobe Behance Scales to Millions of Users at Lower TCO with Neo4jAdobe Behance Scales to Millions of Users at Lower TCO with Neo4j
Adobe Behance Scales to Millions of Users at Lower TCO with Neo4j
Neo4j
 
Cloud Community Engineering - Holiday readiness
Cloud Community Engineering - Holiday readinessCloud Community Engineering - Holiday readiness
Cloud Community Engineering - Holiday readiness
Oleg Posyniak
 
Intro to development sites and site migration
Intro to development sites and site migrationIntro to development sites and site migration
Intro to development sites and site migration
R-Cubed Design Forge
 
Building a Large Java Codebase with Bazel - Natan Silnitsky
Building a Large Java Codebase with Bazel - Natan Silnitsky Building a Large Java Codebase with Bazel - Natan Silnitsky
Building a Large Java Codebase with Bazel - Natan Silnitsky
Wix Engineering
 
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxModernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptx
Ed Charbeneau
 
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxModernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptx
Ed Charbeneau
 
Using GitHub actions on AWS.pptx
Using GitHub actions on AWS.pptxUsing GitHub actions on AWS.pptx
Using GitHub actions on AWS.pptx
Derek Bingham
 
Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...
Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...
Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...
Amazon Web Services
 
Supercharge your Code to get optimal Database Performance
Supercharge your Code to get optimal Database PerformanceSupercharge your Code to get optimal Database Performance
Supercharge your Code to get optimal Database Performance
gvenzl
 
Containerize Legacy .NET Framework Web Apps for Cloud Migration
Containerize Legacy .NET Framework Web Apps for Cloud Migration Containerize Legacy .NET Framework Web Apps for Cloud Migration
Containerize Legacy .NET Framework Web Apps for Cloud Migration
Amazon Web Services
 
What's new in designer
What's new in designerWhat's new in designer
What's new in designer
Raj J (Rajendran)
 
Pro Magento MeetUp #4 - Upgrade Compatibility Tool, Sergii Ivashchenko
Pro Magento MeetUp #4 - Upgrade Compatibility Tool, Sergii IvashchenkoPro Magento MeetUp #4 - Upgrade Compatibility Tool, Sergii Ivashchenko
Pro Magento MeetUp #4 - Upgrade Compatibility Tool, Sergii Ivashchenko
Pro Magento Community
 
DevOps for Mainframe: Open Source Fast Track
DevOps for Mainframe: Open Source Fast TrackDevOps for Mainframe: Open Source Fast Track
DevOps for Mainframe: Open Source Fast Track
DevOps.com
 
How backbone.js is different from ember.js?
How backbone.js is different from ember.js?How backbone.js is different from ember.js?
How backbone.js is different from ember.js?
SoftProdigy - We know software!
 
Magento Cloud Docker - Universal configuration with Oleh Posyniak
Magento Cloud Docker - Universal configuration with Oleh PosyniakMagento Cloud Docker - Universal configuration with Oleh Posyniak
Magento Cloud Docker - Universal configuration with Oleh Posyniak
Oleg Posyniak
 
We4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT lcty 2013 - infra-man - whats new in ibm domino application developmentWe4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT Group
 
JFokus 2020 - How to migrate an application to serverless
JFokus 2020 - How to migrate an application to serverlessJFokus 2020 - How to migrate an application to serverless
JFokus 2020 - How to migrate an application to serverless
Marcia Villalba
 
Jaoo Michael Neale 09
Jaoo Michael Neale 09Jaoo Michael Neale 09
Jaoo Michael Neale 09
Michael Neale
 
Øredev 2014
Øredev 2014Øredev 2014
Øredev 2014
olataube
 
Gutenberg: Revolutionizing your WordPress site
Gutenberg: Revolutionizing your WordPress siteGutenberg: Revolutionizing your WordPress site
Gutenberg: Revolutionizing your WordPress site
R-Cubed Design Forge
 

Similar to Making the Magento 2 Javascript Loading Great Again - Robin van Raan (20)

Adobe Behance Scales to Millions of Users at Lower TCO with Neo4j
Adobe Behance Scales to Millions of Users at Lower TCO with Neo4jAdobe Behance Scales to Millions of Users at Lower TCO with Neo4j
Adobe Behance Scales to Millions of Users at Lower TCO with Neo4j
 
Cloud Community Engineering - Holiday readiness
Cloud Community Engineering - Holiday readinessCloud Community Engineering - Holiday readiness
Cloud Community Engineering - Holiday readiness
 
Intro to development sites and site migration
Intro to development sites and site migrationIntro to development sites and site migration
Intro to development sites and site migration
 
Building a Large Java Codebase with Bazel - Natan Silnitsky
Building a Large Java Codebase with Bazel - Natan Silnitsky Building a Large Java Codebase with Bazel - Natan Silnitsky
Building a Large Java Codebase with Bazel - Natan Silnitsky
 
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxModernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptx
 
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptxModernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptx
 
Using GitHub actions on AWS.pptx
Using GitHub actions on AWS.pptxUsing GitHub actions on AWS.pptx
Using GitHub actions on AWS.pptx
 
Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...
Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...
Containerize Legacy .NET Framework Web Apps for Cloud Migration (WIN305) - AW...
 
Supercharge your Code to get optimal Database Performance
Supercharge your Code to get optimal Database PerformanceSupercharge your Code to get optimal Database Performance
Supercharge your Code to get optimal Database Performance
 
Containerize Legacy .NET Framework Web Apps for Cloud Migration
Containerize Legacy .NET Framework Web Apps for Cloud Migration Containerize Legacy .NET Framework Web Apps for Cloud Migration
Containerize Legacy .NET Framework Web Apps for Cloud Migration
 
What's new in designer
What's new in designerWhat's new in designer
What's new in designer
 
Pro Magento MeetUp #4 - Upgrade Compatibility Tool, Sergii Ivashchenko
Pro Magento MeetUp #4 - Upgrade Compatibility Tool, Sergii IvashchenkoPro Magento MeetUp #4 - Upgrade Compatibility Tool, Sergii Ivashchenko
Pro Magento MeetUp #4 - Upgrade Compatibility Tool, Sergii Ivashchenko
 
DevOps for Mainframe: Open Source Fast Track
DevOps for Mainframe: Open Source Fast TrackDevOps for Mainframe: Open Source Fast Track
DevOps for Mainframe: Open Source Fast Track
 
How backbone.js is different from ember.js?
How backbone.js is different from ember.js?How backbone.js is different from ember.js?
How backbone.js is different from ember.js?
 
Magento Cloud Docker - Universal configuration with Oleh Posyniak
Magento Cloud Docker - Universal configuration with Oleh PosyniakMagento Cloud Docker - Universal configuration with Oleh Posyniak
Magento Cloud Docker - Universal configuration with Oleh Posyniak
 
We4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT lcty 2013 - infra-man - whats new in ibm domino application developmentWe4IT lcty 2013 - infra-man - whats new in ibm domino application development
We4IT lcty 2013 - infra-man - whats new in ibm domino application development
 
JFokus 2020 - How to migrate an application to serverless
JFokus 2020 - How to migrate an application to serverlessJFokus 2020 - How to migrate an application to serverless
JFokus 2020 - How to migrate an application to serverless
 
Jaoo Michael Neale 09
Jaoo Michael Neale 09Jaoo Michael Neale 09
Jaoo Michael Neale 09
 
Øredev 2014
Øredev 2014Øredev 2014
Øredev 2014
 
Gutenberg: Revolutionizing your WordPress site
Gutenberg: Revolutionizing your WordPress siteGutenberg: Revolutionizing your WordPress site
Gutenberg: Revolutionizing your WordPress site
 

More from Magecom UK Limited

Magento Meetup #12. Alex Shkurko.pptx
Magento Meetup #12. Alex Shkurko.pptxMagento Meetup #12. Alex Shkurko.pptx
Magento Meetup #12. Alex Shkurko.pptx
Magecom UK Limited
 
Magento Meetup #12 Anastasiia Bondar
Magento Meetup #12 Anastasiia BondarMagento Meetup #12 Anastasiia Bondar
Magento Meetup #12 Anastasiia Bondar
Magecom UK Limited
 
Magento Meetup #12 Vlad Opukhlyi
Magento Meetup #12 Vlad OpukhlyiMagento Meetup #12 Vlad Opukhlyi
Magento Meetup #12 Vlad Opukhlyi
Magecom UK Limited
 
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Magecom UK Limited
 
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magecom UK Limited
 
Magento enhanced media gallery - Alexander Shkurko
Magento enhanced media gallery - Alexander ShkurkoMagento enhanced media gallery - Alexander Shkurko
Magento enhanced media gallery - Alexander Shkurko
Magecom UK Limited
 
7 ошибок одного Black Friday - Влад Опухлый
7 ошибок одного Black Friday - Влад Опухлый7 ошибок одного Black Friday - Влад Опухлый
7 ошибок одного Black Friday - Влад Опухлый
Magecom UK Limited
 
Magento & Cloud - Korostelov Avexey
Magento & Cloud - Korostelov AvexeyMagento & Cloud - Korostelov Avexey
Magento & Cloud - Korostelov Avexey
Magecom UK Limited
 
Deep Dive in Magento DI
Deep Dive in Magento DIDeep Dive in Magento DI
Deep Dive in Magento DI
Magecom UK Limited
 
From Repositories to Commands - Alexander Shkurko
From Repositories to Commands - Alexander Shkurko From Repositories to Commands - Alexander Shkurko
From Repositories to Commands - Alexander Shkurko
Magecom UK Limited
 
Advanced GIT or How to Change the History
Advanced GIT  or How to Change the HistoryAdvanced GIT  or How to Change the History
Advanced GIT or How to Change the History
Magecom UK Limited
 
MSI In-Store Pickup Функционал & сложности
MSI In-Store Pickup Функционал & сложностиMSI In-Store Pickup Функционал & сложности
MSI In-Store Pickup Функционал & сложности
Magecom UK Limited
 
Adobe Stock Integration community project
Adobe Stock Integration community projectAdobe Stock Integration community project
Adobe Stock Integration community project
Magecom UK Limited
 
Proof of Concept for Magento 2 Projects: Occamo’s Razor
Proof of Concept for Magento 2 Projects: Occamo’s RazorProof of Concept for Magento 2 Projects: Occamo’s Razor
Proof of Concept for Magento 2 Projects: Occamo’s Razor
Magecom UK Limited
 
Что нужно знать девелоперу о SEO на этапе проектирования сайта
Что нужно знать девелоперу о SEO на этапе проектирования сайтаЧто нужно знать девелоперу о SEO на этапе проектирования сайта
Что нужно знать девелоперу о SEO на этапе проектирования сайта
Magecom UK Limited
 
Magento-сертификация: инструкция по применению и как это было
Magento-сертификация: инструкция по применению и как это былоMagento-сертификация: инструкция по применению и как это было
Magento-сертификация: инструкция по применению и как это было
Magecom UK Limited
 
Experience in Magento Community Projects
Experience in Magento Community ProjectsExperience in Magento Community Projects
Experience in Magento Community Projects
Magecom UK Limited
 
UI components: synergy of backend and frontend
UI components: synergy of backend and frontendUI components: synergy of backend and frontend
UI components: synergy of backend and frontend
Magecom UK Limited
 
MSI - Reservation Challenges with 3rd-party Systems
MSI - Reservation Challenges with 3rd-party SystemsMSI - Reservation Challenges with 3rd-party Systems
MSI - Reservation Challenges with 3rd-party Systems
Magecom UK Limited
 
Business wants what?!
Business wants what?!Business wants what?!
Business wants what?!
Magecom UK Limited
 

More from Magecom UK Limited (20)

Magento Meetup #12. Alex Shkurko.pptx
Magento Meetup #12. Alex Shkurko.pptxMagento Meetup #12. Alex Shkurko.pptx
Magento Meetup #12. Alex Shkurko.pptx
 
Magento Meetup #12 Anastasiia Bondar
Magento Meetup #12 Anastasiia BondarMagento Meetup #12 Anastasiia Bondar
Magento Meetup #12 Anastasiia Bondar
 
Magento Meetup #12 Vlad Opukhlyi
Magento Meetup #12 Vlad OpukhlyiMagento Meetup #12 Vlad Opukhlyi
Magento Meetup #12 Vlad Opukhlyi
 
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
 
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
 
Magento enhanced media gallery - Alexander Shkurko
Magento enhanced media gallery - Alexander ShkurkoMagento enhanced media gallery - Alexander Shkurko
Magento enhanced media gallery - Alexander Shkurko
 
7 ошибок одного Black Friday - Влад Опухлый
7 ошибок одного Black Friday - Влад Опухлый7 ошибок одного Black Friday - Влад Опухлый
7 ошибок одного Black Friday - Влад Опухлый
 
Magento & Cloud - Korostelov Avexey
Magento & Cloud - Korostelov AvexeyMagento & Cloud - Korostelov Avexey
Magento & Cloud - Korostelov Avexey
 
Deep Dive in Magento DI
Deep Dive in Magento DIDeep Dive in Magento DI
Deep Dive in Magento DI
 
From Repositories to Commands - Alexander Shkurko
From Repositories to Commands - Alexander Shkurko From Repositories to Commands - Alexander Shkurko
From Repositories to Commands - Alexander Shkurko
 
Advanced GIT or How to Change the History
Advanced GIT  or How to Change the HistoryAdvanced GIT  or How to Change the History
Advanced GIT or How to Change the History
 
MSI In-Store Pickup Функционал & сложности
MSI In-Store Pickup Функционал & сложностиMSI In-Store Pickup Функционал & сложности
MSI In-Store Pickup Функционал & сложности
 
Adobe Stock Integration community project
Adobe Stock Integration community projectAdobe Stock Integration community project
Adobe Stock Integration community project
 
Proof of Concept for Magento 2 Projects: Occamo’s Razor
Proof of Concept for Magento 2 Projects: Occamo’s RazorProof of Concept for Magento 2 Projects: Occamo’s Razor
Proof of Concept for Magento 2 Projects: Occamo’s Razor
 
Что нужно знать девелоперу о SEO на этапе проектирования сайта
Что нужно знать девелоперу о SEO на этапе проектирования сайтаЧто нужно знать девелоперу о SEO на этапе проектирования сайта
Что нужно знать девелоперу о SEO на этапе проектирования сайта
 
Magento-сертификация: инструкция по применению и как это было
Magento-сертификация: инструкция по применению и как это былоMagento-сертификация: инструкция по применению и как это было
Magento-сертификация: инструкция по применению и как это было
 
Experience in Magento Community Projects
Experience in Magento Community ProjectsExperience in Magento Community Projects
Experience in Magento Community Projects
 
UI components: synergy of backend and frontend
UI components: synergy of backend and frontendUI components: synergy of backend and frontend
UI components: synergy of backend and frontend
 
MSI - Reservation Challenges with 3rd-party Systems
MSI - Reservation Challenges with 3rd-party SystemsMSI - Reservation Challenges with 3rd-party Systems
MSI - Reservation Challenges with 3rd-party Systems
 
Business wants what?!
Business wants what?!Business wants what?!
Business wants what?!
 

Recently uploaded

optimized green synthesis characterization and evaluation
optimized green synthesis characterization and evaluationoptimized green synthesis characterization and evaluation
optimized green synthesis characterization and evaluation
ManojKumarr75
 
Rent remote desktop server mangohost .net
Rent remote desktop server mangohost .netRent remote desktop server mangohost .net
Rent remote desktop server mangohost .net
pdfsubmission50
 
DASH, presented by Elly Tawhai at PacNOG 33
DASH, presented by Elly Tawhai at PacNOG 33DASH, presented by Elly Tawhai at PacNOG 33
DASH, presented by Elly Tawhai at PacNOG 33
APNIC
 
Effective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptxEffective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptx
AirtoryInc
 
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdfHow-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
Dolphin Data Lab
 
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
ffg01100
 
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
paridubey2024#G05
 
Why Your Business Needs a Professional Web Design Company UAE
Why Your Business Needs a Professional Web Design Company UAEWhy Your Business Needs a Professional Web Design Company UAE
Why Your Business Needs a Professional Web Design Company UAE
adelewhite125
 
Portugal Dreamin 24 - How to easily use an API with Flows
Portugal Dreamin 24  - How to easily use an API with FlowsPortugal Dreamin 24  - How to easily use an API with Flows
Portugal Dreamin 24 - How to easily use an API with Flows
Thierry TROUIN ☁
 
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
dilbaagsingh0898
 
Build a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat LimsaipromBuild a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat Limsaiprom
TanapatLimsaiprom1
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur
 
IPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security ConsiderationsIPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security Considerations
Bangladesh Network Operators Group
 
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptxDraya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
ashishkumarrana9
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
Sweet Potato Tec
 
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
mahigarg2024#G05
 
Lordsexch ID: An Ultimate Online Cricket ID Provider In India
Lordsexch ID: An Ultimate Online Cricket ID Provider In IndiaLordsexch ID: An Ultimate Online Cricket ID Provider In India
Lordsexch ID: An Ultimate Online Cricket ID Provider In India
exchangeid32
 
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptxIot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
DeepakKumar862274
 
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
elbertablack
 
UMN degree offer diploma Transcript
UMN degree offer diploma TranscriptUMN degree offer diploma Transcript
UMN degree offer diploma Transcript
cenocb
 

Recently uploaded (20)

optimized green synthesis characterization and evaluation
optimized green synthesis characterization and evaluationoptimized green synthesis characterization and evaluation
optimized green synthesis characterization and evaluation
 
Rent remote desktop server mangohost .net
Rent remote desktop server mangohost .netRent remote desktop server mangohost .net
Rent remote desktop server mangohost .net
 
DASH, presented by Elly Tawhai at PacNOG 33
DASH, presented by Elly Tawhai at PacNOG 33DASH, presented by Elly Tawhai at PacNOG 33
DASH, presented by Elly Tawhai at PacNOG 33
 
Effective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptxEffective Tips for Creating the Best Rich Media Ads .pptx
Effective Tips for Creating the Best Rich Media Ads .pptx
 
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdfHow-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
How-to-Diagnose-Hard-Drives-by-DFL-DDP-2024.pdf
 
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
 
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
 
Why Your Business Needs a Professional Web Design Company UAE
Why Your Business Needs a Professional Web Design Company UAEWhy Your Business Needs a Professional Web Design Company UAE
Why Your Business Needs a Professional Web Design Company UAE
 
Portugal Dreamin 24 - How to easily use an API with Flows
Portugal Dreamin 24  - How to easily use an API with FlowsPortugal Dreamin 24  - How to easily use an API with Flows
Portugal Dreamin 24 - How to easily use an API with Flows
 
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Build a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat LimsaipromBuild a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat Limsaiprom
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
 
IPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security ConsiderationsIPv6 Deployment Planning and Security Considerations
IPv6 Deployment Planning and Security Considerations
 
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptxDraya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
 
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
 
Lordsexch ID: An Ultimate Online Cricket ID Provider In India
Lordsexch ID: An Ultimate Online Cricket ID Provider In IndiaLordsexch ID: An Ultimate Online Cricket ID Provider In India
Lordsexch ID: An Ultimate Online Cricket ID Provider In India
 
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptxIot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
 
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
 
UMN degree offer diploma Transcript
UMN degree offer diploma TranscriptUMN degree offer diploma Transcript
UMN degree offer diploma Transcript
 

Making the Magento 2 Javascript Loading Great Again - Robin van Raan

  • 1. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Making the Magento2 JavaScript loading great again Javascript, RequireJS, Bundling, Merging, Minifying, r.js Optimizer, Baler
  • 2. © 2019 Adobe. All Rights Reserved. Adobe Confidential. 2 Robin van Raan Magento technical Architect vanraan@adobe.com
  • 3. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Magento 1 issues § Loading JavaScript libraries?! § Double loading by extensions § Multiple versions of libraries § Problematic sorting orders 3
  • 4. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Magento 2 4
  • 5. © 2019 Adobe. All Rights Reserved. Adobe Confidential. The issue 5
  • 6. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Waterfall 6
  • 7. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Waterfall 7 Module Dependencies AAA BBB, CCC BBB DDD CCC EEE DDD EEE
  • 8. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Waterfall 8 AAA.js BBB.js CCC.js DDD.js EEE.js
  • 9. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Waterfall 9
  • 10. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Magento Bundling to the rescue! 10
  • 11. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Dead code 11 Bundled Total JS No 495 KB (1.5 MB uncompressed) Yes 2.1 MB (7.6 MB uncompressed)
  • 12. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Bundles vs Non Bundled on 3G mobile 12
  • 13. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Magento Advanced Bundling to the resque! 13
  • 14. © 2019 Adobe. All Rights Reserved. Adobe Confidential. M2 DevTools 14
  • 15. © 2019 Adobe. All Rights Reserved. Adobe Confidential. M2 DevTools 15 § https://github.com/magento/m2-devtools
  • 16. © 2019 Adobe. All Rights Reserved. Adobe Confidential. M2 DevTools 16
  • 17. © 2019 Adobe. All Rights Reserved. Adobe Confidential. M2 DevTools 17
  • 18. © 2019 Adobe. All Rights Reserved. Adobe Confidential. M2 DevTools 18
  • 19. © 2019 Adobe. All Rights Reserved. Adobe Confidential. M2 DevTools – live demo 19 Live demo of M2 Devtools
  • 20. © 2019 Adobe. All Rights Reserved. Adobe Confidential. M2 DevTools - issues 20 § Cannot read property 'sectionLoadUrl' of undefined § Totals § Minicart § < 2.3.3 § https://github.com/magento/m2-devtools/issues/56 § ES6 § Syntax errors § Minification breaks
  • 21. © 2019 Adobe. All Rights Reserved. Adobe Confidential. M2 DevTools 21 § Pro’s § 3x JS loading speed increase § ”simple” § Con’s § From start of project or possible work § Changes to JS might require new optimizer file
  • 22. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Baler 22
  • 23. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Baler - Alpha 23 § https://github.com/magento/baler § https://github.com/adifucan/m2-baler
  • 24. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Baler - run 24
  • 25. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Baler - compare 25 Setup Non-Blocking Gzip Raw Requests Unbundled X 495 KB 1.5 MB 176 Bundled 2.1 MB 7.6 MB 10 Baler X 400 KB 1.2 MB 77
  • 26. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Baler – M2.3.3 or fix the core! 26 § Core fixes: https://github.com/magento/magento2/commit/db43c11c6830465b764ede32abb7262258e5f574
  • 27. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Baler – mixins support 27 § Mixins are not applied for bundles (yet!) § https://github.com/magento/baler/issues/23
  • 28. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Baler – Alpha testers 28 § Install baler § Install the M2 extension § Run baler § Let us know your results and issues
  • 29. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Summary 29 § Magento 2 RequireJS needs optimizing § RequireJS optimizations can have a huge performance impact § Optimize now? Advanced bundling with M2-devtools § Optimize in the future -> Baler § We need alpha testers on custom stores with Baler
  • 30. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Thank you 30 Questions?
  • 31. © 2019 Adobe. All Rights Reserved. Adobe Confidential. Thank you 31 Thank you