Optimize Page Loading - 20 General Tips and Tricks

Introduction

Are you worried about the loading speed of your pages ? Here's a list of 20 general tips how to speed up your pages:  

Using the code 

1. Use Browser Cache

When visit page for first time, Browser have to download all resources, but on second visit, why should not browser get resources from Cache (previously loaded and saved resource). For Images/CSS/JavaScripts, you'll need to configure the web server.

2. call css/javascript files 'style_v1.0.1.css' 'script_v1.0.1.js'

When you make changes to existing css/javascript files of your page and you're worry that browsers could use older version of these files - just change their names.

3. Place css and javascript in external files

External files would 'help' Browser to cache for next use and is good for multiple visits

4. Avoid using <table>

Tables loads slower than other content - First to work out their structure and once to determine their content. So, as alternative of tables you can layout with css.

5. Avoid using images when it's possible.

Ex. if you need to display some text, instead of creating image with that text, add the text suitable formatted with css.

6. Reduce '<!-- ... -->', ' ', '<br />'

Adding of even one character increases the size of the page. As bigger is the page size as slower will be the loading time. So to decrease the page size reduce comments and white spacing.

7. Reduce Cookie Size

it's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.

8. Put '/' at the end of every href (if it's possible).

Ex. href="http://www.aspnetsource.com/".

When you add '/', the server 'knows' that the url is a directory and doesn't spend any time to work it out.

9. Write compact css

Ex.

 border: 1px black solid; 

is better than:

border-width: 1px;

border-color: black;

border-style: solid; 

10. Reduce < ... class="class_name" ... >

Ex.

<div>

<p class="class_name"> ... </p>

<p class="class_name"> ... </p>

<p class="class_name"> ... </p>

</div> 

.class_name { color: #ff0000; }

can be optimized to:

<div class="class_name">

<p> ... </p>

<p> ... </p>

<p> ... </p>

</div>

.class_name p { color: #ff0000; }

11. avoid 'animated' Gifs and Flash

Animated Gifs and Flash could have huge size, which'll slow down the page loading.

12. Choose appropriate formats of images

Be carefully when choose the format of images: GIFs works best for solid colors and sharp-edged transitions from one color to other, JPEGs works best for continuous gradations of many colors or grey tones.

13. Place css inside head

When place css inside head, then browser'll 'know' in the start about how to style and display content before having all content.

14. Place javascript at the bottom of the page (if it's possible)

Place javascript at the bottom of page as much possible, because Browser may block rendering during downloading, becausedocument.write() may induce HTML.

15. Avoid the use of query params in image URLs, etc.

Browsers refuses to cache any URL containing a question mark by default.

16. use short style names

By using short style names you can save space, especially when you refer to multiple styles.

17. Specify the height and width attributes for < img>s

When specify the heigth and width attributes for <img>s, but it allow the browser to map the layout of your page while the images are being loaded.

18. Choose <link> over @import

In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it.

19. Make favicon.ico Small and Cacheable

If you don't care about it the browser will still request it, so it's better not to respond with a 404 Not Found.

20. Minimize DOM Access

Accessing DOM elements with JavaScript is slow 

Points of Interest 

I hope this article has been useful to someone. If you like my articles, please, visit my blog, too :)