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
- Setting Expires Headers
- Compressing resources with gzip
- Using a CDN
- Keeping Stylesheets on Top and Scripts on Bottom
WordPress users can get the first three of these and more with the WP Fastest Cache Plugin. With top ratings and over 100,000 active installs, it’s a sure bet for better website performance.
Reduce HTTP Requests
Reducing the number of HTTP requests a browser needs to make to load a site makes it faster for first-time visitors, because they won’t have to request as many resources from the server.
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.
WP Fastest Cache 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.
For users who are returning to your client’s site, we can do even better, and eliminate some HTTP requests by using Expires headers!
Set Expires Headers
When users visit your client’s site for the first time, you can tell their browsers to save certain resources that won’t change. That way, they don’t have to ask the server for them when they come back.
This is called caching, and it’s one of the most powerful performance tweaks you can make. You can implement this with Expires Headers.
Headers are packets of information that the browser and the server send to each other to communicate. When the server sends a resource back to the browser, it can send a special header along with it, called an Expires Header, which says, “This file will be the same when you come back— hang onto it for next time.”
This image contains an example of two response headers. The one on the bottom is the Expires header we’re interested in. Note that it contains a date, which indicates the precise time the browser should ask the server for new resources.
If you’d like to get wild with advanced configuration, though, you’ll have to manually modify your .htaccess files. These are special files inside each folder of your website, which contain instructions as to how Apache should handle the resources within that folder.
As discussed above, minifying scripts and stylesheets speeds up content downloads by reducing file sizes. It turns out we can apply the same principle to the bulk of our resources, and send them across the wire as heavily compressed ZIP files.
gzip is a popular algorithm for zipping files before sending them to clients. It can reduce the size of network responses by up to 70-90%, with proportional reductions in load speeds!
You can find the most recent Apache documentation here. If you opt for manual configuration, though, remember not to compress images or PDF files. They’re already compressed, so running them through gzip just wastes time.
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.
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!