Get your notebook out, you are going to want to capture this.
Today I am going to show you exactly how our website (Trinity.one) gained massive increases to traffic, visitor interactivity, and conversions by becoming faster.
Following this process we were able to drive:
- 29% increase in overall sessions
- 32% increase in page views
- 17% increase in Google traffic (organic)
- 45% increase in Google mobile traffic (organic)
How did we gain these huge improvements and efficiencies within our business and our website?
We leveraged Cloudflare to make our site faster in a strategy we coined “The Lightspeed Process” 👍
Even though we had a fast site at the time, we knew we could make it faster by cleaning up certain issues that we knew existed.
And in this case study we are going to walk you through the exact steps that we followed and how we did it, step-by-step.
Best part, you ask? Not one extra penny was spent on ads for these gains.
Check out the data from our Google Analytics and the almost instantaneous improvements we received. We “flipped the switch” on Sept 21st and this shows the 30 days following (versus prior).
We saw this growth happen by improving our site experience through site speed and this was driven using inexpensive cloud technologies that we discuss later.
I am going to walk you through each of the improvements we made on our site and explain the exact changes we made so you can reap the same rewards.
Word of caution…
If you are like me, you know enough about technology to be dangerous (and break things 😳 ) but if you are making these changes, I’d for sure have a professional developer on hand, or ask one of the web development wizards at Trinity for help.
Your desired outcome? Get a speed report card like the one I am showing below (from WebPagetest). This is our “report card” following our most recent scan.
WebPageTest is the leading global website grading tool and is a great indicator of how your site is doing from a speed standpoint.
First thing first. We are working on bringing up the C!
Trust me, it wasn’t always this many A’s. There were plenty of C’s there before.
It’s when we got these grades higher that we noticed how speed can truly be a HUGE driver for our business.
It can unlock new revenue opportunities that your business is missing from just being slow.
Another leading tool, GT Metrix also scored us pretty well in comparison.
I’m going to walk you through EXACTLY what we did – Step by Step – So you can get straight A’s as well and reap the gains!
Are you ready? Lets go!
Step 1: Use Cloudflare
Our first step was to integrate Cloudflare. For those who may be new to digital marketing concepts, Cloudflare is a CDN, otherwise known as a Content Delivery Network.
A CDN, in simplistic terms, is a network of servers that delivers your images and content to users faster than you can with a traditional web host only.
Because Cloudflare has servers across the country and globe, your content is typically faster served to the end visitor.
Best part of all is that you can get started for FREE!
To get started, Trinity changed our Domain Name Server (DNS) information to align with Cloudflare and 💥 our site immediately became faster after Cloudflare did its magic.
Out of the gate, without any significant additional tune ups we affected some of the most important speed factors.
Most importantly at first, we improved TTFB (Time to First Byte), since our server is based in Newark, and Cloudflare is able to get the page content physically closer to a visitor’s origin as mentioned earlier.
This was a free 14% boost to TTFB & to TTFI (Time to First Interactive)!
TTFB essentially is the sum of the time that it takes the server to respond and start sending back content to the visitor and their browser.
TTFI is typically when a page becomes fully interactive.
So great impact already with very little effort. GREAT SUCCESS!
Step 2: Get to work on images (with Polish)
As a service business, we need to make sure we present a layer of quality and sophistication within our marketing. As that is the case, our website has large custom imagery and graphics to better support our brand.
We noticed in waterfall diagrams that images were taking a bit longer to load than we would like.
Our strategy was to bring in Polish to compress images within Cloudflare.
Cloudflare states on their blog that 50% of page weight is made up of images. Getting your images as tuned up as they can possibly be is vital.
The key for us? Allowing for lossy compression.
This made a noticeable difference even with our images that were somewhat optimized previously.
Previously, we had served pre-generated WebP images as well for browsers that supported it, but since Polish supports WebP (and soon AVIF) image formats, we went with it.
Bottom line, use Cloudflare’s Polish service and see your images load like lighting!
Step 3: Enhance HTTP/2 Prioritization on Cloudflare
OK, so buckle up for a ride into tech talk. Or get your developer 👉
Our next step was to activate Enhanced HTTP/2 Prioritization, which basically gives the ability for a website owner to choose how a page loads.
Normally, a browser picks what resources to download at what time, blocking the page from appearing as soon as it could. This is traditionally how internet browsers have always worked.
But sometimes code can be wonky, with above the fold content buried in layers of scripts and tags.
Cloudflare automatically uses this capability to reconstruct the page in a way that they identify can improve the user experience.
By using the Enhanced HTTP/2 prioritization capability, the page becomes faster as an improved scheduling scheme is enabled making the page load quicker.
Cloudflare on their blog reports up to 50% faster in some instances! Definitely worth trying out on your site don’t you think?
Step 4: Improve Mobile Speed (with Mirage)
Although not nearly as high as our desktop traffic, our mobile traffic represented what we felt was a new opportunity to get people to our articles and content faster when users are in “micro moments” in our sector.
As previously discussed, images are typically the biggest culprits that inhibit page speed from improving on mobile devices.
We attacked our overall site image sizes with polish as previously mentioned, but now we wanted to present a new solution to dynamically serve images to certain types of mobile devices and speeds.
Enter MIRAGE.
This service from Cloudflare stores lower-res and more compressed versions of images for small screens and/or slow connections, and combines image requests.
The low-res versions are streamed in first, and then are eventually replaced with higher res. Kind of its own lazy load if you are familiar with that functionality in Ecommerce.
This enhancement drove great gains in our mobile page speed scoring and drove mobile search traffic higher by 245%!
Step 5: Optimize Javascript (with Rocket Loader)
If you have made it this far, I’m guessing you are familiar with digital marketing and the use of Javascript (JS).
Javascript is ubiquitous. It’s used in apps for tracking and software for functionality.
At Trinity we use it for both and thought we did a good job of optimizing the loading of it before these changes. We underestimated the impact we could have by allowing us the ability to control third party scripts.
Rocket Loader has come to save the day.
Rocket Loader does heavy lifting to optimize JavaScript loading. We thought we did a good job before, but what makes Rocket Loader special is it can control third-party JavaScript that we normally can’t.
In situations where there are render blocking scripts (see image below from Google Lighthouse), Rocket Loader is able to bypass the scripts for faster loading.
Think FAST
What are the five steps you need to take to get your site blazing?
Let’s recap:
- Move to Cloudflare
- Use Polish for Image Optimization
- Activate Enhanced HTTP/2 Prioritization (on Cloudflare)
- Leverage Mirage for mobile
- Launch Rocket Loader for Javascript
Thanks so much for going through our Lightspeed process for improving your traffic and site engagement through speed optimization. We hope you got some great ideas to help your website!
To schedule a free consultation review of your business, please schedule a time here.
Happy Optimizing!
