Google found
that moving from a 10-result page loading in 0.4 seconds to a 30-result page
loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006).
When the home page of Google Maps was reduced from 100KB to 70-80KB, traffic
went up 10% in the first week, and an additional 25% in the following three
weeks (Farber 2006).
Tests at Amazon revealed similar results: every 100 ms
increase in load time of Amazon.com decreased sales by 1%. (Kohavi and
Longbotham 2007). (source)
It’s quite
clear. Everyone
hates slow websites. The question is, how can you make your WordPress
website faster?
What
Determines Website Page Speed?
The Yahoo! YSlow and Google Page
Speed Mozilla Firefox plugins evaluate your site against the
widely accepted rules of website performance. The problem is, they don’t tell
you what to do with the information they provide.
So, I’ll break down the top performance recommendations
and show you you can apply them to your website.
1.
Minimize the number of HTTP requests
Translation: Limit the number of files required
to display your website
When someone visits your website, the corresponding files
must be sent to that person’s browser. This includes CSS files, Javascript
library references, and images.
As expected, every file you use to enhance your design
detracts from its performance. Similary, 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.
With free applications like Picnik and Image Optimizer at our
disposal, there is simply no excuse not to resize and optimize! Visitors (and
your server) will thank you.
3.
Minify HTML, CSS, and Javascript
Translation: Remove all white space from code when
possible before serving it to visitors
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.
Since it would be impractical to remove white
space from files that are constantly edited (unlike Javascript libraries like
jQuery, which are almost always served minified), we’ll want to leverage a
plugin like WP-Minify (good)
or W3 Total
Cache(best) to handle this at runtime without affecting the files we
need to edit.
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.
What?
I know, I know. The good news is that we
don’t have to understand the mechanicsbehind Content Delivery Networks in order to understand their
power: you have a team of servers distributing your static assets to visitors
across the globe. I’ve written a post on making
WordPress faster by integrating a CDN if you’re interested in
further reading on the topic.
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.
5.
Gzip and compress components
Translation: Compress files at the server level
before sending them to browsers
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 .htaccessfile to accomplish this:
#Begin gzip and deflate
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
text/css application/x-javascript text/plain text/xml image/x-icon
</IfModule>
This code might look a bit intimidating, but
it’s actually pretty simple. We’re just checking to see if the Apache mod_deflate module
exists and if so, electing to serve HTML, CSS, Javascript, plain text, and
favicon files using gzip compression.
Note that this requires the Apache webserver
and the mod_deflate module. To enable gzip
compression with NGINX, ensure that the following lines exist inside of the
appropriate directive:
server {
gzip on;
gzip_types text/html text/css
application/x-javascript text/plain text/xml image/x-icon;
}
Easy!
6. Choose <link> over @import
Translation: Beware the suck of IE!
When including your stylesheets, always link
to the files instead of using the @importreference. IE handles them differently by loading them as
if the reference was at the bottom of the document. [sarcasm] Nice work,
Microsoft! [/sarcasm]
7.
Put stylesheets 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.
8.
Put scripts at the bottom
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:
1.
Get content to visitors as fast as possible
2.
Don’t allow unstyled content to appear in the
browser (put CSS in the <head>)
3.
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
Urban
Translation: Where
the cache at?
Standard Translation: Don’t require browsers to pull down another copy of static files every time
Standard Translation: Don’t require browsers to pull down another copy of static files every 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!
The ExpiresByType directive
is used to tell browsers which files to cache and how long to hang onto them.
The example below would tell our visitors’ browsers to hang onto HTML, CSS,
Javascript, and images, and favicon for an hour (3600 seconds):
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html M3600
ExpiresByType text/css M3600
ExpiresByType application/x-javascript
M3600
ExpiresByType image/bmp M3600
ExpiresByType image/gif M3600
ExpiresByType image/x-icon M3600
ExpiresByType image/jpeg M3600
</IfModule>
Again, the code above is for your .htaccess file
on an Apache server. The corresponding settings in NGINX would look something
like this:
location ~*
\.(jpg|png|gif|jpeg|css|js)$ {
expires 1h;
}
Boom.
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.
Whew!
Still reading?
If so, great! You’re well on your way to a much faster
website. If you implement even a handful of the techniques outlined in this
post, you will see an immediate and dramatic improvement in your site’s
performance. It’s not important that we know how everything works from database
calls to HTTP requests—I surely don’t—it’s important that we’re familiar enough
with the concepts to work towards them on our sites.
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.
Handy
resources
In your quest for website speed, you might find these
resources helpful:
§
Pingdom—test
how fast your site is before and after making changes
§
WordPress
Caching—an in-depth comparison of WordPress caching plugins
§
Working
backwards—Mashable CTO Frederick Townes delivers the keynote at
WordCamp Denmark
§
Screaming
Fast WPMU—Dan Collis-Puro shows how Harvard dramatically increased
the performance of their websites
