Good Advice to Increase your Site’s Speed
March 17th, 2009 by Tweet
In this entry, I will show you how to increase the speed of your site! Some designers/developers tend to over use images and flash, when plain text would be sufficient. Also, some designers/developers like to use too many cascade styles sheets files for one simple page. Though style is essential to a great site, simplicity is the key when it comes to increasing the speed of your website. In this fast paced world, people want information as soon as possible, and if you do not give it to them, they will leave your site frustrated. The purpose of a website is to give information, so make sure you give it as quickly as possible. This can be accomplished by using simple plain text whenever possible in your site.
In my opinion, the average website should load in no more than 15 seconds. And, when a website takes more than 8 seconds to load, I highly recommend using a loading image to keep the user’s eye (client) patient and quite. Remember that 90% of the time people are looking for information when they enter a website, and they are looking for that information immediately. The simple text information that people are requiring is just 10k worth of information. The extra items that tend to slow a site’s loading time are just design elements used to make your site more pleasing to the eye. Do not get me wrong, style is very important and a visually pleasing site is crucial; however do not sacrifice the speed of your site for non-essential design elements. Also, read below to get other great ideas to speed up your site.
P.S. I recommend, always developing for 56k modem users because that gives you the ability to create websites for all speed without worrying about any issues.
Below please see my entry entitled, “Good Advice to increase your site’s speed:”
-
Using CSS
a) Always use CSS in your designs. Try to use CSS in external files. That way you can share the same file for multiple pages.
b) I recommend the use of Shorthands in your design because that save some kilobytes in your pages. For example:
#content { width:200px; height:100px; background-color:#CCCC66; border-top-color:#333333; border-top-style:solid; border-top-width:1px; border-bottom-color:#333333; border-bottom-style:solid; border-bottom-width:1px; border-right-color:#333333; border-right-style:solid; border-right-width:1px; border-left-color:#333333; border-left-style:solid; border-left-width:1px; }
Can be rewritten like this:
#content { width:200px; height:100px; background:#CCCC66; border:1px solid #333333; }
C) Avoid tons of images and JavaScript using CSS.
There are so many affects you can apply to your designs using only CSS, for example mouseovers, drop down menus, etc.
D) Do not use images instead of text. -
Minimizing HTTP Requests
Every file we include in our web page is a request to the server. That includes images, style sheets, JavaScript files, etc. For example:
<link type="text/css" href="css/styles.css" rel="stylesheet" rev="stylesheet" media="screen" /> <link type="text/css" href="css/header.css" rel="stylesheet" rev="stylesheet" media="screen" /> <link type="text/css" href="css/alternative.css" rel="stylesheet" rev="stylesheet" media="screen" /> <script type="text/javascript" src="js/actions.js"></script> <script type="text/javascript" src="js/effects.js"></script>
Reducing all CSS in a single file named styles.css and all scripts in another file named behlayer.js.
<link type="text/css" href="css/styles.css" rel="stylesheet" rev="stylesheet" media="screen" /> <script type="text/javascript" src="js/behlayer.js"></script>
Now we have only two HTTP Requests instead of five.
-
Ajax Frameworks
Why to reinvent the wheel? If you know that there are so many JavaScript Framework that work perfectly. Don’t waste your time and effort coding something that is already done.
A good example of a framework and its potential is JQuery. With this JavaScript Framework you write less and do more… Example:
window.onload = function(){ var mybtn = document.getElementById('mybuttom'); mybtn.onclick = function(){ alert('Hello Admix Web'); } }
You can get similar using JQuery Framework:
$().ready(function(){ $('#mybuttom').click(function(){alert('Hello Admix Web');}) });
-
Optimize the images
One of the most important issues in website speed is image optimization. Always choice the right format for the images:
GIF is very useful for background and animation but at the same time it only could has from 2 to 256 colors.
PNG is a W3C recommendation and it is the only one that can have transparency. The only issue is that some browsers like IE6 don’t allow transparency.
JPEG is still the most used compression method that allow compress 5 times the size without loosing the quality. And, it is great for slide shows, pictures, backgrounds, etc.
Some websites just reduce the size of a picture, scaling the width and height properties. However, the picture is going to keep the real kilobytes and you are going to loose some seconds of the page load. Don’t be a couch potato and take your time to optimize the images.
Another tip about images is using the width and height properties to tell the browser the size of your images before start loading. That’s helpful because the browser reserve the space for the image.
There are so many tools you can use to reduce/optimize your pictures, like Photoshop,Paint Shop Pro, Gimp, and the online tool Web Resizer.
-
JavaScript at the bottom
When the browser requests a web page on the server, the page loads from top to the bottom. If you have a numerous amount of JavaScript files or at least they are so heavy, the browser is going to first load the files that are located on the top and then continue with the ones that are at the bottom (body).
-
Removing unnecessary code
When we are developing or testing our applications, we always left unnecessary code around. Like commented code, duplicate scripts, duplicate styles, etc.
An alternative for comments in our site is creating a text file with the description of our code, example:
//Description file //Author: Author Name //Date: 20/03/2009 ------------------------------------------------------------------- File Element Comments ------------------------------------------------------------------- index.html divajax Div to get the answer by Ajax.
Recommended Books
High Performance Web Sites
Website Optimization
Speed Up Your Site
Recommended Links
Our self paced VCP-410 dumps training courses and high quality comptia security+ dumps provide you definite guarantee for passing the real exams. If you want to get through exams, study our ccie certifications material, SY0-301 braindumps, and 70-680 dumps.
Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Dominican Republic. He has more than 10 years experience in the computer programming, graphic design, and web development world, including 2 years teaching computer science. Teylor has a degree in Applied Sciences from the University of Louisiana and is completing a Master’s degree in IT with a concentration in Web Design and Development, at the University of Denver.
Subscribe to our RSS
Please help us to promote this article.
Sponsors
A Leading B2B platform with 10 years history. Compare & Inquire with Trusted China Suppliers (SGS certified). Log on & Order now!
Great advice, too often designers forgo speed for looks.
I want to note that whilst PNG transparency support is somewhat limiting, it’s use as a more compact version of a GIF is widely supported.
nice articles. , good job.
nice article thanks..
trackback:
http://www.joyoge.com/story.php?title=good-advice-to-increase-your-sitersquos-speed-admix-web
A nice addition is minifying your files. It reduces your files by a lot of kb more info about it here: http://code.google.com/p/minify/
Nice article. I will be waiting read yuour upcoming posts!
yeah , The ease of your audience is topmost priority and design comes after that . Moreover search engine loves simple sites .
You could also use punypng for compressing gif/jpg/png images, and you could also use php caching. Search for ‘best practices for speeding up your web site’ at developer.yahoo.com for more tips..
Excellent. Even though, I’m not a hard-core web designer. I was able to understand this like an expert.
Thanks for sharing the information
The examples in `Minimizing HTTP Requests` does not show up in Chrome, Safari and Opera, because you did not html encode the tags’ characters.
GIF also supports transparency, although a color only can be fully transparent or fully opaque. Some features of the PNG transparency is supported by IE6 too, but that is only the same feature that GIF has and only supported for 8 or less bit PNGs.
For compressing PNG files those tools you mentioned does the worst job. Try OptiPNG, pngcrush, pngout. These optimize PNG files much better, even like 20-40% better then Photoshop which i think has the worst output of them all.
The problem with JavaScript loading is not that they start loading, but they block loading and rendering of the rest of the page, because of how some bad parts of the language was designed. So putting JavaScript at the bottom helps in rendering the full page, and one can start interacting with it, even when the scripts are still loading, and thus gives the user a better experience.
Thank you very much! this article is old and I had changed the syntax highlighter plugin, so I did not know that this was happening.
Nice article. Regarding “Optimize the images”, I think it would be better to use flash files instead of gif animations.
The problem with flash is that you are not sure if the browser or would support it. Additionally, I bet the flash file is bigger than the gif one.
Nice article..
JavaScript at bottom of the page is accepted. But the more handy and optimized solution is to load it after content loading.
http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html
When you put the js files at the bottom, it would have the same effect as that solution.
I’d be careful to resort to Javascript frameworks so quickly. While they are nice, in some (most) instances you end up using only a fraction of the functionality they provide and you end up with a lot of overhead. Depending on the situation, coding some feature(s) in vanilla Javascript will help in terms of filesize and consequently load time.
I agree with you. Additionally, I would recommend to use a framework hosted by Google. This could give you some speed because another site could be using it and it would be cached before the user even visit your site.
Tons of thanks for sharing this article, it will help me in my up coming blog. Keep up the good work.