Magento 2 Google Page Speed Insights Performance Optimisation using Mage Pack

Mage Pack Magento 2 Advanced bundling

sudo yum install nodejs -y
npm install -g magepack
ERROR: Failed to download Chromium r722234! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip downloadand after Error: Cannot find module ‘puppeteer’
sudo npm install -g magepack --unsafe-perm=true --allow-root
error while loading shared libraries: cannot open shared object file: No such file or directory
sudo yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y

How to use it?

Usage: magepack [generate|bundle] <options...>Options:
-v, --version Output the current version.
-h, --help Show this command summary.
generate [options] Generate optimization configuration based on given page URLs.
bundle [options] Bundle JavaScript files using given configuration file.

First Generating bundler configuration

magepack generate --cms-url="{{CMS_PAGE_URL}}" --category-url="{{CATEGORY_PAGE_URL}}" --product-url="{{PRODUCT_PAGE_URL}}"
Mage Pack Bundler result


magepack bundle
Magento 2 Mage Pack Bundling command result

Enabling Bundling

php -d memory_limit=6028M /usr/local/bin/composer require creativestyle/magesuite-magepackbin/magento setup:upgrade --keep-generated
bin/magento setup:di:compile # the stupidiest command ever
bin/magento config:set dev/js/enable_magepack_js_bundling 1
bin/magento cache:clean
sudo service php-fpm restart # clen opcache
before optimization
after optimization

Core Web Vitals

What is LCP?

What is TBT?

"cpuTimes": {
"EvaluateScript": 6,
"FunctionCall": 1790,
"v8.compile": 2
"cpuTimes": {
"EvaluateScript": 31,
"FunctionCall": 23,
"v8.compile": 9
"cpuTimes": {
"EvaluateScript": 1,
"FunctionCall": 117,
"v8.compile": 0
"cpuTimes": {
"EvaluateScript": 17,
"FunctionCall": 24,
"v8.compile": 5
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
<script src="scripts/15964141.amd-app.js"></script>




True Stories about Magento 2. Melting metal server infrastructure into cloud solutions. Donate:

Love podcasts or audiobooks? Learn on the go with our new app.

Top 3 back-end technologies for web applications

Visualization of Node.js Event Emitter

TypeScript: Anonymous Types, Type Aliases, and Interface Declarations

Different colored paints

JavaScript OO: Custom Constructors with Static Methods

How I Am Documenting My Country One API at a Time


ReactJS Code Splitting in 3 minutes

The responsive layout for our Rust web application

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yegor Shytikov

Yegor Shytikov

True Stories about Magento 2. Melting metal server infrastructure into cloud solutions. Donate:

More from Medium

Magento 1 (Open Mage) Community Fork vs. Adobe Commerce Cloud Black Friday Denial of Service

How I designed and built Lumeno’s recruitment search engine

Splitting Symfony project into chunks

Real-Time Twitter Bot that responds with James Webb’s telescope telemetry

Curved rocket trail on dusk sky, starting on earth and ending in cloudless sky