How to decrease loading time of your blog?

Posted by on in PHP

There are number of best practices for making web pages fast. Here I am going to discuss some of the best and simple ways to increase speed and optimize your site.

Minimize HTTP Requests:

To reduce the http requests, one way is to make y

our design simple. But, if you want fast response time with pages having loads of content here are some techniques for reducing the number of HTTP requests.

CSS Sprites

is the method used to combined multiple images into one image. This method is used to reduce the image requests. If there are multiple background images in the site, this method will combine them into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Combining scripts and styles

into a single file is the way to reduce the HTTP request. In this way all the sccripts are combined into a single script, all stylesheets are combined to single stylesheet.

Reduce DOM Elements :

A complex page means more bytes to download which means it also slower DOM access to javascript. Highnumber of DOM elements means you have put unnecessarily elements into your html. By reducing DOM elements doesn’t mean you have to delete your content. Have a look if you have put extra elements only to fix design issues. Less number of DOM elements means your site will load faster.
Grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser’s defaults formatting. This is a chance to start fresh and think about your markup, for example use div’s only when it makes sense semantically, and not because it renders a new line.
The number of DOM elements is easy to test, just type in Firebug’s console:
document.getElementsByTagName(‘*’).length.

Avoid 404s :

Making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.
Particularly bad is when the link to an external JavaScript is wrong and the result is a 404. First, this download will block parallel downloads. Next the browser may try to parse the 404 response body as if it were JavaScript code, trying to find something usable in it.

Remove Duplicate Scripts :

Always recheck if a script is included only once in the page. It hurts performance when a script is included twice in the same page. Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.
Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.

Use minified version of jQuery Plugins, JS and CSS :

Minified version are smaller in size than the full version. This is because in minified version all comments are removed, as well as unneeded white space characters (space, newline, and tab). Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Make

CSS and Javascript external :

Using external files produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.Put those scripts at the bottom which are used after the page loads.

Don’t scale images in HTML :

Avoid use a bigger image than you need just because you can set the width and height in HTML. If you need

<img src="codeinsects_logo.jpg" alt="Logo" width="100" height="100" />

then your image (codeinsects_logo.jpg) should be 100x100px rather than a scaled down 500x500px image.

Put Stylesheets at head section of the page :

Putting stylesheets in the HEAD allows the page to render progressively. This is important for those users who are using slow internet connections who want something to see until the whole page loads. At least header, navigation, logo these part of the page will be shown until the page loads fully.So these are simple techniques to speed up your site. These are the basic one, will come very soon with some advance techniques. But I need your feedback too to make the list long.

You would also like:

About Sam

Web Developer by Profession, Human by Nature, Blogger by Passion. More than 5 years of experience in PHP, JQuery, Drupal, Cake PHP, HTML, CSS and Javascript. You can follow me on Twitter and also on Digg. Also you can email me at sam@codeinsects.com.

Comments

  1. By Gokhan on

    I like that your ideas and words are very simple and useful. So that I can agree with you and make an example of them… I hope that your advanced techniques will be very exciting as this basic techniques that you suggest in this article. I found it from your delicious.com stacks. ;)

    Reply
  2. By bolos caseiros on

    It’s really a great and useful piece of info. I am glad that you shared this helpful info with us. Please keep us informed like this. Thank you for sharing.

    Reply
  3. By collar swarovski on

    It is in reality a great and helpful piece of information. I am satisfied that you just shared this helpful information with us. Please keep us informed like this. Thanks for sharing.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>