I’ve been using Swissup Breeze for over 12 months now. So far as frontend development on Magento, it’s been a game changer so I wanted to share some thoughts.
Frontend development on Magento has never been the best, there’s no escaping that. Unless you’re using Hyvä, extending Luma or Blank is frustrating and time-consuming. The team at Swissup have done a cracking job trying to change that.
Breeze allows you to take Luma out of the mix completely. While it’s not headless like Hyvä, its performance is exceptional and it’s far more cost-effective. I now use Breeze for the majority of my Magento projects that don’t have a specific Hyvä use case. Here’s what you need to know.
What Is Swissup Breeze?
Swissup Breeze is a free, open-source performant frontend for Magento 2 that consists of two parts:
- A module that replaces the default JS stack with Swissup’s own implementation. They’ve removed numerous JavaScript libraries and greatly reduced script evaluation time. This module can even be used on top of custom Luma-based themes.
- A theme created from scratch with built-in critical and deferred CSS splitting, razor-sharp images for all devices, RTL support, and keyboard navigation. It’s not based on the Luma or Blank theme.
These advancements make Breeze a practical and efficient solution for anyone rightly looking at an alternative to Magento’s default frontend stack.
Who Are Swissup?
Note that I have no affiliation with Swissup whatsoever, this guide is aimed at highlighting the benefits of Breeze and how impressive the framework is.
Swissup are a well-established module provider in the Magento space, they’ve been around for as long as I’ve been using Magento and have an excellent catalog of modules.
Key Features of Swissup Breeze
1. Lightning-Fast Performance
When I first implemented Breeze, the performance gains were immediately noticeable. Swissup achieves this by:
- Reducing JavaScript overhead: Breeze removes all but the essential JavaScript libraries, retaining only Knockout.js for compatibility. This reduces render-blocking scripts and significantly improves script evaluation times.
- Critical and deferred CSS splitting: Essential styles load upfront, while non-critical styles are deferred, ensuring a smooth user experience.
- Responsive images: With support for next-gen image formats and optimized srcset configurations, images are always delivered in the most efficient way for the user’s device.
- Lazy-loading third-party scripts: Inline scripts can be delayed using the “lazy” attribute, further reducing initial load times.
These optimizations result in better Core Web Vitals scores and faster load times, which are crucial for user experience and SEO.
2. Cost-Effective Alternative to Hyvä
While Hyvä is a fantastic option, it comes with a licensing fee, albeit one off, a learning curve for developers and is generally a bigger undertaking. This can make it less accessible for SMEs for example. Breeze provides a comparable performance boost at no cost, making it an excellent alternative for projects with tighter budgets.
3. Comprehensive Variable System
Hands down, one of the best things about Breeze is its variable-driven design system. With centralised control over colors, fonts, and spacing, making global changes is a breeze (pun). It’s efficient, consistent, and ideal for maintaining clean, reusable styles across the project.
4. Developer-Friendly File Structure
Swissup Breeze’s modular file structure has been a breath of fresh air compared to Luma. Key features include:
- Pre-defined entry points: Files like
custom.jsandextend.jsmake adding custom scripts straightforward without interfering with the core. - Critical Styles Guard: Styles are organised into critical and non-critical categories, reducing load times and improving performance.
5. AJAX Support
Features like AJAX-based cart updates, search results, and navigation are supported out of the box. These dynamic elements make for a seamless user experience without introducing unnecessary complexity.
6. Custom Scripts Integration
Integrating custom JavaScript is straightforward. Breeze provides entry points for developers to add their own scripts, which can be dynamically loaded as needed. This flexibility has made customising Breeze a much smoother process compared to working with Luma.
Ease of Customization
Swissup Breeze excels when it comes to customisation. Its logical structure and reliance on variables encourage best practices and make development far less frustrating. Over the past year, I’ve found the following particularly helpful:
- Organized File Structure: Files are easy to locate and edit, reducing development time.
- Mixins and Variables: These allow for consistent and reusable styles, making it simple to maintain projects long-term.
- Critical CSS Management: Breeze’s built-in tools ensure that only essential styles load upfront, streamlining the development process and improving performance.
Ease of Use
Breeze has significantly reduced the complexity of Magento frontend development. For technical managers or directors overseeing projects, it’s a no-brainer. The documentation is thorough, and the theme’s architecture allows developers to deliver high-performance sites without jumping through hoops.
Downsides of Swissup Breeze
No solution is perfect, and Breeze does have its limitations:
- Module Compatibility: Many third-party modules that rely on JavaScript won’t work out of the box and may require custom integration.
- Knockout.js Dependency: While retaining Knockout.js eases migration, it can feel limiting for projects aiming for a fully modern stack.
- Limited Payment Gateway Support: Certain gateways, like Opayo, lack native support and may require additional effort to integrate.
Final Thoughts
Swissup Breeze has completely changed how I approach Magento frontend development. By removing Luma’s bloat and delivering a fast, lightweight solution, Breeze has made development more efficient and enjoyable. While it’s not headless like Hyvä, it’s a fantastic alternative for projects that don’t require a headless architecture.
For technical managers and directors, Breeze offers a practical, cost-effective solution that balances performance, customizability, and ease of use. It’s not without its challenges, but for most Magento projects, the benefits far outweigh the drawbacks.
If you’re considering Swissup Breeze for your next project, it’s a solid choice that delivers exceptional results without the complexity or cost of other solutions.
Need help with implementation? I’m an independent ecommerce consultant and developer specialising in Magento and PHP frameworks. If you need help planning a new build or improving an existing site, get in touch to see how I can support your project.