View RSS Feed

IMC News

15 Tips To Speed Up Your Website

Rate this Entry
Site speed and load time is definitely one of the factors that affect a website's usability, conversion rate, and search engine ranking - since it is factored into Google's algorithm. Increasing your site's speed is one factor that you can have more control over than many other factors. SEOMoz just outlined [URL="http://www.seomoz.org/blog/15-tips-to-speed-up-your-website"]15 Tips To Speed Up Your Website[/URL], with detailed explanations on their blog and separated into 3 sections or categories for different types of sites, so there is something for every website.

Here is the outline on the tips, for full details, see SEOMoz:

[SIZE=4][B]a) Server[/B][/SIZE]
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 [URL="http://www.thesitewizard.com/archive/findhost.shtml"]good tips about choosing hosting[/URL].

[SIZE=3]1. Leverage browser caching[/SIZE]
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: [URL="http://www.seomoz.org/ugc/expires-headers-for-seo-why-you-should-think-twice-before-using-them"]Expires Headers for SEO[/URL]

[SIZE=3]2. Enable Keep-Alive[/SIZE]
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,"[URL="http://en.wikipedia.org/wiki/Keepalive"] says wikipedia[/URL].

[SIZE=3]3. Enable gzip compression[/SIZE]
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," [URL="http://developer.yahoo.com/performance/rules.html#gzip"]says Yahoo[/URL].


[SIZE=3]4. Make landing page redirects cacheable[/SIZE]
[COLOR=#444444]Mobile pages redirect users to a different URL, (for example [I][URL="http://www.seomoz.org"]www.seomoz.org[/URL][/I] to [I]m.seomoz.org[/I]) so making a cacheable redirect [B]can speed up page load time [/B]for the next time visitors try to load site. [B]Use a 302 redirect[/B] with a cache lifetime of one day. It should include a [I]Vary: User-Agent[/I] as well as a [I]Cache-Control: private[/I]. This way, only those visitors from mobile devices will redirect.

[SIZE=3]5. Use a CDN[/SIZE][B]A content delivery network[/B] (CDN) is a collection of web servers distributed across multiple locations[B] to deliver content more efficiently to users[/B]. 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 [URL="http://www.maxcdn.com/features/"]here[/URL].

[/COLOR][SIZE=4][B]b) Content elements[/B][/SIZE]
[COLOR=#444444]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:
[/COLOR]
[SIZE=3]1. Minimize redirects[/SIZE]
[COLOR=#444444]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.

[SIZE=3]2. Remove query strings from static resources[/SIZE]
[B]You can't cache[/B] 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 ;)

[SIZE=3]3. Specify a character set[/SIZE]
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.
[/COLOR]
[SIZE=3]4. Minify your codes[/SIZE]
[COLOR=#444444]Removing HTML comments, CDATA sections, whitespaces and empty elements will [B]decrease your page size, reduce network latency and speed up load time.[/B][/COLOR]
[COLOR=#444444]You can use simple online tools like [URL="http://www.willpeavy.com/minifier/"]Will Peavy minifier[/URL], and if you are using WordPress, [URL="http://wordpress.org/extend/plugins/autoptimize/"]Autoptimize[/URL] can optimize and compress your codes and it supports CDN as well. By the way, SEOmoz could save 620B by compressing its HTML.
[/COLOR]
[SIZE=3]5. Avoid bad requests[/SIZE]
[COLOR=#444444]Broken links result in 404/410 errors. These cause wasteful requests. Fix your broken URLs (pay special attention to images). Use[URL="http://www.brokenlinkcheck.com/"] online broken link checker[/URL] or use [URL="http://wordpress.org/extend/plugins/broken-link-checker/"]WordPress link checker[/URL] for free. You can also read about [URL="http://www.seomoz.org/blog/crawler-faceoff-xenu-vs-screaming-frog"]Xenu Link Sleuth and Screaming Frog tools at SEOmoz[/URL] that can be really helpful.
[/COLOR]
[SIZE=3]6.Serve resources from a consistent URL[/SIZE]
[COLOR=#444444]It's best to share [URL="https://developers.google.com/speed/pagespeed"]Google's recommendation[/URL]:
[/COLOR]
[COLOR=#444444]"For resources that are shared across multiple pages, [B]make sure that each reference to the same resource uses an identical URL[/B]. 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 [I]mysite.example.com[/I] and [I]yoursite.example.com[/I] use the same JS file, and [I]mysite.example.com[/I] links to [I]yoursite.example.com[/I] (which will require a DNS lookup anyway), it makes sense to just serve the JS file from [I]mysite.example.com[/I]. In this way, the file is likely to [B]already be in the browser cache[/B] when the user goes to [I]yoursite.example.com[/I]."
[/COLOR]
[SIZE=3]7. Reduce DNS lookups[/SIZE]
[COLOR=#444444]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. [/COLOR][B]Reducing the number of unique hostnames[/B][COLOR=#444444] may[/COLOR][B]increase response times[/B][COLOR=#444444]. Just look at how a DNS lookup can take about 3 seconds of load time in SEOmoz. You can measure yours, by using [/COLOR][URL="http://tools.pingdom.com/fpt/"]Pingdom Tools[/URL][COLOR=#444444]. 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.
[/COLOR]
[SIZE=4][B]c) CSS, JS and Images
[/B][/SIZE]
[SIZE=3]1. Specify image dimensions[/SIZE]
[COLOR=#444444]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 elements, use [I]height[/I] and [I]width[/I] tags specifications.

[SIZE=3]2. Optimize images[/SIZE]
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 [I]CTRL+SHIFT+ALT+S[/I]shortcut to save an optimized image in Adobe Photoshop, use [URL="http://www.smushit.com/ysmush.it/"]Yahoo! Smush.it[/URL], or if you are using WordPress, you can install the [URL="http://wordpress.org/extend/plugins/wp-smushit/"]WP Smush.it plugin[/URL].

[SIZE=3]3. Put CSS at the top and JS at the bottom[/SIZE]
[URL="http://code.google.com/speed/page-speed/docs/rendering.html#PutCSSInHead"]Putting stylelsheets in the document head[/URL] 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 [URL="http://www.w3.org/TR/html4/struct/links.html#h-12.3"]W3 standards[/URL]. And, [URL="http://developer.yahoo.com/performance/rules.html#js_bottom"]put your javascript code at the bottom[/URL] of the page for the same reason.
[/COLOR]

Submit "15 Tips To Speed Up Your Website" to Digg Submit "15 Tips To Speed Up Your Website" to del.icio.us Submit "15 Tips To Speed Up Your Website" to StumbleUpon Submit "15 Tips To Speed Up Your Website" to Google

Comments