While putting together some more information for a book and workshop on website performance optimization, I did some research on tools to help with the process. The goal was to find a cost effective way to analyze and fix my websites in a way that minimizes the time I spend on the process. While many of the tools referenced are free. Some of the tools you have to pay for end up being more cost effective because they save you a lot of time. If you value your time, then you can easily rationalize paying for some of these tools.
Before getting into the tools, I want to briefly cover the 5 step process I go through while evaluating and improving an existing website:
1. Determine if this site is worth saving
2. Fix W3C Validation issues
3. Improve page load performance
4. Improve Security and accessibility
5. Improve SEO and marketing
The main intent of this article is to show you some tools that help you to quickly and effectively optimize a website for performance and security using a process similar to the above. The tools will be broken into 7 main types and covered over 3 blog posts:
1. All in one
2. W3C Validation
3. Page load analysis
4. Mobile friendliness
5. Security
6. Accessibility
7. SEO and Marketing – not covered in this article
All in One
DareBoost
DareBoost provides a comprehensive report of website quality, security, and performance. In addition to the on demand report, it will continuously analyze your web pages and send you weekly reports. The analyses from DareBoost checked for a number of security related items that were not reported on by the other services. Of all of the tools I tried, this one covered the widest range and offered many suggestions that none of the others offered. If I could only use 1 tool to help improve my website, this would be it.
The below image shows the categories of tests that DareBoost runs.
You get a free account that allows you to run up to 5 analyses a month. Unlike the paid accounts which track your history so you can see how it has varied with time, the free account only keeps your data for a month.
I like the prioritized list of what you should do. Each task is well explained. Dareboost pointed out a number of validation errors that the other tools had not found.
Price: Free, Basic $17/month, Premium $105/month
Below is their slick looking dashboard. Below that is the prioritized list of items to fix.
Yellow Lab Tools
Yellow Lab Tools is an open source project by Gaël Métais. It lets you test a webpage and detects performance and front-end code quality issues.
While this tool does not look quite as slick as DareBoost, it appeared to have the same depth of analyses and pointed out many issues that none of the other tools found. None of the others analyze the DOM and CSS like this app. If you are really trying to eke out some performance by attacking the issues at this level, this is the only tool that will give you that type of feedback.
The main functional area neglected by this tool was the security scanning. If you choose this tool over DareBoost, you will need to find a good security scanner to supplement it. I run both this and DareBoost at the start of a website optimization process. That way I can see all of the areas I want to analyze on an initial check of a website.
How often have you used a color picker to add colors to your CSS and wondered if you picked the exact color elsewhere? Quite frequently, you end up with lots of colors just slightly off of the main colors in your palette. This application shows all of the colors used as well as those that are close. It made it easy to find and correct the ones that were not supposed to be in the palette.
Below is an image showing offending colors on one of my sites.
Price: Free
Nibbler
Nibbler by Silk Tide is another tool that tests many aspects of your website and attempts to show where there are SEO, usability, and accessibility issues. While they point out a number of things that most other sites do not, I question the usefulness of some of the recommendations. It also shows some false positive errors when custom attributes (which are allowed by standards) are used.
With Nibbler, the emphasis is definitely on the SEO aspect, so it is not as strong as the others for code quality and performance. This application is lacking in the area of page load performance, so don’t use it expecting to get any guidance in that area.
HTML and CSS Validation
These tools tell you if your website is built with well-structured HTML.
W3C Validator
The W3C Validator consists of 3 free tools:
• HTML validator
• CSS Validator
• Link checker
While the previous all-in-one tools are great for getting an overview of site wide issues, this validator san spider your site telling you all of the areas where you might have invalid HTML or CSS. Another benefit is that it can list all your broken links.
There are other tools that can check for valid code, but you don’t need anything other than this W3C Validator or one of the all-in-one utilities.
Performance Tools
GTMetrix
GTMetrix is one of the tools I use the most when optimizing a website. It has a nice layout that shows you the important metrics at the top, and below that a set of tabs that allow you to look at recommendations for improving your PageSpeed score and your YSlow score. You can also look at resource loading in a waterfall format or see a video showing what your site looks like at various times.
The PageSpeed and YSlow analyses show the items you need to work on in order of score. The lowest scores are at the top and is where you will want to start your optimization process.
The GTMetrix version I am using is the free version. However, they have paid plans starting at $14.95/month. Unlike most of the other tools, they also have an API which you can use to tie their functionality into your application.
Pingdom.com
Pingdom.com is a fast way to check your website performance. It has a clean and minimalistic interface that shows you the important information at a glance. In addition to the web page load tests, they also have DNS checking functionality so that you can verify your DNS is set up properly. I really like its clean layout and how quickly it returns a report.
The dashboard, part of which is shown below, gives a good overview of areas you need to address. Each rule being checked is given a score and you can view the detail by clicking on the expand selector.
In addition to this free tool, they provide a paid application performance monitoring solution if you need one.
WebPageTest.org
While the UI is not quite as nice as that of GTMetrix or Pingdom, they provide a means for setting more advance options. For example, I like to run 3 tests so that some of the fluctuations in testing are removed. While this means it takes longer to run the test, in some cases, it might be worth the tradeoff.
Price: Free
Gift of Speed
Gift of Speed was designed to show you how your page load time performance can be improved. It has a very simple interface that shows your page load performance with an overall speed score that shows how your site page load compares to others.
Below this main test are numerous other tests where you can test individual areas of your site and get feedback on how to improve them. Unlike most of the other performance tools, with GiftofSpeed.com, you have individual tools to scan for various issues and to fix the issue. In general, I like the all in one approach where a single scan tests all of the areas and provides links to the fix. However, I did find this tool to be much faster for scanning the area you want scanned, so you don’t have to wait nearly as long to get results.
Price: Free
Following are some of the test and optimization tools they provide
• CSS optimization test
• CSS Compressor
• Javascript optimization test
• Javascript compressor
• GZip compression test
• Image optimization test
• PNG compressor
• JPG compressor
• CSS Sprites generator
• And 7 others
