Poor website performance is expensive. According to Kissmetrics, an e-commerce site making $100,000 per day can lose up to $2.5 million a year for every extra second of load time. Fortunately, learning how to speed up your website and make big performance gains doesn’t have to be complicated. The first step, covered in What You Need to Know About Improving Website Performance, is to benchmark your site to see how it stacks up and what needs improvement. In this installment, we’ll cover step two for increasing website speed: Improving those benchmarks.
The basic principle behind most performance improvements is simple: Make your front end as lightweight as possible.
The most bang-for-your-buck improvements are:
- Reducing HTTP Requests
- Using a CDN
- Keeping Stylesheets on Top and Scripts on Bottom
With Managed WordPress and Managed WooCommerce Hosting with Liquid Web, we automatically handle setting expire headers and Gzip compression, so no need to worry about those two things.
WordPress users can get the first three of these and more with the Cache Enabler.
1. Reduce HTTP Requests
The primary ways to reduce HTTP requests are by looking at emojis and embeds on your site. Make sure they are either being used or disabled.
Other easy ways to reduce HTTP requests include:
- Image Sprites. Instead of downloading several images, combine related ones into a single file, and use CSS to change which one is displayed.
Cache Enabler is a well-supported plugin for the first of these tasks.
Creating image sprites is a bit more involved, but the technique is well-understood. Most designers can whip them up in a flash. Optimizing image assets before turning them into sprites will make your site even faster.
2. Styles On Top, Scripts On the Bottom
In your HTML, put your stylesheet references in your head tag, and script tags just before </body>.
Browsers fetch stylesheets as soon as it finds them in your markup. Putting them at the top of your page ensures the browser will paint the page as early as possible.
This helps the Start Render event, covered in the last installment, occur as early as possible. The sooner your client’s site begins to load, the faster users perceive it to be.
Putting scripts at the bottom of the page helps because script downloads prevent browsers from fetching other resources. Since scripts can get quite large, putting them on the top of the page makes your site feel slower. Putting them at the bottom ensures the page will be at least partially styled by the time it starts downloading scripts.
You’ll probably find that some scripts need to stay in the document head, and that’s okay. But moving the ones that don’t to the bottom of the document body is an easy way to make tangible improvements.
Fortunately, all quality WordPress themes do this by default. Front-end developers writing their own markup, however, should adhere to this guideline wherever possible.
3. Use a Content Delivery Network
A Content Delivery Network (CDN) is a distributed network of servers that host your website’s resources. When a user visits your site, they’ll download resources from the server nearest to them, ensuring the lowest possible latency and fastest possible response time.
If you don’t have a geographically diverse audience, a CDN might be overkill. But if you have an international audience, a CDN is an essential performance upgrade. You can find an introduction to CDNs on the Liquid Web Blog.
If your client agrees that a CDN is a worthwhile investment, discuss your options with Liquid Web. They offer solutions through Akamai, the world’s largest CDN, as well as CloudFlare so you can trust you’ll enjoy top-notch performance gains.
Don’t Settle For Slow Websites
In a world where users expect to wait only one second for a site to load, and refuse to wait more than five, a slow site is a failed one: It’s simply not up for debate.
Fortunately, improving performance doesn’t have to be complicated. Making improvements is a cyclical process:
- Benchmark. This will show you how your client’s site measures up, and what needs improvement.
- Make changes. What you change depends on your benchmarks. The five discussed here are a great place to start if you’re not sure what to fix first. Otherwise, refer to the last installment for tips on how to read waterfall charts and identify specific areas in need of improvement.
- Benchmark. Benchmarking your site after making changes will show you how effective your changes were, and what still needs to be improved.
- Repeat. Your second benchmark will show you what your changes didn’t improve. Use these to plan another round of changes, and do the whole thing over again!
How frequently you go through this cycle depends on the project, and when the website speed is “fast enough” is up to your client. Until that point, the important thing isn’t how often you do it, but that you do it, and that you do it consistently.
Making the performance cycle a habit guarantees that your client’s site will be a delight for its users. And, now that you know how to speed up your website, you’re well-prepared to learn and implement any advanced performance tweaks your benchmarks demand!