As long as the Internet has been around, long before search engines came on the scene, speed optimization was an oft-pursued goal. Whatever made the user wait the least time for a page to show on their monitors would be employed. Now, search engines are measuring load time for pages and using this metric to help determine quality. Even in the age of high speed internet, page load time is both an SEO issue and user experience (UX) issue. In addition, not all high speed connections are the same “high speed.” This difference is noticeable depending on your proximity to urban areas and internet connection type (fiber, DSL, cable, satellite, etc.)
In my first post in this series on speed optimization, I will provide some general areas where speed optimization can take place. In other posts, I will discuss some tools that can help in this effort.
I’d like to make some comments before I start. Depending on the current state of your website or web pages, making just one of these optimizations may not be apparent. Making several optimizations, however, should cause a noticeable change. It’s a good idea to fully understand these suggestions and match them to your site (consider your site’s type, size and daily/weekly traffic patterns) before implementing them, because you may actually end up slowing your site down instead of speeding it up.
General areas for speed optimization
These items do not encompass nearly all areas in which speed optimizations can take place, but they should be a good start to the concepts I will discuss some future posts.
After a hiatus, I’m back to give you what I promised: a discussion of advanced tips to help increase your site’s accessibility. One important thing I mentioned in my last post is that if you design or optimize your pages with accessibility as a goal, you may not only gain more visitors, but you will be helping your SEO efforts a great deal.
I validate (X)HTML and CSS code using the W3C validators. For HTML validation, visit http://validator.w3.org. I typically use the Validate by URI or Validate by Direct Input tabs, and before I run the validation, I make sure Show Source is checked under More Options. This helps to quickly jump to the line of code the error reports mention. You also have the option of listing error messages sequentially or by error type. Be sure to check out their list of error messages and their interpretation page because the error messages aren’t the easiest to understand.
To validate CSS, visit http://jigsaw.w3.org/css-validator. This tool will validate both CSS-only files and HTML files with CSS embedded.
It often happens in web development (and I believe in other industries as well) that increasing the user experience for disabled visitors increases the user experience for non-disabled visitors. One example of this is when you are creating forms (i.e. places that allow the user to enter information and submit their information to you.)
The current version of HTML (4.01) provides several notable features for user experience enhancements of forms. There is the tabindex attribute that allows the user to use the tab key on the keyboard to navigate sequentially through the entire form without using a mouse. The accesskey attribute is similar to the tabindex, but allows the user to instantly get to a text box (or any input area of the form for that matter). There is also the label tag that makes using forms easier: without the label tag, the user will usually have to click (barring the use of tabindex or accesskey) on the input (i.e. any form area that allows the user to enter information or choices into the form). If the input is small (especially relevant to radio inputs, the small circles that allow multiple choice questions), it can be hard for some users to position the mouse precisely enough and hold it still when they click the radio inputs. This may sound far-fetched, but I have witnessed this personally when training people on basic computer skills. The label tag is designed to allow the text describing the input to be clicked on which then activates the input. One easy way to use the label tag is like this:
It will look like this in a browser:
Now when a user clicks on “25 pounds,” the appropriate radio input will be checked.
I mentioned the Web Developer Toolbar in a previous post and want to briefly show how to use a few features.
First, you need the Firefox web browser. Visit www.getfirefox.com to download and install it.
Then, use Firefox and visit the page for the Web Developer Toolbar, https://addons.mozilla.org/en-US/firefox/addon/60.
To show the alternative text of any images, click the Images button in the toolbar and choose Display Alt Attributes. Also under the Images button, you can choose Disable Images > All Images to get a good idea of how well your page conveys its non-textual images.
To disable all CSS on the page, click the CSS button (two buttons to the left of Images) and choose Disable Styles > All Styles.
I look forward to seeing your fresh, new and accessible web pages soon. I hope this series has been informative and usable.
In my last post I discussed accessibility and the web and gave some good reasons why you should deliberately include disabled users as part of you target market.
As I’ve suggested previously, when you design your pages with accessibility in mind by using current web standards, you will go a long way toward enhancing the SEO quality of your pages as well. In addition, you also increase the flexibility of your HTML code to allow more complex and forward-thinking visual and interface design.
One important suggestion is to first design your pages and site as a whole without any styling applied, i.e. black text on a white background. To clarify, do not use any CSS, whether it’s inline or in it’s own file, but do use appropriate and current HTML tags in a semantic, consistent manner.
Don’t forget that you need to choose a DOCTYPE declaration and place it at the very beginning of the HTML document, before the tag. Make sure the HTML you use is supported by the DOCTYPE you plan to use. A good resource about DOCTYPE declarations is the A List Apart article, “Fix Your Site With the Right DOCTYPE!”
The reason I’m suggesting that you don’t use special styling or formatting at the beginning is so that you can make sure that the content on your page can be quickly glanced over and understood using only the formatting the browser supplies to the various tags (e.g. the h1 through h6, the ul, the a, the table and caption tags). With no special formatting applied, all the content will flow down the page, one section or tag after the other. This will ensure that assistive devices will have a much easier time understanding what you meant. Ask another person to identify the different sections of your page, such as the main and secondary navigation, header, side bars, main content and so on.
The next suggestion goes hand-in-hand with the previous suggestion: you need to be able to understand the content of all imagery on the page even after having turned off images. One easy way to turn off images is to download the Web Developer Toolbar add-on for Firefox via MoreVisibility’s Online Marketing Tools & Resources page. The Web Developer Toolbar also allows you to easily turn off all styling in a document.) For all images and/or media that is part of the content of the page, there should be a matching textual description. For regular images, you must at least use the “alt” attribute. Additionally, you can choose to use the “longdesc” and/or “title” attributes to help parlay the meaning of the imagery.
Consider using closed captioning on any videos. You can add closed captioning to the YouTube videos you want to embed in your pages. This does not take the place of a textual description in the HTML of the video, but adds to the interactivity, especially if the viewer is deaf or must play the video with no sound. The sentences in the closed captioning can be set to show during the appropriate time in the video, increasing receptivity and comprehension when compared to the entire script of the video being read before or after the video plays.
My last suggestion is that you validate your HTML using a validation engine, specifically the W3C validator. This will help to make sure that you are not using any obsolete or non-standard coding that might trip up assistive devices such as screen reader.
Please come back and read my next post in which I will give tips on adding accessibility to more complex pages.