computer code with a globe in background

Optimizing your HTML5 website will be a lot easier, faster and better with these free Online Tools!

But, you really must exercise caution when using online diagnostic tools with HTML5.

A good example is the charset utf-8 meta tag. Many of the online tools will give you a warning that you should do the charset in the server headers rather than using a meta tag. With HTML5, if you don't have the meta tag it won't work. When I say it won't work, I mean it will be totally broken, as in won't render.

Website Optimization

The first tool you should consult is the HTML5 Validator.nu - This is a great tool. It is totally free. You don't have to register or provide an email address to use it. It does not have one of those annoying captcha things that asks you to input a string of letters and numbers that no human being can read.

Know Your Audience ... and always keep them in mind. After all, every thing you are doing, you are doing for them.
While you are validating your markup, it is a good time to think about search engine optimization (SEO). Take a quick look at this most simplified but true example. The "Perfectly" Optimized Page. If you will follow the simplistic approach outlined here, it will pay big dividends for your webpage.

Of course the W3C people have a validation service here that you can test against as well. Nu Markup Validation Service.

Microdata
If you are transitioning to HTML5, you should take the little extra time to include some microdata on your pages. A good resource page to help you out may be found at diveintohtml5.info.

Use the schema.org reference to create data that will be read by Google, Bing and Yahoo. Google has a testing tool here that will verify your markup. Bing also has a testing tool in their Webmaster Tools. I have gotten different results with microdata code comparing the results with these two tools. In particular, Google would verify more of the code than Bing and took a few tries at manipulating the code and testing to get thee same results from both.

If you are using Wordpress, there is a plugin that will automatically do the microdata markup for you. I use it on the news blog portion of our website. Just search for Opengraph and Microdata Generator. Speaking of Opengraph, that is the code pushed by Facebook. The last two versions of this site included a lot of it in the headers. With this rework I opted to drop it from every page and only include it on a few selective pages. Why? Fewer than a dozen Facebook shares. The Big Compromise - Fancy frills or speed? Some of both please.

Tools That Test Page Speed
Although the primary purpose of the following three tools is to test your page for speed, they all will provide insight into much more details of your page.

Google's PageSpeed Insights
PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.

WebPageTest
Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

Testing Tip That May
Not Be So Obvious
Most people will test their home page to the exclusion of all other pages. Some "so called" SEO Experts will stress the load-time of your home page because they say it is the initial page that most people visit. Actually, most of our visitors hit other pages of our site as the landing page first. Only fifteen percent or less of our first time visitors view our home page first. Return visitors have it cached. Visitors that view our home page after first viewing another page, have the benefit of a primed cache.

Tip: Test other pages too.

Javascripts
I serve all of the javascript files required to use this site from my own in-house server. Those files require the jquery library in order to work. I reference that library at Google instead of this server. Why? Because there is a good chance that your browser already has the Google instance of the file cached.

Images
If you need to reduce the file size of your jpeg images, here is a free online tool that does the job very well.

Test Your Hosting Server
You can check to see if your web server is compressing your http here.

This tool requests an object from a web server, and displays the response headers the web server sends back.

This online tool from Digicert allows you to enter your website address and it will check the SSL certification and tell you if your certificate is installed correctly.

I hope you find these tools as helpful as I have. Improving the web one website at a time is a great thing for everyone. Maintaining a website is a never-ending proposition. This is the seventh iteration of our site since it was launched many years ago. I'm very excited about HTML5 and the things it brings to the table.

Check your robots.txt file here. Having a correctly formatted robots.txt file is crucial.

Summary
After you have tested your html and server, take a look at other resources to help make your website be all it can be (yes, I'm an Army guy). We use a Content Delivery Network to serve our images and CSS3 code. Click here to see which data center is serving the images on this page to you.

Interested in working with us? Or have a question?
Perhaps just want to say hello?