I’m not going to go whipping a dead horse here because optimizing a
website’s speed has been covered so many times that it is pointless to
re-post the same thing all over again.
There is more to making a website faster than just the size of pages
or html. Sometimes just changing where a script is called can make more
of a difference in website loading time than reducing the overall page
size by 50%. Here are a few tricks to speed up the actual loading time
of a website without making major changes to the website itself. These
are very effective and can be implemented on most websites in just a few
minutes.
- Validate and optimize your CSS
- Optimize your javascript code
- Call your external scripts in your footer instead of your <head>
Validate and optimize your CSS
By default, css is loaded on a visitors first access to your website and then cached so it doesn’t need to reload with each page request. For this reason, a visitor’s first page view will also take the longest to load, but subsequent page views will be much quicker.
First, make sure that your css doesn’t have any major errors, or browser incompatibility issues. Often css validation will let you onto errors or superficial code that is wasting up bandwidth and doing nothing for your website or your visitors. Now assuming that everything checked out OK, or you fixed anything that was likely to cause major problems, you can now optimize.
I recommend using this css optimization tool, and use ‘High’ compression. This will reduce the size of your css scripts, but they will still be readable. The highest setting will further reduce the size, but you will not be able to easily read the css, and future editing becomes difficult. Also, the default options are sufficient for most css applications.
It’s not uncommon to be able to reduce your css file size by 50% or more, which can greatly reduce that first page load time.
Optimize your javascript code
Unlike css, javascript code is not cached, so every time a page loads the javascript will also be loaded into your visitor’s browser. It is even more important to reduce your script file sizes, since they are called every time a page is loaded.
Before you go optimizing all of your javascript I highly recommend backing it up. This will allow you to edit it in the future, and will also provide backup in case optimizing it breaks it’s functionality.
Use this javascript optimizer to optimize your javascript code. Replace your existing code with the output from this script, and try to use external javascript instead of in-line javascript wherever you can.
Call your external scripts in your footer instead of your <head>
You do not need to call most javascript scripts in your header, even though this is common practice. By calling javascript in your <head> section, the javascript file must completely load before any <body> content is displayed. Large javascript files can completely break usability for dial-up users, and even broadband users will notice lag.
The answer in many cases, is to call your external javascript files at the bottom of your html just above the </body> tag. By doing this, your content loads before your javascript, and you eliminate the loading lag seen with large script files. It’s not uncommon for a site’s content to be virtually instant, from several second of a blank page before the change was made. This is truly one of the best ways to speed up the first content being displayed on a visitor’s screen.
This does not work will all scripts depending on their exact function, so do some testing in different browsers to make sure that the script still functions properly before fully switching to this format.
Final thoughts
If you do any of these, thoroughly test your website in different browsers to make sure than nothing unexpected occurs. Here is a great tool to measure the size of a web page but in reality far more goes into loading time, than size alone.
By default, css is loaded on a visitors first access to your website and then cached so it doesn’t need to reload with each page request. For this reason, a visitor’s first page view will also take the longest to load, but subsequent page views will be much quicker.
First, make sure that your css doesn’t have any major errors, or browser incompatibility issues. Often css validation will let you onto errors or superficial code that is wasting up bandwidth and doing nothing for your website or your visitors. Now assuming that everything checked out OK, or you fixed anything that was likely to cause major problems, you can now optimize.
I recommend using this css optimization tool, and use ‘High’ compression. This will reduce the size of your css scripts, but they will still be readable. The highest setting will further reduce the size, but you will not be able to easily read the css, and future editing becomes difficult. Also, the default options are sufficient for most css applications.
It’s not uncommon to be able to reduce your css file size by 50% or more, which can greatly reduce that first page load time.
Optimize your javascript code
Unlike css, javascript code is not cached, so every time a page loads the javascript will also be loaded into your visitor’s browser. It is even more important to reduce your script file sizes, since they are called every time a page is loaded.
Before you go optimizing all of your javascript I highly recommend backing it up. This will allow you to edit it in the future, and will also provide backup in case optimizing it breaks it’s functionality.
Use this javascript optimizer to optimize your javascript code. Replace your existing code with the output from this script, and try to use external javascript instead of in-line javascript wherever you can.
Call your external scripts in your footer instead of your <head>
You do not need to call most javascript scripts in your header, even though this is common practice. By calling javascript in your <head> section, the javascript file must completely load before any <body> content is displayed. Large javascript files can completely break usability for dial-up users, and even broadband users will notice lag.
The answer in many cases, is to call your external javascript files at the bottom of your html just above the </body> tag. By doing this, your content loads before your javascript, and you eliminate the loading lag seen with large script files. It’s not uncommon for a site’s content to be virtually instant, from several second of a blank page before the change was made. This is truly one of the best ways to speed up the first content being displayed on a visitor’s screen.
This does not work will all scripts depending on their exact function, so do some testing in different browsers to make sure that the script still functions properly before fully switching to this format.
Final thoughts
If you do any of these, thoroughly test your website in different browsers to make sure than nothing unexpected occurs. Here is a great tool to measure the size of a web page but in reality far more goes into loading time, than size alone.
