Getting Started With Website Load Optimization

Craig Holdheide  |  Apr 09, 2015  |  Comments

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

Every time you navigate to a web page on the Internet you are pulling down a number of resources, which includes JavaScript, CSS, Images, fonts, and HTML files.  For every one of these files you are making another round trip to the web server.

There are a couple of things you can do here to reduce the number of requests (round trips) to your web site.  

First, the simplest is to just root out which files are not needed anymore.  Make sure you are not loading extra JavaScript libraries or CSS files you no longer use.  Also, if you are only using a JavaScript file or CSS file on one or two pages, only include them for the pages that need it.

Second, combine like files.  If you have several JavaScript libraries, I suggest combining them to decrease the number of round trips to the server.  The same goes with CSS files, however this can sometimes be a bit tricky as you may need to combine the CSS files in a certain order so that styling is not impacted.

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.

First, you can minify JavaScript and CSS files.  All this really means is that we are going to reduce the white space and even modify some the code to use less characters.  For example, if you minify a JavaScript file all the white space will be reduced as much as possible and variable names will be reduced to one letter in length.  Same goes with CSS files.  Just minifying your JavaScript files can have a dramatic affect on how much smaller and how much faster your scripts will run.  Remember, JavaScript is interpreted by the browser, so the more space and the more characters it has to read the longer it will take to execute.

A good example of this is the JQuery JavaScript Library.  This library is used on almost every web site on the Internet.  As of version 1.11.2 of the JQuery library the non-minified version is 278 KB, however, the minified version is only 94 KB, almost three times smaller.

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.

Over all, you would think staying below these values would be an easy task, but throw in a web content management system that likes to inject a bunch of e​xtra JavaScript and CSS files and this can quickly become a nightmare.

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.

speed-score

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

Build a list of ideas on what you can optimize on the page first.  Allot of this really depends on the page itself.  For example, does it have allot of CSS, JavaScript, or images?  Are all these files needed and can I remove some of them?  Can I minify or compress some of the files?  These are all good questions to ask when reviewing a web page for optimization.

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.

Conclusion

​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 :-)

comments powered by Disqus

My Social Channels

Keep Up To Date

What is this?