Speeding Up Your Web Site and Reduce Loading Time

Simple Steps to Decrease Website Loading Time

Minimize HTTP Requests

Most of this time is taken for downloading all the components in the page : images, CSS, scripts, Flash, etc. Reducing the number of components to Reduce number of Requests in page.

Combined files

This is the a way to reduce the number of HTTP requests by combining all stylesheets, scripts

So this:

Becomes this:

Image maps

Combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests.

Use CSS Background Position:

Put Stylesheets at the Top

Placing stylesheets in the TOP allows the page to load progressively.Front-end developers care about performance and page want to load progressively, that is, we want the browser to display whatever content it has as soon as possible.In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.In our case the HTML web page is the progress indicator! When the page loads progressively logo, than body elements from top to bottem. all are visual reviews for the users who is waiting for the site. This helps the overall user experience.The problem with placing CSS near the bottom of the page is that it discourages progressive loading in browsers. These browsers reduces progressive rendering and it to redraw elements of the page. The user is trapped looking at a empty white web page.Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.

Put Scripts at the Bottom

The issue due to scripts is that they makes parallel download. That browsers download elements in parallel. If you provide your images from several hostnames, you can get more than two downloads available to happen in similar. While a script is loading, however, the browser won’t begin any other downloads available, even on different hostnames.In some circumstances it’s not simple to switch scripts to the end. If, for example, the script uses document.write to place aspect of the page’s content, it can’t be shifted lower in the site. There might also be scoping concerns. In many situations, there are tips on how to workaround these situations.An substitute recommendation that often comes up is to use postponed programs. The DEFER credit indicates that the program does not contain papers.write, and is an idea to surfers that they can proceed making. Unfortunately, Chrome doesn’t assistance the DEFER credit. In Online Internet explorer, the program may be postponed, but not as much as preferred. If a program can be postponed, it can also be shifted to the end of the site. That will make your websites fill more quickly.

Make JavaScript and CSS External

Should JavaScript and CSS be contained in external files is generally better.Using external files usually creates more quick loading because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML files get downloadable every time the pages is loaded. This reduces the number of HTTP requests that are required, but improves the size of the HTML papers. On the other hand, if the JavaScript and CSS are in external cached by the browser.

Avoid Redirects
Types of Redirects:
  • 300 Multiple Choices (based on content-Type)
  • 301 Moved permanently
  • 302 Moved Temporarily
  • 303
  • 304 Not Modified
  • 305 Use Proxy
  • 306 (no longer used)

The browser automatically takes the user to the URL specified in the Location field. All the information necessary for a redirect is in the headers. The body of the response is typically empty. Despite their names, neither a 301 nor a 302 response is cached in practice unless additional headers, such as Expires or Cache-Control, indicate it should be.

There are other ways to automatically redirect users to a different URL. The meta refresh tag included in the head of an HTML document redirects the after the number of seconds specified in the content attribute:

JavaScript and Jquiry also used to perform redirects

Avoid Empty Image src
Preload Images

By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you’ll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user.By preloading elements you can take benefits of reducing time of loading in browser. The preloaded files you will need in future. This way when the person trips the next web page, you could have most of the elements already in the storage cache and your web page will fill much more quickly for the person.

Preload Using CSS :

Preload Using Jquiry :

.htaccess – gzip and cache your site for faster loading and bandwidth saving

To speed up my site and save bandwidth, I use .htaccess file to gzip my text based files and optimize cache HTTP headers.

  • Turn on compression
  • Add an Expires and A Cache-Control Header
  • Turn off ETags
  • Remove Last-Modified header