Optimizing the load or speed of your website today is not an option. With so many websites trying to rank number one in Google search results, not having a speedy site could mean all the difference in where you rank and whether visitors will come to your website. In this blog post I will teach you how to get started with website load optimization.
What Is Website Load Optimization And Why Is Important
Website load optimization is the art of reducing the size of web pages for a given website so that they will load faster. I say ART because this is not an exact science. Most web sites today use a content management system (CMS) to make it easy for site owners to maintain there web sites, but this ease of use can complicate things depending on the CMS.
Today, if your web site can't serve up a page in a few seconds and give you exactly what you need, the user is gone before the page comes up. How many times have you waited on a web page to load for just even 5 seconds and then left the site before the page loads? So here are two reasons why you should care about website optimization.
1. Users Expect Your Website to Load Fast
Your web site needs to load fast because users expect it. If your web site loads fast then users will generally stick with your web site longer and it provides a better overall experience. On top of that we now live in a world where people just don't have a much patients as they used to.
Think about it, 20 years ago if I was looking for the 10 best contractors in my area, I would have to look in the yellow pages and it would take me about 15 to 20 minutes to find most of them. Today, I can do a search on Google and find them in less than 30 seconds.
2. Google Measures Your Website Speed
Google now factors in the speed of your web site as a factor in your search rankings. No one knows how much this plays a factor in your rankings but I would play this one on the safe side. You can read more about this from Google's Webmaster Blog.
Using site speed in web search ranking
Next, we need to understand the different approaches to optimizing the speed of your website.
Approaches to Optimizing the Speed of Your Website
Basically, how can I make my web site faster, especially in shared hosting environments where I am sharing a web server with potentially hundreds or even thousands of other web sites. There are two basic ways to improve the overall speed of your web site.
1. Reduce the Number of Requests
There are a couple of things you can do here to reduce the number of requests (round trips) to your web site.
2. Reduce the Size of Each Request
Now that we have reduced the number of files and combined files, we can start to reduce the size of of the files themselves. Here are two simple ways to reduce the size of the files.
Second, you can reduce the file size by using compression. If your site uses images, make sure you are using the highest compression, without loosing the quality of the image. If you are handy with an image editing program, such as Photoshop or have a graphic designer, have them reduce it for you. If you don't have access to either a graphics editor or someone that could help you, I suggest checking out http://tinypng.com and http://tinyjpg.com. These two sites simply allow you to drag and drop your images on to this web page and they will take car of optimizing them for you.
An finally, there is one other way to reduce the file size, by using compression which most users never think about. Your web browser actually understands how to deal with compressed content from your web server and most web servers actually allow you to crank up the compression ratio. In fact, IIS7 and up will allow you to increase the compression ratio for each file an then caches it, so next time that file is needed IIS will pull the compressed version of the file. Pretty sweet!
Get A Baseline Measurement Of Your Website
Next we need to measure the web site you intend to optimize to get a baseline. This is important because we need to have a starting point to measure from so that can determine if our optimizations are getting better or worse.
There are three attributes that we need to measure to get a good baseline, but I want to point out this measurement is per page, NOT SITE. I usually start with optimizing the home page since it is usually the most viewed page on most websites. I would then use a tool like Google Analytic's to determine the next pages to optimize. So here are three things you should measure before you start optimizing.
#1 Measure Your Page Load Time
This is just the number of seconds that it takes to load the page. The lower the better and ideally most experts say your pages should load in 1.5 seconds or less for the most optimal experience.
#2 Measure Your Page Size
This is just the size of your web page, hopefully in KB. Again, lower is better and ideally most experts say your page should be 500 KB or less. I know that can be hard these days and since the advent of HTML 5 users can now do things like adding video to a background instead of a static image.
#3 Measure Your Number of Page Requests
This last measurement is just the number of resources that need to be downloaded to display your web page. Again, lower is better and ideally most experts say your page should have 50 or less resources to download.
In fact, my own blog runs on a content management system with that exact problem. I currently run my blog on the Telerik Sitefinity CMS and I thought it would be interesting to share my own personal measurement of the three values above. To make it easy, and consistent, I am using a tool called Quick Sprout (http://www.quicksprout.com). This tool allows me to quickly measure the three values I just described above, and below is my current speed score for codeengage.com.
To be honest, I have already done some load optimization work to get my blog site to this point. In fact my number of requests per page was closer to 60 or 70 requests, not 33 requests. I plan to write a future post where I show you exactly how I did it so you can do this same thing. Stay tuned.
Plan And Execute
Now that we got our baseline and we measured our load time, page size, and number of requests, its time to plan and execute. This is a five step process that repeats until the page is fully optimized.
Step #1 - Gather Ideas
Step #2 - Prioritize Your Ideas
Once you have the list of ideas, you need to order them. I usually try to pick out the low hanging items that I can complete quickly and give me the biggest bang for my buck. For example, one simple technique is to just run all the images through an image optimizer to get highly compressed and smaller images.
Step #3 - Test One of Your Ideas
Next, make one of the changes from your list of ideas. Lets use the example above and optimize the images for my page. Once you have completed the change run Quick Sprout on your web site again.
Step #4 - Analyze the Results
Now you can analyze and compare this change to your baseline. Did this change improve, or did it get worse?
Step #5 - Optimize the Change
And finally, you need to optimize the change. If the change made things worse then restore the change. If the change improved things, then make sure things are running in an optimized state. In the case above, do I need to get ride of old images since I am now using the new optimized images?
Once you complete step, continue repeating this process until you feel the page has been optimized.
Okay, that was allot of information but I have to say from my own trials, this process really works. Give it a try and if your really brave, post a comment to this blog post and provide your quicksprout.com score before and after your next website optimization.
And finally stay tuned to an upcoming blog post where I actually step through this process and show the details of my first optimization to codeengage.com.
Craig out :-)