Everybody deserves a fast web experience. Some of the following tips are implemented well by SEOmoz, but I will explain them anyway because of their general usefulness.
“Experiments demonstrate that increasing web search latency 100 to 400ms reduces the daily number of searches per user by 0.2% to 0.6%. Furthermore, users do fewer searches the longer they are exposed. For longer delays, the loss of searches persists for a time even after latency returns to previous levels.” Google says. Meaning people want your site to load instantly, and your site may be suffering a higher bounce rate if it takes too long. Microseconds can make the critical difference. So here are some easy tips for speeding up your WordPress site.
I will list a variety of factors (+ useful tips from Yahoo and Google) and will use SEOmoz as my example:
Note: Making a backup before starting is necessary!
A) Server
Choosing suitable hosting for your venture is the first step in starting a website. Hosting with a professional configuration can be of big help. Here you can find some good tips about choosing hosting.
1. Leverage browser caching
“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. 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,” says CJ Patrick in a nice article about how to use expire headers to set caching: Expires Headers for SEO
Unfortunately, it seems that SEOmoz doesn't use expiration for stylesheets and images.
2. Enable Keep-Alive
“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,” says wikipedia.
In fact, 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, (including SEOmoz's host) because it's an optional feature (whenever it transfers less than 60 bytes per request).
3. Enable gzip compression
“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 plugins for your CMS (like the WP HTTP Compression plugin for WordPress).
SEOmoz uses gzip. However, some external javascripts (AdRoll, Simpli and CloudFront) could reduce transfer size more than 60% by using gzip.
4. Make landing page redirects cacheable
Mobile 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 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.
Since SEOmoz doesn't support any specific mobile version, it can't have this problem (someone should take care of the bad behavior of SEOmoz's website on mobile devices)! Learn more about the importance of having a dedicated landing page here.
5. Use a CDN
A 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 here.
It seems that SEOmoz uses Amazon CloudFront for this functionality and I've tried MAXCDN, It's awesome, too. You can manage your caches and lots of other useful tools in one WordPress using W3 Total Cache.
B) Content elements
Since you don't have total access to your server, content elements are the most important things that you can manipulate. Let's start with the most obvious weakness of SEOmoz:
1. Minimize redirects
Sometimes 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 which 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. For instance, if C is the target page, and there are two different start points, A and B, both A and B should redirect directly to C; A should never redirect intermediately to B.
- 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.
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 3000 milliseconds.
2. Remove query strings from static resources
You 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 😉
3. Specify a character set
Specify 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.
4. Minify your codes
Removing 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. By the way, SEOmoz could save 620B by compressing its HTML.
5. Avoid bad requests
Broken 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 at SEOmoz that can be really helpful.
6.Serve resources from a consistent URL
It'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.”
7. Reduce DNS lookups
DNS lookups take a meaningful 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. Just look at how a DNS lookup can take about 3 seconds of load time in SEOmoz. You can measure yours, by using Pingdom Tools. I do want to mention that when I re-tested the homepage of SEOmoz.org from a server in Dallas, it showed better results than it did before I started writing this article.
Note: Sprite your images. This means put images that are loading every page of your site together to reduce your DNS lookups. SEOmoz combined lots of its images into one, like this sprite image. You can find more information on SpriteMe
C) CSS, JS and Images
1. Specify image dimensions
Your 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.
Note: Don't use dimensions to scale images on the fly — the user will still be downloading the original file size, even if the image doesn't take up as much space on the screen.
2. Optimize images
Images 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.
SEOmoz could save more than 50KB by optimizing images on the main page, particularly those in the slider. Check out tips on creating visually appealing content, so your images are both useful and optimized in a way that keeps your site fast.
3. Put CSS at the top and JS at the bottom
Putting 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 of 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.
There are of other ways to speed up a web page, but I have tried to write about the most important ones which even professional bloggers (like SEOmoz) can sometimes overlook. Of course, site speed is not the main goal but even an ideal website with a bad load time will find it hard to achieve success. Run the fastest website you can in order to reach your goals faster.