Google has thrown the challenge down by considering website loading speeds when determining search engine rankings. After all, NOBODY likes a slow loading website. If you’re as addicted to speed and the code poetry that is WordPress, here’s how you can have both.
What Determines Website Loading Speed?
The problem is, they don’t really tell you what to do with the information they provide.
How to Speed Up WordPress
Let’s break down the most common performance recommendations these tools offer and how to actually fix them.
I’ll break them down into 10 categories.
- Minimize the number of HTTP requests
- Optimize and correctly display images
- Use a Content Delivery Network
- Gzip and compress components
- Put stylesheets at the top
- Put scripts at the bottom
- Utilize browser caching
- Use CSS Sprites
Let’s get to it.
1. Minimize the number of HTTP requests
Translation: Limit the number of separate files required to display a single page on your website.
As expected, every file you use to enhance your design detracts from its performance. Similarly, WordPress plugins are notorious for injecting extraneous CSS code in the head of your site without giving you the option to manually add the required styles to your stylesheet.
The key takeaway is this: eliminate everything that’s unnecessary. If you’re using a plugin because you like, take a look at how it impacts your code. The extra page-load time may not be worth it.
2. Optimize and correctly display images
Translation: Make images as small as possible and don’t require the browser to resize them
Depending on the format, many images contain a ton of extraneous metadata that can drastically increase the size of the file. Many designers fail to compress their images before uploading them to the web, and the overall impact of this can be dramatic with image-intensive designs.
Another cardinal sin of inexperienced webmasters is to upload and serve an image far larger than what is required for the design. WordPress is an unfortunate enabler of this, as many novice website owners upload large images directly off of their digital cameras and utilize WordPress’s image resizing functionality to display a smaller version.
Translation: Remove all white space and line-breaks from the code to lower its file size.
The spaces, tabs, and orderly structure used in code is to make it more human-readable. Servers and browsers don’t care about what the code looks like as long as it’s valid and executes without error. If you want your files to download faster, you can remove this whitespace before serving your code.
Whitespace is great for web design but in our code? Not so much.
4. Use a Content Delivery Network (CDN)
Translation: Use a CDN to lighten the load on your server and turbocharge its performance
A CDN is a high-performance network of servers across the globe that replicate the static assets of your website and serve them to visitors from the closest POP.
I know, I know. The good news is that we don’t have to understand the mechanics behind Content Delivery Networks in order to understand their power: you have a team of servers distributing your static assets to visitors across the globe.
CDNs are among the most effective ways to absolutely turbocharge the speed of our sites. We can’t neglect the other areas of optimization in the process, so this should be treated as the crowning jewel atop your beautifully optimized website.
Perhaps not surprising, ALL jHost web hosting packages include a CDN from the geniuses at Max-CDN.
5. Gzip and compress components in transit
Translation: Compress files at the server level before sending them to browsers so their file sizes are much smaller.
If you were instructed to hurl a piece of paper across the room as far as it can go, would you lightly crumple it or squeeze it with all your might? That’s right, you’d get your Hulk Smash on.
The sample principle applies here: we want to allow our webserver to compress our files before sending them to visitors. We can drop a few lines of code in our
.htaccess file to accomplish this:
This code might look a bit intimidating, but it’s actually pretty simple. We’re just checking to see if the Apache
Files are compressed by the server and sent to the website visitor where they are decompressed and displayed.
Translation: IE is a silly browser that doesn’t handle @imports very well.
When including your stylesheets, always link to the files instead of using the
@import reference. IE handles them differently by loading them as if the reference was at the bottom of the document.
There’s no reason for IE to do that. Their functionally idential, but it’s an easy change.
7. Put references to CSS at the top
Translation: All interface-related stylesheet references should be included in the
<head> of your document
We never, ever, ever want to display unstyled content to visitors—not even for a split second. Files responsible for the appearance of our site should be loaded first so they can be applied to the HTML as it loads. Makes sense, right?
Nothing more to it.
Translation: All functionality-related files can be loaded after our content is loaded
As we think through how to deliver our content to visitors as fast as possible and the subsequent steps that users will take, we will use the following priorities:
- Get content to visitors as fast as possible
- Don’t allow unstyled content to appear in the browser (put CSS in the
- Load the files required for interaction (tabbed widgets, certain external API calls, etc.) last
The thinking behind this is simple: users aren’t going to interact with the content before they can see it!
9. Utilize browser caching
Translation: Don’t require browsers to pull down another copy of static files every single time.
With browser caching, we’re explicitly instructing browsers to hang onto particular files for a specified period of time. When the file is needed again, the browser is to pull from its local cache instead of requesting it from the server again.
Running a website without caching in place makes as much sense as driving to the store for a glass of water every time you’re thirsty. Not only is in impractical and short-sighted, it takes more work!
Done. Bob’s your uncle.
10. Use CSS Sprites
Translation: Serve one highly optimized image for your design to minimize the performance impact
A CSS sprite is an an image comprised of other images used by your design as something of a map containing the coordinates of all the images. Some clever CSS is used to show the proper section of the sprite when your design is loaded.
There are fantastic articles on the topic available across the web that dive into the mechanics of CSS sprites and wonderful resources for creating them. SpriteMe is a utility that generates the sprite and code required to make it work. If you inspect the code for the nav menu on Pearsonified.com, you’ll see a great example of how to implement a CSS sprite.
Work smarter, not harder
You could spend a few months learning the ins and outs of web server architecture, how different browsers implement caching, and how to tie it all together…or you could simply install and configure the W3 Total Cache plugin by Frederick Townes (CTO of Mashable).
I can give no higher recommendation for a performance-related plugin than this one. The features could easily fill another post, but I’ll give you the important part: W3TC helps you thoroughly address 80% of the recommendations outlined in this post. There are other solid options for caching plugins, but W3TC stands head and shoulders above the rest.
Credit (or Blame)
A lot of research went into the writing of this jHost article. We’d like to give credit where credit is due. The following articles were very helpful.
- DIY Themes’ “Performance Unleashed“
- Visify’s “Tips to Increase Page Speed“
- Sean Davis’ “How I cut my page load speed by 90%“
Thanks to all!