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