How to enhance the speed of your website

A website must be simple in navigation and structure, pleasant, functional, have a good page rank, but most of all, it should be fast. A fast website is the key to increase the user experience and this brings you returning and happy visitors to your website. By following the following simple tricks we can optimize your website for speed with almost no cost at all. 

Optimize the images in your website 

It is well known fact that loading time of any website directly affects the user’s response to a website; viewers hate to wait for long to get the website to be fully loaded.

Images play a vital role on the loading of a website so it’s very important to take optimal size of the image in order to load the webpage faster. Photoshop and similar image editing software include a feature called “Save for the web”. Always use this feature since it will reduce the image size and load time substantially.

Image formats

In order to optimize the images it is very important to choose the right format. There are different formats based on the type and size of the image, which can be used effectively by following these rules:

JPEG: Stands for Joint Photographic Experts Group. This format was created for photographs and fine art-work. You should use JPEG images whenever you are displaying a photo or a true-color image. Use a 50% compression rate for optimal results with these images.

GIF: Stands for Graphics Interchange Format. The GIF is most favorable format for internet, mainly because of its small size. GIF is also used for animated images. JPEG images support millions of colors while GIF ones will integrate a maximum of 256 colors. You should use this format for flat-color images like logos, buttons or text images.

PNG: Stands for Portable Network Graphics. This format was specifically made to replace GIF images on the internet. The main advantage of PNG images over GIF ones is that they support 24-bit colors and alpha transparency. That said not all the browsers recognize some of its features. You should use the PNG format for simple images that require more than 256 colors.

Use the height and width tags

When you use images or tables on your pages you should always include the height and width tags. If the browser does not see those tags it will need to figure the size of the image, then load the image and then load the rest of the page. Here is an example of code containing those tags:

<img src="http://www.himshilp.com/images/himshilp_logo.gif" width="197" height="71" border="0" alt="" />

When the height and width tags are included the browser will automatically know the size of the image. As a consequence it will be able to hold a place for the image and load the rest of the page contemporaneously. Apart from the improvement on the load time of the page this method is also more user friendly since the visitor can start reading the text or other information while the image is being downloaded.

Don’t scale images in HTML

Don't use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width="100" height="100" src="banner.jpg" alt="banner" />
then your image (banner.jpg) should be 100x100px rather than a scaled down 500x500px image.

Reduce cookie size

HTTP cookies are used for a variety of reasons such as authentication and personalization. Information about cookies is exchanged in the HTTP headers between web servers and browsers. It's important to

• Keep the size of cookies as low as possible to minimize the impact on the user's response time.
• Eliminate unnecessary cookies
• Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected
• Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time.

Flush the Buffer early

When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.

Remove duplicate java scripts

Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

In addition to generating wasteful HTTP requests, time is wasted evaluating the script multiple times.

One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. The typical way to include a script is to use the SCRIPT tag in your HTML page.

      <script src="menu_1.0.18.js"></script>

An alternative in PHP would be to create a function called insertScript.

      <?php insertScript("menu.js") ?>

In addition to preventing the same script from being inserted multiple times, this function could handle other issues with scripts, such as dependency checking and adding version numbers to script filenames to support far future Expires headers

Put Stylesheets at the Top

Moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. 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.

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

Put Scripts at the Bottom

The problem caused by scripts is that they block parallel downloads. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

In some situations it's not easy to move scripts to the bottom. If, for example, the script uses [removed] to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.

Flush the Buffer Early

When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.

Example:

      ... <!-- css, js -->  

   </head>

    <?php flush(); ?>

     <body>

... <!-- content -->

Make favicon.ico small and cacheable

The favicon.ico is an image that stays in the root of your server. It's a necessary evil the browser will always request it, even if you don’t care about it, so make sure that this  file is always present in the server. This image also interferes with the download sequence, so if you are using a favicon in your website make sure that it's small, preferably under 1K.

Optimizing CSS

Cascading Style Sheets(CSS) make websites much more structured because they allow the browsers to cache style-related information from the .css file directly, eliminating the need to read that information every time a single page is loaded. Even if Style Sheets are naturally more efficient than HTML tables you can still optimize the CSS code to make your website cleaner and faster. Remove whitespaces as and when possible. Avoid repetition of the code wherever possible to make your style-sheets lighter. Use Shorthand Properties, Take Advantage of Your Inheritance, Use Grouping, Cut the Comments, Apply Styles Wisely.

Use a slash to display a directory

When a server opens a link in the form of “http://www.himshilp.com/seo-articles” it will need to figure what kind of file or webpage is contained on that address, wasting time on the process. If instead of using that link you include a slash (”/”) at the end like “http://www.himshilp.com/seo-articles/” the web server will already know that the link points to a directory, reducing the time to load the page.

Reduce the HTTP Requests

When a user is opening your website every object on the page (e.g. images or scripts) will require a visit to the server. Those HTTP requests will delay the response time of your site, and if you are loading number of objects this delay can add up to several seconds.

By reducing the number of objects on your website, we can reduce the delay from HTTP requests. Delete unnecessary images, headers, styling features and the like. If possible you can also combine 2 or more adjacent images into a single one.

Secondly make sure that your requests for external files or scripts are combined in a single location.

Add an Expires or a Cache-Control Header

We should refer the following as a rule:

• For static components: implement "Never expire" policy by setting far future Expires header.
• For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests .

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

Avoid too many banner ads

Don't waste your valuable website real estate on flashing banner ads, as they are most of the time ignored by the visitors, and they make your webpage heavy to be loaded. Provide more valuable content instead. Then mix in some relevant affiliate links within your website's body content, this helps your website visitors feel that they want to buy instead of feeling like they are being pushed into buying.

Avoid background music

If you really want your visitors to remain long on your web site, reading your content, the very least you should do is ensure that they aren't put off by annoying background music looping on your website. Not only this type of music will bother the visitor but delay your webpage’s loading time. If you really feel you must use background music at least make sure visitors have some control over it - give them the option of volume or muting controls at the very least.

Minify Javascript and CSS

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Obfuscation is an alternative optimization that can be applied to source code. It's more complex than minification and thus more likely to generate bugs as a result of the obfuscation step itself.

Avoid redirects

Redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

Webserver Log Analysis:

The logs that your webserver keep are an open book to teach where and when errors occur. The most important part in the logs are the 404 and 500 errors that represent a missing page. It means that a visitor or a web crawler requested that page and it's missing. This again does not have so much of an effect when it comes to speed but it's a good idea to try and repair the bottlenecks at least for the sake of user experience. Almost any web hosting provider offer a log analizer such as awstats

Surely there can be many other methods also like avoid using flash as much as possible because, usually, flash loads harder due to their sizes. Remove the HTML comments from your pages, because comments can slow your website down. Big or small, comments have something to say when it comes to page size. Actually you should remove everything from your website which you don’t really require. Avoid nested tables, it effects browser’s reading time. Avoid full page tables for fast rendering. The browser won't show anything until it's read the whole thing that way. For a faster loading webpage, either use multiple tables (not nested) or put some content above the main table to make your content in the first table show up faster. In this way you can provide something to read to your visitors while the rest of your page loads.

I think by reading this article you must have got a nice idea of restructuring your website in a way so that it takes less time to get displayed and in turn it will also increase the traffic to your website, which is truly essential in today’s age.