The Ultimate Guide to Page Speed Optimization for NopCommerce [2022]

Thursday, November 10, 2022
0 Comments
The Ultimate Guide to Page Speed Optimization for NopCommerce [2022]

Page speed is a ranking factor. Also, a fast-loading website is key to delivering a better shopping experience. Therefore, it is vital that your nopCommerce website loads fast on different devices. Today, we’ll show you how to define what slows down your website and improve your store’s page speed.

Overview

Part I: Introduction to page speed optimization for nopCommerce

Part II: How to optimize your nopCommerce store’s page speed?

Part III: Bonus section

What is page speed?

Page speed (or page load time) is the time it takes a page to load properly. Google recommends that page load time is under two seconds. Note that page speed is different from site speed - site speed is a metric that represents the overall performance of your website.

Why should you optimize your nopCommerce store’s page speed?

Your nopCommerce store’s page speed is important for several reasons:

  • It affects your customers’ shopping experience. A fast-loading website provides a better shopping experience, which leads to higher user engagement, increased customer satisfaction, and lower cart abandonment rates.
  • It impacts your customers’ buying decisions. If your website loads slowly, your customers can easily get frustrated and leave. Also, 79% of customers “dissatisfied” with a site’s performance are less likely to become repeat buyers. Source: Skilled
  • It affects your conversion rate. The highest ecommerce conversion rates occur on pages with load times between 0-2 seconds. Website conversion rates drop by an average of 4.42% with each additional second of load time (between seconds 0-5). Website conversion rates drop by an average of 2.11% with each additional second of load time (between seconds 0-9). Source: HubSpot, 12 Statistics That Show How Page Load Time Impacts Conversion Rate
  • It affects your bounce rate. As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases by 123%. Source: Google/SOASTA Research
  • It affects your ranking and your nopCommerce store’s discoverability. Source: Evaluating page experience for a better web
  • It affects your website’s accessibility and its overall performance.

Factors that affect your nopCommerce store’s page speed

Many factors affect your nopCommerce store’s page speed. Some of them you can’t control. For example, your customers’ internet connection, browser, location, etc. The nopCommerce infrastructure is also outside of your control. Luckily, nopCommerce offers amazing performance features out of the box. Therefore, if your store is configured properly, it should have a stellar performance.

Other factors you can control:

  • Your nopCommerce store’s settings
  • Your nopCommerce store’s theme and plugins
  • Your homepage design
  • The organization of your collection pages and filtering options
  • The number of redirects and broken links on your website
  • Your images and video content
  • The nopCommerce hosting provider you choose
  • And more

In this guide, we’ll focus on the factors you can control. But first, let’s have a closer look at several tools that can help you identify page speed issues.

Troubleshooting tools: How to identify performance issues?

In this section, we’ll have a look at three of the best tools that can identify what slows down your website:

Google PageSpeed Insights (PSI)

Google PSI is a free tool that analyzes the performance of your web pages on desktop and mobile devices. Then, it gives you actionable tips on how to improve them.

PSI provides:

Learn more about Google PSI → About PageSpeed Insights

To test your store’s speed with Google PSI, open Google PageSpeed Insights > Paste your store’s URL in the “Enter a web page URL” field > Click “Analyze.”

GTmetrix

With GTmetrix, you can test your nopCommerce store’s speed in different countries, on different browsers, connection speeds, and more. You get detailed performance reports. For example, you can see how your pages load on different devices, track your store’s performance over time, set up alerts and get notifications when your website doesn’t perform well, and more.

To test your nopCommerce store’s speed with GTmetrix, add your store’s URL (or the URL of a particular web page) in the “Enter URL to Analyze” field > Click “Test your site.”

You can start using GTmetrix for free and choose the plan that meets your needs later on.

Pingdom

Pingdom is another tool that lets you test and analyze your store’s load speed. It uses over 70 global polling locations and offers reliable uptime and performance monitoring of your website.

To test your store’s page speed, open Pingdom > Enter your store’s URL (or the URL of a particular web page) in the “URL” field > Select a testing location from the “Test from” dropdown > Click “Start test.”

You can mix and match Pingdom’s capabilities to fit your monitoring needs and choose the best pricing plan for your business.

Now that you know how to define what slows down your website, let’s see how you can optimize your nopCommerce store’s page speed. First and foremost, you must properly configure your store settings, including your performance settings, localization settings, maintenance page, etc. Also, you must choose the right nopCommerce theme and plugins, simplify your homepage design, optimize your collection pages and filtering options, minimize broken links and redirects, optimize your visual content, enable bundling and minification, and choose the right hosting provider.

Configure your performance settings

To configure your performance settings, open your nopCommerce admin panel (https://www.your-nopCommerce-store-name.com/admin) > Configuration (left sidebar menu) > Settings > Catalog settings.

↓

The “Catalog settings” page contains 14 panels: Search, Product reviews, Review types, Performance, Share, Compare products, Additional sections, Product fields, Product page, Catalog pages, Tags, Tax, Export/Import, and Product sorting. Scroll down to the “Performance” panel.

Here’s what you need to know about each performance setting:

  • Ignore ACL rules (sitewide) - Ignore ACL rules configured for entities (sitewide). It is recommended to enable this setting as it can significantly improve the performance of your nopCommerce store.
  • Ignore “limit per store” rules (sitewide) - Ignore “limit per store” rules configured for entities (sitewide). It is recommended to enable this setting if you have only one nopCommerce store.
  • Ignore discounts (sitewide) - Enabling this feature can improve performance. However, it will disable some of your store’s functionality.
  • Ignore featured products (sitewide) - Enabling this feature can improve performance. However, it will disable some of your store’s functionality.
  • Cache product prices - Enabling this feature can improve your store’s performance. However, you should not enable it if you offer complex discounts, discount requirement rules, or coupon codes.

Configure your localization settings

To configure your localization settings, open your nopCommerce admin panel > Configuration > Settings > General settings.

↓

The “General settings” page contains 13 panels: Common, Top menu items, Footer items, Social media, Favicon and app icons, Sitemap, SEO, Minification, Security, CAPTCHA, Pdf, Localization, and Admin area. Scroll down to the “Localization” panel.

“Load all locale resources on startup,” “Load all localized properties on startup,” and “Load all search friendly names on startup” have the most impact on your page speed. Here’s what you need to know about each of these localization settings:

  • Load all locale resources on startup - When enabled, all locale resources will be loaded on application startup. It will take more time for the application to start. However, once it does, all pages will load much faster.
  • Load all localized properties on startup - When enabled, all localized properties will be loaded on application startup. It will take more time for the application to start. However, once it does, all pages will load much faster. It is used if you have two or more languages enabled. It is not recommended to enable this setting if you have a large catalog store with over several thousand localized entities.
  • Load all search engine friendly names on startup - When enabled, all search engine friendly names will be loaded on application startup. It will take more time for the application to start. However, once it does, all pages will load much faster. It is not recommended to enable this setting if you have a large catalog store with over several thousand localized entities.

Everything you need to know about nopCommerce’s “Maintenance” page

The “Maintenance” page allows you to delete unnecessary information from your database and file system - guest customers, abandoned shopping carts, old exported files, sent emails, etc. Also, you can reindex database tables and backup your database. All this can significantly improve your page load time.

To open the “Maintenance” page, open your nopCommerce admin panel > System > Maintenance.

  • You can delete guest customers from the “Deleting guest customers” panel. Just select a start and end date, mark the “Only without shopping cart” checkbox, and click “Delete.”
  • You can delete abandoned shopping carts from the “Deleting abandoned shopping carts” panel. Just select a date from the “Created before” drop-down and click “Delete.”
  • You can delete old exported files from the “Deleting old exported files” panel. Just select a start and end date and click “Delete.”
  • You can delete sent emails from the “Delete already sent emails” panel. Just select a start and end date and click “Delete.”
  • You can reindex database tables from the “Re-index database tables” panel. This will rebuild the index and modify your existing tables. When you reindex a database table, only the statistics associated with the index will be updated. Automated or manual statistics created in the table will not be updated.
  • You can backup your database from the “Database backup” panel. This functionality works only when your nopCommerce application is deployed on the same server as the database.

Choose the right nopCommerce theme

As the #1 nopCommerce vendor, we know quality themes and understand their importance. A theme can make or break your business. This is why choosing the right theme for your nopCommerce store is crucial to your success.

The right theme is:

  • Responsive
  • Compatible with all major browsers
  • Lightweight (meaning it doesn’t hurt your website’s performance)
  • Frequently updated
  • SEO-friendly

The right theme will:

  • Define you in a crowded marketplace.
  • Match your brand identity and present your brand in the best light. Furthermore, the right theme will elevate your online presence.
  • Help you acquire new customers.
  • Increase customer engagement and satisfaction.
  • Facilitate your customers’ buying decisions and help hesitant buyers convert. In other words, the right theme will positively impact your bottom line.
  • Offer great functionality.
  • Come with support - ideally, the theme developer will offer technical assistance.

To choose the right theme, you must:

  • First and foremost, identify your needs. This will help you define what functionality and features you need.
  • View demos. Take your time to explore them in detail. This will give you a better understanding of how the theme works.
  • Read reviews and testimonials. Learning about the experience of other store owners will give you a better idea of the quality of the product and help you define if it’s the right choice for your business.

Why choose a Nop-Templates theme?

We design each product with care and develop it with skill. We believe in exceptional quality and strive for perfection every step of the way - from concept to production to launch.

All of our themes are responsive, fast and lightweight, SEO optimized, and tested with all major browsers. Also, our themes have clean HTML and CSS structure for easy customization, come with (at least!) 10 plugins, and you can purchase a single or multiple domain licence. Last but not least, we offer 1 year of free support and upgrades since purchase date. Learn more > Nop-Templates Themes

Assess the plugins you have installed

Plugins are great - they can make your nopCommerce store more appealing, help you deliver a better shopping experience, increase user engagement, boost sales, etc. However, to change the functionality or the appearance of your store, plugins add code to your theme, which can sometimes hurt your website’s performance (especially if the code isn’t optimized).

Therefore, to improve your store’s page speed:

  • Go through the plugins you have installed and remove the ones you don’t use. Remove all residual code - this is important and will reduce the number of HTTP requests. If needed, contact the plugin developer and request help.
  • Assess the plugins you use. Ask yourself whether you should keep them - how do they help you run your business? If a plugin works properly but you don’t use it as much as you thought you would, weigh the benefits of keeping it - each plugin affects the performance of your nopCommerce store.
  • Before installing a new plugin, ask yourself if you really need it. Be mindful of the balance between features and speed.
  • Regularly monitor your plugins’ performance and their effect on your website’s performance. If you notice that a plugin slows down your website, it’s best to evaluate its features and decide if the plugin is worth keeping.

Simplify your homepage design

Simplifying your homepage design will reduce page load time and improve the overall performance of your nopCommerce store. To simplify your homepage design:

  • Eliminate unnecessary sections. Remember, in design, less is always more. Instead of posting huge chunks of content, give customers a preview and a “View more / Read more / Learn more” link.
  • Consider removing social media feeds and widgets. Instead, implement them on other strategic locations across your website.
  • If you use a slider, ensure to follow UX best practices, use a maximum of three slides, and implement lazy loading. Also, you can use a plugin like Nop Anywhere Sliders. With the plugin, you can manage an unlimited number of slider instances anywhere on your nopCommerce website. You no longer have to edit your website pages or integrate client-side scripts for every new sliding banner. You can purchase a single domain license for $49, or multiple domains licence for $88.
  • Simplify and improve your homepage navigation. You can use a plugin like Nop Mega Menu and easily build a custom menu. You can purchase a single domain licence for $49 or multiple domains license for $88. View demo

Optimize your category pages and filtering options

Category pages help customers find what they need. As such, they’re crucial to delivering a better shopping experience. However, there are several things you should consider:

  • The best practice is to create relevant categories with smaller and more specific subcategories. For example, if you sell apparel, you can have two categories called “Spring/Summer” and “Fall/Winter.” Each of these categories can contain subcategories like “Shirts,” “Trousers,” “Dresses,” etc.
  • Create relevant filters that allow customers to narrow down their search to quickly find exactly what they need. However, try to keep the number of filters low as the more filters you have, the longer it will take your pages to load. This can be a bit tricky, but using a plugin like Ajax filters can make your life easier. With the plugin, shoppers can filter your products by style, size, color, brand, price, manufacturer, and more. You can purchase a single domain licence for $99 or a multiple domains licence for $188. View demo
  • Use pop-ups sparingly. Pop-ups are a great way to display more product details on collection pages. This should help customers decide if they’re interested in the product and provide a better shopping experience. However, it can significantly slow down your website if the pop-up preloads the entire information the product page contains. You can use a plugin like Nop Quick View to make your product catalog more accessible. You can purchase a single domain licence for $49 or a multiple domains licence for $88. View demo

Minimize redirects and broken links

Redirects trigger additional HTTP requests and delay data transfers. To minimize the number of redirects on your website (and their impact on your store’s speed):

  • Don’t redirect pages to pages that are redirects.
  • Delete unnecessary redirects.
  • Select “Pages should have WWW prefix” from the “WWW prefix requirement” drop-down. This will reduce the overhead of redirects on your website. To do this, go to Configuration > Settings > General Settings > SEO.

Similar to redirects, broken links increase the number of HTTP requests (which affects your nopCommerce store’s speed).

To minimize broken links (and their impact on your website’s performance and your customers’ shopping experience):

  • Use a site audit tool like Ahrefs’ Broken Link Checker to detect and fix broken links.
  • Create a custom 404 page that assists visitors who have accidentally entered (or followed) an incorrect URL.

Why is it important to create a custom 404 page?

Even if you regularly monitor your website for broken links, it is nearly impossible to have a website that doesn’t contain them at all. Also, a customer can easily type the wrong URL - one with an extra character, a missing letter, a wrong protocol, etc.

In these cases, it is important to have a well-designed 404 page - this will help you deliver a better shopping experience, which will result in a lower bounce rate and, possibly, an increase in sales.

Ultimately, your 404 page should match your brand identity and products. It should speak to your customers in a voice they recognize and love. For example, if you use a friendly tone of voice, use jokes, puns, and GIFs, leverage it. If your brand is more high-end, use more formal language and avoid flashy images.

Also, your 404 page should match the design of your website - it shouldn’t feel out of place or like something you had forgotten and thrown together at the last minute. It should be clear that you put thought into designing the page. In this way, your customers will know that you pay attention to the overall user experience.

Optimize your images

Image type and size significantly impact your page speed. This is why it’s important to optimize your images.

What you need to know about image size

In general, larger images have higher resolutions, which means they look better and help you provide a better shopping experience. However, larger images usually take longer to load. Since page speed is a ranking factor, this can hurt your rankings.

Therefore, if you wish to deliver a stellar shopping experience while keeping your product pages SEO-friendly, you can upload compressed images to your product pages and allow customers to zoom in on them (in the same or in a separate window) so that they can examine them closely in HD.

How to reduce the size of your product images?

To adjust the size of your product images you’ll need to set the media details of your nopCommerce store. To set the media details of your store, open your nopCommerce admin panel > Configuration (left sidebar menu) > Settings > Media settings.

You’ll be redirected to the “Media settings” page, which contains several sections:

  • Common - Define where your images are stored, set a maximum image size, a default image quality, and more.
  • Product - Define the default size of product page images, thumbnail images (for the catalog and product pages), and more.
  • Other pages - Define the category thumbnail image size, manufacturer thumbnail image size, vendor thumbnail image size, cart/wishlist thumbnail image size, mini-shopping cart thumbnail image size, and avatar image size.

Learn more → NopCommerce, Media Settings

Note: The size of an image depends, to a great extent, on the type of the image. Therefore, it’s important that you choose the right image file type.

How to choose the right image file type?

The three most common image file types are JPEG, GIF, and PNG.

  • JPEG images are approximately 30 kb. You can compress them without compromising their quality. In other words, JPEG images are high-quality images with low image size - this makes them the perfect format for product images. Note that the quality of JPEG images degrades after each edit.
  • GIF images are approximately 35 kb. Their quality is lower than the quality of JPEGs and they do not support such a wide range of colors. This makes GIFs more suitable for smaller icons, thumbnails, or simpler background images.
  • PNGs are a higher quality alternative to JPEGs and GIFs. They also support more colors. However, they are considerably larger in size - they can be up to 100+ kb (but no less than 30 kb). This can slow down your pages, so you need to be careful. But ultimately, as long as their size is not so big that it hurts your on-page SEO, PNG images are your best bet when it comes to product photos.

Optimize your videos

According to Cisco, by 2022, 82% of all online content will be video content. Also, video generates 1200% more social shares than text and images combined (G2 Learning Hub). In fact, 92% of mobile video viewers share videos with their peers (Social Media Week).

Video is on the rise and it is only logical that you create more video content and upload it to your nopCommerce store. However, if you don’t embed video content properly, it can significantly increase page load time.

The best practice is to host your videos on external sources (such as YouTube and Vimeo) and use lite embeds. This can reduce the size of your web pages by almost 1MB. Here’s why: The standard YouTube embed code requires some files to be downloaded before your customers play the video which may slow down your website. Lite embeds are an effective way to avoid this - in this way, when the page loads, the site only embeds the thumbnail image of the YouTube video, and the video itself (including all JavaScript code) loads only if the customer clicks “Play.” Learn more → Lite YouTube Embeds - A Better Method for Embedding YouTube Videos on your Website

Enable bundling and minification

Enabling bundling and minification for JavaScript and styles files will positively impact your page load time.

To enable bundling and minification, open your nopCommerce admin panel > Configuration > Settings > Scroll down to the “Minification” panel.

  • Mark the “HTML minification” checkbox - This allows you to minify and compress HTML pages which increases download speed. After enabling HTML minification, you need to restart the application.
  • Mark the “JavaScript bundling and minification” checkbox - This allows you to combine multiple JavaScript files into a single file. Currently, it doesn’t support web farms. It could take several minutes for the changes to apply.
  • Mark the “CSS bundling and minification” checkbox - This allows you to combine multiple CSS files into a single file. Do not enable this setting if you’re running nopCommerce in IIS virtual directory. Currently, it doesn’t support web farms. It could take several minutes for the changes to apply.
  • If you want to compress response (gzip by default), mark the “Use response compression” checkbox. You can disable this setting if you have an active IIS Dynamic Compression Module configured at the server level.

Choose the right hosting provider

Finding a reliable nopCommerce hosting provider can be tough and time-consuming. For one thing, nopCommerce is an e-commerce platform. This means that your server must be able to process a large number of transactions on a daily basis and handle peaks in traffic during sales campaigns. For another, your hosting provider must meet the nopCommerce technology and system requirements.

Also, nopCommerce consumes on average 300 MB RAM which means that, in order for your website to run smoothly, you will need at least 500 MB RAM. However, note that this is the bare minimum and it is very likely that you will experience downtime if there is an unexpected traffic spike. This is why we recommend choosing a hosting plan that offers at least 1 GB RAM.

Finding a hosting provider that meets all these requirements can be a major hurdle. Luckily, nopCommerce has several hosting partners - by choosing one of them, you can be sure that you’ll have a fast and smooth-running website that can handle all traffic spikes.

And here’s what nopCommerce suggests you should look for in a hosting provider:

  • 99.9% uptime
  • Protection against DDoS attacks
  • Scalability - ability to migrate from shared to semi-dedicated or dedicated servers (depending on your business needs)
  • Regular backups
  • 24/7 server support
  • Technical support
  • Support for all required technologies and scripts

Note: NopCommerce also recommends having a good HDD (preferably SATA). Learn more → NopCommerce performance guide

Additional page speed optimization tips for nopCommerce

  • If you don’t use the latest nopCommerce version, upgrade your store - nopCommerce’s goal is to improve the performance of all stores with each release.
  • Remove currencies and languages you don’t need - each unnecessary entity slows down your store.
  • Enable the following Schedule tasks - “Clear log,” “Delete guests,” “Clear cache,” and “Keep alive.” To do this, open your nopCommerce admin panel > System > Schedule tasks. Note: If a task is disabled, click “Edit,” mark the “Enabled” checkbox, and click “Update.”

  • Disable the following settings - “Store last visited page” and “Store IP addresses.” To do this, open your nopCommerce admin panel > Configuration > Settings > Customer settings > Scroll down to the “Account” panel and remove the check marks from the relevant boxes.

  • Monitor your log and promptly remove all errors. To view your log, open your nopCommerce admin panel > System > Log.

  • Promptly fix all warnings. To view all warnings, open your nopCommerce admin panel > System > Warnings.

  • If you want to extend the default nopCommerce functionality, make sure that the changes you implement won’t affect your store’s performance. For example, if an SQL request is too slow or is executed too often, nopCommerce recommends making caching in nopCommerce instead of an external database. In addition, nopCommerce has a built-in profiler that can help you identify the requests that slow down your store. To activate it, open your nopCommerce admin panel > All settings (advanced) > storeinformationsettings.displayminiprofilerinpublicstore (value: true).

  • Use a CDN (Content Delivery Network). A CDN is a group of servers (dispersed at strategic locations worldwide) that distributes the content delivery load through the server located closest to the visitor’s location. This increases your store’s page speed and helps you deliver a better shopping experience.
  • Regularly update all software (Windows, MS SQL Server, etc.) - it’s important to have the latest security patches and all performance improvements.
  • Set up nopCommerce and the database at the same server.
  • Regularly backup your store.
  • Regularly monitor SQl performance.
  • Perform load testing to ensure there are no critical issues in your code that can slow down your website. You can use a free load testing service like loader.io.

Conclusion

Page speed optimization is a time-consuming and complex task. It requires good knowledge of nopCommerce and SEO.

We hope this guide will give you the expertise to optimize your store. We talked about everything from page speed optimization basics to more advanced tasks like properly configuring your store settings, minimizing redirects and broken links, enabling bundling and minification, and more. We also shared a few extra tips for optimizing your store’s speed. If you have further questions, just leave a comment below!