Speed geeks, SEO fiends, and marketers alike:
Today, we have released Project Lightspeed. This is a huge milestone in the history of Thrive Themes.
Project Lightspeed is a one-click, code optimization tool that ensures your website — built with any Thrive Themes plugins — will output leaner, cleaner code.
Leaner code = less to load = faster website response times.
And with Google's Core Web Vitals algorithm set to roll out gradually from later this month until August, now is the right time to try it out.
Read on for a tutorial on what Project Lightspeed is and how to enable it.
An Introduction to Project Lightspeed
Before we walk you through the tutorial, let's go over some of the key information you really should know.
Most Thrive Themes plugins use our visual editor. That visual editor allows you to visually build and design your pages, templates, lead generation forms, pop-ups, content and more... without ever writing a line of code.
But behind the scenes, our visual editor is writing code for you—code that is interpreted by different web browsers and different devices.
Years ago when we began building the Thrive Visual Editor, we followed recommended website coding practices, and we relied on browser-caching. That means more code was loaded when a visitor first arrives on your site... but that code is then saved on your device making other pages load much faster.
Recently, speed measuring tools and companies like Google have ignored those benefits to focus only on initial load time.
And to be fair, that makes sense.
The faster a visitor's first page visit loads, the more likely they are to stick around or come back for more.
Project Lightspeed means we are shifting from the old approach of serving larger one-size-fits-all code that represents your whole website... to delivering super small files that are tailored per-page and will only load the code that's needed right there and then— and nothing else.
With me so far?
Here's some other key facts before the tutorial:
Let me show you how it's done.
How to Enable Project Lightspeed
Once you update to the latest version of your Thrive Themes software, navigate to the Thrive Dashboard.
In the Thrive Dashboard, you'll find a new feature card under 'Thrive Features' called Project Lightspeed. Click on that.
The first screen of Project Lightspeed will explain a little bit more about what's happening, and will include an option to 'Analyze this site'.
The Analyze Site step is just to have a look and see if you already have optimized code on your website or not. It'll only take a few seconds to run.
After the Analysis step, you'll see a quick report on the state of your site assets.
If it's the first time you've ever done this, it will likely say that none of your website assets are optimized. However, in my screenshot below, you'll see the report is saying that 142 of 172 items have been optimized.
Once you click 'Optimize my site', we'll begin to run the asset optimization.
Note: Temporarily disable your Caching plugin while running the optimization!
Some caching plugins have settings that minify and combine CSS. This is a great feature and will continue to work with Project Lightspeed, but it may cause problems during the optimization step.
We recommend disabling your caching plugin temporarily while you run the optimization. You can re-enable it again immediately after.
If you already optimized your site while you had your caching plugin enabled and anything looks incorrect on the front-end of your site, you can fix this easily.
Simply disable your caching plugin, return to Project Lightspeed and click 'Rerun Asset Optimization'. This will allow our tool to rebuild your optimized code without issues. Learn more about this step here.
Depending on the size of your website, the optimization step could take a few minutes or it could take a lot longer on large sites. When we ran this on ActiveGrowth, it took nearly 2 hours to prepare the optimized code- but that is a big, complex site with a bunch of test pages.
You'll see a report on the progress of your optimization, including what pages are being optimized, your progress as a percentage, and an estimation of time left.
It's important to note that running this optimization does not automatically enable the new code. All it does is prepare the new code.
That means it's safe to walk away and come back, or that if you encounter any issues, none of it will apply to your website until you manually enable it.
Once the optimization is complete, you'll see a results page.
If any pages or content on your site couldn't be optimized, it will be flagged in the above screen. You'll be able to see which pages we couldn't optimize. We'll talk more about what to do in that case below.
With your asset optimizations complete, you can click the button to return to the control panel.
At this stage -- and this is important -- you'll finally be able to enable the toggle for displaying optimized assets on the front end of your site.
This toggle can only be enabled after the optimized code has been created.
And, it's your kill-switch. Any time you return to Project Lightspeed from the Thrive Dashboard, you'll see that toggle. One click and you're back to your old code.
Bear in mind that if you disable Project Lightspeed, you may need to repeat just the analyze step (not the optimization step).
The analyze step only takes a few seconds and will tell you if all the optimized code exists. If it does, then you're ready to re-enable it with a click, without going through the migration again.
Then, as a final step: re-enable your cache, purge any server caches, and refresh your CDN cache (if you are using one).
A CDN (content delivery network) keeps a cached version of your site in different locations around the world so that your visitors don't have to wait for data to bounce around the whole planet to get to their device.
Your website is now serving new code, so you want to make sure that any speed technology isn't still loading the old version of your code. Most cache plugins or services have built in refresh times, which may be hours to days. Rather than waiting for them to update, give them to nudge to collect and display your new website code.
"What if something goes wrong?"
If you have a unique server setup or potentially conflicting plugins, Project Lightspeed might encounter issues where it can't optimize some pieces of Thrive-built content on your site.
But don't worry: you'll see the result in the report and you can still enable optimized code for all of the successfully migrated content.
Content that couldn't be optimized will show as 'failed' in the report after the asset optimization is complete.
If you enable the Project Lightspeed toggle when there is failed content, successful content will still load the new code but failed content will load the old code. If these pages aren't crucial to speed or SEO, there's no harm in continuing to serve the old code.
What can you do to fix these errors? You have a few options.
- 1Run the optimization again: Sometimes a timeout might cause pieces of content to fail. You can simply repeat the analysis step and Project Lightspeed will find the remaining content that hasn't been optimized— including any failed pages. Running the optimization again will only optimize those remaining pieces, so there is not harm in doing it twice.
- 2View the failed content: Still not working? You can click 'View entire failed list' to see the names of each piece of content that failed. From there, you can try to figure out why it is failing, perhaps it's a clash with another plugin, or— better yet— contact our support team! They'll help you figure out the problem.
Can't find an obvious cause for a failing piece of content? Try opening the Thrive editor for the failed content and manually saving it. Clicking 'Save' will automatically create optimized code just for that one piece, meaning Project Lightspeed no longer has to optimize it from the site-wide migration tool.
"My website looks broken!"
If something on your website looks broken when Project Lightspeed is enabled, you may have a setting in a caching plugin that is preventing our tool from correctly building the optimized code. (Don't forget—you can easily disable Project Lightspeed with a click.)
Project Lightspeed will tell you that the optimization was successful, but what you see on the front-end is wrong.
Fortunately, our developers are already fixing it and will release the updated fix in the coming few days.
But why wait when... you can easily fix it yourself too!
Simply disable your caching plugin temporarily, return to Project Lightspeed and click 'Rerun asset optimization'.
This will force Project Lightspeed to rebuild all of the optimized code assets again- this time without interference from your caching plugin.
Then, you can re-enable your caching plugin and carry on growing your business.
Our Support Team Is On Standby!
Website code can be quite technical. Our support team have been testing Project Lightspeed in various setups, and we are all ready to help you.
We want this code migration to be as seamless as possible for you.
Website speed is affected by many things and Project Lightspeed is only one piece of the puzzle. However, it is the piece that we are able to improve the most from our end- which is exactly what we've done in this release.
Many of the other pieces of the puzzle need to be handled at the individual site level and are out of our control.
Over the coming month, we'll publish more educational content to help you explore ways to improve your site speed. Keep an eye on our blog and mailing list.
After enabling Project Optimize, you should purge your cache.
Remember, if you intend to test your website speed, you should load your webpage from an incognito tab at least once after purging the cache so that your caching plugin can rebuild the page. Do this before re-testing speeds.
Caching plugins are very effective at speeding up websites, which is why we have built integrations with 3 popular caching plugins: W3 Total Cache, WP fastest Cache, and WP Rocket.
Our code optimization applies at the page level, meaning your cache plugins and other speed tools will look at the code we output and further optimize it. You may find after enabling Project Lightspeed that you'll get better results with different settings than what you did before.
If you encounter any issues, try to disable other speed plugins and re-enable them after Project Lightspeed is switched on.
Even though code optimizations can be delicate, it is extremely unlikely that your website will break. Remember: you can disable the optimizations with one click to return to the same code you had before.
The worst issues we can forsee is that, if there is a plugin conflict, the styling on the front end of your site may be different after the optimization. If this is the case, please report it by contacting our Support team. Project Lightspeed has been thoroughly tested but we are ready to find and fix any unexpected edge cases as soon as we know about them.
Google have announced an update to their search engine algorithm which they call 'Core Web Vitals'. They will roll out this algorithm update gradually between mid-June and late-August 2021 and the effect may mean some websites rank higher or lower in Google's results than what they did before. This update adds 3 new website usability metrics to their list of over 200+ ranking factors.
You can read our detailed breakdown of the 3 Core Web Vitals metrics, how Google calculates them, and what this means for website owners.
Beyond that, we have identified two Thrive Leads form types that can negatively impact CLS (Cumulative layout shift), which is one of the Core Web Vitals: Scroll Mats and Ribbons. These form types push page content around after they load and Google doesn't like that. Other form types that load inside the page or over the page, such as pop-ups or full-screen-fillers, are fine.
To improve LCP (Largest Contentful Paint), you can either move slower-loading content such as large images or videos below the fold on your SEO-ranking webpages, or reduce their visual size until they are no longer the largest object in the viewport above the fold.
You can learn more about Core Web Vitals and Google's recommendations by visiting web.dev/vitals - but expect to read some technobabble. We're working on more posts and articles that demystify their recommendations and give you actionable steps in plain english.
We've identified further improvements we can make and new features we can add into our tools to help push our optimizations even further. Each one is likely to be less impactful than the CSS and JS optimizations included in this release, but we're working to add them anyway.
You'll hear more about them when we add them to our tools throughout the rest of the year.
June 2021- Project Lightspeed Updates
I want to share an update on Project Lightspeed.
I'm going to get trigger-happy with testimonials, but I can't help myself. We're really damn proud!
Project Lightspeed was our code optimization overhaul that we added across all of our tools early last month, the result of a very developer-heavy and intense period of work. It was and will likely remain one of the biggest software engineering challenges we've ever pulled off.
And well... it worked.
If you haven't activated Project Lightspeed, then you're missing out on a significant boost to your website's speed and SEO performance, especially considering Google has begun rolling out their Core Web Vitals update into their search algorithm.
Project Lightspeed is opt in only, meaning nothing will happen until you enable it... and we strongly recommend that you do.
With a code optimization project of this size that works with a click of a button, it was impossible to test every server condition, caching setup, hosting provider, CDN and website combination.
For most people's sites, enabling Project Lightspeed was flawless.
However, some of you did encounter issues and we're very grateful for all of you that contacted our support team with information about anything suspicious.
That kind of feedback helped us diagnose unexpected server configurations, improve caching rules, and stabilize the new codebase.
Remember, Project Lightspeed can be switched off with a click. We built it that way so that if you encountered any problems, you could revert to your old code while we investigated the problem.
Since the release, we've ironed out a bunch of smaller errors.
If you're seeing anything unusual on your website when enabling it, then please follow these steps:
- Update to the latest versions of our software
- Temporarily disable any caching plugins on your website
- Open Project Lightspeed from the Thrive Dashboard of your website, and continue until you find the option to 'Rerun asset optimization'.
The rerun will resave every piece of Thrive-made content on your site, so depending on the size of your website it could takes minutes or up to an hour.
At this point, any errors should be gone and you can re-enable your caching plugin. If they're not, our support team would love to hear from you so we can figure out why.
"Do I have to disable caching every time?"
You won't have to, no. But if you encounter errors, our first suggestion is to disable caching and rerun the optimization.
We've built (and have been refining) the rules that help the optimization process to play nicely with caching tools. But we did encounter some caching plugins that, if left enabled, would move Thrive code somewhere that our asset optimization wasn't expecting, resulting in incorrect CSS files while Project Lightspeed was enabled.
One last testimonial, because the results just make us so proud...
September 2021- Project Lightspeed Updates
Give your Core Web Vitals a CLS Boost in Thrive Leads
As a web page initially loads in the browser, Google carefully watches to see if new elements pop in and force the layout to shift around unexpectedly.
The more the page jumps around and flickers trying to load, the poorer the user experience and the higher the CLS score.
In short: Reduce your CLS to score better in Google’s Core Web Vitals.
As part of our commitment to speed and website usability that has resulted in many code improvements and features dedicated to speed, our product team uncovered a another improvement...
We saw that Thrive Leads forms can affect CLS, so naturally, we found a solution. Before we explain how, let's first understand why.
To make a page load faster and play nicely with caching plugins, we've always recommended setting Thrive Leads forms to Lazy Loaded. By enabling this setting, your Thrive Leads forms will load after the main page loads, meaning it won't slow down the initial page rendering.
And although there are many benefits to enabling lazy loading, there's one disadvantage:
Lazy loading Thrive Leads forms can impact your CLS score by pushing the content of your page around after it's loaded. This was only noticeable when they were above the fold when the page loaded.
But we want the best of both worlds— lazy loading and minimal CLS... and we figured out how to achieve this by adding two new features to Thrive Leads.
Improvement 1: New Ribbon positions
A common Thrive Leads form is the ribbon, and it looks like this.
Ribbons stick to the top or the bottom of a visitor's viewport as they navigate your website.
The problem was that a ribbon stuck to the top of the page and set to lazy load would 'push' the content of your page down a second after it had loaded. To combat this, we've added a 3rd Thrive Leads ribbon position: Top Over Content.
If you select 'Top over content' as your Ribbon position, then when your ribbon has lazy-loaded, it will be placed over the top of your page content rather than pushing it down.
As far as Google's Core Web Vitals are concerned, it's perfectly ok to load content over the top of your page, so long as it doesn't move the rest of the page around.
How to use this feature:
If you are making use of the Thrive Leads ribbon on a webpage that you really want to rank in Google, we'd recommend switching it to 'Top over content' as your Ribbon position.
Improvement 2: Skeletons!
Have you even opened Google Drive, Facebook or YouTube and noticed a light grey placeholder that displays for a half-second before the page content renders? Something like this?
That's called a 'skeleton', and they're not just good for showing users that page content is loading... it also reserves space on the page.
In Thrive Leads, there are a few lead form types that can impact your CLS scores: the widget form (that appears in a sidebar on your website) and the Lead Shortcode (that you can embed anywhere).
These forms, when lazy loaded, will push other content around the page once they've loaded.
So to fix this, we've added our own simple loading skeletons— a light grey placeholder that reserves space for the Thrive Leads form while the page content loads.
Here’s an example page a few milliseconds after loading a page with 2 Thrive Leads forms:
... and here’s the same page a second later, when the skeletons are replaced with the lazy-loaded content:
It’s a simple solution with a big payoff – The layout doesn’t change or flicker, so the CLS impact is greatly reduced!
This is a much more professional experience for the end user, and it helps you achieve a better Core Web Vitals CLS score, which can factor into better SEO performance.
How to enable Thrive Leads Skeletons:
All you need to do is update to the latest version of our plugins, and re-run Project Lightspeed. That means going to your Thrive Dashboard, clicking 'Project Lightspeed', and selecting 're-run asset optimization'.
Read our knowledgebase article on how to re-run Project Lightspeed.
But does it make a difference? YES!
We tested our Thrive Leads improvements many times to ensure that we'd see meaningful improvements to CLS, and we're proud to say that yes it made a difference.
Have a look at the score our test page was getting before enabling the latest changes in Thrive Leads:
Our test page had a Thrive Leads ribbon, a widget form in the sidebar, and a lead shortcode embedded above the fold. Perhaps it was excessive, but we wanted to see the results on an exaggerated test.
Now, here are the results after re-running the Project Lightspeed asset optimization which adds the loading skeletons, and setting the ribbon to display 'Top Over Content':
Without any other optimizations, CLS dropped from 0.285 to 0.001. That's an outstanding score, just by running Project Lightspeed (a few clicks) and changing the Thrive Leads ribbon position.
November 2021- Project Lightspeed Updates
Now, in this release, we've taken it one step further...
We've stepped outside of just optimizing the assets that Thrive creates and we've given you an option to optimize assets made by Gutenberg and WooCommerce.
(For reference: an 'asset' is a small file containing required code that must be loaded by your visitors before a webpage will correctly display.)
The issue we noticed is that by default, Gutenberg and WooCommerce assets load on every single page on your website, including any pages that don't need them!
That's terribly inefficient and will slow down your page load times.
So we decided to do something about it.
How to optimize WooCommerce and Gutenberg assets:
Start by heading to the Thrive Dashboard on your WordPress website, and find the Project Lightspeed card.
Inside Project Lightspeed is where you'll find all of our speed optimization options and settings.
You'll now find a new tab on the left hand side, 'Advanced Settings'.
Inside of Advanced Settings, you'll see some checkboxes where you can configure your asset preferences for Gutenberg and WooCommerce.
Go ahead an enabled these checkboxes, and click save.
When you save, it will run a saving process that could take a few minutes.
Here, it's searching through the content of your website and determining which pages do not require those assets to load. When it finds them, it will resave those pages with the assets disabled.
For any pages where we can see that WooCommerce or Gutenberg is being used, the assets will remain.
We have tested this thoroughly and extensively and are confident with how our technology works. However we don't know what myriad of potentially poorly-coded plugins you may have installed, so we recommend you check your website after enabling these checkboxes.
If, for any reason, something doesn't look right— you can uncheck the boxes and easily revert to loading all assets all of the time.
Once you enable these checkboxes and save, you can leave them enabled permanently and do not need to return to this screen. Continue creating new content on your website and the same asset analysis will run anytime you save a new page.
From here on out, your visitors won't be loading unnecessary assets on the pages where Gutenberg or WooCommerce is not being used.
Leave a comment!
As always, we love hearing from you all. Your feedback, thoughts and comments are very helpful to our team.
However, please remember that if you have any complications or issues, these are best handled through our support team, where we can directly investigate.
Do you have any other questions? Or did the migration and optimization work nicely for you? We'd love to hear about it below!