Table of Contents
- The Best of Both Worlds: Performance AND Visuals in Slider Revolution
- Part One: Evaluating Speed and Performance
- Part Two: Optimization in 3 Steps
- Part Three: Related Speed Boosters
- Part Four: Optional Extras
The Best of Both Worlds: Performance AND Visuals in Slider Revolution
The Slider Revolution team is always hard at work creating cutting edge visual tools while simultaneously finding ways to squeeze out more and more performance. We believe you shouldn’t have to choose between stunning visuals and top level performance, and it’s our mission to continue making that a reality.
Every release comes with new advancements both in the beautiful visuals you can create, and the optimizations under the hood that power them.
And we have the results to show for it. Check out a few of our template designs and their green Lighthouse scores and sub 3 second load speeds:
In order to get this performance it wasn’t necessary to construct a complex set of plugins and server configurations. In fact this took very little effort at all. These templates were posted unchanged, to a WordPress site using the default theme, with no optimization plugins or caching, on a $10 web host.
That said, there are a few quick techniques that can be very helpful when it comes to optimizing sites using Slider Revolution, and we’re going to step you through them in this guide.
While we’re at it, we’re also going to look at some general WordPress optimization techniques that will help lift the performance of your entire site.
But before we get into that we need to know the specifics of what we’re actually trying to achieve through our optimization. Let’s find out now by taking a deep dive into how to evaluate speed and performance on the web.
Part One: Evaluating Speed and Performance
Let’s begin by defining some speed and performance goals so we can best decide how to optimize and achieve them. To do that we need to ask these questions:
Q. How fast should your sites actually be, and why?
Q. What are the impacts of speed and performance on search engine optimization?
Q. Which tools should we use to test speed and performance?
Q. How should we evaluate the results we get?
Here’s a quick jump list of the topics we’ll cover in order to find the answers:
- How Fast Should Your Site Be?
- How Does Speed Effect SEO?
- How Should You Test Speed?
- How Heavily Should I Focus on Lighthouse Mobile Score?
How Fast Should Your Site Be?
Google suggests best practice is to have sites load in under 3 seconds.
The reasons given are compelling, in that studies have shown as load time increases from 1 to 10 seconds the probability of “bouncing” goes up, and the probability of “converting” goes down.
In other words, people don’t like to wait, so the faster your site is the happier and more interested your visitors will be. Annoyance begins to tickle at around 3 seconds and gets to full force at around 10 seconds.
So we ideally want our sites to load in under 3 seconds, and we might be able to push it to 4 if we have something really special that makes it worth the wait.
How Does Speed Effect SEO?
In May 2020 Google announced their collection of load speed focused metrics, named “Core Web Vitals“, will be a ranking signal as part of their “Page Experience” assessment program.
So, while the primary reason to be concerned with speed is to make your visitors happy, running a fast site may help with SEO to a degree as well.
How Significantly Do Core Web Vitals Effect SEO?
The overall indication from Google is that while Core Web Vitals are in play, they should be considered as one ranking signal among many, and that quality, relevant content remains most important factor.
From the Google FAQ:
Q: Do Core Web Vitals impact ranking?
Starting May 2021, Core Web vitals will be included in page experience signals together with existing search signals including mobile-friendliness, safe-browsing, HTTPS-security, and intrusive interstitial guidelines. You can read more about this in our Search Central blog post.
Q: How does Google determine which pages are affected by the assessment of Page Experience and usage as a ranking signal?
A: Page experience is just one of many signals that are used to rank pages. Keep in mind that intent of the search query is still a very strong signal, so a page with a subpar page experience may still rank highly if it has great, relevant content.
So in short, maximize your Core Web Vitals scores as much as possible, but don’t excessively focus on them to the detriment of other important factors.
How Should You Test Speed?
There are lots of testing tools available that give all kinds of intricate reports on site speed. But while these can be useful, the best way to test speed is to actually test site speed directly.
Scores in speed test reports can be very distracting from the single metric that matters most: the number of milliseconds it takes before a visitor can use your site.
The purpose of speed testing reports is to help you understand what’s happening on your site, but the information they give should always be considered secondary to load speed itself.
So let’s see how to measure actual load speed.
Developer Tools Network Tab
The best tools for measuring site speed are built right into desktop browsers: the “Network” tab in each browser’s Developer Tools. You’ll find this in Firefox, Safari and all Chromium based browsers.
The functionality is essentially the same across browsers. Open the Developer Tools, switch to the Network tab, and check the box that disables caching. Visit the site you want to speed test, and when loading is complete you’ll see the time it took along the bottom of the panel:
The number of most relevance to you is the second one, labeled “Load”, because it tells you how long it took for the browser to finish loading everything including styling and images, to the point where it’s ready for a visitor to start using.
Often the best way to test the speed of your site is to have an offline copy of it you apply speed throttling to, using developer tools, in order to simulate different qualities of connection.
The reason for this is if you only ever test online you’ll have no way to differentiate between issues on your site versus slow downs of your host or internet connection.
We’ll talk more about speed throttling for tests in just a moment.
Lighthouse aka Google Page Speed Insights
You’ve probably seen Google’s Page Speed Insights testing site. Well the results given through this site are actually drawn from their Lighthouse testing tool, available directly inside Chrome Developer Tools.
Open up Developer Tools in Chrome or another Chromium based browser, go to the Lighthouse tab, and run the Performance report on any web page in either “Desktop” or “Mobile” mode:
The scores you’re provided with are just like those seen on Page Speed Insights, and the collection of metrics grouped at the top are your Core Web Vitals scores:
It is far better, generally speaking, to use Lighthouse directly through Developer Tools rather than through Page Speed Insights, because the results tend to be more consistent from one test to the next.
Using Lighthouse directly also lets you run tests offline, meaning you can see how your actual site performs, measured separately to any slow downs that may be caused by a web host or by internet connection speed.
Lighthouse Tip 1: Always pop out the developer tools while testing so they are floating in a separate window. The reason for this is that the browser will struggle to adjust into the different layouts Lighthouse tests when developer tools are docked. Having them docked can actually cause scores to drop in comparison to the exact same test where the tools are undocked.
Lighthouse Tip 2: Always run Lighthouse tests multiple times. I’ve seen scores jump from 39 up to a steady 90 just by retrying with the exact same conditions.
How Heavily Should I Focus on Lighthouse Mobile Score?
When you use Page Speed Insights the first tab you’re shown is the “Mobile” test from Lighthouse, which is run under conditions of quite considerable throttling.
So if you’ve ever gotten a shock over low scores on a site you thought was fast, especially if you flick over to the “Desktop” tab and see good results, there’s a strong chance that throttling is the reason for the difference.
For example, here’s the difference between Google News’ mobile and desktop scores via Page Speed Insights:
Low scores on the Lighthouse mobile test are extremely common. For example, in my tests of Google’s own collection of sites, (when run through the Developer Tools “Mobile” test), YouTube scored 51/100, Google News got 40/100, and Google Play got 41/100.
Ironically, even the documentation page that explains how sites are classified as “good“, “needs improvement” or “poor”, itself falls into the “needs improvement” category:
As a point of internet, a page on a WordPress site with nothing but the words “Blank Page” on it didn’t even get full points, scoring 94/100:
So then what exactly is this “Mobile” test Google suggests we optimize for? What mobile technology does it actually emulate? And how should we treat the information it gives us?
What Does the Lighthouse Mobile Test Emulate?
The Lighthouse “Mobile” test can arguably be described as emulating a worst case scenario in the context of 2021 technology. Having this emulation available is very helpful, to ensure you can test for a full range of performance, but clarity on how the emulation relates to the majority of site visitors is also important to have.
This emulation is done through a combination of CPU and speed throttling. Let’s take a look at the details.
The phone emulated by the Lighthouse “Mobile” test is a 2016 Moto G4 with a 1.5 GHz CPU. It last had an update from its manufacturer in 2019.
For comparison to more recent devices, the best selling phone on Amazon in August 2021 is the Samsung Galaxy S20 and it’s fastest core operates at 2.84 GHz. The iPhone 12’ A14 chip can reach 3.1 Ghz. And the cheapest Android phone I found on Amazon was a used HTC 10 for $54, which had a 2.2 GHz CPU.
Coincidentally, I happened to have a Moto G4 laying around so l booted it up to see how it handles the 2021 web. I loaded up YouTube in Chrome and found it was unable play preroll ads or a 144p YouTube video without freezing and stuttering. So the Moto G4 is pretty much out of its depth on web content we now tend to take for granted.
Connection Speed Emulation
The connection speed emulated by the “Mobile” test is 1.6 Mbps. How does this download rate compare to available statistics on wireless speed averages?
Wireless connection speed averages for every country in the world, except Iraq, were higher than 1.6Mbps as at May 2020:
The average in the US is 26.7 Mbps, Germany is 28.7 Mbps, Singapore is 47.5 Mbps and Canada is 59.0 Mbps:
In consideration of these figures it would seem that 1.6 Mbps is significantly below the performance available to the large majority of people in the world in 2021.
Should You Optimize for Older Mobile Tech?
Now that we know the hardware and speeds the Lighthouse “Mobile” test emulates, the question is, should you optimize for those conditions?
The answer is yes, because if you ace the “Mobile” test you can be confident absolutely everyone gets a great experience on your sites even if they’re passing through a tunnel on a 5% battery.
However a second question is: Should you plan your site strategy around the results of the Lighthouse “Mobile” test, and make significant downgrades in order to get high scores?
The answer to that question isn’t as clear, and depends heavily on who your site visitors are and what you’re trying to do for them.
Google have stated that Lighthouse scores are one ranking signal among many, and that relevant content is of the highest importance. And on closer examination it becomes apparent that the technology emulated in order to generate Google’s “Mobile” score is almost guaranteed to be exceedingly rare among your audience.
In consideration of this it would seem a balance needs to be struck, where we do our utmost to deliver a great experience in a worst case scenario, but without necessarily shaping sites around performance below what’s available to the large majority of people in the world.
How Can You Optimize for Current Mobile Tech?
If you’d like to evaluate your site’s performance under conditions more common today there are three main ways:
- Throttling speed
- Throttling CPU
- Testing on real devices
In Chrome Developer Tools it’s possible to setup custom speed throttling profiles to simulate different network scenarios.
The global average mobile speed for 2021 is actually 55Mbps, but by testing for speeds from this long ago you build in ample padding and margin for error.
CPU throttling is a bit trickier, because Chrome Developer Tools seemingly removed the ability to throttle your desktop CPU by 2x, leaving only 4x and 6x. Most desktop processors run at around 3Ghz – 4Ghz, and phones at 2Ghz – 3Ghz. So throttling by 4x drops down to about 1Ghz or less – in other words, roughly matching phones released about ten years ago like the iPhone 4S.
If you’re very, very interested in emulating mobile CPU speeds you can try the experimental
Emulation.setCPUThrottlingRate flag in Chrome, or using thread limiting tools like cpulimit.
However my experience has been that you can roughly simulate slower CPUs by adding a bit of extra speed throttling, something we’ve already done with our 5.6 Mbps and 7.2 Mbps profiles. If your site runs well at those speeds, you’re probably doing just fine.
And of course, alternatively you can just skip all that complication and load your site on your actual phone and see how it performs.
Alright, now we’ve taken a comprehensive look at how to test performance, what our speed goals should be, and the role of Core Web Vitals in SEO.
Next, let’s move on to part two of this guide and see how we can take full advantage of Slider Revolution while hitting our speed targets and maximizing our SEO potential.
Part Two: Optimization in 3 Steps
Slider Revolution is of course a WordPress plugin, and there are lots of ways you can optimize a WordPress site in general. But we want to know how to squeeze the absolute most out of Slider Revolution specifically.
In this part of the guide we’re going to cover three straight forward, accessible steps that we have rigorously tested and confirmed will boost performance.
The three steps, with quick jump links to their sections below, are:
- Step 1: Activate Slider Revolution Global Optimization Options
- Step 2: Use the In Built File Size Optimizer
- Step 3: Try the “Bump Down” Layout Trick
Let’s get into how to follow each step.
Step 1: Activate Slider Revolution Global Optimization Options
As at version 6.5.x, Slider Revolution has an optimized initialization process that helps modules to load smoothly and efficiently. You can read about it in full detail in our release changes article, but to keep things brief here all you need to do is select the following settings.
Start by opening up Slider Revolution’s Global Options:
Under the Page Loading Optimization section toggle all three options to ON:
This boosts performance by allowing other kinds of high priority page rendering to happen earlier, and for multiple types of processing to occur at the same time.
Under the Modules Optimization section set Force Viewport Loading set to On:
This enforces that your modules should only start animating, and loading content for later slides, once they are visible in the browser viewport.
It boosts performance by allowing you to stagger the loading of your content as a person makes their way through the page.
Under the Modules Optimization section set Default lazy loading in modules set to Smart:
With this setting selected, module images are intelligently “lazy loaded”. What this means is initially only the images from the first slide will be loaded. Then the images from the next and previous slides. When the module switches to another slide, either its next or previous slide’s images will be loaded, whichever weren’t already loaded during initialization.
This boosts performance by only loading image files as they’re needed, but still well in advance, so the site visitor has a seamless experience.
Step 2: Use the In Built File Size Optimizer
Every time an image is added to WordPress multiple copies of it are made, ranging from small to large, with progressively increasing file sizes. The larger the dimensions of the image, the larger it’s file size and the more time required to load it.
Slider Revolution has a built in File Size Optimizer tool that shows you a list of every image in your module, and size version currently selected. You can use this tool to go through and choose a smaller version of any image.
You can open the tool when in the module editor by hovering over the Save button, then clicking the green Optimize File Sizes button that appears:
Once open, for each image you’ll see a line to the right with dots on it. Each dot represents one of the image sizes available. The left most dots are the smallest versions, and the right most are the largest. The white dot tells you which of those versions is currently being used:
When you click a different dot on the line, it will set that image size to be used instead:
In the green toolbar along the bottom you will see the reduction in file size as a result of your changed image selections:
For example, here I created a very basic slider composed of just three slides with image backgrounds. The images were downloaded from Unsplash and uploaded directly into the module, unchanged. In their default form they totaled 2,578 Kb of download. This took 3.00 seconds to load, tested offline with speed throttled to 5.6mbps as we discussed earlier in the guide:
The Lighthouse score was 99/100, an example of why looking at scores alone isn’t a good optimization philosophy, because we already know there’s room for improvement not reflected in the score:
However, in the details of the audit it suggests we “Avoid enormous network payloads“:
Using the File Size Optimizer made it easy to select smaller versions of the images:
After doing so they totaled 957 Kb of download and took 1.59 seconds to load:
And the Lighthouse report showed the “Avoid enormous network payloads“ test as passed:
These are the improvements in a simple demo using just three images, so you can imagine the impact possible with modules containing many images.
Using the File Size Optimizer to choose the smallest possible images that still look good in your design is one of the quickest and easiest way to make significant gains in your load speed.
Step 3: Try the “Bump Down” Layout Trick
What if you are very conscious about SEO and your number one priority is getting great Lighthouse scores? Well, there’s a trick that can make Lighthouse happier – all you have to do is bump your module down the page a little ways.
Several of the Core Web Vitals scores are determined by the content that first appears in the viewport, right at the top. So you can add some very light elements at the top, such as headers, menus or text, and they will be processed first and make the score higher.
This typically won’t make your site any faster, but as Lighthouse and real site speed don’t have a one-to-one relationship, you might choose to use this technique if Core Web Vitals scores are very important for your goals.
For example, here we have the “Cinematic Wildlife” slider, on a site using the Hello Elementor theme. The Lighthouse score is a solid 90/100:
Its real load speed at 5.6 Mbps is an excellent 1.75 seconds, well under our 3 second target:
The real load speed is already great, but if we so desire we can increase the Lighthouse score using the “bump down” trick. With a couple of text paragraphs and a headings added above the slider the score increases to 95/100:
The real speed is essentially unchanged at 1.79 seconds:
Because increasing Lighthouse scores doesn’t always increase load speed, a technique like this may not be what you need, depending on your priorities.
But if you really need to maximize those Core Web Vitals scores, the “bump down“ layout trick might be just what you’re after.
Part Three: Related Speed Boosters
The speed boosters in this part of the article are not directly connected to Slider Revolution, but can definitely help max out your site’s performance.
Choose a Fast Theme
WordPress themes can vary wildly in their level of performance, and it’s an important foundational step to get yourself a theme that loads really quickly before you add any content whatsoever.
You already learned how to test for speed earlier in the guide, and that your goal is to keep load speeds under 3 seconds, 4 at a stretch. You should assume the content of your site will take 1 or 2 seconds to load, so you need a theme that can load in about 1 – 2 seconds with no content.
Take a look at demos of themes you are considering using and test their load times. Also run Lighthouse tests and make sure the Core Web Vital scores are coming in decently.
Most theme demos won’t include a blank page to test speeds without content, but almost all have typography demo pages, which will probably be the most content light page you can test to get a baseline of performance.
Or you can bypass the need for a performant theme all together by using Slider Revolution’s blank page template and building out content using Slider Revolution modules instead.
Choose a Fast Host
The speed of your host can vary greatly depending on the power of the server you’re on, and the portion of its resources you get access to.
When choosing a host, be wary of shared hosting that offers “unlimited bandwidth”, because in reality every host has limits. Hosts that offer “unlimited” plans are often not forthcoming with key performance related information such as the CPU power of their servers, whether or not your site will stored on a fast SSD, and how much RAM will be available.
If you can, try to use a host that clearly shares this information on their infrastructure up front.
Look for a service that gives you as much processing power and RAM as you can get within your budget. The faster your server is at responding to requests, the faster your sites will be.
Part Four: Optional Extras
In the last part of this guide to speed and performance we’re going to go over some techniques we’d categorize as optional extras. The reason we’d consider them optional is the degree to which they’ll help depends on your unique circumstances.
Our testing has shown that these techniques can be a mixed bag. Sometimes they’ll give a big speed boost, sometimes they’ll make things a smidge worse, and sometimes they’ll make no significant change at all.
However, because there are free ways to test all of these techniques, there’s no reason not to give them a try and see what the results are for your specific site setup.
Consider the WebP Image Format
One of the messages you may see come up in a Lighthouse is a suggestion to “Serve images in next-gen format”, and one of the formats suggested is Google’s own WebP. WebP is an efficient format that can be used in place of JPEG, PNG and GIF images.
Whether or not a WebP will give you improvements over your existing formats is something that can differ on a case by case basis. Sometimes you can get big size reductions, sometimes none at all.
The size of your site and number of images you have should probably be the major driver of deciding whether gains from WebP conversions are worth it for you.
For example, l used the free EWWW Image Optimizer plugin to bulk optimize 380 images. The plugin converts to WebP where it helps, and skips over images it can’t improve:
The total reduction was 720.92KB:
For a site with a few hundred images that’s perhaps not a big deal, but if you have a few thousand images that’s where the savings can really start to add up.
You also have the option of manually working with images by opening them up in editing software and re-exporting them with better compression yourself. If you use software with WebP export functionality, such as Krita, GIMP or Photoshop with the WebP plugin, you can just try different formats and see for yourself which gives the best results.
Turn on a Content Delivery Network (CDN)
A content delivery network, or CDN, is a network of servers spread out all over the world. When you use a CDN a copy of your site is pushed out to every server in the network, and visitors will view your site on whichever server is physically closest to them. The closer the server, the faster the load time should be for them.
I tested a couple of CDNs for the purpose of this article, and didn’t see any striking gains from my location in south eastern Australia. However someone located in a different part of the world may see entirely different results.
There are several CDNs to choose from, most of which charge a fairly low rate for use. However if you want to try before you pay, Cloudflare has a free tier available.
And while we’re talking about Cloudflare, you may also like to know they have an automated WebP conversion service on their paid tier, called Polish. It handles checking which images can benefit from conversion to WebP, processes the conversion, then serves up the new WebP files to visitors.
Turn on Caching
A common optimization technique recommended for WordPress sites is the use of caching plugins. We’ve left it until now to mention this technique because our tests did not show it specifically benefits performance of Slider Revolution content in any significant way. However, for overall site efficiency, and lifting of processing strain on your hosting server, caching plugins will almost certainly be beneficial.
There are a number of high quality free and paid caching and optimization plugins.
Run Bulk Image Optimizers
Mentioned earlier was the EWWW Image Optimizer plugin and its use for batch converting images to the WebP format. That plugin, as well a collection of other image optimization plugins, can also handle additional tasks such as resizing, removing unnecessary meta data, and in some cases deployment via CDN.
We’ve now dug into every little corner of speed and performance optimization.
We know the most important target is a load speed of under 3 seconds. We’ve learned about the lower end technology emulated by the Lighthouse “Mobile” audit, and how to approximate tech more common in 2021. And we’ve seen how Core Web Vitals play a role in SEO.
We’ve also seen three straight forward steps to help boost Slider Revolution module performance and Core Web Vitals scores, gone over tips for finding fast hosting and themes, and touched on optional extras for lifting the performance of your entire site.
We hope that you now have perhaps a clearer picture of the landscape of web optimization than you may have had before, and feel well equipped to tackle it.
And as always, if there is anything we can do to help you along your way, don’t hesitate to reach out.
Thanks for using Slider Revolution, and giving us the opportunity to help you realize your creative vision.