The last year has seen a tremendous increase in new online stores all over the web, which, in turn, has propelled the eCommerce industry to new heights. The demand for online shopping has increased exponentially, and because we live in a fast-paced world, stores that plan to make it in the online environment need to be able to keep up.
Google has recently made changes to their website scoring algorithms and will also incorporate overall website speed as a criterion for ranking in their Search Engine. This means that having a low-scoring website can not only affect your actual user experience but also your Google ranking, a combination of factors that can cause your sales to plummet.
Magento 2, while a diverse and extremely customizable CMS, is quite a heavy framework out of the box, which may lead some to believe it’s slow and scores low in various testing platforms. At first glance, this may be true, however, it’s possible to tweak and adjust it in order to reach very respectable scores, as well as a streamlined and fast user experience. The purpose of this guide is to show you how to do just that, using our Pearl Theme for Magento 2 solution.
For starters, it’s important to note that any extension, custom theme, customization, or JS added on top of the default Magento environment will inevitably slow it down and lead to a lower score. This is not something that can be avoided completely, but it is something that can be optimized through various methods which we’ll explain in this guide.
Over the last few versions of the theme, we’ve introduced optimizations and improvements which help to bring this overall score up, and are still actively working on adding more over the next few versions. During our many tests, we’ve managed to narrow down a few important settings and options that can be used to ensure a balanced mix of design and speed. Without further ado, let’s get started.
1. KEEP THE PEARL THEME UPDATED TO THE LATEST VERSION
One of the most important steps that you can take to ensure your store scores as high as possible is to ensure you have your Pearl Theme updated to the latest version at all times. Each new release brings about improvements and optimizations, some of which are (especially in the last few versions) geared towards improving Core Web Vital scores. The step-by-step process of upgrading your theme can be found here: How to update/upgrade the Pearl Theme to the latest version
To check which version you’re currently running, just head into Admin -> WeltPixel -> WeltPixel Debugger -> Extensions Version.
2. KEEP YOUR MAGENTO VERSION UPDATED
Magento releases a new version once every 3 months or so. Each new update they release comes with a slew of fixes, improvements, and also performance enhancements. For instance, in the latest 2.4.2 release (at the time of the writing of this article), Magento included code enhancements that boost API performance and Admin response time for deployments with large catalogs as well as multiple scalability enhancements enable Magento 2.4.2 to natively support complex catalogs up to 20x larger than in previous releases. They also include compatibility updates with new versions of tools, such as Elastic Search. Details about their release notes can be found here: Magento 2 Release Notes.
For more details about the process of upgrading your Magento instance, check out this official Magento Documentation: Upgrading your Magento Version
3. PEARL THEME DESIGN ELEMENTS - WHAT CAN YOU DISABLE?
The Pearl Theme comes with various Design Elements included in its core, which can be used to implement various functionalities related to the store’s design. An example would be Animations, which is a Design Element that handles various element animations via JS libraries. The Design Elements settings are found in Admin -> WeltPixel -> Design Elements.
Out of the box, all the Design Elements are enabled by default, however, most of them are not actively used in any of the Sample Pages or Blocks. Moreover, our analysis of certain websites built with the Pearl Theme has shown that a lot of them are not used at all, even in custom designs. As such, to ensure that unused JS is not loaded onto the store, a lot of these can safely be disabled. Here’s a list of what you can disable if you’re not specifically using the Design Element:
- Extended Icons - These are optional, additional icons that are not part of the core theme icons. They are not used out of the box unless they’ve been added via customizations. For example, a list of Custom Icons can be found here: Pearl Theme Styled icons
- Tables - This is the Bootstrap Tables Component. It’s not actively used out of the box on any theme pages and should only be enabled if you need to use Bootstrap Tables. An example can be found here: Pearl Theme Tables
- Pricing Boxes - This Design Element is not used anywhere in the theme out of the box and should only be enabled if you need to implement Pricing Boxes. An example can be found here: Pearl Theme Pricing Boxes
- Headings And Blockquotes - This Design Element is not used anywhere in the theme out of the box and should only be enabled if you need to display Headings and Blockquotes. An example can be found here: Pearl Theme Headings
- Dividers - This Design Element is not used anywhere in the theme out of the box and should only be enabled if you need to use Dividers on your pages. An example can be found here: Pearl Theme Dividers
- Brand Lists - Brand Lists are not used anywhere out of the box, however, this Design Element is also tied to the Testimonials Design Element. It’s important to keep it enabled if you’re using Testimonials anywhere on the store. If you’re not using Brand Lists or Testimonials, you can disable it. An example can be found here: Pearl Theme Brand Lists
- Smooth Scrolling - This Design Element can be used to add Smooth Scrolling animations to anchor links. If you haven’t implemented this manually on your website, it should be disabled.
- Icon boxes - This Design Element is not used anywhere in the theme out of the box and should only be enabled if you need to display Icon Boxes on your pages. An example can be found here: Pearl Theme Icon Boxes
- Alert boxes - These are Bootstrap Alerts. They aren’t used out of the box and should be disabled unless you plan on explicitly customizing something to use them. An example can be found here: Pearl Theme Alert Boxes
- Testimonials - Testimonials are used on Home Page V10 and Home Page V11. If you’re not using either of these and don’t plan on displaying Testimonials on any other page, you can disable this Design Element. Other examples can be found here: Pearl Theme Testimonials
- Flex Slider - The Flex Slider Design Element is used for the Testimonials Slider (presented on Pearl Theme Testimonials) so if you’re using this, it should be kept enabled. If you’re not using the Testimonials Slider, you can disable this Design Element.
- Buttons - This Design Element is not used anywhere in the theme out of the box and should only be enabled if you need to display Custom Buttons on your pages. An example can be found here: Pearl Theme Buttons
- Sections/Parallax - Used on Home Page V2 (top Hero Banner) for the Parallax effect. If you’re not using this home page or have not manually introduced the Parallax effect via customizations anywhere else on the store, this Design Element should be disabled.
- Extended Animations - Animations that are not part of the core theme Animations. They are not used out of the box and should be disabled unless they’ve been added manually via customizations.
- AOS Animation - This Design Element uses an external animation library that is not used anywhere out of the box. If you haven’t manually added them to your store, it should be disabled. An example can be found here: Pearl Theme AOS Animations
- Enable Advanced Back To Top On Product Page - Only affects the Product Pages. Adds the Advanced Back to Top button. An example can be seen here: Advanced Back to Top
NOTE: Disabling these Design Elements is fine and even recommended for most stores, however, each store is different and you may have some of the Design Elements in the list above implemented manually as customizations, in which case they should be kept enabled. Otherwise, you can disable them without any issues.
4. IMPLEMENT THE SPEED OPTIMIZATION EXTENSION’S ADVANCED JS BUNDLING PROCESS
The number of JS requests present on the store has a large impact on the overall performance. As such, reducing the number of requests made is crucial to ensuring your website has a good Page Speed Score. This can be achieved quite easily by using our Speed Optimization and Advanced JS Bundling extension.
The module features a lot of basic settings that can have a positive impact on your website, however, the largest and most important feature of the extension is the Advanced JS Bundling process. This helps you bundle the JS files in an intelligent way, by creating different types of bundles specific to each Magento page type.
This way, you benefit from fewer requests while loading only the necessary JS specific for each page type. 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.
Each step of the Bundling implementation process is well documented and can be found on the Product Page at the following link: Speed Optimization and Advanced JS Bundling, under the CONFIGURING ADVANCED BUNDLING section. The extension is also available standalone and can be used on any Magento 2 store.
5. DISABLE UNUSED EXTENSIONS
The Pearl Theme comes bundled with 25+ extensions out of the box. These extensions can all be used to achieve various cool functionalities and even designs, however, not all stores need all of them at the same time. As such, a best practice to use in order to reduce the amount of JS, CSS and other elements that can impact the overall speed of the website is to disable the modules that you’re not currently using. Note: This also applies to any 3rd party modules you’re using, not just the extensions included in the theme!
Let’s take an example to see how we can disable an extension. There are two methods of doing so:
- Via the Magento Admin - This disables the functionality but may still allow certain elements of the extension to load onto the store.
- Via the Command Line - This completely disables the module and assures nothing related to it loads onto the store.
For performance’s sake, we’ll exemplify the second method, as it’s the recommended one to assure the highest degree of performance is obtained. We’ll be using our Full Page Scroll extension for the example. To disable the module, we’ll need to head into the root of our Magento 2 project and run the following commands:
php bin/magento module:disable WeltPixel_FullPageScroll --clear-static-content
php bin/magento cache:flush
After running the commands, the Full Page Scroll extension will be disabled and nothing related to it will load onto the store, which, in turn, will increase the overall speed.
6. BANNER SLIDER EXTENSION - USE OPTIMIZED IMAGES FOR MOBILE
While we’re on the topic of extensions, it’s worth mentioning that our Owl Carousel and Banner Slider extension, which is one of the most popular modules we’ve developed has received a few performance upgrades in the most recent versions that decrease the impact it has on the Cumulative Layout Shift Core Web Vital (CLS).
For mobile devices, in the case of Banner Sliders, these performance upgrades require a mobile-specific Banner to be uploaded. Our module detects the device being used, and if that’s a mobile device, only loads the mobile-optimized version of the banner. If this is not uploaded, however, the desktop version is used and a dynamic resize is applied which increases the CLS value.
To upload a mobile-specific Banner image, head into Admin -> WeltPixel -> Sliders Pro -> Banners for Sliders. Find your Banner and hit Edit, then scroll down to Desktop Image and Mobile Image. Under Mobile Image, upload your mobile-optimized banner and save the configuration. After flushing the Magento Cache, your Slider should only load the mobile banner on mobile devices, and the CLS value in scoring platforms will be reduced. This is also available in the standalone version of the module, however, only in the PRO edition.
7. OPTIMIZE IMAGES
The Pearl Theme comes, out of the box, with images and other Sample Data elements that are used to build the various Home Pages which are also included. These images are blurry due to copyright restrictions, and thus, need to be swapped out for your own images.
When uploading images, it’s important to make sure they’re as optimized as possible. Optimizing images reduces their size, and thus, reduces the overall size of the page, which, in turn, reduces the loading time and can help achieve a higher score across scoring platforms. There are various ways to optimize images, and a few examples are:
- Manually optimizing with online tools such as TinyPNG - This tool compresses images and reduces their size, while also maintaining quality.
- Using an Image Optimization extension - The Pearl Theme does not currently come with a built-in image optimization tool or extension, however, there are likely numerous extensions available within the Magento ecosystem that can be used for this purpose.
- Use a CDN’s built-in image optimization functionality - A lot of CDNs have built-in image optimization processes or tools. For more information about CDNs, see point number 8.
8. OPTIMIZE THE GLOBAL PROMO MESSAGE
The Global Promo Message is a great tool that comes with our Pearl Theme which allows you to announce and display relevant messages and content for the users browsing your website. You can advertise promotions, discounts, or any other information you’d like to have showcased. In a recent theme update, we made some changes to this functionality which significantly optimizes the CLS impact that the block has on the overall Header section of the store. This optimization was performed through the introduction of a new setting that changes the display mode to Always.
This setting ensures the Global Promo Message is always ready to be loaded upon page refresh and boosts the loading speed, thus minimizing the Layout Shift. The option is found under Admin -> WeltPixel -> Custom Header -> Global Promo Message -> Display Global Promo Message with the option to choose between Always and Cookie-Based. The best setting here is Always.
9. IMPLEMENT LAZY LOADING FOR YOUR IMAGES
Lazy Loading is a functionality that is applied to images on the store and assures that these are not loaded by the browser until they’re in the user’s viewport (in other words, until the user scrolls to them) and can help ensure the number of elements loaded at once on a certain page is kept to a minimum, which decreases the page size.
The Pearl Theme comes with our Lazy Loading extension out of the box, enabled, and active for all Product Images on Category Pages and Product Pages. The module can, however, be used to add the Lazy Loading functionality to other images on your store, such as the ones on CMS Pages. The steps and process for doing this is described in the module’s documentation which can be found on the Product Page here: Lazy Loading extension, under the HOW TO ADD LAZY LOADING TO IMAGES IN YOUR MAGENTO STORE? Section.
10. USE ASYNCHRONOUS LOADING FOR FONTS
The Pearl Theme comes Google Fonts out of the box, which allows you to personalize and customize your store with fonts that match your brand’s identity. However, importing a large number of fonts can come with a noticeable performance hit. The theme comes with an option to perform the loading of these fonts asynchronously which will eliminate render-blocking CSS and ultimately helps ensure the page is loaded faster. The option is found under Admin -> WeltPixel -> Frontend Options -> Google Font Options and should be set to Yes.
11. CHOOSE A GOOD HOSTING PARTNER
Quite simply put, the Hosting Provider you choose to build your website with can make or break your store, especially when it comes to Magento 2. This is why we recommend choosing a dedicated Magento 2 Hosting, preferably a Cloud Hosting environment, which are usually the fastest and use auto-scaling technologies, ensuring that your website doesn’t break under heavy traffic.
Each Hosting Provider is different and will impact your website’s speed in different ways. There are, however, a number of key factors to look out for when choosing your provider. We’ve gone over those in detail in a dedicated post which also includes a few of our own recommendations. You can find it here: Choosing the right Magento 2 Hosting
12. IMPLEMENT A CDN (CONTENT DELIVERY NETWORK)
CDN services provide advanced speed and performance optimizations. By using a CDN solution, not only will you increase performance but will also maximize security for your online business. A good CDN solution that also includes Varnish Caching is Section.io. CDN & Varnish Setup is easy and can be applied to any hosting that you are currently using.
CONCLUSIONS
Following this guide and implementing the solutions we’ve listed will undoubtedly help increase the overall performance and speed of your Magento 2 store, while also ensuring that you can make use of the powerful functionalities and design features of the Pearl Theme. This way, you’ll have a functional and quick store that’ll make your users’ shopping experiences a breeze and will keep them coming back!
To see just what's possible by applying all of the optimizations listed in this guide, check out the Pearl Speed-Optimized Demo Store!
