A User In Total Control Is A Designer’s Nightmare

How do you balance the creative control you give to the users, the usability of the product they make with your tool and the flexibility of that tool?
We designers have always had a problem of handing over creative control to the general population — the basic users. There are two reasons for this. The first is obvious: We are the ones who are supposed to know the principles of design and usability. Some of us were born with this feeling of what feels and looks right, while other designers have learned it — at least good designers eventually have.
The second reason is that, unlike users, we see the world in another way. We see what can be done to improve the things we use every day. For example, we might remember a restaurant not by its name or location, but by its poorly chosen typeface for the logo, as Tobias Frere-Jones recalls in the movie Helvetica.
In simple words, designers should be the ones who know what’s right and should know how to fix it when it’s not.
But other people also have a gift of aesthetic feeling, a gift to recognize beauty. It turns out that we’ve had it for a long time, and we need it in our daily lives. We believe that products that look good also work better, taste better and are more trustworthy. Zoltán Gócza has gathered quite a few points to demonstrate that aesthetics are important to people.
Ordinary users, then, just like designers, recognize beauty and know what’s right and not right. This is not where the problem of handing over creative control arises. The problem is that they don’t know the principles that designers do. There’s nothing to guide them to create something both functional and beautiful. Most of the time, they just put together a bunch of stuff that they think looks cool and end up with something.
This is an extreme example, but you get the point. I wonder how many poorly designed PowerPoint presentations you have seen during your college years (if you studied at a non-design college). I know I’ve seen way too many poorly chosen typefaces and colors combined with unsuitable backgrounds and animations.
Unlike designers, ordinary users know what’s right but don’t know how to fix what’s not right or how to create something that looks and works right from scratch.

It’s The Designer’s Fault

In his famous article “Simplicity Is Highly Overrated,” Don Norman states that users want many features, not simplicity. Other designers disagree.
The truth lies somewhere in between. Users want a lot of features, even though they won’t use most of them. Adding features makes a product more complex, which can lead to misuse and frustration.
We keep adding features until our products and tools become very complex. We do it to build flexible tools, because that’s what users want, right? But we forget in the process that users don’t know the basic principles of design that would guide them to create a usable, good-looking product. They also don’t have the time or simply don’t want to read our instructions on how to use the tool. This means that they’re using our flexible and complex tool to create a product that is neither usable nor good looking.
But there is a way. We can guide users simply by limiting their creative control, which also makes for a simpler tool.

User’s Creative Control In Digital Publishing

At Wondermags, we have been thinking for a long time of how much creative control to give to our users. Wondermags will be a digital publishing platform that empowers even basic users to create beautiful magazines with little effort. We want our magazines not only to look nice, but to be readable and enable an enjoyable experience throughout the process — from creation to consumption. That’s why we thought that guiding the user — by limiting their creative control — would be a good way to achieve this. Other tools simply offer too much control to basic users, who don’t know what to do with it.

The Basic User

But who is this basic user that I keep mentioning? At Wondermags, we see them as young to middle aged, with basic to average computer skills and average or even above average creativity. They made one of those bad PowerPoint presentations you saw but were very happy with it. They probably saw some very nice presentations at one time and really liked them; but when they had to create one by themselves, they had no principles to guide them.
PowerPoint provides a lot of options and is very flexible; a lot of magical stuff can be done with it. But the furthest that our basic user would go to create a better presentation is to find a template online, modify it a little and then add their content. And PowerPoint’s flexibility makes a slideshow quite easy to mess up — even from a good-looking template.
In his book Simple and Usable: Web, Mobile and Interaction Design, Giles Colborne calls basic users “mainstreamers.” He says they use technology not for its own sake, but to get the job done. They learn only a few key features and just want to feel in control.

The User’s Control

For a long time, creative control was completely in the hands of the designer. Graphic designers were the ones who designed books and magazines. But since the rise of personal computers and the Internet, more and more people have gained the ability to create, write and publish.
The majority of computer software is complex and flexible. Even the applications in Microsoft Office, which the general population uses every day, are very complex. They are professional applications and offer practically unlimited control, and a user needs some knowledge and has to follow some principles in order to create a usable product with them. Let’s look at a chart.

Linear relationship between the tool’s flexibility and the user’s control. (View large version)

The relationship between the tool’s flexibility and the user’s control is linear. The more flexible the tool, the more control the user has.

1. Low flexibility
   In this case, the tool is specialized for one task, and the user is very limited by it. So, low flexibility means low control for the user. The tool would be great for the general population — basic users — but it could also feel too limited.
2. Medium flexibility
   This would be either an intermediate tool meant for one task or a basic tool meant for numerous tasks. A medium level of flexibility also means a medium level of control. The tool would be intended for intermediate users.
3. High flexibility
   This tool would be very advanced, with a high level of flexibility and control. It would be specialized for one or more tasks and would be made for professionals.

However, for a tool to be more flexible, it also has to be more complex.

The more flexible tool, the more complex it is. (View large version)

And the more complex the tool, the more knowledge a person requires to properly use it. That knowledge, along with the principles, is what will guide them to creating a usable product.
The sweet spot between a tool’s flexibility and complexity and control for basics users lies somewhere between points 1 and 2. Let’s look at an example.

Tool Usability: Instagram and Photoshop

Everyone loves beautiful photos. And for a long time, the only way to get beautiful, professional photos was to hire a professional photographer. Photographers are advanced users. They take photos and edit them in various advanced applications — usually Photoshop, which is highly flexible and complex and offers a high level of control.
Instagram, on the other hand, is a simple and basic applications. It enables users to take photos and add photo effects to them. The result is a nice-looking photo. Instagram is very low on flexibility and offers little control to the user. But from the user’s point of view, the result is of high (or higher) quality and is achieved with little effort.
Users don’t know what they want. They don’t really want numerous features. Instead, they want quality. They want simple products that are easy to use and that don’t make them feel stupid.
Let’s put Instagram and Photoshop on our chart.

Instagram and Photoshop comparison (View large version)

As we’ve seen, Instagram, with its limited control, enables the user to create a product that is perceived to be of higher quality. Even though the tool is basic, it delivers an enjoyable experience. It offers just enough control for the user to feel in control.
Photoshop is meant for professionals and advanced users. It is highly complex and sophisticated and offers almost unlimited control to the user. But the user needs to know how to properly use it be familiar with principles of photo editing. The result depends heavily on it. A tool this complex offers a low level of usability to basic users.
Users want to feel in control and be guided at the same time. When someone is forced to use a tool (for whatever reason) but doesn’t really know where to start, they’ll get frustrated. We’ve all been there, but designers will take the time to learn how to use it. We make money by using these tools. Others don’t really have the time or interest to learn it. And if they do take the time, they will often feel like it’s wasted, as John Maeda explains on his blog The Laws of Simplicity.
Having said that the sweet spot for basic users lies between points 1 and 2, let’s see what this looks like on a graph:

Basic users want simple tools to get things done quickly. (View large version)

In this case, the tool would be focused solely on basic users.

1. Simple and inflexible
   The tool affords limited usability to the user.
2. Moderately complex but more flexible
   Usability at this point starts to fall. The tool is more appropriate to intermediate users.
3. Highly complex and flexible
   The tool is so complex that a basic user wouldn’t even know where to start, affording them little or almost no usability.

The problem is that finding that sweet spot, where the person is able to use the tool and feel in control, is very hard. Let’s see what designers can do about it. We can guide the users in two ways.

Guiding The User

As Giles Colborne puts it in this book Simple and Usable: Web, Mobile, and Interaction Design, “Mainstreamers don’t want to build it from scratch.” That’s why a complex tool wouldn’t suit basic (or “mainstream”) users. They wouldn’t even know where to start. It’s up to us, designers, to somehow guide them.

Teaching the User

Good design is as little design as possible — this is one of the 10 principles of good design laid down by Dieter Rams. The product you’re designing should be as simple as possible and not be burdened by non-essentials. The best product is one that doesn’t need a manual of instructions. The likelihood that a user would read a manual is low for one of two reasons:

• either the product is common and the user has already operated something similar (say, a washing machine);
• or the product is complex and unusual and the user doesn’t have the interest or time to learn it (say, Photoshop).

Limiting User’s Control

Instead of making the tool flexible and complex, requiring pages of instructions, the designer could simply limit the user’s control. How much to limit the user will depend on the target audience. If the product is meant for basic users, then users should be somewhat limited. They won’t need a professional tool, but rather a simple tool that feels natural to use without (or with few) instructions.
Limiting control entails cutting features. But you don’t have to leave out all of your best ideas. If a feature would make the product more useful without complicating it, then keep it. You could follow Giles Colborne’s strategies for simple and usable design by removing, re-organizing, hiding or displacing features.
In seeking the balance between simplicity and complexity, John Maeda came up with 10 laws of his own. The simplest way to achieve simplicity, he says, is through thoughtful reduction. He breaks this principle down into three methods: shrink, hide and embody. Advanced users are more likely to seek out hidden features, so the product could still be interesting even to them.

A Combination of Both?

Both of these approaches are quite radical. Stripping a product down to its core, without any instructions, might prove confusing. The user might launch the application and have no idea of what is possible. Short instructions that guide the user are quite common in smartphone applications.

These simple apps include instructions for first-time users. Keep the instructions as simple and short as possible. (View large version)

Google follows a good method with its products. It lists new features in a pop-up dialogue, which usually is unobtrusive. The user will usually have the option to open a tour that presents more details about the new features.

Google’s pop-up presents new features and allows the user to take a tour. This is a good approach to teaching users. (Image: The Programming Historian) (View large version)

Guiding By Limiting Control

So, if you don’t want your users to create something that resembles an old MySpace page or a painful PowerPoint presentation, then consider limiting their control and guiding them with short instructions.
Finding that sweet spot between control and usability is difficult. Start with something simple and upgrade it later, rather than start with something complex and remove features that fail. Also, a simple tool is much easier to modify than a complex one.

Ways of Limiting Control

There are many ways to limit the user’s control. One is to simply remove features that aren’t necessary or give too much control. For example, justifying the alignment of text in any Web-based tool is a bad idea. It just doesn’t work on the Web, so why add it to your tool?

Medium’s text editor is limited, but the experience it delivers is enjoyable.

Medium’s editor is simple and limited but enjoyable to use. It has no text-alignment settings or typeface options, and it has only two levels of headings. This way, authors on Medium can be sure that their articles will look amazing.
Another faux pas is aligning paragraphs to the right, which goes against readability rules (except in languages that are meant to be read that way). So, in a Web-based text editor, we could prevent the user from setting this for paragraphs, keeping it for headings, quotations and the like.
Tumblr removes features, too. Aligning text in its editor is impossible because alignment is dictated entirely by the styles.

Tumblr doesn’t allow text alignment at all.

Another way to limit control is by hiding or displacing features. As we’ve learned, intermediate and expert users are likely to explore features. They will scour all of the menus and options to see what’s available, finding all of the hidden gems. The Tumblr example above demonstrates this for an advanced feature: editing the HTML. WordPress goes even further and hides a dozen features behind a submenu that has to be activated by clicking an icon.

Hidden features in WordPress’ editor

A popular way to limit users is by predefining themes and plugins. A basic user doesn’t want to start from scratch, so guiding them with predefined themes is a good approach. We see this on all major publishing platforms.
The idea is that the designer is the one who creates the theme (or at least sets the typography and general styles). The user simply has to add their content, thus increasing usability.

Selecting a theme in Apple’s iBooks Author (View large version)

Another method is place different limits on different users. Basic users could have access to a free version that has basic features. It would feel natural and easy to use. The user would be limited in what they can create — for example, selecting from predefined themes or color palettes or making minor changes. But the tool would satisfy their needs.
Users who aren’t happy with those limits could upgrade to a version that is more flexible and complex. That tool would have advanced settings that make it more useful for intermediate and experts users — for example, creating a custom theme or choosing any colors.

Give expert users more features and, usually, a price tag. (View large version)

How Do Others Do It?

Let’s compare some of the tools we’ve mentioned.

Publishing Platforms

Twitter affords minimal control. In its case, all users embraced the limit, which has made Twitter what it is today: a simple and quick way to share of short messages and ideas. In the beginning, users could merely publish messages with a maximum length of 140 characters. Later, hash tags, replies, and image and video attachments were added. Twitter has been redesigned recently to look more like Facebook and Google+. Nevertheless, Twitter’s core remains simple and limited, which is why users love it.

Medium is a publishing platform that focuses on high-quality content. The platform itself is limited. But authors achieve what they want within these limits. Medium’s developers want people to write high-quality content in a beautiful, non-distracting environment. Once again, users embraced the limits, and their articles look amazing and are easy to read. It’s a win–win for both sides.

I’ve always thought of Tumblr as a much simpler version of WordPress. For that reason, I’ve never really used it. Tumblr comes with predefined themes and plugins. It’s a very good platform for basic and intermediate bloggers. And authors can create custom themes, so it’s also suitable for advanced users.
WordPress also started simply but quickly grew into a powerful blogging platform. It’s now available in two versions for different target groups: WordPress.com for basic users, and self-hosted WordPress for advanced users. We’ll take a closer look at WordPress later.

Text Editor

(Image: Wikipedia) (View large version)

Notepad or TextEdit (depending on your operating system) are probably the simplest text-editing tools. They’re very basic but can be used to do a lot. They can be used to create a document for any language of code — I started coding websites with them. But they’re too basic to really be used for serious coding.

(View large version)

Google Docs is my preferred tool for creating and editing documents because of its balance of features and simplicity. Its features are very similar to those of Microsoft Word and Apple’s Pages, but its interface is much cleaner, so it’s simpler to use. Compare Google Docs to Microsoft Word:

(Image: PCWorld) (View large version)

Microsoft Office is, in my opinion, one of the most misused tools. And that misuse leads to frustration. I’ve seen many users who don’t know how to do basic things in Word — such as create a table of contents or set heading levels. Many people still do these things manually.

Presentation Applications

Slid.es is a Web-based tool for creating presentations. The interface is much simpler and cleaner than Microsoft PowerPoint’s. But it’s not as simple as it looks at first sight. Many advanced features are hidden or displaced. The tool is flexible, but its developers have managed to keep the interface simple. For example, a user could end up creating something like this:

(View large version)

It’s readable and the background photo is nice, but the slide is awful. You don’t want users coming up with that.
PowerPoint is another tool in Microsoft Office that I find too complicated and misused. It’s even more flexible than Slid.es and gives the user almost total control. That’s why so many bad PowerPoint presentations are out there. It’s meant for professionals, but (like Word) is mostly used by people who don’t know how to use it properly. Most users don’t know the principles by which they can create effective presentations.

(Image: Ars Technica) (View large version)

Limit By How Much?

The question that remains unanswered is how much to limit the user. There’s no right answer. The only way to answer it is to find that sweet spot for yourself. But here are some ways to go about that.

Research and Start Simply

Before doing anything else, research thoroughly. Find out what competing tools are already out there. What do people use them for mostly? What problems do they have with them? Find out by researching the support forums for the products.
Also, define your target users. While designing for intermediate and expert users is easier, most users are at a basic level.
Start with a simple idea and create a prototype. In doing so, cut features that aren’t necessary, especially ones that complicate your product without adding much value.

Test With Target Users

The next step is to test with basic users. Test early and test often to see whether you’re missing your goals. A/B testing is perfect for this. Send a simple version of your product to one group of users and another more flexible version to another group. The feedback you get will be priceless. You might find that the product should fall somewhere between the two versions.

Remove What’s Unnecessary, Add What’s Needed

If you find that some features distract users or are not deemed useful, remove them. If most users want a particular feature, consider adding it. But remember that users don’t always know what they want. Also, add features that you think users would find useful or that would solve a problem for them (if prototype testing has proved it).

Allow Intermediate and Advanced Users to Customize

Once basic users are happy, consider adapting the tool into a professional version. This is a cool way to get advanced users on board.

What About Advanced Users?

“Experts are rarely insulted by something that is clear enough for beginners. Everybody appreciates clarity.”
– Steve Krug

We mentioned that advanced users are more likely to seek out features. Steve Krug believes that advanced users appreciate simple products, too. If you include advanced features in the pro version of your product, or as a customization, you could convince advanced users to try it out.

Allow Customization

Advanced users could grow frustrated with your limits. To satisfy their needs, consider allowing for customization.
I consider myself an advanced user, and I found WordPress.com too limiting. So, I went for the ultimate in customization by downloading the WordPress software and setting up a self-hosted website.
That’s what advanced users like. They will take the time to explore features, customizing an application to its core. They want to be able to change it. The basic version of the product simply won’t do it for them. Allow them to break the limits set for basic users.
Ideally, we would offer three levels of customization. WordPress is a good example again:

1. Select color palette, make minor theme customizations
   Users on WordPress.com may select a color palette for their website and change the image for their header section, logo, etc.
2. Select themes and plugins
   On WordPress.com and self-hosted WordPress websites, users may install themes that completely change the look of their website. They may also install plugins that add features to the website.
3. Create themes, customize core features, add features
   The most advanced users get the highest level of customization. They may download WordPress, manually install it on their own server and customize it however they want. They may also create their own themes, develop their own plugins and even change WordPress’ core files.

WordPress shows that satisfying the needs of all three types of users is possible. It started as a simple publishing platform but has evolved into much more. Its high level of customization make it very suitable as a content management system, but only for advanced users. The version served to different user groups can and should vary.

But My Client Wants Features!

Every designer has been there: working on a project for an enthusiastic client who has a lot of crazy ideas for features. It’s a tough position to be in. Perhaps this client will take your career to a new level. If so, do you have to do whatever they say? How do you convince them that starting simply is best, that fewer choices is better than many?

• Cultivate a relationship based on respect and your authority as the designer.
  They are paying you for your knowledge and experience, so let yourself be heard. The designer’s job is not to say yes to every crazy idea. If you’re not afraid to say no, then they won’t see you as their puppet. Tell them that you’re a designer, not a pixel pusher. Believe me, it works.
• Back up your arguments and advice with examples.
  Show them examples of simple products that people love. Explain to them why they work and why people love them so much. The products don’t have to be related to theirs — you just have to prove your point.
• Remind them that simpler is less expensive.
  Explain to them that starting with a simple product means lower costs and a more flexible foundation on which to build. If they realize later that they’ve completely failed to define their product, then restarting will be easier — and more cost-efficient, too.

Our Limits

“Enabling everyone to automatically earn money with their knowledge,
 skills and stories.”
Wondermags’ vision statement

Wondermags decided to start with a simple and limited product. We’ll eventually have testing sessions and a closed beta version. The goal is to see whether our tool is simple enough for basic users and to see what kinds of products those users come up with. Based on the results, we’ll make adjustments.
Once we decide who our basic users are, we’ll guide them with instructions (as few as possible) and by limiting their control. Here are a few ways we plan to provide an enjoyable experience.

Removing Features

We decided to allow users to choose a color palette for the background, text and text background, rather than pick any color. The idea is to prevent them from coming up with something like we saw in the Slid.es example above. The colors, borders, buttons and so on will be completely predefined by styles.

Selecting a background color from a predefined palette (View large version)

Predefined Styles

The other limitation is popular with digital publishing platforms. The user selects from a range of predefined styles, which then apply a color palette, typefaces, margins and borders to the content.

Selecting a cover from a range of predefined styles.

Predefined Plugins

The magazines on our platform will be put together with blocks of predefined plugins. The user will put their magazine together piece by piece, filling in the content very simply.

Multi-columned blocks

Different Limits for Different Users

Features will be added in future releases, and the platform will be available in basic and pro versions. The pro version will provide more control for advanced users.

Customization

Finally, we allow advanced users to create their own styles, similar to WordPress, Tumblr and other publishing platforms.

Simple Tools As Extensions Of Ourselves

In this article, we’ve covered the following:

• Users want to create beautiful and useful products but usually don’t know how.
• The designer’s job is to find the balance between providing flexibility, usability and guidance to the user.
• Providing instructions and limiting control are two ways to guide the user.

In the end, it all depends on what you’re building and for whom. The general population finds simple tools more useful and easier to use. Overloading a complex product with instructions that people won’t have time to go through is a very bad idea. People are being forced to use software at work that frustrates them, but they try to cope. Do we really want our users to cope with the tools we design for them?

“The more complexity there is in the market, the more that something simpler stands out. And because technology will only continue to grow in complexity, there is a clear economic benefit to adopting a strategy of simplicity that will help set your product apart.”
– John Maeda

Designers have to find that sweet spot between flexibility and control. Users should get an enjoyable experience and be able to create a useful product with the tool. Our tools should be an extension of people’s lives, not the other way around.

How To Speed Up Your WordPress Website

A few months ago, I ran an experiment to see how much faster I could make one of my websites in less than two hours of work. After installing a handful of WordPress plugins and fixing a few simple errors, I had improved the website’s loading speed from 1.61 seconds to 583 milliseconds. That’s a 70.39% improvement, without having made any visual changes to the website.
According to a 2009 Akamai study, 47% of visitors expect a page to load in under 2 seconds, and 57% of visitors will abandon a page that takes more than 3 seconds to load. Since this study, no shortage of case studies have confirmed that loading time affects sales.
In 2006, Amazon reported that a 100-millisecond increase in page speed translated to a 1% increase in its revenue. Just a few years later, Google announced in a blog post that its algorithm takes page speed into account when ranking websites.

Below are twelve quick fixes that will dramatically improve your website’s loading time, including:

• identifying which plugins are slowing down your website;
• automatically compressing Web pages, images, JavaScript and CSS files;
• keeping your website’s database clean;
• setting up browser caching the right way.

Lay The Foundation

When your house is sinking into the ground, you don’t polish the windows — you fix the foundations. The same goes for your website. If it’s hosted on a sluggish server or has a bloated theme, quick fixes won’t help. You’ll need to fix the foundation.
So, let’s start with what makes for a good foundation and how to set ourselves up for a website that runs at lightening speed.

Choose A Good Host

Your Web hosting company and hosting package have a huge impact on the speed of your website, among many other important performance-related things. I used to be sucked in by the allure of free or cheap hosting, but with the wisdom of hindsight, I’ve learned that hosting isn’t an area to skimp on.
To put this into perspective, two of my clients have similar websites but very different hosting providers. One uses WPEngine (an excellent hosting company), and the other hosts their website on a cheap shared server.
The DNS response time (i.e. the time it takes for the browser to connect to the hosting server) of the client using WPEngine is 7 milliseconds. The client using the cheap shared hosting has a DNS response time of 250 milliseconds.
If you want your website to run quickly, start with a good hosting company and package.

Choose A Good Theme

Unfortunately, not all WordPress themes are created equal. While some are extremely fast and well coded, others are bloated with hundreds of bells and whistles under the pretence of being “versatile and customizable.”
A few years ago, Julian Fernandes of Synthesis ran an interesting case study in which he updated his theme from WordPress’ default to the Genesis framework, monitoring page speed. He noticed that just by changing the theme to Genesis, his loading time improved from 630 to 172 milliseconds.
When you choose a theme, check the page speed of the theme’s demo, using a tool such as Pingdom, to see how quickly it runs with nothing added to it. This should give you an idea of how well coded it is.

Use A Content Delivery Network

I recently started using a content delivery network (CDN) for one of my websites and noticed a 55% reduction in bandwidth usage and a huge improvement in page-loading speed.
A CDN hosts your files across a huge network of servers around the world. If a user from Argentina visits your website, then they would download files from the server closest to them geographically. Because your bandwidth is spread across so many different servers, the load on any single server is reduced.
Setting up a CDN can take a few hours, but it’s usually one of the quickest ways to dramatically improve page-loading speed.

12 Quick Fixes To Speed Up WordPress

Now that our foundation is solid, we can begin fine-tuning our website.
A good way to start speeding up a website is to look at what can be removed. More often than not, a website is slow not because of what it lacks but because of what it already has.

1. Identify Plugins That Are Slowing You Down

P3 is one of my favourite diagnostic plugins because it shows you the impact of your other plugins on page-loading time. This makes it easy to spot any plugins that are slowing down your website.

(Large preview)

A common culprit is social-sharing plugins, most of which bloat page-loading times and can easily be replaced by embedding social buttons into the theme’s source code.
Once you’re aware of which plugins are slowing down your website, you can make an informed decision about whether to keep them, replace them or remove them entirely.

2. Compress Your Website

When you compress a file on your computer as a ZIP file, the total size of the file is reduced, making it both easier and faster to send to someone. Gzip works in exactly the same way but with your Web page files.
Once installed, Gzip automatically compresses your website’s files as ZIP files, saving bandwidth and speeding up page-loading times. When a user visits your website, their browser will automatically unzip the files and show their contents. This method of transmitting content from the server to the browser is far more efficient and saves a lot of time.

(Large preview)

There is virtually no downside to installing Gzip, and the increase in speed can be quite dramatic. As we can see in the screenshot above, MusicLawContracts.com goes from 68 KB to only 13 KB with Gzip installed.
While some plugins will add Gzip to your website with the click of a button, installing it manually is actually very simple. Open your .htaccess file (found in the root directory on your server), and add the following code to it:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Once you’ve added this snippet of code to .htaccess, test whether Gzip is working on your website by running Check Gzip Compression. If for whatever reason the code above doesn’t work, try one of the other methods that Patrick Sexton describes in his article “Enable Gzip.”

3. Compress Images

Images take up the majority of bandwidth on most websites. WP Smush.it is another great plugin that automatically compresses images as you upload them to the media library. All compression is “lossless,” meaning that you won’t notice any difference in the quality of images.
One nice thing about WP Smush.it is that it works retroactively. If thousands of images are saved in your media library, you can run them all through the plugin, compressing them to a more manageable size.

4. Leverage Browser Caching

Browser caching is a tricky issue. A handful of great caching plugins are available, but if set up incorrectly, they could cause more harm than good.
Expires headers tell the browser whether to request a particular file from the server or from the browser’s cache. Of course, this only works if the user already has a version of your Web page stored in their cache; so, the technique will speed up the website only for those who have already visited your website.
Expires headers speed up a website in two ways. First, they reduce the need for returning visitors to download the same files from your server twice. Secondly, they reduce the number of HTTP requests made.
To do this with a plugin, I recommend using WP Super Cache. However, following an installation guide is strongly recommended to ensure that you set it up correctly. Alternatively, you could add expires headers by adding the following code to your .htaccess file.

#
# associate .js with “text/javascript” type (if not present in mime.conf)
#
AddType text/javascript .js

#
# configure mod_expires
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
#

ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType image/x-icon “access plus 2692000 seconds”
ExpiresByType image/jpeg “access plus 2692000 seconds”
ExpiresByType image/png “access plus 2692000 seconds”
ExpiresByType image/gif “access plus 2692000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 2692000 seconds”
ExpiresByType text/css “access plus 2692000 seconds”
ExpiresByType text/javascript “access plus 2692000 seconds”
ExpiresByType application/x-javascript “access plus 2692000 seconds”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”

#
# configure mod_headers
#
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
#

Header set Cache-Control “max-age=2692000, public”

Header set Cache-Control “max-age=600, private, must-revalidate”

Header unset ETag
Header unset Last-Modified

5. Clean Up the Database

I’m a big fan of how often WordPress autosaves everything, but the disadvantage is that your database will get filled with thousands of post revisions, trackbacks, pingbacks, unapproved comments and trashed items pretty quickly.
The solution to this is a fantastic plugin called WP-Optimize, which routinely clears out your database’s trash, keeping the database efficient and filled only with what needs to be kept. Of course, when doing anything to your database, always back up first.

6. Minify CSS and JavaScript Files

If you’ve installed more than a handful of plugins, chances are that your website links to 10 to 20 individual style sheets and JavaScript files on every page. This is not ideal. Putting all JavaScript into one JavaScript file and all CSS in one CSS file is considerably more efficient.
This is where minification comes in. Plugins such as Better WordPress Minify will combine all of your style sheets and JavaScript files into one, reducing the number of requests that the browser needs to make.
I prefer Better WordPress Minify because it’s less aggressive than some of the other plugins that do the same thing (some of which cause problems, as Hristo Pandjarov outlines).

7. Turn Off Pingbacks and Trackbacks

Pingbacks and trackbacks are methods used by WordPress to alert other blogs that your posts link to. While sometimes interesting, they can be a drain on page speed and are usually better turned off. You can turn them off under the “Discussion” tab in “Settings.”

8. Specify Image Dimensions and Character Sets

Before a visitor’s browser can display your Web page, it has to figure out how to lay out the content around the images. Without knowing the size of these images, the browser has to figure it out, causing it to work harder and take longer.
Specifying image dimensions saves the browser from having to go through this step, speeding things up.
For the same reason, specifying a character set in your HTTP response headers is useful, so that the browser doesn’t have to spend extra time working out which one you’re using. Simply add the character set to your website’s head section.

9. Move CSS to the Top and JavaScript to the Bottom

Linking to your style sheets as close to the top of the page as possible is widely recommended because browsers won’t render a page before rendering the CSS file. JavaScript, on the other hand, should be as close to the bottom of the footer as possible because it prevents browsers from parsing anything after it until it has full loaded.
In the majority of cases, this simple fix will improve page-loading speed by forcing files to be downloaded in the optimal order. But it can cause issues on websites that rely heavily on JavaScript and that require JavaScript files to load before the user sees any of the page.

10. Use CSS Sprites

A sprite is essentially one large image file that contains all of your individual images next to each other. Using CSS, you can hide everything in the image except for the section you need, by specifying a set of coordinates.
CSS sprites speed up a website because loading one big image is much faster than loading a lot of small images.

(Large preview)

The easiest solution is SpriteMe, a tool that turns all of your images into a CSS sprite.
Remember that Safari does not load large sprites, so use William Malone’s calculator to identify whether your sprite is too large.

11. Enable Keep Alive

HTTP Keep Alive refers to the message that is sent between the client’s machine and the Web server asking for permission to download a file. Enabling Keep Alive allows the client’s machine to download multiple files without having to repeatedly ask for permission, thus saving bandwidth.
To enable Keep Alive, simply copy and paste the code below into your .htaccess file.

Header set Connection keep-alive

12. Replace PHP With Static HTML Where Appropriate

PHP is great for making a website efficient and reducing the need to enter the same information multiple times. However, calling information through PHP uses up server resources and should be replaced with static HTML where it doesn’t save any time.

Conclusion

In the next 12 months, mobile Internet usage is expected to overtake desktop usage. This shift towards Internet-enabled mobile devices means that having a fast website has never been as important as it is today. Users now expect websites to be lightening fast, and developers who don’t comply will ultimately lose out to developers who invest in delivering a great experience.