Improve Magento store speed: Disable unused Pearl Theme extensions and Design Elements, implement Advanced JS Bundling

Disable unused extensions and Design Elements that come with Pearl Theme to improve speed and strip down the theme code to only load the functionality you need for your project.

Associated Pearl Theme extensions highly increase the theme functionality and are located under the folder structure below.

You can choose the extensions you need, and deactivate the ones you don't need - this way you code will be light, fast and more conflict free.

• app/code/WeltPixel/NavigationLinks (MegaMenu)
• app/code/WeltPixel/Quickview
• app/code/WeltPixel/GoogleCards
• app/code/WeltPixel/TitleRewrite
• app/code/WeltPixel/SmartProductTabs
• app/code/WeltPixel/MobileDetect
• app/code/WeltPixel/InstagramWidget
• app/code/WeltPixel/FullPageScroll
• app/code/WeltPixel/GoogleTagManager
• app/code/WeltPixel/Sitemap
• app/code/WeltPixel/QuickCart
• app/code/WeltPixel/ReviewsWidget
• app/code/WeltPixel/Multistore
• app/code/WeltPixel/ThankYouPage
• app/code/WeltPixel/AjaxInfiniteScroll
• app/code/WeltPixel/SearchAutoComplete
• app/code/WeltPixel/LayeredNavigation
• app/code/WeltPixel/Newsletter
• app/code/WeltPixel/AdvanceCategorySorting
• app/code/WeltPixel/ProductLabels
• app/code/WeltPixel/SocialLogin
• app/code/WeltPixel/AdvancedWishlist
• app/code/WeltPixel/SpeedOptimization
• app/code/WeltPixel/EnhancedEmail (Pearl Theme Professional Pack only)
• app/code/WeltPixel/CmsBlockScheduler (Pearl Theme Professional Pack only)
• app/code/WeltPixel/RecentlyViewedBar (Pearl Theme Professional Pack only)
• app/code/WeltPixel/UserProfile (Pearl Theme Professional Pack only)

MODULARITY ADVANTAGES.

• Fast and light code - unnecessary sections or extensions from the Pearl Theme theme can be disabled.
• Easy debugging - each section of the theme can be disabled in order to identify a potential issue.
• Easily replace sections of the theme with other 3rd party functionalites, easy integration without any coding needed. (Example: you can disable WeltPixel MegaMenu and use a 3rd party MegaMenu extension that you prefer)

Disable any WeltPixel extension by using the following commands in the root of your Magento installation:

php bin/magento module:disable WeltPixel_[extension_name] --clear-static-content 
php bin/magento setup:upgrade

Example:

php bin/magento module:disable WeltPixel_Quickview --clear-static-content 
php bin/magento setup:upgrade

FOR EVEN MORE SPEED: MODULAR DESIGN ELEMENTS.

• Disable any Design Elements that you don't use from Magento Admin options and the corresponding code or library will not be loaded.
• Not only are the theme and extensions, highly modular but all the design elements included in the theme are as well.
• Yes / No admin options for disabling elements not used.
• Enable/ Disable: Bootstrap Grid, Icons, Tables, Toggle, Accordion, Tabs, Pricing Boxes, Headings and Blockquotes, Dividers, Brand lists, Responsive and Helpers, Smooth Scrolling, Icon Boxes, Alert Boxes, Testomonials, Flex Slider, Buttons, Sections/Parallax, Back to top Button, etc..

Disable design elements that are not used by using Theme settings from Admin.

Go to Admin > Store > Configuration > WeltPixel > Design Elements 

Note: If you notice broken store functionality after disabling any of the above Design Elements, it means that you disabled a functionality that you still use in your store. Make sure to identify it and enable it again.  

Example 1: If you disable Animations from design elements, the animations library and corresponding CSS will not be loaded anymore. If you try to use this functionality it will most likely not work until you enable it from Design Elements. 

Example 2: If you disable Icons from design elements, the icons will not be loaded with the theme anymore. If you try to use icons they will not show up until this option is enabled again. 

Use Speed Optimization extension to implement Magento Advanced JS Bundling and preload CSS files. https://www.weltpixel.com/magento-2-speed-optimization-advanced-js-bundling.html 

Study case:

On a recent project, using Pearl Theme with Speed Optimization module and by implementing the Advanced JS Bundling, the Google Page Speed score increased up to 55 points for mobile and 91 points for desktop on the product pages. Which is a great improvement from the default Magento score of 25 for mobile and 75 for desktop. This was achieved by simply disabling several modules and design elements which were not used on this project and setting up the Speed Optimization module and implement Advanced Bundling. See below the process. 

Final Mobile score

Final Desktop score

WebPageTest result

GTmetrix result

How was this achieved?

Basically we started disabling several modules which were not used on the project. The following modules were disabled:

php bin/magento module:disable Amazon_Core
php bin/magento module:disable Amazon_Login
php bin/magento module:disable Amazon_Payment
php bin/magento module:disable WeltPixel_Quickview
php bin/magento module:disable WeltPixel_RecentlyViewedBar

After analyzing product page, we found that Related Products was set to be a carousel, but the store had only 4 products set as related products for each products. So, as there was no point to show a carousel, we have disabled just the OWL Carousel for the Related Products which means the Lazy Load module included in Pearl Theme started to do its jobs correctly and this way the page benefited from lazy loading of the images from this section.This simple change alone improved the page loading and speed scores.

At this point we turned our focus on the Design Elements module to identify a series of unused elements which are in fact external libraries of JS and/or CSS files. The elements disabled are: Tables, Pricing Boxes, Headings And Blockquotes, Dividers, Brand lists, Alert boxes, Testimonials, Flex Slider, Buttons, Sections/Parallax, Animations, AOS Animation.

This way you reduce the number of JS/CSS files which are downloaded by the browser, thus reducing the number of requests. So, with every element which you disable, the store speed increases step by step.

Finally, using the new Speed Optimization module, included in Pearl Theme, we have enabled all recommended options for speed and we have easily implemented the Advanced JS Bundling process. 

In conclusion, for any project you should do an audit to identify which Magento or Pearl Theme you do not use, and you can disable them, as there is not need to keep enabled any module you do not use. Then, even from admin settings of the enabled modules, you might find multiple ways to improve your store's speed and score, thanks to the Pearl Theme's modularity and multiple admin options. Lastly, make sure you set all recommended options in Speed Optimization module, as WeltPixel team suggested, and definitely you can boost your overall store speed and also Google Page Speed scores on mobile and desktop.

See also: How to speed up your Magento 2 store and increase performance?

See also: How to speed up your Magento 2 store with the Pearl Theme