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.
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.
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
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:
- Web Pages with HTML, PHP, etc.
Tools for Testing
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.
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
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.
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.
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
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.
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.
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
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.
Adding the below code to .htaccess file will tell the browser to cache/save the specified file types for 1 day.
Visit Google Developers section on caching to learn in-depth about browser caching.
10. Use Content Delivery Network (CDN)
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.