BSS Magento 2 Layered Navigation – Fast enough for large catalogs?
BSS Commerce Magento 2 Layered Navigation is designed to overcome the performance limitations of the default Magento filtering system, especially on stores with large product catalogs. By using AJAX filtering, optimized navigation components, and improved attribute handling, the extension delivers a faster, more responsive shopping experience. This article explores how the module performs under real-world conditions, its impact on speed and UX, and whether it can truly scale for demanding enterprise-level catalogs.
Why Default Magento 2 Layered Navigation Fails Large Catalogs
Full Page Reloads: The Biggest Speed Killer
The default system’s biggest flaw is that every time a user applies a filter (e.g., color, size, price range), the entire product listing page is reloaded.
- Poor User Experience: This results in frustrating wait times and a disruptive shopping experience, similar to a page constantly buffering. Modern users expect instant results; waiting even a few seconds often leads to frustration and site abandonment.
- Performance Overhead: Each filter selection triggers complex, new database queries that intersect multiple data points (attributes, stock, pricing, etc.), which takes time to process. This overhead is a “speed killer” that becomes more pronounced as your catalog size and the number of filterable attributes grow.
Indexing Issues
Core Magento handles attributes and filtering requests by relying on a complex indexing system.
- Inefficient Queries: The native logic often generates inefficient SQL queries, especially for complex or multi-select filters using “OR” logic (e.g., red or blue shirts). These queries often don’t use optimized techniques like result caching or subqueries, leading to slow processing times on large datasets.
- Indexing Storms: Layered navigation depends heavily on up-to-date indexes. When product information (like stock, price, or category assignment) changes, the indexes must rebuild. On large sites, these frequent reindexing events can cause “cache invalidation storms,” temporarily slowing down the entire storefront during peak load.
- Too Many Attributes: Using too many filterable attributes adds significant query load and complexity to the indexing process, further degrading performance.
Impact on UX & Conversions
The slow performance of the default layered navigation has direct negative consequences for your business metrics.
- Higher Bounce Rates: Users who have to wait more than 3 seconds for a page to load are highly likely to abandon the site (bounce).
- Lower Conversion Rates: Studies consistently show that a 1-second delay in page load time can lead to a 7% drop in conversions. For an e-commerce store, this directly translates to lost sales and revenue.
- Reduced Customer Satisfaction: A sluggish website creates a poor perception of your brand, reducing customer satisfaction and the likelihood of return visits.
Implementing solutions that offer AJAX filtering (filtering without full page reloads) and optimizing your attribute setup are common approaches to mitigate these pain points
BSS Commerce Magento 2 Layered Navigation: Core Features for Speed & UX
BSS Commerce Magento 2 Layered Navigation is designed to overcome the limitations of Magento’s default layered navigation by making product filtering faster, more flexible, and more intuitive. It is especially effective for stores with large catalogs, complex attributes, and performance-focused storefronts.
Below is a detailed breakdown of the core features, explaining how each feature works and why it directly improves user experience or website speed.
Read more: BSS Commerce Magento 2 layered navigation extension vs native Magento
AJAX-Powered Filtering (No Page Reloads)
Feature description: The extension uses AJAX to dynamically update the product list when customers apply filters — without fully reloading the page. Instead of waiting for the entire page to refresh, only the product grid updates with the filtered results.
Benefit For UX & Speed:
- Faster response times: Removing full page reloads drastically reduces perceived wait time for users and makes interactions feel quicker.
- Smooth browsing experience: Customers can refine multiple filters in succession without interruption.
- Mobile efficiency: Smaller network payloads help maintain responsiveness on mobile devices with slower connections.
This results in a modern, frictionless experience that keeps visitors engaged and reduces bounce rates.
Multi-Select Filtering Across Attributes
Feature Description:
Unlike Magento’s default logic, which often forces a single value per attribute, this extension by BSS Commerce maintains filter states and dynamically recalculates product results as selections are added or removed.
Customers can select multiple values within a single attribute and across different attributes simultaneously, such as filtering products by multiple colors, sizes, or brands, with the extension maintaining selected filters dynamically and recalculating results instantly.
Benefit For UX:
- Precise search results: Allows customers to craft highly specific filter combinations without having to reset search criteria.
- Less frustration: Multi-select empowers users to explore broader product sets without extra clicks.
- Higher conversion likelihood: Users find what they need faster which boosts buyer satisfaction and site conversions.
Multiple Filter Display Types (Checkbox, Dropdown, Swatches)
Feature description: The Layered navigation extension supports different display types for filters, including checkboxes for multiple selections, dropdowns for long lists, and image or text swatches for visual attributes such as color, material, or patterns, configurable per attribute in the backend.
Benefit For UX:
- Visual clarity: Swatches and checkboxes help users recognize filter values instantly (e.g., color via an image swatch).
- Better interactivity: Dropdowns keep long lists tidy while swatches make attribute selection more engaging and accessible.
- Responsive behavior: Displays are optimized for both desktop and mobile interfaces, maintaining usability across devices.
Interactive Price Range Slider
Feature description: The price filter uses a draggable slider and optional input boxes for precise “From-To” ranges, dynamically adjusting results through AJAX, and reflecting the actual minimum and maximum prices available in the category.
Benefit For UX & Speed:
- Quick budget exploration: Shoppers can instantly narrow down products within price boundaries that suit them.
- Efficient filtering: Interactive sliders require less input than manual price entry, speeding up navigation.
- Better performance than multiple static ranges: Slider interfaces reduce unnecessary clicks and reloads, keeping interactions efficient.
Vertical, Horizontal, or Combined Navigation Layouts
Feature description: Layered Navigation can be displayed vertically (sidebar), horizontally (above product listing), or in both positions, depending on theme/layout preferences.
Benefit For UX:
- Design flexibility: Merchants can align navigation placement with store theme and layout best practices.
- Better content access: Horizontal filters are useful for wide screens, while vertical filters can be more effective on desktop category pages.
- Adaptive experience: Offering layout options ensures consistent UX across desktop and mobile devices.
This flexibility enhances the aesthetic coherence and ease of use of the site, accommodating different product catalogs and store designs.
Fully Responsive & Mobile-Optimized Filtering
Feature description: The layered navigation UI adapts to various screen sizes. Filters are fully responsive and touch-friendly, automatically adjusting layouts for smaller screens, using collapsible sections or overlay menus to save space while maintaining full functionality on mobile devices.
Benefit For UX & Speed:
- Mobile Usability: Customers can filter products easily on smartphones and tablets.
- Faster Rendering: Optimized layouts reduce heavy DOM operations on mobile.
- Consistent UX: Shoppers get the same intuitive experience across all devices.
Mobile commerce continues to grow, delivering responsive filters means fewer frustrated users and more completed purchases.
Ratings Filter & Additional Attribute Options
Feature description:
The extension expands filtering options beyond typical attributes to include things like star ratings and other customised attribute filters.
Benefit For UX:
- Richer shopping signals: Customers can filter by product quality (e.g., star ratings), reducing decision time.
- Tailored discovery: More filter types lead to better product matches for shoppers’ needs.
Compatibility With Hyvä Theme
Feature description: The extension is fully compatible with the lightweight Hyvä theme, ensuring that layered navigation works seamlessly with one of the fastest Magento 2 frontend frameworks.
Benefit For Speed & UX:
- Optimized performance: Hyvä themes are built for speed, and compatible filtered navigation helps preserve that advantage.
- Better overall store speed: Combined with AJAX and Hyvä’s streamlined UI, navigation remains responsive and performs well under load.
Performance Deep Dive: Is it Really Fast Enough?
performance over the default by incorporating AJAX filtering and optimizing the user experience to reduce bounce rates. Its scalability for large catalogs relies heavily on effective caching and potentially switching the default search engine from MySQL to Elasticsearch.
Real-World Scenarios: Small (1k) vs. Large (50k+) Catalogs
- Small Catalogs (approx. 1k products): On smaller sites, the BSS extension offers immediate benefits through features like multi-select filters and the price slider, making the filtering experience fast and smooth. The performance is generally quick, as the database queries involve smaller datasets.
- Large Catalogs (50k+ products): In large catalogs, the performance impact of any layered navigation module is more pronounced due to the complexity of SQL joins across numerous attributes and products. The BSS extension addresses this by using AJAX to prevent full page reloads, making the perceived filtering speed much faster for the customer. However, the efficiency of the underlying database operations becomes critical.
Developer Insights (Technical Details)
- Effective Caching: Like most quality layered navigation extensions, the BSS module is designed to work with Magento’s robust caching mechanisms. The use of AJAX means that only specific parts of the page update, leveraging partial page caching effectively. Proper Magento cache management is essential for optimal performance with any layered navigation extension, especially as the catalog size increases.
- Optimized Database Queries: While specific, proprietary BSS query optimization details are not publicly detailed, the extension’s core functionality of improving speed suggests an effort to streamline the complex database calls inherent in Magento’s layered navigation structure. Magento’s default layered navigation is known for being resource-intensive, often performing heavy SQL joins for each filter selection. Extensions typically aim to optimize this process, but the fundamental challenge of catalog size remains a key factor.
- System Requirements/Potential Conflicts: The extension works with the default Magento setup but integrates best with an optimized environment.
- For Magento 2.4.x+, using Elasticsearch/OpenSearch as the search engine is the standard and recommended practice for optimal layered navigation performance, lifting the workload from the MySQL database.
- Potential conflicts can arise with other extensions that modify the product collection or catalog structure, which is common in complex Magento setups. The BSS extension is also Hyva-ready, ensuring compatibility with modern, performance-oriented frontends.
User Testimonials/Case Studies
Specific, verified user data in the form of official case studies or benchmarks is limited in the search results. However, general user sentiment points to improved performance and user experience due to the added features.
- “Store owners with large product catalogs often report a significant improvement in filtering speed and user engagement after implementing an AJAX-based layered navigation solution”. The move from full page reloads to instant updates drastically changes the user experience, leading to lower bounce rates.
Installation and Configuration: Getting the Best Performance from BSS
Installation Overview
Installation of the BSS Layered Navigation extension is a standard Magento procedure, typically done via Composer (recommended) or manual file upload (FTP/SFTP).
Step-by-Step Installation (via Composer)
- Access Command Line: Connect to your server via SSH and navigate to your Magento project’s root directory.
- Install the Extension: Run the composer command provided by BSS Commerce (you may need to configure the BSS Composer repository first). The command is generally in the format: composer require package_name.
- Enable the Module: After the installation is complete, run the command: php bin/magento module:enable Bsscommerce_LayeredNavigation (replace with the actual module name if different).
- Run Setup Upgrade: Execute php bin/magento setup:upgrade to update the database schema and data.
- Deploy Static Content: Run php bin/magento setup:static-content:deploy -f to deploy static view files.
- Clear Cache: Flush all cache types using php bin/magento cache:flush or via the Admin Panel.
Crucial Configuration Settings for Speed
Once installed, specific settings within the Magento admin panel will help maximize performance.
- Enabling/Optimizing AJAX Settings
The BSS extension uses AJAX filtering to load filtered results without full page reloads, a key feature for speed.
- Enable Globally: Go to Stores > Configuration > BSSCOMMERCE > Layered Navigation in the Magento admin panel.
- Activate AJAX Filtering: Within the configuration section, ensure AJAX Filtering is enabled. This dramatically improves the customer’s browsing experience by updating product lists in real-time as filters are applied.
- Configure Display Options: Adjust settings like price sliders or collapse/expand behaviors to optimize the visual performance and user interface.
- Caching Recommendations (Varnish, Redis Configuration)
Proper caching is fundamental to Magento performance.
- Enable Full Page Cache (FPC): Ensure FPC is enabled in System > Tools > Cache Management.
- Utilize Varnish: Varnish Cache is highly recommended as the production Full Page Cache application. It is an HTTP accelerator that serves cached pages from memory, significantly reducing server load and Time to First Byte (TTFB). The BSS extension is designed to work efficiently with Varnish.
- Configure Redis for Backend Cache and Sessions: Avoid using the default file-based storage for cache and sessions. Configure Redis for these purposes to gain fast, memory-based storage, which speeds up internal operations and session handling, especially on high-traffic stores.
- Regularly Monitor: Keep all cache types enabled in the Cache Management section of the admin panel, and monitor cache hit rates to identify performance regressions.
- Attribute Management Best Practices
For attributes to appear and function correctly in the layered navigation, they need the proper configuration.
- Set “Is Anchor” to Yes: For any category where you want layered navigation to appear, go to Catalog > Categories, select the category, go to the Display Settings tab, and set Is Anchor to Yes.
- Make Attributes Filterable: For each specific product attribute (e.g., Color, Size, Brand) you want to use as a filter:
- Go to Stores > Attributes > Product, and select the attribute.
- Under the Storefront Properties section, set Use in Layered Navigation to either Filterable (with results) or Filterable (no results).
- Choose an appropriate display type (e.g., Checkbox, Dropdown, Swatch) under the Layered Navigation Attributes tab in the global config to optimize the user interface.
Conclusion
In summary, BSS Magento 2 Layered Navigation offers a substantial performance upgrade over Magento’s default filtering, particularly through AJAX-based interactions and optimized UI components. While large catalogs still depend heavily on proper caching and Elasticsearch/OpenSearch, the extension delivers clear speed and UX improvements. For merchants seeking scalable, user-friendly filtering, it provides a strong foundation for handling complex and high-volume product environments.
This extension is a practical example of how well-built extensions for Magento 2 can address performance and usability limitations in native features. By leveraging specialized Magento 2 extensions like BSS Layered Navigation, merchants can extend core capabilities, improve storefront speed, and deliver a smoother shopping experience even with complex product catalogs.