This article has been replaced by Wicked Fast Websites, a three-part series with more tips, tricks, and tools for building high performance websites.
In the age of mobile, web performance is a design feature. If your site isn’t fast, people will just leave.
Today, I want to share a few simple things you can do to dramatically improve the performance of your site. Using these techniques, I’ve gotten Go Make Things to load in less than a second, running WordPress on inexpensive shared hosting.
The Steps #
We’ll be doing a few things:
- Concatenate. Combining like files together.
- Minify. Removing the spacing, line breaks and comments from files.
- Smush. Removing unneeded data from image files.
- Icon Fonts. Icon fonts are a lighter, faster alternative to image-based icons.
- Compress. Reduce file size by up to 70 percent.
- Cache. Telling browsers to keep static assets stored locally so that they doesn’t have to be re-downloaded every time they visit your site.
Let’s get started…
One of the biggest bottlenecks in page load time is in downloading the actual files for your site.
Each HTTP request adds additional load time. It’s actually faster for a browser to download one 100kb file than it is to download two 50kb files. By combining similar file types together, you can improve page performance.
.js file. Rather than loading separate
.css files for your base styles, small screens, bigger screens and so on, combine them all into a single stylesheet with media queries.
And don’t think you can cheat by using the
@import rule. That still requires additional HTTP requests.
Minify Your CSS #
In Google Chrome, run the Developer Tools and click on the “Page Speed” tab. Then click “Analyze.”
You’ll be given an overall score, and a list of things you can do to improve your score.
One of the items on the list will be “Minify CSS.” Click it. Under “Suggestions for this page” is a link to “see optimized content.” Follow that to get a minified version of your CSS provided by Google.
Rather than overwrite my human-readable CSS, I paste the minified code into a new file called
style-min.css. Reference that in the header of your HTML.
Paste the minified code into a new file called
js-min.js, and change the link in your HTML to that file.
Minify Your HTML #
There are a few ways to minify your HTML.
If you’re using WordPress, there’s actually code you can add to your
functions.php file to dynamically serve minified HTML.
?> add this bit of code (.txt file), courtesy of DVS. If you view source after making this update, you’ll see a message at the bottom of the page telling you how much the file was compressed.
One issue I have discovered: If you use inline AJAX, this code may prevent it from working properly. If you find this to be the case, set
Images in their raw form often have a lot of extra but unneeded data in them. This makes the file sizes up to 60 percent bigger than they need to be.
“Smushing” images is the process of removing that unneeded data and optimizing them for web viewing.
Smushing Apps #
So how exactly do you smush an image? There’s an app for that!
I downloaded ImageOptim, which is unfortunately Mac only. It’s a simple drag-and-drop application, and actually shows you how much smaller the file is after smushing.
If you’re on a PC, you can also use Smush.it, a web-based app from Yahoo.
Better file types #
It’s worth noting that I’m not just smushing my images, but also making smarter decisions about file types.
Historically, I would save all of my images as PNGs files. PNG is a lossless image format, so it keeps graphics sharp and crisp (as opposed to the lossy JPG format). However, PNGs are also substantially larger than JPGs.
For icons, PNGs make a lot of sense (or used to – more on that in a minute). But for something like a photo of people or places, which already have a lot of noise in them, a JPG is actually a better format because it’s much smaller in size.
Icon Fonts #
Rather than using PNGs for my icons, I actually use an embedded web font.
Using the IcoMoon app, I was able to create a custom font set with just the icons I need. It weighs in at just 4kb and results in just a single HTTP request, which drastically improves performance.
And because I’m loading a font and not images, they can be scaled smoothly to any size, styled easily using CSS, and don’t get distorted on retina displays. If you don’t go the icon font route, you should use image sprites instead.
In Apache HTTP servers,
.htaccess (hypertext access) is the configuration file that allows for web server configuration.
With a simple modification to your
.htaccess file, you can tell the server to send your files compressed as gzip files. This reduces file size by about 70 percent.
Learn how with this tutorial on GitHub.
Setting cache headers tells browsers to keep static assets stored locally so that a visitor’s browser doesn’t have to re-download them every time they visit your site.
This is also something that’s done using the
.htaccess file. Follow these instructions on GitHub.
Caching for WordPress #
If your site is powered by WordPress, there’s an additional step you can take that will dramatically improve performance.
Each time someone accesses your site, WordPress dynamically generates an HTML page for them using server-side processing. Caching your WordPress files will create static HTML pages ahead of time that get stored on the server and sent to visitors. This is a lot faster than WordPress creating a fresh page each time someone visits your site.
I prefer Comet Cache. There’s only one thing you really need to do: switch it to on.
Comet Cache automatically updates pages every hour (in case content has changed), and for people who are logged in or who have left comments, it serves them the dynamically generated pages instead of cached ones.
This reduced my page load times by about 30 percent.
Page Structure #
This doesn’t make the page download content any faster, but it does help browsers start displaying it more quickly.
In order to avoid having to redraw elements, browsers will wait until the stylesheet is loaded before displaying content. If the CSS file is one of the last things to download, people who visit your site will stare a blank page for longer.
Your High Performance Website #
These techniques took me about 30 minutes to get set up. This site now loads in under a second, running WordPress on inexpensive shared hosting.
Your performance may vary a bit (I also have an extremely small CSS file and don’t use jQuery on this site), but these tips should still make a big difference.
Referenced & Useful Resources #
- Web Performant WordPress by Dave Rupert.
- Front-end performance for web designers and front-end developers by Harry Roberts.
- The Page Speed add-on for Google Chrome and Firefox.
- YSlow, another website performance tester from Yahoo.
- Pingdom, another tool to test page speeds.
- Pre-minified jQuery and other code from Google.
- Easy Trick to Minify HTML by DVS.
- ImageOptim, a Mac app for smushing images.
- Smush.it, a web-based app for smushing images from Yahoo.
- IcoMoon, an amazing icon font app.
- My tutorial on using icon fonts.
- Image Sprites: What They Are, Why They’re Cool, and How to Use Them by Chris Coyier.
- Best practice for speeding up your website from Yahoo!
- More articles on...