Page Optimization tips to speed up your site

Optimizing a web page can be quite time consuming, depending on the extent that you want to optimize, but it is well worth doing. This article provides you with the essentials to quickly optimize your page. The techniques listed here have been successfully tested on several websites.

Why spend time optimizing a page?

Many “UI Web Developers” have very limited knowledge on page optimization, not knowing how drastically it can benefit your page. A properly optimized page can:

• speed up page load time. This is an obvious one. You want your page to load as quickly as possible.
• contribute towards on-page SEO. Search engines like to see pages that are fast and properly optimized
• save/make you money. A while back, Google mentioned the importance of page speed regarding PPC (Pay Per Click) and organic searches.

There are many more, valid, reasons for taking the time to optimize your page, but these should be motivation enough for now.

So what can be done?

• Set image width and height. Setting a width and height for an tag can reserve the space that image allowing the rest of the content on your page can immediately fall into place.
• Minimize HTTP requests. CSS Sprites will help greatly here. This is a whole other topic by itself (that will be explained more in-depth in an upcoming article), but basically, this refers to the practice of combining common images (icons, buttons, logo etc.) therefore making common images 1 HTTP request rather than a dozen or more.
  Also combining or reducing your javascript or CSS files
• Minify CSS, Javascript and even HTML files
• Optimize images. This refers to optimization in Photoshop/Fireworks. Use the correct file type so that the image file size is as small as possible with out losing any quality
• Browser caching. Set Expires for all cacheable resources (PDF’s, Media files etc.)
• Avoid empty src and href tags. You may expect a browser to do nothing but this is not the case. Most browsers make a request either to the directory that the page is in, or to the page itself(depending on the browser).
• Do not resize images. Be sure that the width and height attributes are the same and the image.

These are just some things that you can do to optimize your page.

Some helpful tools

Below are some great tools you can use to help you optimize. There are many more that I have tried and tested, but these were the most helpful to me.

• Page speed. Provided by Google, integrates well with Firefox
• YSlow. Provided by Yahoo! Can be installed as an extension for Chrome or Firefox
• SEO Tools. I have not personally tested this in Firefox but it is great for Chrome

These tools provide you with a score, and tips on how to improve that score.