...

Optimizing WPBakery’s Impreza Theme With Smush And Hummingbird Plugins

optimizing-wpbakerys-impreza-theme-with-smush-and-hummingbird-plugins

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 Martin, 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.”

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

In this post, we’ll cover the following:

  • Overview of Impreza Theme for WordPress
  • Testing Methodology for Optimizing Impreza Theme
  • Benchmark Results
  • Making Impreza’s Performance Even Better

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 80,000 sales to date and a 4.89/5 star rating from over 2,200 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 often goes on sale for $39 and comes with 12 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, power, 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.

Phil then incrementally enabled one component at a time. Google PageSpeed Insights was run three times (average of three runs kept) and a GTmetrix performance report was generated.

Here are Phil’s test results:

Impreza Theme- Test Results
The above tests were run independently by Phil Martin, a professional WordPress website developer and a WPMU DEV member. Phil’s test results with Impreza theme and incremental optimization methods.

As you can see from the above, Phil’s test results went from…

Before (Impreza only):

  • Google PSI mobile score: 27
  • Google PSI desktop score: 83
  • GTmetrix score: A – 92%-94%
  • GTmetrix *FCP: 1.1s
  • GTmetrix **TTFB: 0.8s

After (Impreza + Smush + Hummingbird + CDN/Caching):

  • Google PSI mobile score: 87 (222% improvement)
  • Google PSI desktop score: 96 (15.6% improvement)
  • GTmetrix score: A – 100%-95%
  • GTmetrix *FCP: 0.461s
  • GTmetrix **TTFB: 0.206s

* FCP = First Contentful Paint
** TTFB = Time To First Byte

After running the above tests, here is the setup that Phil found to perform the best:

  • Impreza performance settings: ALL enabled.
  • Smush: ALL recommended + CDN + WebP (Pro-only features). Additionally, make sure the WPBakery Page Builder integration is enabled in the Smush > Integrations menu. This will smush custom-sized images resized using WPBakery’s Page Builder editor.
  • Hummingbird: ALL recommended + CDN + Asset Optimization Automatic/Speedy.
  • Caching: EITHER Hummingbird Pro or serverside FastCGI.
  • Impreza + WPMU DEV hosting on their own still do a good job out of the box. 83/100 on PageSpeed Desktop and an A grade (92%; 94%) on GTmetrix is impressive, but obviously the 27 score on Mobile is not desirable.
  • Impreza’s built-in performance optimizations is very effective. It improves both Google PageSpeed scores into the 90s, which is especially important for Mobile.
  • Smush doesn’t appear to make much of a difference to performance scores, but it will reduce your overall page load size where images are present.
  • Hummingbird cache appears to be on-par to FastCGI serverside cache.
  • Hummingbird Pro CDN appears to be on-par with letting the server provide CSS + JS via FastCGI caching.

Here are some additional valuable insights that Phil provided after running the tests:

  • “The #1 thing that completely ruins these scores is Google’s reCAPTCHA javascript.”
  • “I am honestly surprised at how well the theme + WPMU DEV Hosting w/ FastCGI serverside caching performed. TTFB of 0.224s and 92/98 on PageSpeed Insights without additional plugins is incredibly impressive. Smush Pro is then an extra layer of optimization on top by serving super-optimized image files. Hummingbird Pro can relax a bit and not have to worry about serving cache. Rather, it can focus on setting all our expiry headers, monitoring uptime and serving CSS/JS from CDN.”

Optimize Impreza with Smush and Hummingbird and you can have your cake and eat it too!

Making Impreza’s Performance Even More Imprezive

In Phil’s own words:

“Having used many of the top ranking multipurpose themes in the past (Avada, Enfold, Etalon, Extra, Jupiter, Salient, etc.) I have never had as much success building modern, minimalist, efficient and hyper-performing websites as I have with Impreza. Trading pre-built template and demo libraries for thoughtful design, extensive customizability and ridiculous performance is worth it to me.

And look, the results don’t lie: not a single test dropped out of the A grade on GTmetrix.”

Impreza theme - performance results.
You don’t need to be a Canadian like Phil to get all “A”s – just install Smush and Hummingbird… WPMU DEV’s “moose’t-have” optimization plugins.

So, there you have it!

Impreza is not only a fast-loading WordPress multi purpose theme powered by the WPBakery page builder but its performance can be improved using Smush and Hummingbird optimization plugins with serverside hosting features like CDN and FastCGI enabled.

To access our entire suite of Pro plugins, blazing-fast managed WordPress hosting, and expert 24×7 help and support for all things WordPress, become a WPMU DEV member today with our 7-day free membership trial.

Contributors

This article was written in collaboration with:

Capital Web Design - Ottawa Web Design

Phil Martin –  Capital Web Design.  Phil uses his twenty years of web design experience to achieve one goal: give back to his hometown by building modern websites for businesses and nonprofits in the Canadian capital!

***

Note: We do not accept articles from external sources. WPMU DEV members, however, may contribute ideas and suggestions for tutorials and articles on our blog via the Blog XChange.

Source: wpmudev.com

Discover more from WIREDGORILLA

Subscribe now to keep reading and get access to the full archive.

Continue reading