This extension is also included in the Pearl Theme.
The Magento 2 Speed Optimization extension significantly increases your Google Page Speed score, just by installing and configuring the module. This is achieved by implementing a series of improvements such as reducing the number of server requests in an efficient way through the following optimizations:
Magento 2 Advanced Bundling
When using default magento bundling, your site will end up with fewer requests but this process is quite inefficient because it takes all your JS files and bundle the into one big JS file that is loaded on all your pages, leading to increased page size and significantly higher loading time. What you gain by having fewer server requests, you lose by loading unnecessary JS on all your store pages.
Advanced Bundling helps you bundle the JS files in an intelligent way, by creating different types of JS bundles specific to each Magneto page. This way you benefit from the fewer requests while loading only the necessary JS specific for each page type. JS files are bundled in an efficient way, minimizing the page size and providing the speed improvements that your store needs. The Advanced Bundling process is recommended by Magento as a manually applied solution to increase speed, and this module was created to help merchants bypass the high degree of implementation complexity.
Moving JS files to page bottom
By loading your CSS files before your JS files you will be able to show the content of your page faster, and assure optimum surfing experience for the end user. First Paint Score of your page will increase significantly, and the end users will feel that your website is fast and responsive, without endless spinning wheel waiting time while browsing trough your site. Not only will site visitors have a great surfing experience but also search engines will rank your store with a higher speed score, and boost your SEO index.
Preloading CSS files
This feature will also give you an additional speed boost. Stylesheets included in the head section will be downloaded asynchronously, preventing them from blocking the page render and decreasing load times.
Here’s why page speed is a major part of a great user experience - especially for the growing population of mobile users.
The Magento 2 Speed Optimization Extension is designed to make your web store user friendly, delivering faster page load times and increasing customer satisfaction. You’ll see a boost on Google Page Speed Insights which in turn will lead to an increase in your overall conversion rate as customers can easily navigate your site.
It’s no secret that the world of SEO is constantly changing. Since 2018 there has been a heavy focus placed on the actual user experience of a website - especially for mobile. Google’s mobile first indexing has been the gold standard, and plays a large role in your rankings. While many sites have switched to a mobile first design, your page speed optimization plays an equally important part.
The Magento 2 Speed Optimization Extension prepares your site for Google mobile first indexing and helps get you back on the front page!
Note: After copying the files to the server, check if there are patches available for your Magento version in the Patches folder. If you're running a version for which patches are available, copy the content from the folder into the root of your Magento project and make sure you select the Overwrite option when prompted.
Optional
Copy the extension files into the below path of your Magento 2 instance. If the ‘app/code/WeSupply’ folder
is missing, please create it manually:
app/code/WeSupply/Toolbox
Troubleshooting
If you experienced any issues or limitations with this quick GUI installation, see also SSH Installation below. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.
Note: After copying the files to the server, check if there are patches available for your Magento version in the Patches folder. If you're running a version for which patches are available, copy the content from the folder into the root of your Magento project and make sure you select the Overwrite option when prompted.
Optional
Copy the extension files into the below path of your Magento 2 instance. If the ‘app/code/WeSupply’ folder
is missing, please create it manually:
app/code/WeSupply/Toolbox
Magento Core Options are included in the module for visibility. Once the store is placed in Production mode, these Magento Core options are hidden, but will always be visible in this section.
Note: If enabled, depending on server speed, there may be a flash of unstyled content, until all styles are downloaded and applied.
Bundling JavaScript files for better performance is about reducing two things:
In a modular application, the number of server requests can reach into the hundreds. The goal of JavaScript bundling is to reduce the number and size of requested assets for each page loaded in the browser. To do that, we want to build our bundles so that each page in our store will only need to download a common bundle and a page-specific bundle for each page accessed.
These tools need to be installed on your server in order for this process to work. In case you don't know if they're installed, or you're having trouble installing them, get in touch with your hosting partner.
Note: This applies to Debian and Ubuntu based distributions. If you need to install nodejs on other distributions, check the nodejs Package Manager installation page, or with your hosting partner.
If you have a user with sudo access, you can install nodejs using the following command:
sudo apt-get install -y nodejs
You can then check to make sure node.js is installed with the following command:
npm --v
If you already have nodejs installed on the server, you can install require.js using the following command, issued from the root of your Magento installation:
npm install requirejs
You can confirm require.js is installed by running:
r.js
If the response is as follows, require.js is installed:
See https://github.com/requirejs/r.js for usage.
If you're unable to install via this method, check the official require.js page and verify with your hosting partner.
If you're on Magento Cloud, there is a read-only limitation on the environment so these commands will not normally work. To install require.js, you can add the following command to the Build phase of your deployment process in the .magento.app.yaml file:
npm install requirejs
If this method doesn't work for you, please get in touch with the Magento Cloud Support Team as additional steps may be required to install require.js.
Optional - JS files are optimized by default via Uglify. In this RequireJS Bundle Generation section, you have the option to change the method via which the JS files are optimized, so you can use a custom optimizer such as Terser. For more details about how to use Terser, you can check the Terser JS Optimization section.
Once Advanced Bundling is set to Yes, a box containing a series of instructions will be displayed.
bin/magento deploy:mode:set production
bin/magento setup:static-content:deploy [your_locale]
/chroot/home/a84jfps/node_modules/requirejs/bin/r.js -o pub/static/advancedbundling_build_Pearl_weltpixel_custom.js baseUrl=pub/static/frontend/Pearl/weltpixel_custom/en_US_tmp dir=pub/static/frontend/Pearl/weltpixel_custom/en_US
Error: Error: ENOENT: no such file or directory, open '//www.searchanise.com/widgets/v1.0/init.js'at Object.openSync (fs.js:443:3). This is because there are likely external JS files which are collected from different sources and not inherently present on the Magento instance. In this case, you need to remove all references to the file in question from the advancedbundling_build.js file found in app/design/frontend/vendor/theme_name/WeltPixel_SpeedOptimization/lib and then reupload the file to the server. Afterward, simply run the
php bin/magento weltpixel:requirejs:generatecommand and the generated bundling command again. Repeat this process as many times as necessary until the bundling process completes without errors.
If you're using deployment scripts on your Magento Instance, you can include the following command in your script, to eliminate the need of preparing the static content for the Advanced Bundling process via the Admin Section. Note: Make sure the Enable Advanced Bundling setting in Admin -> WeltPixel -> Speed Optimization Settings -> JS Optimization is set to Yes. and the config is saved.
php bin/magento weltpixel:requirejs:generate
If you need to use a custom bundling file, simply create a new file called 'advancedbundling_build.js' and save it in the following path: app/design/frontend/vendor/theme_name/WeltPixel_SpeedOptimization/lib/advancedbundling_build.js. In the file, you can add your own JS which will be bundled, or remove existing JS if, for any reason, it cannot be bundled or it is not available on your Magento environment. This way, when the JS bundling is done, your file will be used instead of the one generated by the Speed Optimization module. Once you've done this, a command will be generated in the Magento Admin (or via the CLI) which you will need to run in order to successfully complete the Advanced JS Bundling process.
Magento Cloud instances are mostly read-only and do not permit generating files on the fly using the method our Speed Optimization extension implements. As such, there are two methods that can be used to implement the Advanced Bundling process on a Magento Cloud environment. The first step for implementing the Advanced Bundling process on the Cloud instance is ensuring the Static Content Deploy takes place in the Deploy phase, and not the Build phase - Deploying the Static Content in the Deploy phase keeps the pub/static folder writable, which means that the extension can complete the bundling process.
After following all the steps above, the next thing to do is to check to confirm the Advanced JS Bundling was correcly applied. This can be done in two ways that we'll go over below.
Method 1 - Ensuring the bundles folder exists in pub/static
This can be done quite easily by navigating into pub/static/frontend/theme_vendor/theme_name/locale and ensuring there's a bundles folder present. Inside the bundles folder, you should find .js and .map files for each page type you completed the JS Collection process on, as well as a shared.js and shared.map file.
Method 2 - Checking the Network tab in the browser console
The second method of verifying that the Advanced JS Bundling was completed successfully is simpler as it does not require you to use FTP software to check the pub/static directory on the server.
All you need to do to verify using this method is to open up your website in a web browser and open the console by right-clicking the page and selecting Inspect.
In the console, select the Network tab and make sure only the JS box is ticked. Reload the page without closing the console and you'll see a list of all the JS files loaded into the page. Usually, a couple hundred JS files would be listed here, however, with the Advanced JS Bundling process completed successfully, this number should be drastically reduced to around 8-20 files, depending on how many external JS sources there are.
You should see a shared.js file on every page, along with a page-type specific JS file. On the Home Page, for instance, you'll see the cms-index-index.js file, while on the Category Page, you would see a file called catalog-category-view.js.
Terser will need to be installed on your server in order for this process to work. In case you don't know if Terser is installed, or you're having trouble installing it, get in touch with your hosting partner.
If you already have nodejs installed on the server, you can install Terser using the following command, issued from the root of your Magento installation:
npm install terser
You can confirm Terser is installed by running:
terser -V
If you're unable to install via this method, check the Terser npm package page and verify with your hosting partner.
If you're on Magento Cloud, there is a read-only limitation on the environment so these commands will not normally work. To install Terser, you can add the following command to the Build phase of your deployment process in the .magento.app.yaml file:
npm install terser
If this method doesn't work for you, please get in touch with the Magento Cloud Support Team as additional steps may be required to install require.js.
Once Terser is successfully installed on your environment, you can use it instead of the standard Uglify JS Optimization method to optimize the collected JS for the Bundling Process. To do so, head into the RequireJS Bundle Generation of the Magento Admin and set the Optimization Method option to None. Afterward, run through the Advanced JS Bundling process as described in the documentation and, during the final step, a specific Terser command will be generated for you to run via the Command Line, which will optimize the JS files via Terser. The command will look something like this:
find pub/static/frontend/Pearl/weltpixel_custom/en_US \( -name '*.js' -not -name '*.min.js' \) -exec node_modules/terser/bin/terser \{\} -c -m reserved=\['$','jQuery','define','require','exports'\] -o \{\} \; -exec echo \{\} \;
Note: Depending on where Terser is installed on your server, you may need to edit the command to run from the correct location.
There are some additional steps that you can take in order to squeeze even more speed out of your Magento 2 store. On Apache Servers, you can edit the .htaccess file found in the root of your project by adding the following for an even greater speed boost, courtesy of the Nexcess Docs.
This section discusses how to compress both static content such as text, CSS, JavaScript, and individual HTML files, and dynamic content such as content generated by CMSs like Magento, WordPress, and ExpressionEngine, among others.
Static content: This will activate the Apache mod_deflate module and compress static resources into smaller files before transfer to the browser. To enable, uncomment the appropriate lines as shown below:
############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip
# Insert filter on all content
SetOutputFilter DEFLATE
# Insert filter on selected content types only
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
Attention: The following will not function on LiteSpeed servers. Browsers use Expires headers to define the lifespan of cached page components. While all page components should include Expires headers, static components and images should use far-future Expires headers. To activate this feature, uncomment the appropriate line and, directly above it, add ExpiresActive On. For example:
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
ExpiresActive On
ExpiresDefault "access plus 1 year"
ETags allow browsers to validate cached page components from visit to visit. While useful, they can hamper websites hosted on server clusters in some cases. Disabling them as follows will often improve performance:
############################################
## If running in cluster environment, uncomment this
## http://developer.yahoo.com/performance/rules.html#etags
FileETag none
What’s new in v.1.14.9 - November 26, 2024
What’s new in v.1.14.7 - October 11, 2024
What’s new in v.1.14.5 - August 23, 2024
What’s new in v.1.14.3 - June 20, 2024
What’s new in v.1.14.1 - April 19, 2024
What’s new in v.1.11.21 - January 9, 2024
What’s new in v.1.11.19 - October 19, 2023
What’s new in v.1.11.17 - June 28, 2023
What’s new in v.1.11.15 - March 22, 2023
What’s new in v.1.11.11 - November 23, 2022
What’s new in v.1.11.7 - September 1, 2022
What’s new in v.1.11.1 - April 25, 2022
What’s new in v.1.10.17 - October 22, 2021
What’s new in v.1.10.15 - August 31, 2021
What’s new in v.1.10.11 - July 7, 2021
What’s new in v.1.10.9 - May 18, 2021
What’s new in v.1.10.7 - March 26, 2021
What’s new in v.1.10.5 - February 12, 2021
What’s new in v.1.10.1 - October 22, 2020
What’s new in v.1.10.0 - August 10, 2020
What’s new in v.1.9.8 - July 6, 2020
What’s new in v.1.9.7 - May 7, 2020
What’s new in v.1.9.6 - April 9, 2020
What’s new in v.1.9.5 - March 10, 2020
What’s new in v.1.9.4 - February 5, 2020
What’s new in v.1.9.2 - Novemver 27, 2019
What’s new in v.1.9.1 - October 16, 2019
What’s new in v.1.9.0 - July 18, 2019