Optimizing your Website Speed, Tools and Tips

Having a decent website has never been more affordable than now. With ready-made design templates, free website builders offered with hosting; there are just too many choices. Customers today have choices and getting & maintaining their attention is also harder than ever. Unless design is your business, adding the latest bells and whistles would get you visitors, but lot more needs to be done to bring users back.

Many individuals and businesses now rely completely on their website to bring visitors and make money. Hence focussing not only on how a website looks but also how fast it loads is of utmost importance.

Importance of Website Optimization

Website Optimization is something often neglected by website owners as well as new web design & development professionals. After you design a responsive retina ready website using all the latest web standards, the next step is to consider speed. Research has shown decrease in sales or visitor conversion being linked to speed of the website.

Creating a beautiful and usable site creates a good impression, but its speed that will ultimately help your customer to make a sale or read the information you want them to read quicker. For lager sites, optimized website would require less server resources which eventually means less server cost. Google had announced that it considers website speed when determining the ranking of a website in its search engine results and include the speed data in the Google Webmaster tools. Optimizing website based on factors suggested by top search engines will also help you getting better search engine rankings.

Once you understand how website optimization is done you could began incorporating few things in during the design / development phase saving time later on.

Different components of a website

Before we go further about how to optimize a website, let’s break down the different components of a website.

1. Domain

Components

Domain Name Systems (DNS) is what’s responsible to map a user friendly name such as Designmodo.com to an IP address of a web server. Since we all type a domain name in our browser, it’s safe to assume that a website begins at its domain which is also often the most overlooked component. Delays & errors in DNS entries of a domain often take the first few seconds of a website load times.

2. Web Host

Being part of a web hosting company, I have often seen clients blaming the web host for slower speed of websites. In many cases this is true but not always. Most websites are hosted on a shared hosting platform where resources are shared with hundreds of other websites. Using Ping or tracert commands directly from your computer can help you know the time it takes connect to your server and how the connection happens.

Ping

Things you need to check are the way connection is made to the server, response time of your web host and time it takes to serve the first byte. There are no golden rules here, but the best way to test is to compare your website with your competitors who are more successful.

3. Website Files

Once a user requests your page, and your domain makes a connection with your web host, here is when your web page starts loading. Most websites typically consist of static or dynamic pages, images, Cascading Style Sheets (CSS) JavaScript (JS) files, etc. Dynamic websites like once powered with WordPress have an additional component, i.e. the database.

The number of different files served, the number of connections to different domains required, size of the files, etc. will all affect the time it takes to load your website.

Some of the components of a website on which optimization can be done are:

  1. Web Pages with HTML, PHP, etc.
  2. Database
  3. CSS
  4. Images
  5. JavaScript

Tools for Testing

1. DNSstuff

DNSstuff

DNSstuff is one of the oldest web based tool used by system admins to check & monitor DNS issues. Most of their tools required paid account, but they offer a free trial to test all their features.

2. YSlow

YSlow

YSlow is a plugin developed by Yahoo offer a comprehensive set of checks to test different aspects of a website. It analyses websites based on Yahoo’s guidelines for web developers. YSlow is available for all major browsers including mobile bookmarklet.

Visit http://yslow.org to know more about the rules used for web page testing and how YSlow grades a website.

3. Google PageSpeed

page speed

Google’s PageSpeed is a standalone website for doing optimization testing and its also available in the form of plugin for Firefox. Page speed is also built into Chrome. PageSpeed analyses a website based on set of rules similar to YSlow.

4. Pingdom

pingdom

Pingdom offers 3 free web based tools “Full Page Test”, “DNS health” & “Ping & Traceroute”.  The interface and details are easy to understand even for someone new. These 3 tools, helps you check location & response time of the server on which your website is located, check DNS errors & do a full page test. Full Page test gives a timeline to understand the order in which each file was loaded and the time taken to load.

5. GTmetrix

gtmetrix

Along with Pingdom, GTmetrix has been my tool of choice since in last 2 years. Both are simple to use for anyone. GTmetrix offers test based on Google’s PageSpeed as well as YSlow rules. It also gives a timeline similar to Pingdom along with the ability to to compare between 2 websites and save history which comes in handy.

Local testing on your browser is definitely faster, but I personally prefer to use GTmetrix as it allows me to compare and save the data.

Optimizing your website

1. Fix DNS issues & choose a good host

Often the thing left out in Optimization articles is the domain and web host. Making sure you choose a good host and have proper DNS in place is the first step. The company you choose might be anywhere in the world, but always make sure to ask your host the location of their servers and if you could, choose the once closest to your audience.

If possible setup your domain with the default name servers provided by your host. This would not have major impact, but going with the default name servers would help you to use more of their DNS infrastructure.

2. Reduce Number of HTTP Requests

http requests

When a user requests your website, many additional components (files) are loaded in their browser such as the images on the web page, CSS, JavaScript, custom font files, etc.

Only files required for a specific page should be added to it. For e.g. only include JQuery script in the page where you need it. The obvious drawback to this approach might be the need to manage different files however a balanced approach could always be taken.

3. Optimize your Web Page & Remove 404 Errors.

Before you proceed with any optimization, make sure to check your website logs for 404 errors. Every request takes up time hence it’s always best to fix and remove all errors. Every 404 error will result in the delay in loading of another file.

Use external files to store your CSS & JavaScript code instead of adding them inline in your HTML file. Optimize your code so that presentation related rules are contained in your CSS files. As browsers usually cache your website content, this will ensure more control.

4. Proper placement of files

As mentioned earlier, only a certain number of requests can be made to a server at a time. Having too many things to load would result in delay in page rending. As CSS is necessary for rending the page properly; all user interfaces related CSS files should be included in the <head> tags of your website for progressive rendering of the web page.

As loading a website is more important, anything related to functionalities, such as JavaScript files for sliders, carousels, etc. should be loaded last.

5. Reduce Database queries

Database queries are expensive. If your website relies on a database such as a WordPress powered website, then find ways to reduce the requests by either combining requests, or adding content directly in the HTML/PHP files.

If you have a custom developed dynamic website, then only request content that is necessary and combine your database queries as much as possible. This will not only help retrieve & display information faster but will also help reduce server load.

6. Optimize & Combine Images

Photo editing tools like Photoshop and Fireworks provide a lot of options for image compression but they are still not perfect. There are many free tools like Smush.it & Image Optimizer available online for compressing images optimally.

Do not use HTML to scale or downsize images. Use images of different sizes. If you find it time consuming, use free scripts like timthumb to create different sized images on the fly.

Use Image Maps, and CSS sprites to combine images if possible. Optimizing the size of an image is one way but combining images such as icons, user interface elements, etc. results in a single request to the server which ultimately reduces the load time.

7. Minify, Combine & Compress Files

Minifying means removes extra spaces & line breaks in a file. If your website is static, this would mean maintaining 2 versions of each file, one for development and other for live deployment. However the pros weigh more than the cons. For dynamic websites like WordPress there are many plugins which not only allow minifying CSS & JavaScript files, but they also allow the option to combine several CSS files together.  Combining similar files such as all CSS files together further helps in reducing the number of HTTP requests.

Further compression of files using GZip can also help to further reduce the file size and hence increase the overall speed.

8. Load content where necessary

A very innovative approached used by large blogs that we saw in last few years were loading content when necessary. A website visitor might not always scroll through all your content and click on all the buttons. If you have a long page with lots of images, it would be waste of bandwidth if you are loading everything even though the end user is not actually looking at everything. Different techniques such as lazy loading, etc. allow asynchronous loading of images based on different set of actions like scrolling. This results in faster page load and the user does not have to wait until everything is loaded.

9. Optimize Browser Caching

Every browser has different ways in which they manage their cache. When you visit a website for the first time, the DNS data is cached not only by your ISP but also your web browser. Having a basic understanding would enable you to reduce server load as well as deliver files faster.

When a request to a website is made, different kind of files such as images, CSS files, JavaScript files, etc. are loaded. Every file adds to the total load times. Most of these components remain same. For e.g. consider Designmodo.com, where the company logo & user interface images remain same across different pages and time period. By enabling HTTP cache, these resources can be saved or cached by a browser and a local cached copy would be served on subsequent visit to the website. This not only affects the page load times drastically but they also reduce the overall server load.

Adding the below code to .htaccess file will tell the browser to cache/save the specified file types for 1 day.

# Expires Headers
<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/html "access 1 day"
  ExpiresByType image/gif " access 1 day "
  ExpiresByType image/jpeg " access 1 day "
  ExpiresByType image/png " access 1 day "
  ExpiresByType text/css " access 1 day "
  ExpiresByType text/javascript " access 1 day "
  ExpiresByType application/x-javascript " access 1 day "
</ifmodule>

Visit Google Developers section on caching to learn in-depth about browser caching.

10. Use Content Delivery Network (CDN)

cdn

Whether you follow the above steps a definite way to increase the site speed considerably is to use CDN such as CloudFlare, MaxCDN, etc. CDN or Content Delivery network is a pool of web servers located globally to deliver content more efficiently to a user based on his location. Deploying your application on a CDN might be a daunting task, but as a first step, static content such as images, CSS, JavaScript files could be stored on a CDN’s global infrastructure which would then be served to a user from the closest server to them.

Conclusion

Not optimizing your website would never kill your business. But if you are already spending hours thinking and creating a perfect website, few additional hours spent on optimization would not hurt but only allow your user to experience your fabulous websites faster. And for someone with an e-commerce website, faster websites will often mean more sales. So just don’t stop after you create your perfect website, go little further and make it faster.

Harish Chouhan

Harish is a web developer from India and loves working with Fireworks & WordPress. As owner of Dreams Media, he provides custom website development for a living. He loves to write about Fireworks & WordPress and often blogs on his website HarishChouhan.com. You can also find on twitter @harishchouhan.

Newsletter

8 Comments
  1. Ayhan Sipahi Jan 27, 5:30 pm

    Webpagetest.org is great tool for testing. You should add to the list.

    Reply
    +5
  2. Armin Jalili Jan 27, 11:47 pm

    Nice post! Apart from search engines algorithms, It’s important because of user satisfaction, I’ve wrote an article about site speed in SEOmoz also: http://www.seomoz.org/blog/15-tips-to-speed-up-your-website

    Reply
    +2
  3. Matt B Jan 28, 1:25 am

    If you’re on a mac you can do: traceroute -a domain.com
    eg:

    $ traceroute -a google.com
    traceroute to google.com (173.194.41.66), 64 hops max, 52 byte packets
    1 [AS28513] 192.168.1.1 (192.168.1.1) 0.626 ms 0.315 ms 0.287 ms
    2 [AS5462] obfuscated.17-3.cable.virginmedia.com (1.2.3.4) 46.099 ms 12.803 ms 7.953 ms
    3 [AS5089] aztw-core-2a-ae7-628.network.virginmedia.net (80.1.244.85) 6.382 ms 13.526 ms 6.223 ms
    4 [AS5089] brnt-bb-1c-ae11-0.network.virginmedia.net (80.1.240.173) 15.601 ms 19.702 ms 14.115 ms
    5 [AS5089] brnt-bb-1b-ae7-0.network.virginmedia.net (62.253.174.33) 16.944 ms 19.663 ms 16.445 ms
    6 [AS5089] brnt-tmr-1-ae5-0.network.virginmedia.net (213.105.159.50) 16.020 ms 39.681 ms 12.977 ms
    7 [AS5089] telc-ic-1-as0-0.network.virginmedia.net (62.253.185.74) 16.220 ms 16.753 ms 16.571 ms
    8 [AS5089] 212.43.163.174 (212.43.163.174) 79.725 ms 105.908 ms 90.017 ms
    9 [AS15169] 209.85.255.78 (209.85.255.78) 20.537 ms 23.046 ms 21.026 ms
    10 [AS15169] 72.14.238.51 (72.14.238.51) 24.750 ms 21.482 ms 20.912 ms
    11 [AS15169] lhr08s01-in-f2.1e100.net (173.194.41.66) 18.611 ms 18.799 ms *

    this will return the AS network number it can help identify where congestion is worse on one AS net vs another

    Reply
    +4
  4. In Pocket Dev Jan 28, 1:28 am

    If a CDN isn’t for you for some reason you can use multiple hostnames

    eg:

    styles.domain.com
    images.domain.com
    js.domain.com

    This will parallelize (sp?!) downloads in the browser as each domain will have it’s own number of threads it can use.

    eg: domain.com = 8 threads (it might be more)
    total = 8 threads running in parallel
    vs:
    styles.domain.com = 8
    images.domain.com = 8
    js.domain.com = 8
    and domain.com = 8
    total = 32 threads all running in parallel

    Reply
    +4
  5. Jake Jan 28, 3:17 am

    Hey, nice post you have written… What I do to my images to help the loading speed is decrease the quality of the images to 70% which doesn’t change the image itself too much but has a dramatic decrease on the size of the file.. Thanks for the post.

    Reply
    0
  6. Primal Primos Jan 30, 8:39 am

    Very informative post on load time / page speed which plays a crucial role in your SEO rankings by Google and other search engines.

    Reply
    0
  7. Feder Feb 25, 10:48 pm

    For png files this tool is better than smush.it
    http://compresspng.com

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters