Ultimate Guide To Speed Up Your Website

Posted in Design

Tips To Speed Up Web Pages
Load Time of a website is a major factor that affects usability and user behavior. Internet users hate to wait for slow loading web pages while snappier web pages lead to more satisfied and happy user experience. But as the internet connections have gone faster in terms of speeds, many web developers do not think of optimizing their websites for speed, which is an important factor in terms of user experience. Here are some ultimate essential steps that you can take to optimize your web pages for speed and increase the usability of your web application.

1. Reduce Number of Files

Reducing the number of files within a webpage reduces the number of HTTP connections required to load the page leading to a faster page load. Here’s how you can reduce number of files required to load a web page:

Use CSS Sprites

Instead of using separate background images for various elements, combine multiple background images into one and use CSS Sprites technique to use that file. By doing this, number of HTTP connections will be heavily reduced which will speed up page load.

Combine multiple CSS/JS Files

If you are using multiple CSS/JS files on your webpage, consider combining them into single file to reduce the number of requests.

2. Reduce File Sizes

Heavier files will obviously take more time to load, so here are some techniques you can use to minimize file sizes.

Minimize size of HTML file

Use HTML minimization tool like HTML Tidy that removes excessive blank spaces and white space characters from HTML.

Minimize size of CSS/JS files

Use tools like CSS Clean, JSMin to minify JavaScript/CSS files by removing white space and line-break characters. Use it only when you are ready to move our code into production.

Use JavaScript Compressor

JavaScript compressors like Packer can pack up your JavaScript code and reduce the size of JavaScript by a good amount as they reformat the source code or obfuscate source code to remove long identifiers with short ones.

Optimize Images For Web

Before adding images to your web page, optimize them for web. If you have created or edited a graphic image in a software like Photoshop, use the Save Image for Web option(if available) to save images in optimized way.
Smush It
You can also use tools like Smush.it, Online Image optimizer to optimize images for web.

3. Server Side Optimization

Cache Dynamic Pages

Caching your dynamic page outputs to static files will heavily reduce the time required for server to respond to request sent by the browser. Web servers like Apache are optimized to serve static content very efficiently. If you are using WordPress, use WP-Super Cache plugin to cache post pages.

GZip Components

Most modern browsers can accept gzipped content these days, use gzip compression on server side to compress html, CSS/JS content before sending it to browser, this will reduce the time involved in transferring content over network.

Use Expires header for static content

For content that is not likely to change over time like images, CSS, JS files, add an Expires header to use the browser caching facility. By setting an Expires date in future will tell the browser not to re request the specified resource and use it from cache.
Here’s the code to use for setting Expires header in Apache using .htaccess file:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 31 Dec 2012 12:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

Using Expires header for static content will significantly improve the experience of returning visitors to your site as all the static content will be served from local cache.

Add Trailing Slash to URLs

This method is lesser known but is known to improve performance. Always Add trailing slash(/) at the end of URLs in hyperlinks. This reduces the server overhead as it needs to remap the URL and sometimes a 301 HTTP Redirect is used, if trailing slash is not present.

Resolve 404 Not Found Errors

Resolve Error 404
404 Not Found errors are just an overhead for server as well as browser. Check out your server logs or broken links if any to find out links that return Error 404 and resolve them to reduce overhead.

Always use favicon.ico

Most browsers look for favicon.ico in for a domain name to fetch the tiny icon for a website irrespective of whether it is referenced in html or not. And if you plan not to use a favicon, place an empty favicon.ico file in your website root folder so that it does not give 404 Not found error.

4. HTML Optimization

Another great way to speed up your web pages is to optimize the HTML output of your Web pages so that page renders as quickly as possible for better user experience. Here are some tips to optimize HTML code of your website for speedier rendering.

Load Stylesheets At Top

Always put stylesheets at top of your web page in the head tag as it makes page load progressively. As browser starts receiving HTML content, the rendering of HTML will be done with CSS styles applied.

Put JavaScript files at bottom

When browser encounters JavaScript files in HTML, it starts downloading that and halts other resources. So you need to put all of your JavaScript code at the bottom of your web page except some important functions required for rendering of Web page. It is better to put all DHTML goodies at bottom of page to speed up page loading.

Avoid Using @import

If you are using @import to reference stylesheets, then stop using it as @import is equivalent to loading stylesheets at bottom of web page. Always use <link> to reference stylesheets.

Avoid CSS Expressions

Avoid CSS Expressions
CSS Expressions might sound useful, but they are highly inefficient in the way they are evaluated by browsers. Browsers evaluate CSS Expressions on page load, page scroll and each time mouse is moved. A single CSS expression on a standard web page is likely to be evaluate thousands of time by browser. You can check that by using a counter within CSS expressions.

Specify Image height width

Always specify width and height within img tag so that browser has information about size of image to display beforehand while it fetches content from server. Otherwise, browser will only come to know about size of image once it has loaded.

Avoid scaling images in browser

If you are using height and width property of img tag to scale a large image file to display in small size, then avoid using it as it puts extra overhead on browser while rendering the page. Instead use a thumbnail file of that image.

Put JavaScript/CSS into external files

Try putting your JavaScript/CSS code into external file instead of coding directly within HTML. Browsers usually cache external JS/CSS files which will lead to faster page loads for returning users.

5. Other Optimizations

Besides, above techniques here are some other useful techniques to optimize your web pages for speedier loading.

Reduce DNS lookups

Browser has to map every domain address to IP address using DNS lookup, and each DNS lookup takes between 20-120 milliseconds. So if you are using resources from multiple domains e.g. referencing images, objects, scripts from multiple domains, consider putting content onto your own server to reduce DNS lookups.

Serve Static Content From Multiple Hostnames

Since there is a limit as to how many connections browser can simultaneousely make with a particular server, use sub-domains to sever your static content utilize parallel download facility of browser. e.g. if your site is on say example.com, put your static content on multiple sub-domains like static1.example.com, static2.example.com etc. This does not lead to a DNS lookup since the domain example.com has already been resolved.

Serve Static Content From Cookieless domain

If your website uses cookies, which most websites use these days, you should be aware of the fact that for each request the browser makes to server, it also sends cookies with the request. This is just an overhead for static content like CSS/JS/image files. Serving static content from Cookieless domain will save this overhead. Many larger websites use this technique, Yahoo, for example uses yimg.com to serve static content. YouTube uses ytimg.com to serve static files.

Using a Content Delivery Network

Using a CDN significantly improves user experience as content is served from nearest location to the user’s location. This saves the network lag between far off servers and users and also distributes the load over multiple machines. CDN is a highly efficient technique but it comes at a big price and is used only by large websites and corporations.

Use Optimization Tools

Speed Optimization Tools
Use tools like PingDom, Firebug, Y Slow, Google PageSpeed to test your web pages. They will provide you with helpful insight into loading time of your web page and will show you the problem areas with suggestions which you can use to optimize your web pages and make them snappier.

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

14 Responses (Add Your Comment)

  1. I have always installed YSlow on the development machine as you suggest, since it gives this tips in a very powerful checklist., along with grades (an A in “Http requests number”…).

  2. Ejz says:

    Very good tips.
    Keep one thing in mind that caching dynamic content while the website is in development phase is not a very efficient Idea. As your changes in code may not reflect on website due to caching.

  3. john says:

    nice information, i like it,but how about page rank?

  4. Mark says:

    I will have to look into using CSS Sprites. I’m not very familiar with it but it looks like something I should learn.

  5. At Pixmac we’re doing most of it. And maybe that is why it’s so fast already, even that we have some aces in our hand still… ;-)

  6. Titanas says:

    So how we remove cookies from a server serving static files only? .htaccess changes maybe?

Comments are closed for this post.