You’ve designed a beautiful site. It looks great, it sells widgets, and it gets the job done! But, there’s always room for improvement, especially on the technical side of things. One of the best ways to improve the overall experience on your site is to enhance your site speed.
Besides making the experience better for your users, page speed is also becoming a major influence on search engine optimization. So, don’t downplay the value of page speed, even if your site is pretty fast already. Look at how fast your competitors are loading and you may find the quick way to get ahead of the search engine curve — faster sites get preferential treatment.
1. Faster Servers Mean Faster Results
This is the easiest way to make sure your site runs fast all the time, but it can also be the most expensive option. 99% of my clients run off shared hosting via companies such as at GoDaddy or BlueHost.
If you’re delivering a lot of media content, it may be time to upgrade to a dedicated server or check into a Content Delivery Network (CDN) that specializes in hosting larger media files. This can dramatically decrease the load time of your pages, as the HTML, CSS, and other basic content of the page is loaded from your server while the big files get handled by a CDN.
2. Turn on File Compression
Most servers can handle file compression, which means that a file gets compressed by the server, sent to the user in a compressed format, and then unzipped. While this puts a bit more pressure on the user’s computer, it can have a significant impact on download speeds.
While this sounds intensive, it’s not too difficult. If you’ve got any experience at all with a web server, you should be able to go in there and make these changes.
For Windows-based servers, you have to configure IIS to compress files: Configuring HTTP Compression in IIS 7
For Apache-based servers, you’re looking for the mod_deflate functionality, which can be changed in the .htacess files: Mod Deflate.
This can have a huge impact, so take some time to explore this option. It can have a negative impact on older browsers that don’t have built-in decompression, but modern browsers will be fine.
3. Put Images into CSS
We all have files that get accessed on every page. Header graphics, menu graphics, and lots of icons are standard fare. So why not put these into a CSS file and stop requiring the browser to retrieve each file for each page?
When an image is in your CSS file, a separate CSS parser handles the process of finding these files. This is referred to as asynchronous processes. In short, this allows your browser to do a lot more at one time.
For example, let’s say you have the following images for your site header and menu:
- header.jpg
- facebook.png
- twitter.png
- myspace.png (<– really?!)
- instagram.png
- favicon.ico
- …and so on.
If these files are referenced directly within your HTML, the browser has to download the HTML, render it, and then grab each file individually.
or, you can let the CSS parser built into browser handle those requests while your browser is rendering the HTML. It’s a far more efficient way to get the job done.
Minification
Minification is simply removing whitespace from site files. In many cases, minification can reduce file size by 20-50%. But, you don’t want to go through the process of minifying the files until you’re done; minified files are much harder to edit because all your nice line breaks and indents are gone. So, wait until your site is finished before minifying.
After you minify any content, head over to W3.org and validate your content. This will ensure you haven’t broken anything in terms of valid markup. Then, put the content on your site and make sure you haven’t broken anything in terms of your site’s functionality and content.
4. Minify CSS
In most sites I’ve worked on over the past few years, the CSS can be incredibly large and often divided into multiple CSS files. WordPress is just one example. To make these CSS files load faster, minification is the answer.
There are lots of powerful tools available ranging from simple to uber-complex. In my experience, the simple tools have a very large impact on file sizes and the advanced tools may only have a little better results.
My favorite is over at MinifyCSS.com
Just paste the CSS contents into the CSS input area, tweak the compression settings and options, and process it. Then, replace the processed contents. If you’re only getting 5-10% improvements, you may have to get more aggressive with the compression settings.
You can validate the CSS via http://jigsaw.w3.org/css-validator/
5. Minify JS
Javascript minifying is a little more touchy than CSS. You can break your code fairly easily, so be careful. Having said that, more and more sites depend on JS for basic functionality, so exploring minification of your JS files can have a big improvement.
99% of the time, the only thing removed from JavaScript files that are minified are the comments and whitespace. So, all should go well, but if you find that your functionality gets broken at a specific place/functionality within your JS document, you can always compress above and below this functionality in several steps to get almost all the same minification results.
I use http://jscompress.com/ to get my JS files cleaned up fast.
6. Minify HTML
HTML is another great candidate for minification, but it’s less used because much of the HTML is generated dynamically via PHP or other server-side technologies these days. But, there are examples where you include large blocks of HTML in files and there’s no need to skip minifying these blocks of code.
A great, simple tool for HTML compression can be found at http://www.willpeavy.com/minifier/. Then, head over to http://validator.w3.org/ once again to make sure the code is still valid HTML markup.
7. Proper Image Sizes
Images are bandwidth hogs! It’s not uncommon to find a stray graphic that is 200k+ but only 150x150px on the page — which should only be 10k with light JPG compression. I see this all the time. I take the time to go through top-level pages and look at each image and be sure that the image served is the same size as being displayed.
This typically happens when WordPress or another CMS is being used. The user may have dragged and dropped a massive image and didn’t choose the correct size, using percentages to reduce the size on the page.
I recently found a little gem that was more than 2MB for a small image on the page. Page speed dropped from 20+ seconds to under 2 seconds. Make sure a small, devious image isn’t slowing you down similarly!
8. No CSS @import
A common practice while in development is to use CSS imports to grab styles like fonts. I use these all the time for things like Google Webfonts or some other library or resource that I’ve developed.
This is fine while in development. But when it’s time for production, take the time to consolidate your CSS into a single or few files. This is especially important for larger files or fonts. The browser has to wait for the content to be loaded and you don’t want to be dependent upon a 3rd party.
9. Browser Caching
This can be one of the more complex and time-consuming tasks a designer may face. The easiest way to take advantage of browser caching is to use a WordPress or other CMS plugin. These will handle the vast majority of caching duties you’ll want to mess with and save you the time of combing through the files that could benefit from caching.
In short, a file is a good candidate for caching if the content doesn’t change frequently. Headers, footers, and basic content on your page are just a few good examples. But, if much of this is dynamic that gets updated very frequently (hourly or daily), then caching can be a bad idea since the browser will not get the newest version.
For Windows-based servers: Configure IIS 7 Output Caching
For Apache-based servers, check out their Caching Guide (version 2.4): http://httpd.apache.org/docs/2.4/caching.html
10. Clean Up Bad Requests
I only bring up checking bad requests because they happen to everyone and should be a part of a maintenance cycle of your site. Bad requests can start occurring at any time and they’re not so obvious.
A common example is when Twitter changes up their API and some part of your site that queried their API no longer functions. Now you’re sending and getting bad requests. Enough of these and you’ll start seeing major speed issues with your site.
Check for bad requests regularly. Images get moved. CSS gets updated. Clients mess with stuff. Don’t underestimate just how much of an impact bad requests can have on site speed, even though they may be a rare occurrence.
Checking for Speed Opportunities
A great way to check out what areas your site could use improvements on is by using the Chrome browser’s built-in PageSpeed tool. Simply hit F12 or right-click and select inspect element. In the developer pane, you’ll see the PageSpeed tool:
You can get a lot of clues as to issues and areas of importance to focus on first with this simple tool.
How have you been optimizing your site? What’s your magic bullet for major speed improvements?
Justyn HornorWhen he's not being a complete goofball, “they” drag Justyn into the office where he pretends to be a Senior Editor and Content Engineer at Creative Content Experts — a content marketing firm out of NW Arkansas. He has 10+ years’ experience in technical writing and geek-related fields. He loves WordPress, coffee, and peanut butter a little too much.
