Three simple optimizing tricks to speed up your site
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.
Subscribe to the RSS feed and have all new posts delivered straight to you.
Cleaning up your CSS definitely works. I would also recommend making use of an online site speed checker like http://www.websiteoptimization.com
This gives you a good idea of where your site is slow.
When optimising its a good idea to run a speed test (as suggested by the previous comment) first, apply one optimisation step then test the results, that way you can see how much effect each type of optimisation is having. Don’t forget to optimise all your graphics, you can save a significant amount usually.