It’s here. As of Hummingbird’s latest release (3.0) you can now integrate and control Cloudflare’s powerful APO feature straight from your Hummingbird dashboard.
A lot of awesomeness came with Hummingbird 3.0 (check out the full feature list and changelog), including an exciting new integration with Cloudflare’s Automatic Platform Optimization (APO) feature.
Why is it a big deal and how can it benefit you or your clients? You’ll find out in this article.
You’ll also learn how easy it is to activate and control this feature, right from your Hummingbird dashboard, and how using it alongside our hosting can result in even better performance.
Take your WordPress site’s performance to the next level with APO from Cloudflare.
Cloudflare’s Automatic Platform Optimization (APO) is an additional cache feature that serves all site content from their network (including 3rd-party scripts), ensuring that your site is blazing fast.
If your business depends on successful, fast loading websites, it’s hard to ignore the benefits of APO.
The best news? It now integrates seamlessly with our Hummingbird performance plugin.
It used to be that in order to handle Browser Caching and APO from Cloudflare through your site, you had to activate their plugin.
However, this new integration changes all that, and installation of the Cloudflare plugin is not needed.
It also means you can avoid a separate login to Cloudflare every time you make a change on your site.
With the new Automatic Platform Optimization integration in Hummingbird, Cloudflare can also cache dynamic content and third-party scripts, so the entire site is served from cache.
Put them all together and it’s lightning in a bottle. The best part is, both Hummingbird and Cloudflare can be used completely free.
Hummingbird’s newest release takes it from rock star to rock legend.
Before we get to activating Cloudflare’s APO, let’s first take a look at how to integrate Cloudflare with Hummingbird.
Cloudflare Integration Setup
In Hummingbird, the Integrations feature enables you to connect third-party providers to gain more control over your caching.
The first step in doing this is routing your DNS to Cloudflare, which you would do through your account on their website. Once propagation completes, your traffic is now routed through Cloudflare.
From Hummingbird’s dashboard, click on the menu item Caching, then Integrations. Click on the blue plus sign to the right of Cloudflare, under Available Integrations.
Cloudflare Integrations settings are in the Caching menu in Hummingbird.
In the popup window, enter your Cloudflare account email address and Global API Key.
Hummingbird provides a quick guide on how to locate your Cloudflare Global API Key.
If you get an error message when trying to connect, it’s likely due to recently adding DNS information through your Cloudflare account, and the settings not having propagated yet.
Give it a few minutes and try again.
Make sure you give your DNS records in Cloudflare the chance to propagate if newly added.
Now that we’ve officially joined the happy couple, let’s see what’s on the menu.
Automatic Browser Caching
Connecting your Cloudflare account through Hummingbird’s Integrations will automatically configure your Browser Caching settings.
You can adjust if needed under the Browser Caching tab by clicking the Configure link.
Get one-click configuration for your Cloudflare browser caching via Hummingbird’s integration settings.Server Type, Expiry Time, and Cache Clearing can all be handled through Cloudflare’s browser caching integrations in Hummingbird.
And now… drum roll please… away we go to APO!
Enable Automatic Platform Optimization (APO)
First things first, APO for WordPress does come with a monthly cost (see latest Cloudflare plan prices) on Cloudflare’s Free plan, and is already included in their Professional, Business, and Enterprise plans.
You can purchase the APO right from Hummingbird’s interface, click on “here” beneath the APO header (see screenshot below).
This will open a link to Cloudflare’s site, offer payment options, and take you through the checkout process. You can go directly through CF’s website for this process, if you prefer.
To enable their APO feature, you need to purchase a plan through Cloudflare.
After you’ve acquired the APO service, you can turn the Enable APO switch ON, under Automatic Platform Optimization, from Hummingbird’s Dashboard > Caching > Integrations.
Once enabled, you can also set an additional option inside to cache content, according to the device types used by your site visitors.
Cache by device type ensures only needed assets are cached and delivered to the user’s browser, depending on the device used (mobile, tablet or desktop).
Click the Re-Check Status button at any time to ensure that data displayed is up to date.
Alternatively, you can disconnect the Cloudflare integration from your site at will by clicking the Deactivate button.
Be aware that Cloudflare will still handle your browser caching, as your traffic is routed through them, but you’ll no longer be able to manage those settings from WP, and will have to do it directly through Cloudflare.
Simple one-click settings for all Cloudflare integrations are available via Hummingbird’s dashboard.
Also keep in mind that WPMU DEV’s 5-star support team is available for assistance, 24/7, should you run into any issues or questions during setup.
DJ Hbird keeps the Cloudflare party going.
(Cloud)Parting Thoughts
No matter your site’s purpose, getting and keeping optimal loading speeds is mission critical.
Hummingbird’s seamless integration with Cloudflare delivers an incomparable experience.
If you want to really blow your page loading speed out of the water, it’s worth considering a paid service from Cloudflare, and taking advantage of all that their APO offers.
Add a trusted, fully dedicated hosting solution (WPMU DEV hosting provides one of the best individual WordPress site experiences, backed by Digital Ocean), and your site can experience warp speeds.
Give it a go yourself with our 7-day free trial. You’ve got nothing to lose, and everything to gain.
If you engage the above trio, you get performance, speed, protection, and world-class support, all with the ease of a single source of input via Hummingbird’s streamlined dashboard settings.
Dynamic content naturally comes with a performance downside. In this article learn how to optimize Slider Revolution to create both beautiful and efficient animations.
Pro level visuals that look amazing and are fully responsive, can often put a damper on page speeds.
But no fear, you’ll soon see how easy it is to have the best of both worlds (the sizzle, without the slowdown) with the help of built-in Slider Revolution settings, plus our Smush, Hummingbird, and hosting tools.
Skip ahead.
Feel free to skip ahead to any of the topics we’ll be covering:
Plugins on deck are Slider Revolution (SR), Smush, and Hummingbird*.
(If you’re using our hosting, you will also have the WPMU DEV Dashboard plugin, as it’s automatically installed on sites hosted by us.)
Turn on CDN in Hummingbird
(cost associated, Hummingbird Pro)
Turn on FastCGI in the Hub
(cost associated, WPMU DEV Hosting)
Run speed tests after each of the above steps (free sites)
Particulars
The Pro versions of Smush & Hummingbird will be installed on sites hosted by WPMU DEV.
To mirror non-pro versions of the plugins, my initial tests were conducted with the Pro features disabled*.
Hummingbird optimization uses different types of caching and compression features on sites. Page, Gravatar, and RSS caching were disabled.
WPMU DEV turns on browser caching and GZip compression by default; this is standard for most hosts. These will remain on during our tests, since we can’t turn them off without impacting other settings.
As we’ve mentioned in other articles of our optimization series, please note that because of the variances inherent to each element, no one will have identical results.
Geographical locale, media library size, hosting provider – all paint part of the picture using very different brushstrokes.
No matter your particular site environment, you are bound to see marked improvement with this process.
We are going for beauty and brawn, so Slider Revolution will not only be visually stunning, but a highly functional and fast flying site.
How To Sizzle, Without The Slowdown
First up, let’s install Slider Revolution on a fresh WP site, with no other pages, posts, etc.
After installing, select a New Module from Template, from the SR dashboard. I chose “Mini Website”, which required the addition of the Particles Effect add-on.
I tweaked some settings, to personalize the content a bit. There’s so much you can play with here, I could’ve gotten lost for hours.
But on to the task at hand! A quick copy & paste with shortcode, and my landing page is revolutionized. :)
How YOU doin?
Time for our initial speed tests.
Nothing to brag about, but that’s only our base line speed.On the mid to low end, but this is pre-optimization; we’ll bring that way up.
There is currently a file size optimizer feature baked into Slider Revolution. We’ll try that and see if it gives us a bump.
Core JS and CSS are already optimized by default.
The file optimization screen lists the module’s images that can be optimized, along with a slider to make adjustments. (See SR File Size Optimizer Documentation.)
SR’s built in file size optimization offers three methods of activation.
After making some adjustments, let’s do a speed test to check for improvements.
No change from our last speed test score.A hair better than our last score.
There was a modicum of improvement with that, which we’ll follow up with some exciting news:
We have it on good authority from ThemePunch that Slider Revolution’s next version release will have built-in optimizations for Smush! (Follow ThemePunch for more on that.)
There are some overall tips and tweaks you can gain strides with, which we’ll cover a little later.
But to really enhance your site speed using Slider Revolution, you’re best served by top quality hosting, and plugins specifically designed for optimizing.
By incorporating Smush and Hummingbird, our world-class (and free!) optimization plugins, you’ll have pagespeeds humming in no time.
Let’s install and activate Smush.
Smush is our user’s choice, award winning, and benchmark tested image optimizer.
Upon navigating to the Smush dashboard, you should be greeted with the quick setup wizard. These settings include: Auto Compression, EXIF Metadata, Full Size Images, Lazy Load, and Usage Data.
Here’s what each feature does:
Auto Compression ― automatically optimizes new image uploads, so you don’t have to do each one manually.
EXIF Metadata ― strips camera settings from your images, helping reduce file size. (Don’t worry; it won’t strip SEO metadata).
Full Size Images ― compresses your original full size images. (Note: it stores copies of your originals by default, in case you ever want to revert back. This feature is Pro only.)
Lazy Load ― stops offscreen images from loading until a visitor scrolls to them.
Usage Data ― lets our designers gain insight into what features need improvement. (Your personal data will never be tracked.)
Go ahead and run through each screen, leaving default settings on. (Allowing Usage Data will help towards the functionality of future versions of the plugin, but if you have any qualms about opting in, leave it off.)
Smush is ready, willing, and able to bulk compress.
Once the wizard completes, the dashboard will reflect how many images could use compressing. Click the Bulk Smush Now button to activate her super power.
What do our image optimization stats look like now, Ms. Smush?
157 images smushed, saving 5.5 mb. Smushing like a champ!
Let’s see how much that lightened the (page) load, and do our speed tests again.
That’s an olympic jump! More than ten points.This is the kind of “B”oost you love to see.
Time to kick things into high gear, and let Hummingbird flit on the scene.
Hummingbird scans your site and provides one-click fixes to speed up WordPress in a flash.
After installing and activating Hummingbird, going to the dashboard will activate another quick setup wizard. She will suggest running a performance test, which is exactly what we want to do.
Once the test is complete, you’ll get a notification letting you know. The dashboard shows us the score from the performance test.
A score of 86 is good, but we’ll easily raise that, and our page load speeds along with it.
Hummingbird displays a list of Score Metrics that were rated during the performance test.
Your overall performance score is calculated on these listed metrics, while the pie chart represents the weight of each metric in the overall score.
For some performance issues, Hummingbird’s own features can be activated or tweaked to address them.
In other cases, Hummingbird will identify the issue, with the fix required in a separate plugin (e.g., Smush Pro).
When a plugin is not the best solution, and a bit of code editing is required, Hummingbird provides specific instructions for how to fix it.
Additional metrics called Audits separate issues into categories of Opportunities, Diagnostics, and Passed Audits.
Opportunities are basically color-coded alerts. Yellow indicates a mild to moderate issue, and Red means the issue is impacting performance to a greater degree as compared to other sites.
In this performance evaluation, Hummingbird has indicated that I have an item in Opportunities. It’s only a single instance, and not of major impact, but I am going to address it anyway.
To resolve Opportunities, click on any alert row, and it will display:
a detailed description of the issue
a list of specific assets involved
step-by-step instructions on how to resolve the issue
Opportunities for speed improvement (with detailed fixes), provided by Hummingbird.
I have nineteen Passed Audits (sweet!). Audits provide a detailed look at every aspect of your site’s performance capacity.
Even Passed Audits have explanations and fixes for each item listed. Again, this info is accessed through the corresponding row’s arrow dropdown.
Hummingbird considers Audits “passed” when the score is 90/100 or higher.
Lastly, I have three Diagnostics. These provide additional information about how your page adheres to best practices of web development.
To resolve any Diagnostics, click on the dropdown arrow to the right, under the header, and follow the instructions provided beneath How to Fix.
No googling required; Hummingbird spells everything out for you on any cited issues.
Once you’ve made all of your fixes, have Hummingbird run another performance test, so we can check score improvement.
A little birdie told me we gained six points. Huzzah!
Now we’ll do some asset optimization. From the left menu bar, choose Asset Optimization. Click Automatic, and make sure the Speedy slider is ON.
This setting not only compresses your file, but also auto-combines smaller files together, which helps decrease the number of requests made when a page is loaded.
Set your Asset Optimization to Speedy & Automatic for a performance boost.
Of note: when you’re in Automatic mode, Hummingbird auto-detects newly added plugin and theme files and optimizes them for you, but won’t remove any old files from a plugin or theme that was removed.
This is to avoid conflicts and issues, and why it’s recommended to re-check files on occasion ― so everything remains in sync.
Ok, time for some speed testing.
From the upper 70’s to the mid 80’s. Definitely making measurable gains.Better and better, on the way to best.
Awesome scores! There’s another tool we can use… let’s turn on the CDN in Hummingbird.
From the same Asset Optimization page, move the WPMU DEV CDN slider to ON (it will turn blue).
Set CDN to ON, and Crank Dat Number.
Let’s run our speed tests again.
We’re on the cusp of the 90th percentile.Don’t stop B’lieving! Performance and structure scores continue to rise.
We could finish here and be perfectly happy campers. However, I’ll throw one more log on the fire, by tweaking a setting through my WPMU DEV hosting.
Turning on FastCGI through WPMU DEV’s hosting Hub.
Bustin that move deserves a new round of test scores!
Woohoo! We’re finally in the endzone.A-maze-ing.
I think we’ve earned a victory lap!! Before I get carried away with the checkered flag, I want to share an earnest thought on continued testing.
If we were to run speed tests randomly going forward, slight variances would be expected, as none of the elements are truly static.
But barring extreme circumstances, you shouldn’t see any significant dips in page loading time, with all of the tweaks we’ve put into play.
Wheee! Slides are fun.
Making Slider Revolution(ary) Speed Gains
Slider Revolution is definite eye candy (of the designer chic variety, not bubble gum dispenser dross). Their pricing is reasonable, and tiered to the number of sites it will be used on.
If you want to make jaws drop and be remembered for powerful visuals, without giving up valuable page load speed, Slider Revolution – optimized with Smush & Hummingbird – can give you the best of both worlds.
Not only will it make an impression, but page load speeds will fly, giving your users a first-rate experience.
As I mentioned earlier, there are some components you should always consider when it comes to getting and maintaining optimal speed on your site.
They are:
Be more minimalistic in your theme design
(You can go fancy, just don’t overstuff content, taxing speeds.)
Delete plugins that are old or no longer being used
That last one can really make a night and day difference.
Make sure your hosting provider has a good reputation, and is shown to be fast and reliable. (WPMU DEV hosting plans provide solid, fully dedicated WordPress site hosting, backed by Digital Ocean.)
Quick note regarding CDN as it applies to our plugins: the settings for the image CDN are located in Smush Pro, while the web object settings are in Hummingbird Pro.
Now you can sit back and relax, while your website flies. Ah… that’s a good feeling.
If you follow IT-related news, you may recall the March 2021 fire that destroyed one of Europe’s largest hosting provider’s data centres in Strasbourg, France, knocking out major websites around the world.
Does your website disaster recovery plan include total hosting backup redundancy? Source: ChannelDailyNews.com
In this post, we explain why this will not happen to sites hosted on WPMU DEV’s managed WordPress hosting and how we guarantee that if your site should ever fall down, you will instantly get it back up.
Automated Hosting Backups for Ultimate Peace of Mind
Every WPMU DEV hosting plan includes access to our world-beating automated (and manual) hosting backups system.
So, what exactly does this mean?
In a nutshell…whether you host one or one thousand sites with us (single installs or multisite) on any plan, your backups are completely and automatically safe, even if the worst data-center-burning-down circumstances were to happen.
Your hosting will be instantly and automatically configured for nearly instantaneous and extremely space-efficient hosting backups using the latest in advanced server-based technology, giving you ultimate peace of mind in the form of:
Nightly incremental backups.
Automated incremental hosting backups prior to critical events like WordPress updates, pushing staging sites to production, selecting a new primary domain, and updates using our automated schedule plugin.
A full backup of your site created every 15 days (automatically, of course!)
Various options available to create manual and cloud back ups of your site at any time.
Fast, one-click restores and exports.
No additional fees for hosting backups or their storage.
So, if anything happens to your site, you can get it all back (everything up to the last backup) quickly and easily with just one click.
But…what if the data center burns down?
Ahh…this is where our hosting backup system really shines.
“A copy of the most recent backup is stored locally to speed up subsequent backups. All other backups are encrypted and stored in a remote datacenter in the same general region as your site (USA, EU, Canada, etc) and are redundantly stored on multiple devices across multiple facilities.”
Do your due diligence and research some of the top hosts and you’ll discover that while most provide site backup services, not all offer remote redundancy and automated backup storage on multiple devices across multiple facilities.
WPMU DEV does.
We give you unlimited backups stored for 30-days with no extra backup storage charges.
Our hosting backups are managed offsite by AWS so that in the unlikely case our data centers burn down or disappear beneath the waves your backups will still be safe.
Manual Backups for Extra Protection
In addition to our automated hosting backup methods, we also give you several options to manually backup your site(s) files and data, including:
Easily create SFTP or SSH accounts in The Hub and use these accounts to back up your sites manually at any time.
One-Click Backup Restores and Exports
Exporting and restoring your backups is just as easy as creating them.
Simply go to The Hub, select your site, and click on the Backups tab to bring up a list of all your backups, then click on the little arrow next to the backup you’d like to export (download) or restore.
Select the backup you’d like to restore from the list of backups…
This will bring up the Backup Details screen. Click on the Restore button to restore your backup or the vertical ellipsis to view your options.
We’re just one click away from restoring or downloading our backup.
Select an option, click a button…and you’re done!
Click Restore and you’re done!
Your backup files and data will be automatically restored to your site or generated for export and sent to your email for downloading.
See our documentation for step-by-step instructions on how to set up an SSH user, log into the server and use custom commands to restore your backups via WP-CLI.
All the Backup Protection You Need Upfront!
With WPMU DEV, your sites are safe, secure, and protected right from the “get-go”.
Most of our users choose to take advantage of our membership option. This includes access to:
World-class managed WordPress hosting and world-beating hosting backups for all your sites.
24/7 expert technical support for everything WordPress related.
The Hub (our all-in-one unlimited site management tool).
A complete suite of Pro plugins, covering everything from security, optimization, and SEO, to site migration, marketing, and analytics.
And much more (hint: how about getting a complete WordPress business in a box).
Use The Hub to manage hosting backups for unlimited sites.
Our plugins include Snapshot Pro and Automate, which give you additional backup features and automation for complete peace of mind.
Snapshot Pro supports various third-party backup storage locations (Amazon S3, Google Drive), giving your hosting backups even greater protection.
Use Snapshot to backup and restore WordPress data to third-party storage destinations.
Automate lets you schedule and create a new backup before every theme, plugin, or core update…automatically!
Schedule automated backups before updating your site’s core WordPress software, plugins, and themes with Automate.
We Got Your Back(up)
Even the most die-hard fan of dystopian fiction would be hard-pressed to imagine a situation where our hosting backups system would not be able to immediately recover their site’s last backup. Unless of course, they are not hosted with WPMU DEV…and forget to make a backup!
Learn more about our hosting backups in our hosting documentation or contact our team if you have any questions. If you’re new, check out our unbeatable WordPress hosting service for yourself with a 7-day membership trial and discover what ultimate peace of mind really means today.
Astra is a lightweight theme that’s built for speed. Still, we took its Google PageSpeed Insights score from an impressive 96 to a stellar 99!
We’ll show you how it’s done by boosting Astra’s performance even further with the help of our free optimization plugins, Smush and Hummingbird.
The Astra theme is one of the most popular WordPress themes of all time, used by over 1.6 million websites. It was made as a lightweight foundation for any type of WordPress site. It typically clocks in at below 50 KB in file size and has zero jQuery dependencies, making it so it doesn’t interfere with time for page loads.
That’s incredible! But there’s still more you can do to get your Astra site close to perfect optimization.
In this article, we’ll take a look at…
How We’ll Do It
It’s done with a little Astra optimization and the help of our plugins, Smush and Hummingbird. Plus, a dash of good hosting.
And in case you didn’t know, Smush is our 5-star image optimization plugin. She has over a million active installs and can optimize images, lazy load, resize, bulk smush, and compress all of your images for enhanced speed.
Smush is our answer to WordPress image optimization.
When it comes to speed, our own 5-star rated Hummingbird runs the gamut of making your site super fast with adjustable enhancements of file compression, minify for CSS & JS, lazy load comments, cache, and much more. She has over 100K active installs and continues to grow in popularity daily.
Hummingbird is here to help make your site hum.
Of course, we have to mention that both Smush and Hummingbird are free to use!
We’ll create an Astra website using Astra Pro and then optimize it to its fullest potential. There is a free version of Astra as well, but we decided to go pro as we figured this is the version that most professional web developers would use.
To follow along, you’ll need Astra Pro, Smush, and Hummingbird. If you’re not familiar with Astra and want to try it out first, you can also use the free version. However, the results may be significant considering performance perks, such as CSS file generation.
By the end of this article, you’ll have your Astra site fully optimized for performance!
Astra Overview and Test Layout
If you’re not familiar with Astra, it would be surprising. As I mentioned before, it is used on over 1.6 million websites and counting.
As for Astra itself, it’s an amazingly customizable WordPress theme that offers tons of features. For example, there are over 150 templates of pre-built website designs, making it easy for non-developers. In addition, everything can be adjusted (e.g. colors, style, etc.).
Plus, it comes with tons of free plugins for use, including Custom Fonts, Astra Bulk Edit, Astra Hooks, and more!
When it comes to speed, according to developers, with it being so lightweight, Astra websites should load in less than half a second when using default WordPress data.
Test Layout Design
With all of the premade websites that Astra offers, it’s hard to choose what’s best for this article. After all, we can’t test ALL of them in this post (that would take a while).
Astra works with your favorite page builders, including Elementor, Divi (requires Divi Builder Plugin), Beaver Builder…even Gutenberg.
We’re going to go with the Mountain template for this article. It has an excellent combination of images and text, so it seems like a winner to me.
You can locate the Mountain template from the dashboard under Starter Templates and Gutenberg from the template dropdown. Also, there is a search bar to find it.
The mountain template seems like a great option.
Now we have a nice view to work with :)
The mountains make for a pleasant working environment.
Since we have our template for our website, let’s move on to…
Optimization Test Set-Up
This test is starting with a practically blank WordPress canvas to work with.
The website has no plugins installed except the WPMU DEV Dashboard, Astra Pro, and Starter Templates. Starter Templates is from Brainstorm Force and can be activated directly from the Astra dashboard in WordPress so that you have access to the Mountain template we’re using.
The free versions of Smush and Hummingbird. Please note that with WPMU DEV hosting, it will install the Pro versions. For this example, I disabled the Pro features.
I’m using WordPress version 5.7.2.
PHP Version is 8.0
Page Caching, Fast CGI (Static Server Caching), and CDN are disabled to start with. Also, Hummingbird optimization uses several types of caching and compression features on WordPress sites, so Page, Gravatar, and RSS caching were disabled.
Chrome (desktop) browser.
As for how this test is performed, it’s a step-by-step process that looks like this:
Install Astra Pro and accompanying plugins, as I mentioned above, on a clean WP site.
Optimize Astra.
Run a speed test.
Activate Smush and set up recommendations.
Run another speed test.
Activate Hummingbird and set up recommendations.
Run another speed test.
Activate hosting features.
Run a final speed test.
For the speed tests, I will be using Google PageSpeed Insights. When test results are the same throughout testing (which is the case in this article) after several runs, I’ll include a screenshot.
Keep in mind that EVERY site will be a bit different. It can’t be stressed enough that your geographical regions, the size of your media library, your host, and other factors will determine different outcomes.
We’ve also mentioned this before in some of our previous performance optimization articles, check them out if you haven’t yet:
But regardless of your WordPress setup, you still achieve results with site optimization using this process.
With that being said, let’s begin!
A Speed Test Without Optimization
When it comes to optimizing your WordPress site, it’s always recommended to start with your theme. So, we’re going to start here.
As I’ve touched on in this article, Astra comes pretty well optimized right out of the box! One of their top priorities is speed, and they’re constantly improving.
There’s not much you can adjust or change otherwise. The one recommendation that Astra Pro has is to enable CSS File Generation.
When enabled, inline CSS will not show up in the Source Code anymore and instead be added as a separate file. CSS File Generation will make the browser caching faster and improve your site’s response time and loading speed.
It’s easy to do right from the Astra dashboard. Simply click Enable File Generation.
One-click is all it takes!
That’s it! Once we have that enabled, we’re ready for our first speed test.
First, the score for desktop…
Nice! 96 is a really good score.
And now for mobile…
88 isn’t horrible, but we can do better.
As you can see, these are outstanding scores! However, there’s minor room for improvement, and more can be done to get even closer to that perfect score and keep our Astra site optimized for the long term.
Optimization with Astra and Smush
Since I already talked about what Smush can do regarding image optimization, I won’t boast any further. So instead, you’ll see for yourself how she can help improve this page speed score closer to perfection.
Smush is ready to tackle a good speed score and make it even better!
The first part of the process is installing and activating the plugin.
Right away, Smush lets me know how many images are ready to be smushed. This can be handled in one click with Bulk Smushing. Just tap Bulk Smush Now.
In this case, 21 attachments need to be smushed.
It only takes a few moments, and then she’ll pull up the results.
We saved 10MB with her help.
You can see that Smush has a total savings of 10.0MB/33.3% and 821 images Smushed (a lot of them from the initial activation).
As you add more images to your Astra site, she’ll keep up her super smushing powers, so it keeps the savings going.
Plus, Smush has a setup wizard that includes Auto Compression, EXIF Metadata, Full-Size Images, Lazy Load, and Usage Data.
Go through and leave the default settings on. Of course, you can always adjust or turn off any settings if you’d like.
Let’s run another test for Google PageSpeed Insights for desktop…
Whoah! A 99.
And mobile…
This was cranked up quite a bit, too!
The scores went up even further with Smush. Google PageSpeed Insights went from 96 to 99 on desktop and 88 to 94 for mobile.
I mean, we could stop here and be perfectly happy with these scores. It doesn’t get much better! However, let’s keep moving. More can be done with…
Optimization with Astra and Hummingbird
We can’t talk optimization without our own Hummingbird. She does amazingly well at optimizing text compression, preload key requests, caching, and more.
The next step of the process is installing Hummingbird and getting her to work on even further optimization.
Hummingbird is here to take optimization to a whole new level.
To kick things off, once installed, she’ll ask about running a Performance Test. Do so by clicking, you guessed it, Run Performance Test.
Running a test is quick and easy.
Like Google PageSpeed Insights, Hummingbird calculates a performance score after a test. In our first test, we scored a 97/100 for desktop and a 93/100 for mobile, with two opportunities to check for improvement. Not bad!
A look at our score for desktop.
The opportunities for improvement consists of:
Reduce initial server response time
Eliminate Render-blocking resources
Resolving opportunities is just a matter of clicking on any alert row. From there, it will display a detailed description of the issue, a list of specific assets involved, and step-by-step instructions on how to resolve the issue.
Once we address the issues and know a few opportunities to improve, we’ll go ahead and run Hummingbird’s Asset Optimization Test. We’ll do this with Page Caching and CDN disabled.
The Asset Optimization Test is done from Asset Optimization and by clicking Re-Check Files.
The re-Check Files button is all you need to tap.
Once done, she has a list compiled of CSS and JavaScript files that can be optimized.
Here’s a look at the CSS files.
You can go through each one individually or set up Automatic and make sure the Speedy slider is On.
Setting Assets up automatically will compress and organize them for you.
Having Automatic enabled lets Hummingbird auto-detect newly added plugin and theme files and optimizes them for you. Additionally, she won’t remove any old files from a plugin or theme that was taken out. This avoids conflicts and issues.
Now that we’ve tested our site with Hummingbird let’s run some new tests.
First, we’ll check it with Google PageSpeed Insights. Here’s the score for desktop…
You can’t get any better, right?
And here’s the PSI mobile score…
This is an amazing score, too!
These scores are excellent! I’d be happy leaving well enough alone; however, there is…
Further Boosting in Hummingbird and Your Host
Yes, you heard that right. We still have a little bit more that can be done to optimize your Astra website.
One thing is turning on the CDN in Hummingbird. From the Asset Optimization area, just turn the CDN slider on. Whether you’re hosting with us or another provider, this feature is available to you.
It’s a quick hop into The Hub to make FastCGI happen.
If you ARE hosting with us from The Hub, you can turn on FastCGI by enabling Static Server Cache. Go to your website, Hosting, and then Tools. Just click it to ON, and you’ll be all set!
Click this ON from The Hub.
Now that we’ve enabled these optimization features let’s run some final tests…
The desktop is looking almost perfect.Mobile is looking good, too!
We’ll check out what Hummingbird has to say, too.
A 99? I’ll take it!
As you can see, though Astra starts with a great score, you can make it even better with a few tweaks. Plus, all of these optimization options are for the long term, so as your site grows, your optimization stays the same with a bit of TLC and monitoring.
This site started with a Google PageSpeed Insights score of 96 for desktop and 88 for mobile. We were able to get the scores up to 99 for desktop and 95 for mobile.
We can conclude that the most significant improvements were mobile, where the desktop improved a little, but not much considering how optimized it was already.
Every site will be a bit different. However, following this optimization path will help your Astra site, and you should see improvements.
Other Optimization Tips
This isn’t a typical site that was full of a ton of content, so as you grow your Astra site, here are some other things to consider to keep it optimized:
Delete unused or outdated plugins and themes
Fix broken links
Have a great host
Keep images optimized
Keep caching enabled
Update your WordPress, theme, and plugins as needed
Monitor your site’s performance with the help of a WordPress site management, like The Hub
Astra is a superb lightweight theme for optimizing your site, and obviously, it doesn’t take much. The minor enhancements we covered can boost your site’s speed to its full potential and keep it that way.
Plus, you don’t need to spend a lot of time or money to make good Astra optimization even better. Smush and Hummingbird are accessible to you, and there are plenty of budget-friendly options (e.g. WPMU Hosting — wink, wink) that can get the job done when it comes to hosting.
If you don’t have Astra, be sure to pick up the free or Pro version and give it a try. Combined with our plugins and some good hosting, you too will be saying, “Astra la vista” bad optimization!
This add-on to our popular 5-star Forminator plugin will allow you to create responsive, sortable tables & charts based on Forminator’s form, quiz, and poll submissions from your WordPress site’s frontend.
This feature is great for:
Public Directories – The Forminator form collects the data and displays it in a searchable, sortable table.
Data Dashboards – Similar to above, this can have different charts and tables.
Quiz Leadership Board – Use to create a leadership board to display the quiz score of everyone who has taken the quiz and sorted based on their rank (number of correct answers).
Polls – Can be used to display the poll data in a graph when a poll has ended and you can have changed the original poll to draft state.
And it’s all free and easy to do!
In this article we’ll show you just how easy, by creating a simple data table that draws straight from an existing Forminator form.
More specifically, we’ll look at how to get this collaboration set up for your WordPress site and show you how to:
We’ll then show off a few bonus examples of other tables and charts that are possible.
By the end of this article, you’ll see how Forminator and wpDataTables cannot be (table)topped!
Install These Plugins and Follow Along
To get started, you’ll need to install three plugins. It’s a bit different than other installs because this uses an addon plugin to function.
First off, it’s pretty obvious, but you’ll need Forminator. You can also use the Pro version of Forminator (the same goes for wpDataTables), but it’s not required.
Next, choose what form, poll, or quiz you’d like to use to create a table where it says Choose a Forminator Form.
This area shows you all the forms you have available that were created in Forminator.
For this article, I’ll go with one that I created called wpDataTables Test Form.
I have several options to pick from, but I’ll go with an example I created just for this article.
It’s worth noting that the form, poll, or quiz you want to use must have at least one submission stored in your database, or you won’t be able to create a table with it.
If there are no submissions, you’ll get an error message indicating that the table in the data source has no rows.
Uh-oh! No rows. This is the error message that you’ll get.
With that being said, the next step in the process is to Choose fields to show as columns.
This pulls up every field you have in the Forminator form that you chose to use. Select the fields that you want to show as columns.
Choose all of the fields at once or individually.
When it comes to supported form fields, there’s a ton of them. You can include:
Something to keep in mind is that fields like reCaptcha, HTML, Page break, Section, and GDPR Approval are excluded from tables.
Once you have all of your fields set, click Save Changes. It will give you the opportunity to…
Adjust Options and Settings
These other options and settings allow you to customize the new table even further!
Keep in mind that some of these additional settings are only available with the Pro version of wpDataTables; however, most are available for the free version.
Here’s a rundown of what all can be tweaked and settings:
Data Source
Display
Sorting and Filtering
Table Tools
Placeholders
Customize
Forminator Settings
Let’s take a look at each one in more detail.
1. Data Source: This is the initial screen we just went over where you Input Data Source Type for Forminator. You can always revisit this area if you want to change the source and fields.
This is the same tab that we went over previously.
2. Display: You can adjust the layout of your table for the frontend display.
There are options, such as Table Title, Info Block, Pagination, Scrollable, and more.
Want a table title? Do that and more in this area.
There are many different adjustments in this section, so be sure to check out this area and change accordingly.
3. Sorting and Filtering: This tab gives you options to allow your users to filter and sort the data that’s on your frontend display. Check the boxes of what you’d like to include.
Note that advanced custom filters are a Pro feature only.
4. Table Tools: Here is where you can enable copy & save options in your table. Once enabled, the dropdown gives you options for print, PDF, CSV, and more.
The dropdown menu reveals all of your options.
When saved, your users will have your selected options to choose from.
5. Placeholders: This is a Pro option, and all of the features for the placeholders category cannot be used with tables generated from Forminator data.
6. Customize: This is a table styling option that is only available for Pro.
7. Forminator Settings: An option area for Forminator, where you can filter by entry ID range and entry date.
Filter by entry ID range and entry date.
Once you have all of your settings configured, you can copy the shortcode.
This works on any page, post, or acceptable widget. When pasted on your WordPress site, you’ll be all set!
Click the icon next to the shortcode to copy it automatically.
If you ever need to adjust or change anything, you can always go back to this area and alter accordingly.
View a Table Preview and Setup Columns
Now that you have the foundation set up with the data source, the Table preview and columns setup will appear.
Here, you can view what your table will look like, sort by the number of entries, search, and edit.
You can see all of the entries in the form so far.
By clicking on the gear icon in each category is where Column Settings is found.
In this area, you have the option to change column positions, rename displayed header, add cell content suffix, and more.
Each category has customization options.
You can create so many options and variations with wpDataTables and Forminator, so it may take several attempts to perfect your table.
Examples of Tables and Charts
Beyond the table we just created, here’s a look at a couple more examples of what can be created.
You’re able to set up a pie chart…
Pie, anyone?
…a colorful bar chart.
The results are in.
There are also line charts, bubble charts, donut charts, and more that can be created!
There are many charts to choose from.
As you can see, there are a ton of possibilities when it comes to customization.
To check out some more examples, view our documentation. And for more insight on creating pie charts and graphs, be sure to explore wpDataTables extensive documentation.
At the (Table) Top of Their Game
Forminator is enjoying a seat at the table.
The dynamic table duo of Forminator and wpDataTables puts them at the top of their game when creating tables!
They’re easily customized, edited, and enabled for the perfect table(s) for your WordPress site (for free!).
Be sure to implement all of the covered features in this article for yourself with Forminator and wpDataTables.
Avada is already one of the most popular premium WordPress themes available. We’re going to make it even better by enhancing it with our free optimization tools ― Smush and Hummingbird.
It’s not uncommon for WordPress sites built with Avada to experience page loading slowdowns. This can happen for a variety of reasons, including data-heavy images, lack of caching, CDN quality, and a “host” of other tangibles. (Pun intended.)
This is where two of our optimization plugins shine. Smush and Hummingbird can make a serious impact when it comes to getting (and keeping) your site running at optimum speed.
With a fresh Avada install, we’re going to tweak some settings and run a few tests to see just how much of a (loading time) difference Smush and Hummingbird can make on an Avada themed site.
We’ll also present some additional suggestions that can improve Avada’s overall speed on your site.
When we’re done, you’ll have some great knowledge and resources in your arsenal to get your Avada site to operate lightning fast.
Feel free to jump ahead to any of the article sections:
Keep reading to check out our process, and the measurable results.
Avada Theme Testing Setup
”Avada is the Swiss army knife of WordPress themes.” – Collis Ta’eed, CEO of Envato
Avada. Is. Everywhere. With over six million users, it’s the number one selling WordPress theme on ThemeForest.
Have you wanted to use this popular theme builder for your site, but were concerned about the loading latency that often occurs? We’ve been there, and can tell you there is an easy ― and free! ― way to make great strides in improvement.
Let’s look at what we’ll be doing to accomplish this.
Procedure
Note: We’ve indicated below which steps involve no cost vs. some cost.
Install Avada Theme Builder & theme on a clean WP site (requires Avada theme license.)
Repeat entire procedure again, using a different Avada theme (no cost if you’ve already purchased Avada theme license.)
Parameters
We’ll be using a clean foundation, meaning, our site will be built on a brand new WordPress installation.
Theme configurations and options will be kept static after initial installation.
My hosting is the Bronze plan, through WPMU DEV Managed WordPress hosting.
My region is USA/East.
Plugins are Smush and Hummingbird only.
(If you’re using our hosting, you will see the WPMU DEV Dashboard plugin, as it’s automatically installed on sites hosted by us.)
GTmetrix speed testing done using their default server location (Vancouver, Canada), and default browser (Chrome Desktop).
Particulars
Sites hosted by WPMU DEV will install the Pro versions of Smush & Hummingbird. To mirror non-pro versions of the plugins, I conducted all of my initial tests with the Pro features disabled.
Hummingbird optimization uses different types of caching and compression features on sites. Page, Gravatar, and RSS caching were disabled. Most hosts, including WPMU DEV, typically turn on browser caching and GZip compression by default. Since we can’t turn these off without impacting other settings, they’ll remain on during our tests.
Finally, as we’ve mentioned in other optimization articles, please note that no one will have the exact same results, because of the variables inherent to each element. Your geographical region, the size of your media library, your hosting provider, all paint part of the picture using very different brushstrokes. But no matter your particular site environment, you are bound to see marked improvement with this process.
Alright, let’s hit the track.
Hitting Peak Speeds Using Smush & Hummingbird with Avada
In preparation for this process, let’s make our tool kits match, like sisters on picture day. (Was it only my mom who did that with us?) If you haven’t already, download the Avada Website Builder. You’ll also need the Smush & Hummingbird plugins (both of which are free), but we’ll add those a little later.
Make sure you are starting on a new WP site, with no new pages or posts created, and no optional plugins or add-ons activated.
Next, install the Avada website builder. There are two additional Avada plugins required ― Core, and Builder ― so we’ll go ahead and install them as well.
Avada’s Core and Builder plugins must be installed to use the theme builder.
Theme 1 ― Avada Spa
Time to make our actual theme selection. For this first test, we’ll use Avada Spa. It doesn’t require any additional plugins, but has a fair number of images, so it seems like a good one to try. It’s tucked into the pre-built library in the Avada dashboard, and installation is a few simple clicks.
Select only the content you want to import during theme installation.
With our theme installed and applied, and before we start tweaking or adding anything, we should get an initial snapshot of our speed.
GPSI gives us a fair to middlin score.GTM is on a par with Google for our initial speed test.
Both scores fall in the “7Os” or “C” range. We can definitely do much better.
I want to look into Avada’s built-in optimization settings, make some adjustments there, and see if we get page speed improvements.
A snippet of Avada’s built-in optimization menu.
From the Options/Performance menu tab, here are the changes I made:
Performance
Image Lazy Loading >> from None to Avada
Font Face Rendering >> from Block to Swap All
Preload Key Fonts >> from Icon Fonts to All
Load Stylesheet in Footer >> from Off to On
Dynamic CSS & JS
Load Media-Queries Files Asynchronously >> from Off to On
With all changes saved, we’ll check our speed.
Double sevens, so we tapped up a smidge.
A bit of a wash per GTM, with performance going up and structure going down.
Let’s try the first of our optimization plugins, and activate Smush.
Smush is our user’s choice, award winning, and benchmark tested image optimizer.
Upon navigating to the Smush dashboard, you should be greeted with the quick setup wizard. These settings include: Auto Compression, EXIF Metadata, Full Size Images, Lazy Load, and Usage Data.
Here’s what each feature does:
Auto Compression ― will automatically optimize new image uploads, so you don’t have to do each one manually.
EXIF Metadata ― will strip camera settings from your images, helping reduce file size. (Don’t worry; it won’t strip SEO metadata).
Full Size Images ― will compress your original full size images. (Note: by default, it stores copies of your originals, in case you ever want to revert back.)
Lazy Load ― will stop offscreen images from loading until a visitor scrolls to them.
Usage Data ― will let our designers gain insight into what features need improvement. (Your personal data will never be tracked.)
Go ahead and run through each screen, leaving default settings on. (Allowing Usage Data will help towards the functionality of future versions of the plugin, but if it makes you uncomfortable in the least, leave it off.)
Smush makes suggestions to maximize image compression.
Once the wizard completes, the dashboard will reflect how many images could use compressing. Hulk smash that Bulk Smush Now button!
What do our image optimization stats look like now, Mdm. Smush?
54 images smushed, saving 3.2 mb. Smushing like a champ!
Let’s see how much that lightened the (page) load, and do our speed tests again.
That’s a pretty good jump! Almost ten points.“B”it by bit, we’re on an upward trajectory.
Time to kick things into high gear, and have Hummingbird alight on the scene.
Hummingbird is everything you need to get your site running fast.
After installing and activating Hummingbird, going to the dashboard will activate another quick setup wizard. This time, she’ll just suggest running a performance test, which is exactly what we want to do.
Once the test is complete, you’ll get a notification letting you know.
The dashboard shows us the score from the performance test.
83 is not too shabby! We’re already flying, but we’ve yet to hit our highest altitude.
Hummingbird provides lists and a chart of assorted metrics and audits that were rated during the performance test.
Hummingbird tracks six metrics in the Performance section of the Lighthouse report.
She also provides additional score metrics called Audits. These separate issues into the categories of: Opportunities, Diagnostics, and Passed Audits ― all recommendations for improving your performance score.
Opportunities are basically color-coded alerts. Yellow indicates a mild to moderate issue, and Red means the issue is significantly impacting performance.
In this performance evaluation, Hummingbird has indicated that I have 3 Opportunities, which as least one of is high priority (red squoval).
To resolve these Opportunities, click on any alert row, and it will display:
a detailed description of the issue
a list of specific assets involved
step-by-step instructions on how to resolve the issue
You don’t have to go digging through pages of instructions or do mad googling; Hummingbird spells everything out for you on any flagged issues.
It’s a good idea to address these, and that’s what I’ll do now. Once you’ve made the fixes, you can move on to the next step… asset optimization.
From the left menu bar, choose Asset Optimization. Click Automatic, and make sure the Speedy slider is ON.
Set your Asset Optimization to Speedy & Automatic for a performance boost.
Of note: when you’re in Automatic mode, Hummingbird auto-detects newly added plugin and theme files and optimizes them for you, but won’t remove any old files from a plugin or theme that was removed. This is to avoid conflicts and issues, and why it’s recommended to re-check files on occasion ― so everything remains in sync.
Ok, time for some speed testing.
Woohoo! That pushed us up into the 90’s.“B”hold our continually rising numbers.
Great scores! One more thing we can still do… let’s turn on the CDN in Hummingbird. From the same Asset Optimization page, move the WPMU DEV CDN slider to ON (it will turn blue).
Let’s run our speed tests again.
The heat is on! We’re cranked up to 94.High school me wishes this had been my grade in AP History.
We could stop here and be perfectly happy campers. However, I’ll throw one more log on the fire, by tweaking a setting through my WPMU DEV hosting.
Turning on FastCGI through WPMU DEV’s hosting Hub.
Time to put the pedal to the metal and get some new test scores.
Nearing perfection with a score of 97 in GPSI.Yes! We finally got our “A”.
Alright, I’m super stoked about that. Let’s move on to our second round of testing by installing a different theme.
Theme 2 ― Avada Classic
For our second test environment, we’re going to use Avada Classic. It requires the additional WooCommerce plugin to be installed, so will add an interesting element which could possibly affect page load speeds.
Before we actually change themes, let’s roll back to our original test environment. If you have WPMU DEV’s hosting, turn off FastCGI from the Hub. In Hummingbird, turn off CDN Asset Optimization. Then deactivate both the Hummingbird & Smush plugins.
We also need to revert the Avada Performance optimizations back to their defaults, via the Options/Performance tab, Reset All.
Once again from the Avada Dashboard, let’s navigate to the pre-built themes. Make sure you select all the components you installed for Avada Spa; then click Remove. Once that process completes, head to the Classic theme (it’s the first one), and install/activate it.
The extremely popular WooCommerce plugin is required for Avada’s Classic theme.
Prior to making any changes or adjustments, let’s get our initial speed test scores.
Not bad for our baseline.I “C” you, and I will raise you 20. (At least!)
Ok, that’s respectable, but we want superb. Let’s adjust some of Avada’s built-in settings again.
I’m making the same optimizations as I did last time, but with one addition: Avada’s PWA plugin (primarily a caching app, under development at Google). Once PWA is installed and activated, I’ve got some choices now under Options for Progressive Web App. I’m switching it ON, leaving the pre chosen settings as is, and saving changes.
To enable PWA settings in Avada, you must first install its plugin.
Let’s see how much of an impact those tweaks made in speed scores…
Ok, not a mind blowing uptick, but an increase nonetheless.This is also a higher score ― we’ll take it!
With the Avada optimizations under our belt, let’s reactivate Smush.
Your Smush settings will remain as we last had them. Because our new theme added new images to the media library, we need to let Smush do her thing.
You’ll already see the savings from bulk compression in her dashboard. We didn’t have to actively smush the images added to the media library with this theme, because we had previously told Smush to automatically compress our images on upload. And that’s exactly what she did.
With Smush on duty, carrying out her pre-specified tasks requires no prompting.
Alright, time for another round of speed tests.
The needle is still climbing.Can still “B” better, but we’re going in the right direction.
Even better scores than with our initial theme at this point. Of course, we can get them higher. Time to let our rapidly-fluttering-winged friend grace us with her presence. Reactivate Hummingbird, and run a performance test.
Hummingbird’s 87 is a great score.
While I’m pleased with her score, it’s not as good as it can get. I see she has listed three Opportunities, and at least one is substantial (code red). I’m going to go in and fix what she’s recommending, and I suggest you do the same if you have issues indicated in Opportunities.
Hummingbird’s at-the-ready fixing instructions are as simple as click, read, do.
Time for our speed tests.
We’re in the upper echelon…Slowed to a crawl, but we’re still moving up.
With our next tweak, we should see those markers go up even more.
In Hummingbird, go to Asset Optimization/Assets, and click the Re-Check Files button. While she’s checking, turn CDN to ON again (from the running pop up). She’ll tell you how many assets are found; click the “Got it” button. After her scoring, click Activate.
Before we do speed tests, I’d like to run another Hummingbird Performance test, and see how it’s improved since we made all those optimizations.
87 to 98! I’d call that a stellar improvement.
Let’s see if that bumped up our speed scores.
96 deserves a happy dance!”B” still my heart. Performance is on the rise.
We could call it a day and have great responsiveness with these scores. But I’m gonna do that one last leap, and turn on the static server cache from my hosting Hub.
One final test… and survey says??
Pretty near perfect. BTW, can anyone see 99 and not hear Toto in their head?Fan-humming-smush-tastic!!
Okay, this is the best score I’ve seen yet. I’m gonna do a victory lap!! Before I get carried away with the checkered flag, I just want to share a serious thought on continued testing.
There will be slight variances if we were to test randomly going forward, as none of the elements are truly static. But you shouldn’t see any significant dips in page loading time, with all of the tweaks we’ve put into play.
Tips for Overall Speed Gains in Avada
This has been an eye-opening experience. Avada can most definitely ramp up the pace when used in tandem with Smush and Hummingbird. Even though we fine tuned numerous settings, there are some things you should always consider when it comes to getting and maintaining optimal speed on your site.
They are:
Choose a theme that’s more minimalistic (i.e., “light”)
Delete plugins that are old or no longer being used
That last one can really make a night and day difference. Make sure your hosting provider has a good reputation, and is shown to be fast and reliable. (WPMU DEV hosting plans provide solid, fully dedicated WordPress site hosting, backed by Digital Ocean.)
Quick note regarding CDN as it applies to our plugins: the settings for the image CDN are located in Smush Pro, while the web object settings are in Hummingbird Pro.
Fast & Furiously Optimized
You’ve got all the tools at your disposal now. As your site grows, and you continue to add content and increase your traffic, you should regularly test and reassess your optimization settings.
As you’ve seen, Smush and Hummingbird are both free, feature-packed optimization tools that will increase your speed. But regardless of what you use, continue to make adjustments so your page loads are never a deterrent to visitors or clients.
Make Avada your own, and site speed your silver bullet.
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.”
Impreza is a multi-purpose WordPress theme that uses WPBakery.
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.
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).
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 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.
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:
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.”
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:
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.
When it comes to tricks and tips for just about anything in life, TikTok is the place to start. And Instagram hacks are no exception. There are hacks for everything from ways to increase your...
Right now, the two most popular search engines are Google and YouTube, which is no surprise. They work perfectly hand in hand, and ranking on YouTube will greatly heighten the position on Google. So, when you begin to place YouTube videos on your WordPress site, you can expect great benefits. Placing YouTube videos on your […]
How to Install New WordPress Plugins (YouTube Video)
For anybody just getting started with WordPress, pretty much as soon as you’ve chosen your theme, the next thing to do is to take a look at plugins… in preparation, let’s take a look at how to download/upload, install and activate them… Here’s a quick all-you-need-to-know video – from our new YouTube channel: How to… View Article
22 Essential Tips for Choosing the Best Possible Domain Name for a Website (2017)
Choosing the best possible domain name for your website can be absolutely critical! It’s something that deserves hours (if not days) of thought… and it’s no exaggeration to say that in some circumstances, making the wrong choice can break a business… In short: choosing the ideal domain name is something that every website owner needs… View Article
How to Install a New WordPress Theme (YouTube Video)
If you’re just getting started with WordPress, one of the first things you’ll want to do is get the design right, which usually involves installing a new theme. But how? Well, fear not, because as part of our new new YouTube channel, we’ve put together a handy step-by-step guide. How to install a brand new… View Article
As we’ve said previously a bunch of times, when it comes to starting a WordPress website (especially for business), you need to get your hosting RIGHT! The wrong kind of hosting will leave your site unstable, slow and require constant fussing over. When it comes to making money via a business website, you need to… View Article
They ate donuts, drank beer, and played board games. But it wasn’t just about having fun at WordCamp Minneapolis/St. Paul. There was also education, information, assistance, and plenty of networking.
WebDevStudios (WDS) Senior Backend Developer, Justin Foell, and Backend Developers, Jeremy Ward and Gary Kovar, all attended the event, each playing an active role. Justin acted as a volunteer, while Jeremy assisted the WordCamp as a volunteer organizer, including working the Happiness Bar for two hours. Gary presented a seminar, “Cowboy Coding – Best Practices,” which went really well.
But educating others wasn’t Gary’s only favorite moment. “I really enjoyed the hallway track with a bunch of friendly folks in Minneapolis/St. Paul,” he says. Another big highlight was when the three developers co-worked together at Jeremy’s home. Because we work remote at WDS, it’s always an enjoyable moment when teammates can spend time bonding in-person and working together.
Of course, no WordCamp would be complete without tacos.
WordCamps are a pretty big deal to us. We attend and speak at many. Find out which ones we’ll be at next by visiting the WDS Gives Back page.
What Is WordPress Multisite and How Can It Help You? (Part 1)
Editor’s Note: The following is Part 1 in a three-part series titled, “What Is WordPress Multisite and How Can It Help You?”
Introduction to WordPress Multisite
There is a good deal of information on the web about WordPress Multisite, but most of it dives too deep technically, or quickly shows you steps to set up a Multisite environment. I am going to tackle it from another angle, from the point of view of an outsider looking in (with possibly no technical background) wondering if WordPress Multisite will fit the needs of their organization. To help facilitate the discussion, let’s start with some terminology.
New Terminology
WordPress Multisite introduces new ideas into WordPress, and there are several new terms that come along with it. Below are the various Multisite terminologies defined to help provide a foundation in communication for the rest of the article.
Network: The Network refers to a group of sites created on your Multisite instance. Though it is technically possible to run multiple networks on a single Multisite instance, we will focus on the basic single network that comes with Multisite. To keep things simple, you should be aware that some older literature referred to a Network as a Site.
Site: A site refers to a single site within a network. These are sometimes also referred to as subsites, or blogs. Over the years, the term site has changed meaning to refer to the individual sites on a network. You may see reference in older literature that use the term site in the context of network.
Blog:Another name for a single site on the network.
Subsite: Another name for a single site on the network.
Network Admin:This is a new section of the wp-admin area that appears in the Admin Bar after enabling Multisite on your WordPress installation. The Network Admin is where you will control the sites, plugins, and themes available to your sites.
Super Admin:Super Admin is a new role that is available specifically for Multisites. Users with Super Admin access are allowed to access the Network Admin area and manage the entire network. Super Admins can access the dashboards of any site and administer them as well. The traditional Administrator account only has access to the sites it has permissions on.
Subdomain Install:Network setup option that creates new sites with a subdomain of the primary domain. For example:
Primary domain: example.com
Site for Bob: bob.example.com
Site for Sally: sally.example.com
Subdirectory Install: Network setup option that creates new sites with a subdomain of the primary site. Useful when creating sites that all need the same look and feel such as corporate or language sites. For example:
Primary domain: example.com
Site for Bob: example.com/bob
Site for Sally: example.com/sally
What is WordPress Multisite?
You are undoubtedly familiar with WordPress. A content management system you install to manage your website content. Perhaps you have multiple websites, each with their own installation of WordPress running the site. Enter WordPress Multisite; WordPress Multisite transforms a single site into a powerhouse that can run an unlimited number (nobody has found a max number yet!) of websites from a single WordPress installation. In essence, it could combine all the individual WordPress installations you run into one single installation that supports all the sites. Each site can have its own domain, theme, and set of plugins utilized.
As an example of how I use the power of WordPress Multisite, I have several family members who have basic blogs set up to post their random thoughts. There are also several organizations that I have helped support over the years and test beds for new corporate sites running. Each of the site owners are able to manage their own content, while I ensure the network stays up and running efficiently with WordPress, and that all plugins are kept up to date.
Feel free to take a peek at a couple sites on my network:
You will notice there are subdomains and custom domains. WordPress handles both with elegance. By default, new sites on my network are created as subdomains of lobaugh.us and then a custom domain is applied when ready. Subdirectories are also supported. Subdirectories make it look like all the sites are part of the same domain. For example, in my network, my sister’s site could be http://lobaugh.us/raeann. There are good reasons to run WordPress Multisite in subdomain mode that I will get into in Part 3.
In Part 1, you were introduced to new terminology used by WordPress Multisite and provided a high level view of what WordPress Multisite is. In the following parts, we will cover why using WordPress Multisite matters, and how to determine if it could be the right tool for your organization.
WebDevStudios (WDS) would like to proudly introduce you to BRAD. No, not Brad Williams, our CEO. We mean the WordPress plugin you didn’t even know you needed till now: Better Responsibility Around Discoverability, aka BRAD.
Developers Aaron Jorbin and Andrew Norcross created the BRAD plugin after our own Brad tweeted this:
I REALLY wish this was easier to spot on WordPress installs. So many sites are launching with privacy enabled https://t.co/X12J8tdYVy
Boom. Aaron and Andrew combined their talents and BRAD was born—their effort to prevent WordPress websites from accidentally excluding themselves from search engines. Learn more about how and why Aaron and Andrew developed the plugin at The Daily Jorbin.
When Brad innocently tweeted his dismay with sites launching with privacy enabled, he certainly didn’t expect to inspire the creation of a plugin, much less have one named after him.
“It’s funny because years ago Scott Basgaard and I worked on a patch for WordPress Core to make the Privacy Enabled option more obvious,” explains Brad. “It was eventually accepted into Core and looked great, but somewhere over the years, and many many releases since then, the notice was made less obvious again.” Sounds like BRAD is the solution to that.
Overall, Brad loves BRAD.
“Aaron and Andrew are both great guys, and amazing developers, so it was awesome to see them go from idea to release in less than 24 hours. You really do have to love the WordPress Community.”
But don’t get the wrong idea. It’s not as though having a WordPress plugin named after him has gone to Brad’s head. Okay. That’s a lie. Brad thinks he’s immortal now.
“I think I’m reaching Highlander status,” he declares. At the very least, Brad is grateful, and he plans to repay Aaron and Andrew through gifts of whisky and coffee.
“They know who gets what,” he says. Are you launching a new site and want to ensure that it’s not excluded from search engines? Download and install BRAD today. Use the link below.
Follow Aaron and Andrew on Twitter: @aaronjorbin and @norcross. Aside from installing BRAD, use the checklist below (created by WDS Lead Frontend Developer, Greg Rickaby) next time you launch a new website.
Turn off the “Block Robots” setting under Settings –> Reading
Check robots.txt to ensure it’s also not blocking robots
Manage redirects (old pages to new pages, and www -> non-www)
Make sure the SSL certificate is set up for both WWW and non-WWW
Make sure any Webhooks are set up (WooCommerce, Stripe, Gravity Forms, etc…) and pointing at the new URL
Your WordPress editor is about to get a makeover! While the details aren’t complete yet, we know that soon, the way we edit our content in WordPress is going to change. It’s called the Gutenberg Editor, and the time has come for you to prepare for it.
Typically when you log into your website, you go to a Post, Page, or other “thing” to add or edit text, images, and more. Central to your website experience is a the big blank Text Editor. Most of the stuff you want to show your users goes into this Text Editor. If your site has a bit more customization, you’ll have extra meta boxes to add extra bits of information and content. Whether it’s for SEO or linking to related resources, these meta boxes aren’t always displayed in the editor where they show up in your content. Heck, sometimes they don’t even show up in your content at all.
When you think about, it’s not the most intuitive way to deal with your content. How did we end up here? Years ago, the WordPress admin interface was revolutionary, if you wanted to publish and still own your content. Instead of having to learn HTML, you could simply enter a username/password, write, and show the world—totally friction-less. Just type, publish, and it went live.
As website complexity has grown and site owners have figured out how visitors use websites, our understanding of content has expanded well beyond just a wall of text and a picture. Content, these days, can be relationships to other posts and products, supporting images, sales pipelines, tutorials, forms, and a billion other things. Essentially, web publishing has outgrown the humble Text Editor view. WordPress agencies and plugin developers have been dealing with this by bolting on meta boxes as needed.
WordPress core developers see this Frankenstein approach as problematic. The solution is Gutenberg. Named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago, the Gutenberg Editor is very much beta software. Each point (0.0.x) release of Gutenberg has significant changes and improvements over the previous, so it’s difficult at this point to see where it will end up. Because the developers are seeking active feedback, each update polishes the user experience a bit more. However, we’re still months from Gutenberg being part of WordPress core. So, expect many more changes before all the dust settles.
Gutenberg is an attempt to make the editing experience feel a bit more logical. This is accomplished by treating everything as a block. Ideally, this will make the task of creating content much more intuitive (and heck maybe even fun?). One of the biggest changes that hasn’t been accounted for in Gutenberg is what to do with all of the “legacy meta boxes.” In some cases, they’ll make sense as a block that is added to the content. But some meta isn’t necessarily something you’ll need to display. That kind of content doesn’t fit in the Gutenberg block model.
We expect Gutenberg will ship in WordPress 5.0. That’ll probably be in the second quarter of 2018. In the meantime, it will be important to stay on top of both WordPress core and plugin updates as some of the groundwork for dealing with Gutenberg will be laid before it’s available in the backend. Start thinking about the metadata you use in your posts. Unlike when Facebook changes the interface, WordPress is giving us a huge amount of notice. If you need help in either of these areas, reach out to experts at Maintainn. They’re actively preparing for Gutenberg and are fluent in all things WordPress.
As I’ve said before, overcoming perfectionism is not an excuse to publish sloppy or uninspired writing. Content that works for your business is not only clear, accurate, and educational, it also gives insight into your values. And if it doesn’t contain aspects that make it memorable, it’s not going to work. Of course, memorable content Read More...
