How we rebuilt a website to load in less than a second, and why speed matters for business profits
The modern web is increasingly slow and bloated. We all have experienced the loading … and loading … and loading of a site that is terribly clever and stuffed with features, but still unusable because you have to wait for so long to actually use it.
Assuming site owners are aware that site speed matters, most will strive to make a site that avoids the 10 second+ loading time nightmare. But that’s usually as far they as go.
They’ll say, “Hey, 3 or 4 second load times should be good enough right? I mean, look at how slow these other sites are!”
But, we all know that “good enough”, sometimes, isn’t good enough.
That is why we have been pushing the envelope to see just how important site speed can be for increasing search rankings and improving user experience—which means more site traffic, happier visitors, more content consumed, and more leads.
MODX made an unbelievably fast site, and my business saw results! Simple as that. I recommend their help to anyone with a website. It gave us a leg up and a huge ROI.
Eric Anderson, EC Restore
We found the perfect opportunity with a new client with whom we recently engaged. Eric Anderson recently had taken over ownership of ECRestore.com, a 30-year-old family business which focuses on restoring damage caused by water, fire, smoke and more. Eric’s site took 9 seconds to load, and he agreed with us: it needed to be faster. He wanted to invest in world-class speed, and we were there to help.
We are happy to share our results. The newly relaunched EC Restore website is fast. Really fast. Pages on the new site load as fast as 0.8 seconds, according to the GTMetrix speed measurement site benchmarks.
To achieve the perfect score above we went took extraordinary measures, including downloading the latest versions every day and locally serving Google Analytics (GA). In the real world, most sites include GA from their links per their instructions, which results in a slight points deduction. But the slightly lower score penalties you get from using them is really not worth the effort 99% of the time. Anything scoring above a 95 with less than 1MB is a good starting baseline goal.
More importantly, we wanted to unequivocally quantify how much of an impact a fast site can make. In other words … what about the money? Our hypothesis was that faster sites lead to more users and more conversions—and that speeding up your site is one of the best SEO investments you can make.
So how did we do it? With a combination of optimization techniques and proper server configuration:
- Your images are slow: How to optimize your images to load quickly
- Your CSS and JS is slow: How to prune the script bloat down
- Your Server shouldn’t serve static assets: Use a CDN to speed up your site
- Regular HTTP is bad vintage, not good vintage: How HTTP/2 speeds up any web page
Slow Images break your site, Fast Images make people happy
Back when everyone was on dial-up modems, we were accustomed to waiting for images to load line by line as we read the site text. That was 15 years ago. Now, there is no reason for your images to affect site performance if you follow these 3 simple rules:
1. Resize your images correctly
Incorrectly sized images are the main culprit for laggard websites, and way too common. Images that are displayed at 300x300 pixels are often sent as big as 1600x1600 pixles—that is up to 28,000% TOO LARGE. By just resizing your images to size at which they are actually displayed, you can save seconds of load time.
What if you have an image that is displayed largely on a desktop browser but shrinks down for mobile? For a site with anything more than 20% mobile traffic, it often makes sense to create two different versions of the image: a large version for desktop and a small version for mobile. Google cares a lot how fast your site loads for mobile search—you should care too. Most sites today see over 50% of their traffic from mobile, so this can really pay off.
2. Compress images properly and aggressively
JPEGs and PNGs can be both lossy and losslessly compressed.
Lossless compression does not affect image quality at all, but the tradeoff is image bloat that can weigh a page down and slow down page load times.
Lossy compression is something you should do if possible. Often times you can cut 75-90% of the image size without noticeably affecting the image quality at all. Lossy compression is used for JPEG images—photographs—typically.
Lossless compression of things like line art and images with large areas of flat colors or that need to support transparency are typically best served as PNG files.
There are a variety of great tools to help remove as much bloat as possible from your image files, like Image Optim. Use them!
3. Lazy Loading Images below the fold
When site visitors land on one of your pages, they want to see something pop on their screen instantaneously. But all they see is the portion of the page that is on their screen, ie. “above the fold”.
We use this to our advantage by first only loading those images which are above the fold. Afterward, we can load in the images further down while the user still has a site to browse.
CSS/JS: Too Many Scripts make your site Really Slow
Each one of these files might be small a file by itself. Yet, each file creates its own HTTP request, which has nontrivial overhead. We can mitigate this script bloat and therefore significantly speed up the site using two methods:
1. Trim the Fat
The first step is to determine which scripts and plugins are essential for the business operation of your site. You might really like that Local Weather plugin, but is it worth an extra half second of load time for each user?
MODX is a platform designed from the ground up to reduce reliance on excessive 3rd-party files. We have designed MODX to have a lot of functionality out of the box so you’ll be able to find what you need without slowing down your site—you can create exactly what you need without incurring plugin bloat.
2. Combine the JS files, Combine the CSS files
After deciding on the essential files, you can combine all individual scripts into one JS file, and also combine all the stylesheets into one CSS file. This way, you only need one HTTP request for each, which ends up saving time.
Bonus Points: If after going through this you are still loading a lot of CSS and/or JS, you can use asynchronous loading to defer loading non-critical CSS/JS until after the original page load. This method is similar in spirit to the lazy loading of images described above in the Images section.
Use a CDN to turbocharge site speed
We’ve long extolled the virtues of using a CDN to offload serving of images to your site visitors, and we’ve written about it numerous times here. In short, a CDN accomplishes a couple of things.
First, it serves the heaviest assets from locations a lot closer to your customers. Second, it is purpose built to serve assets blazing fast.
This frees up your server to just focus on generating or serving the HTML pages only, meaning it’s handling a mere fraction of the actual page content.
Bonus Points: While the Apache web server is virtually ubiquitous, especially amongst commodity cPanel web hosts, you really will pick up speed by using a server that uses NGINX. NGINX is a highly tuned web server designed with performance in mind, and serves a growing percentage of the busiest 1M websites because it simply excels at the job—28% handled by NGINX as of Feb 2017 (and growing) compared to Apache’s declining 41%.
HTTP/2 for Rapid Site Load Times
The HTTP/1.1 protocol has been around for decades. During that time, a number of innovations have been proposed and tested by groups like Google and Microsoft. In 2014 and 2015, the HTTP/2 protocol was published and adopted by almost all browsers.
One of the major goals of HTTP/2 was to decrease page load times through a number of technical tricks such as header compression and multiplexing HTTP requests. For the purpose of this article, the details don’t matter as much as the results. HTTP/2 regularly serves content 50-70% faster.
How do you use HTTP/2 on your site? Unfortunately, HTTP/2 is still not standard among internet hosts. The first step is to ask your hosting provider if they provide HTTP/2, and getting an SSL certificate to serve your site securely (HTTP/2 requires an SSL certificate).
Whether or not HTTP/2 is available from your host, adding an SSL certificate to your site may also increase site speed. Assuming it is supported, SSL certificates allow your site to use the “unofficial” predecessor to HTTP/2, SPDY, which leverages most of the same technical tricks for your site. And in any case, HTTPS matters today so it’s a great practice.
Profiting from a Faster Site—More Traffic, More Leads
So, what’s the end result of all this technical work? Does it actually matter?
We can definitively say, YES. Not only has Google stated it looks at load times when determining how it ranks sites, we consistently see client search ranks rocket up as a result of focusing on page load times.
For example, this screenshot shows Google keyword rank tracking for the month following launch for EC Restore:
Those are serious traffic gains. And, so far, we have seen similar increases every time we reduce load times for a client.
More traffic isn’t the whole story either! Faster sites make users happier—a fact that has been tested and proven by companies as big as Walmart. Happier users stay around the site longer and therefore are more likely to either purchase directly from the site or turn into leads.
For EC Restore, all 3 major user interaction metrics improved after we decrease site load times—session duration up, bounce rate down, and pages per session up.
What you should do now
There are a lot of technical details in getting a site this blazing fast. Luckily, we are experts at those details. If you’d like us to upgrade your site’s speed, get in touch for more information.
And if you want a hosting platform that can give extra speed to an already fast site, MODX Cloud provides a server environment that takes care of lots of the details right out of the box.