Saturday, November 23, 2024
HomeWordPress TipsOptimizing WPBakery's Impreza Theme With Smush And Hummingbird

Optimizing WPBakery’s Impreza Theme With Smush And Hummingbird


Impreza is a popular WPBakery-based theme with a flavor all of its own. In this post, a WPMU DEV member shares how to optimize this multipurpose WordPress theme for top speed and best performance.

As Phil, WPMU DEV member, web developer, and owner of Canadian-based web design company CapitalWebDesign.ca recently shared with us, “there is a lot of interest in optimizing WPBakery-based themes these days, so I thought I’d provide my 2¢ on the WPBakery-powered theme I have been using lately, Impreza.”

Impreza is a multi-purpose WordPress theme that uses WPBakery.

In this post, we’ll cover the following:

Overview of Impreza Theme for WordPress

Impreza is a premium WordPress theme that uses WPBakery. It was developed and maintained by UpSolution and is currently available from ThemeForest, where it ranks as one of their best-selling themes with over 88K sales to date and a 4.89/5 star rating from over 2.4K user reviews.

Best-selling WordPress themes on ThemeForest
Impreza is one of the top-selling WordPress themes on ThemeForest.

The theme’s license normally costs $59 (but occasionally goes on sale for $39), and comes with 6 months of support.

As Phil states: “They push big updates every month on average. Seriously, check out this changelog and try to convince me that isn’t the best changelog layout/styling you’ve seen in a long time.”

The Impreza theme uses WPBakery but with their own flavor thrown in. It’s an incredibly modular theme that decouples many of the structural components, including:

  • Grid layouts: Impreza lets you customize how you display groups of data such as posts, custom post types like testimonials or products, image galleries, etc. You can effectively customize any element in a grid. Check out their grid layout doc page for a glimpse.
  • Page blocks: The theme provides reusable blocks. This lets you edit everything in one place and the changes are then reflected everywhere you have added the block. Use these for footers, call to actions, etc.
  • Page templates: You can build a template using WPBakery that can be applied to any post type or page. Use these to have different footers for posts versus pages or to support a different template based on the post type (e.g. a cooking recipe vs a product review in a blog).
  • Header builder: Impreza provides a unique, powerful, and very intuitive header builder. Check out the header builder doc page.
Impreza Grid Layout
Impreza lets you effectively customize any element in a grid.

Some additional points to note about Impreza:

  • It natively supports most of the ACF custom fields (doubly great if you use our SmartCrawl plugin for SEO, which also supports ACF).
  • 100% compatible with WPML language translation plugin.
  • Built-in performance optimization options (including a one-click asset optimization for WPBakery elements: only include CSS + JS for elements that exist on your pages)
  • Built-in maintenance mode, button builder, custom image sizes among others
  • Ability to import individual demo pages or copy in specific rows from specific demo pages. This is a great quality of life option: when you see a specific row in a demo that you’d like to replicate, just copy + paste.
  • Each license is valid for 1 production site and 1 development site (forces maintenance mode). A licensed site provides you with theme white label, demo import, one-click theme updates (without Envato Plugin), addons/recommended plugins (e.g. Smush)
  • Note: Running a license per site is not necessary and you can rotate a license where you need to install addons or import demos. Theme updates are still available through Envato Plugin for unlicensed sites, too. Also, while your support is active, the theme developers will help you with pretty much any theme customization and, according to Phil who uses the theme extensively, their support staff are incredibly knowledgeable.

So, Impreza is a great WordPress theme to use, especially if you love using WPBakery.

What we really want to know, however, is this:

  • Do sites created with Impreza load fast and perform well?
  • Can we make sites created with Impreza load even faster and perform even better using our optimization plugins Smush and Hummingbird and managed WordPress hosting?

For these answers, let’s turn to Phil’s…

Testing Methodology for Optimizing the Impreza WordPress Theme

Impreza is very performance-oriented, as evidenced by some of the advanced theme options they provide.

Impreza - Advanced Theme Options.
Impreza offers advanced theme options to help improve performance.

To see how well Impreza can be made to rank on Google PageSpeed Insights and GTmetrix, here is Phil’s testing methodology in his own words:

(Editor’s Note: WPMU DEV members like Phil get access to the Pro versions of our plugins automatically as part of their WPMU DEV membership but you can follow the same methodology shown below using the free versions of Smush and Hummingbird.)

  • Use a real website: The website I used in this benchmark is a real, fully-built website. Although it’s not yet live to public traffic, it’s running WPML and is full of real content including images.
  • Hosted on WPMU DEV: A simple bronze-level server located in Toronto, Canada. We’ll be testing FastCGI serverside caching
  • Smush Pro: Image optimization is important to this site as every blog post has a featured image. This website is likely to grow to 10,000+ blog posts over the next 5 years, so we need to make sure we optimize from the start.
  • Hummingbird Pro: Test to see if asset optimization works with Impreza.
  • Caching: We don’t need redundancy in caching solutions, so either Hummingbird Pro caching or serverside FastCGI caching was used.
  • Impreza performance settings: keep “http/https” in the paths to files, disable jQuery migrate script, move jQuery scripts to the footer, dynamically load theme JS components, disable extra features of WPBakery Page Builder, disable Gutenberg (block editor) CSS files, optimize JS and CSS size, and merge Google Fonts styles into single CSS file.

Benchmark Results

Tests were performed by starting with both plugins disabled, Impreza performance settings off, and serverside cache disabled.