15 killer tips to speed up your website

Creative Commons image on Flickr by LifeSupercharger

Speed up your page load times for a better user experience

Guest post by Armin Jalili
SEOmoz

Target audience: Businesses, Web publishers, website optimization firms, nonprofits, educators, general public.

Any website wants to provide users a great user experience, and a fast site improves overall site quality and increases user satisfaction. Everybody deserves a fast Web experience.

How to accomplish that? I’ll list a variety of factors to make your site zippier, plus useful tips from Yahoo and Google. Apologies: Some of this will be extra geeky! (And note: Make a backup of your site before starting!)

Leverage browser caching

1“Expires headers tell the browser whether a resource on a website needs to be requested from the source or if it can be fetched from the browser’s cache,” CJ Patrick writes. “When you set an expires header for a resource, such as all jpeg images, the browser will store those resources in its cache. The next time the visitor comes back to the page it will load faster, as the browser will already have those images available.”

Enable Gzip compression

Image by betterexplained.com

2“Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip,” says Yahoo.

Gzipping reduces the size of the HTTP response and helps to reduce response time. It’s an easy way to reduce page weight. You can enable it by adding the following code to your .htaccess file:

# compress text, html, javascript, css, xml:
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
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Or use the following PHP code at the top of your HTML/PHP file:

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

Or simply use plug-ins for your content management system, like the WP HTTP Compression plug-in for WordPress.

Use a CDN

3A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen. As you can see in the above image, it loads from different servers, based on the visitor’s region. You can compare CDN hosting with standard web hosting.

Make landing page redirects cacheable

4Mobile pages redirect users to a different URL (for example www.seomoz.org to m.seomoz.org), so making a cacheable redirect can speed up page load time for the next time visitors try to load the site. Use a 302 redirect with a cache lifetime of one day. It should include a Vary: User-Agent as well as a Cache-Control: private. This way, only those visitors from mobile devices will redirect.

Minimize redirects

5Sometimes to indicate the new location of a URL, track clicks, connect different parts of a site together or reserve multiple domains, you need to redirect the browser from one URL to another. Redirects trigger an extra HTTP request and add latency. Only keep redirects that are technically necessary and you can’t find any other solution for it. These are Google’s recommendations:

• Never reference URLs in your pages that are known to redirect to other URLs. Your application needs to have a way of updating URL references whenever resources change their location.
• Never require more than one redirect to get to a given resource.
• Minimize the number of extra domains that issue redirects but don’t actually serve content. Sometimes there is a temptation to redirect from multiple domains in order to reserve name space and catch incorrect user input (misspelled/mistyped URLs). However, if you train users into thinking they can reach your site from multiple URLs, you can wind up in a costly cycle of buying up new domains just to stop cybersquatters from taking over every variant of your name.

This image shows what happens when your browser tries to load SEOmoz.org:

As you can see, the greatest latency is the result of some external redirect chains. SEOmoz is using about 20 redirect chains that slow down the load time about 3,000 milliseconds.

Remove query strings from static resources

6You can’t cache a link with a “?” in its URL even if a Cache-control: public header is present. The question mark acts the same as Ctrl+F5. Use query strings for dynamic resources only. SEOmoz is using two dynamic URLs with “?” because of using KISSmetrics, but 2-3 queries are reasonable.

Specify a character set

7Specify a character set in HTTP headers to speed up browser rendering. This is done by adding a simple piece of code into your header:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

Note: Some CMSs use functions for character set (like WordPress with <?php bloginfo(‘charset’); ?> ). I suggest that if you are sure about your character set, write it instead of using PHP functions. It helps to minimize request size, so try to use HTML instead of PHP everywhere that is possible.

Minify your codes

8Removing HTML comments, CDATA sections, whitespaces and empty elements will decrease your page size, reduce network latency and speed up load time.

You can use simple online tools like Will Peavy minifier, and if you are using WordPress, Autoptimize can optimize and compress your codes and it supports CDN as well.

Avoid bad requests

9Broken links result in 404/410 errors. These cause wasteful requests. Fix your broken URLs (pay special attention to images). Use online broken link checker or use WordPress link checker for free. You can also read about Xenu Link Sleuth and Screaming Frog tools that can be really helpful.

Serve resources from a consistent URL

10It’s best to share Google’s recommendation:

“For resources that are shared across multiple pages, make sure that each reference to the same resource uses an identical URL. If a resource is shared by multiple pages/sites that link to each other, but are hosted on different domains or hostnames, it’s better to serve the file from a single hostname than to re-serve it from the hostname of each parent document. In this case, the caching benefits may outweigh the DNS lookup overhead. For example, if both mysite.example.com and yoursite.example.com use the same JS file, and mysite.example.com links to yoursite.example.com (which will require a DNS lookup anyway), it makes sense to just serve the JS file from mysite.example.com. In this way, the file is likely to already be in the browser cache when the user goes to yoursite.example.com.”

Reduce DNS lookups

11DNS lookups take a significant amount of time to look up the IP address for a hostname. The browser cannot do anything until the lookup is complete. Reducing the number of unique hostnames may increase response times. A DNS lookup can take about 3 seconds of load time. You can measure yours by using Pingdom Tools.

Note: Sprite your images. Put images that are loading every page of your site together to reduce your DNS lookups. You can find more information on SpriteMe.

Specify image dimensions

12Your browser begins to render a page before images are loaded. Specifying image dimensions helps it to wrap around non-replaceable elements. If no dimensions are specified, your browser will reflow once the images are downloaded. In order to do that in <img> elements, use height and width tags specifications.

Tip: Don’t use dimensions to reduce image dimensions on the fly — the user will still be downloading the full file size, even if the image doesn’t take up as much space on the screen.

Optimize images

13Images can contain extra comments and use useless colors. Keeping image sizes to a minimum is a big help for users on slow connections. Try to save in JPEG format. You can use a CTRL+SHIFT+ALT+S shortcut to save an optimized image in Adobe Photoshop, use Yahoo! Smush.it, or if you are using WordPress, you can install the WP Smush.it plugin.

Put CSS at the top and JS at the bottom

14Putting stylelsheets in the document head of the page prohibits progressive rendering, so browsers will block rendering to avoid having to redraw elements of the page. In most cases, users will face a white page until the page is loaded completely. This also helps you to make a standard Web page according to W3 standards. And, put your javascript code at the bottom of the page for the same reason.

Enable Keep-Alive

15Says Wikipedia: “A Keep-Alive signal is often sent at predefined intervals and plays an important role on the Internet. After a signal is sent, if no reply is received, the link is assumed to be down and future data will be routed via another path until the link is up again.”

HTTP Keep-Alive allows TCP connections to stay alive and it helps reducing the latency for subsequent requests. So contact your hosting provider and tell them to think twice about this! Most hosting companies disable this feature because it’s an optional feature (whenever it transfers less than 60 bytes per request).

There are other ways to speed up a web page, but I have tried to write about the most important ones that even professional bloggers can sometimes overlook. Run the fastest website you can in order to reach your goals faster.

Any other tips? Share your tips, comments or questions below!