Speed Up your Web Site
In this tutorial we are going to cover what changes help change your website from being a slow low ranking site to a race horse.
Why Is Page Speed Important?
The main reason why the page loading speed is important is because it creates a better user experience for your visitots.Now a days the search engines also use speed to rank your website in serches as its a vital attribute to a successful website, your visitors won't stick around on your site if it takes 10 seconds to load a page.This is why search engines will now use page speed as part of algorithm which decides where your site rank in the search engine, so all you have to do is speed up your site which creates a better experience to your visitors and improves your position in the search results.
Lately Google has been making many changes to make the web better, one of the main updates is the Google Panda updates which stops against duplicate content. But the update we are looking at today is speed, Google takes speed into account when ranking you in the search results and visitors tend to leave you site if they have to wait more than a couple of seconds.
Before Making Changes
Before going into content we will check the current status of your website.Listed below are a few tools that will do it.
When we did a test for Tech Stream without adding the scripts for Google Analytics and For Buy Sell ADs , we got 100 points and things were quite optimised as we planed all those before we started to build the web site. There is nothing to worry about if you have't thought of this earlier.
Pingdom is a site that tests page load time and breaks down how long it takes for every script, CSS file and media asset to load. You can use the resulting chart to make decisions about things like whether to consolidate your CSS files or whether a content delivery network (CDN) might help deliver images faster.
In addition to page load time, Pingdom a few more services like DNS testing etc.
YSlow.Unlike some other tools of this nature, YSlow goes the extra mile by offering specific, actionable tips about how to improve page load time. Their Best Practices for Speeding Up Your Website is a worthwhile read for any Webmaster or site owner, regardless of whether or not you use Yahoo's tools.
Google Page Speed is another tools that test your site perfomance from the internet Giant. This tool gives you the complete information that you web stite can have in a bink of an eye. It's Even avalible as an extension for browsers.(Fire Fox and Chrome).
Once you got an idea of your current site speed, it's up to you to decide how much improvement is needed; you can begin implementing the right solution. Inevitably, some of the necessary changes will require some manual coding, but there are a few turnkey tools that will help but not as good as manual coding.
Here we will review a few recommendation for a typical web site, this may not be available if you are using a CMS. Here in Tech Stream we use a custom CMS made for Tech Stream by its core developers.
Put Scripts at the Bottom and Stylesheets at the Top.Make the style sheets load before the HTML so that the users get a good experience that having the styles loaded after the mark up. Loading java script after all markup and Styles makes the page content load then download the script after content making the user happy.
Split up your CSS. Create one stylesheet that holds all the common styles used on every page of your site. Then create separate stylesheets for each unique page layout: Your home page, a typical article page, a typical product page, etc. Load only what you need on each page.
Combine the Java Script and CSS into single file as far as possible. Its hard whene each page uses different layouts.
Reduce DNS Lookups
Split Components Across Domain. Splitting components allows maximize parallel downloads. Make sure you don't exceed more than 2-4 domains because of the DNS lookup penalty.
You can host your HTML and dynamic content on www.example.org and split static components between
static1.example.org and static2.example.org
You can even make the images on a seperate sub-domain to set a long cache time, and Stylesheets on another. Like Tech Stream uses different sub-domain for images and styles.
HTML and PHP
Don't Scale Images in HTML
To have an image like
then your image (mypic.jpg) should be 200px X 100px rather than a scaling down 500x500px image.
Remove Duplicate Scripts.Prvent same script from being called multiple times either from HTML or PHP itself or from both. For example
Both calls the same file
Avoid Empty Image src. For more information check this blog http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
CDN (content delivery network or content distribution network)
These are a series of servers containing the same data but are stored in various places of a network. Content Delivery Networks increases performance by being able to cache data and distribute it from various locations of a network, therefore reducing bandwidth and increasing performance.
When a visitor navigates to the website the Content Delivery Network will find the nearest server and distribute the content from here.Thus making it fast and reduce the load on your main servers.
It is known that a Content Delivery Network can increase website performance by up to 10x times.
CND make yout uptime to be 100% as the content is delevered through CND server , even when your website server is donw the page gets displayed.