Ultimate Guide To Speed Up Your Website
Sep 10th, 2009 - 14 Comments »
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
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.
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.
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:
Header set Expires "Thu, 31 Dec 2012 12:00:00 GMT"
Header unset ETag
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
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.
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
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.
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
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
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.
Subscribe to Full RSS Feed
If 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.