Click here to Skip to main content
Click here to Skip to main content

Optimize Page Loading - 20 General Tips and Tricks

, 16 Oct 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
a list of general tips to speed up the loading time of your pages

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 Smile | :)  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

real_coder
Software Developer AspNetSource.com
Bulgaria Bulgaria
No Biography provided

Comments and Discussions

 
GeneralAvoiding repeatinh <p class="class_name"></p> Pinmemberhrgy8424-Oct-08 11:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141015.1 | Last Updated 17 Oct 2008
Article Copyright 2008 by real_coder
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid