- Sep 10, 2010
- 11,806
- 26,657
As the title says, I am going to discuss how to make your websites load faster than ever. Though I build websites with php, I am trying to make this article as generalized as possible. To make your pages load faster, you will only have to remember one rule of thumb!
Less requests = faster page load
Now let's explain that. Suppose you have 5 css files each having 10kb size. You are loading them in a page. You have combined those 5 css files into one, and the total size for that combined css file is 50kb. You load that combined css file in another page. If both the pages have same elements, then which page would load faster?
You are probably going to think that both the pages will load at the same time, but it is not the case. The second page which has the combined css file will load a lot faster. Why? This has to do with the request. When your browser requests for a file, the server needs some time to reply with file and other requests has to wait till one has downloaded completely. This time is NOT negligible when multiple files are getting loaded. So, follow the rule of thumb when you can.
How to use the rule?
Combine all your css files into one big file.
Combine all your jS files into one big file.
Combine all of your background images into one sprite image.
You might think that it will affect the working of your site but believe me it won't. As for the css files, minimize all of them and paste into a big css file in the order that they were getting loaded. One thing to make sure, that you don't use @import rules, as it is basically the same as using multiple css files.
Do the same with your JS files. If you are using JQuery, then after each paste, insert the following code, which will take care of the conflicts.
As for the images, combine all your images into one big image sprite and when you are using them in css, use background position property. Read this article for more information about using css sprite.
CSS at top, Scripts at bottom
Include CSS file before </head>, because CSS files define how your page would look. So they need to be loaded before your page elements load. DO NOT put JS file on top. Put them before</body>. Why? If you put the JS files on top, your browser will try downloading the files before loading page elements and that will increase the loading time ( to user's eyes). The JS files can be loaded after everything else have loaded. That way, the user won't feel that it is taking time to load the page.
Compression and caching
This is a very handy trick that most of the big websites use. If you are using apache, then append the following to your htaccess
Query caching and optimization
This is a very vast subject and impossible to cover in one topic. Still I am doing my best to summarize what to look for. Query caching is basically caching the database queries and loading the results without querying the actual database if data has not been changed. If you have a website with 10 visitors every second, you will surely need this to be implemented somehow. If you don't cache your queries, you will notice frequent database timeouts. Some PHP based frameworks like Yii framework ( I am sure the others will have it too. It's a standard these days lol) have query caching implemented. So it might be the time to move on from your boring wordpress websites, to something better.
Query optimization is also very important. Here are some mistakes that I have seen other programmers making :
Using SELECT * from tableName
This is a bad practice. If you are going to need two columns from a table which has 10 coulmns, only select those two columns. Selecting all the columns take much more resource!
Not using Joins
Believe me or not, I have seen all kinds of hilarious codes when it comes to using joins. As for an example, I saw someone actually doing this
If you are technical, you will laugh, but there are people who actually do this.
If you are the one who writes this kind of code, think about using JOINS. Instead of writing the code above, try the sql below. It will save a lot of resource:
Closing the Sql connection unnecessarily.
No, you do not need to do mysql_close() (or anything similar) each time you query. Let the script handle it for you. If you close connections too many times, your website will end up having frequent timeouts as it will reach the max connections per instance of time.
Using a CDN service
Why CDNs are better than normal servers? This is mainly due to latency. If you have a normal server, suppose in CA, a visitor from Australia will have to wait for much longer time to view the page than someone sitting in CA. CDN servers keep copy of the same files in different location, so that visitors world-wide request to the nearest possible location and the site will load a lot faster everywhere.
So, if possible use CDN. If you can't afford that, then use services like Google pagespeed.
So that's basically Eat!! You are welcome to add your secrets here! Let's make this thread the best guide for optimizing websites
Less requests = faster page load
Now let's explain that. Suppose you have 5 css files each having 10kb size. You are loading them in a page. You have combined those 5 css files into one, and the total size for that combined css file is 50kb. You load that combined css file in another page. If both the pages have same elements, then which page would load faster?
You are probably going to think that both the pages will load at the same time, but it is not the case. The second page which has the combined css file will load a lot faster. Why? This has to do with the request. When your browser requests for a file, the server needs some time to reply with file and other requests has to wait till one has downloaded completely. This time is NOT negligible when multiple files are getting loaded. So, follow the rule of thumb when you can.
How to use the rule?
Combine all your css files into one big file.
Combine all your jS files into one big file.
Combine all of your background images into one sprite image.
You might think that it will affect the working of your site but believe me it won't. As for the css files, minimize all of them and paste into a big css file in the order that they were getting loaded. One thing to make sure, that you don't use @import rules, as it is basically the same as using multiple css files.
Do the same with your JS files. If you are using JQuery, then after each paste, insert the following code, which will take care of the conflicts.
Read this stackoverflow article for combining with tools, instead of doing manually.
As for the images, combine all your images into one big image sprite and when you are using them in css, use background position property. Read this article for more information about using css sprite.
CSS at top, Scripts at bottom
Include CSS file before </head>, because CSS files define how your page would look. So they need to be loaded before your page elements load. DO NOT put JS file on top. Put them before</body>. Why? If you put the JS files on top, your browser will try downloading the files before loading page elements and that will increase the loading time ( to user's eyes). The JS files can be loaded after everything else have loaded. That way, the user won't feel that it is taking time to load the page.
Compression and caching
This is a very handy trick that most of the big websites use. If you are using apache, then append the following to your htaccess
Query caching and optimization
This is a very vast subject and impossible to cover in one topic. Still I am doing my best to summarize what to look for. Query caching is basically caching the database queries and loading the results without querying the actual database if data has not been changed. If you have a website with 10 visitors every second, you will surely need this to be implemented somehow. If you don't cache your queries, you will notice frequent database timeouts. Some PHP based frameworks like Yii framework ( I am sure the others will have it too. It's a standard these days lol) have query caching implemented. So it might be the time to move on from your boring wordpress websites, to something better.
Query optimization is also very important. Here are some mistakes that I have seen other programmers making :
Using SELECT * from tableName
This is a bad practice. If you are going to need two columns from a table which has 10 coulmns, only select those two columns. Selecting all the columns take much more resource!
Not using Joins
Believe me or not, I have seen all kinds of hilarious codes when it comes to using joins. As for an example, I saw someone actually doing this
If you are technical, you will laugh, but there are people who actually do this.
If you are the one who writes this kind of code, think about using JOINS. Instead of writing the code above, try the sql below. It will save a lot of resource:
Closing the Sql connection unnecessarily.
No, you do not need to do mysql_close() (or anything similar) each time you query. Let the script handle it for you. If you close connections too many times, your website will end up having frequent timeouts as it will reach the max connections per instance of time.
Using a CDN service
Why CDNs are better than normal servers? This is mainly due to latency. If you have a normal server, suppose in CA, a visitor from Australia will have to wait for much longer time to view the page than someone sitting in CA. CDN servers keep copy of the same files in different location, so that visitors world-wide request to the nearest possible location and the site will load a lot faster everywhere.
So, if possible use CDN. If you can't afford that, then use services like Google pagespeed.
So that's basically Eat!! You are welcome to add your secrets here! Let's make this thread the best guide for optimizing websites
Last edited:
