Tag: tools

Speed Testing WordPress Sites

Links are plentiful on the ‘Net and these are a few that will help when speed testing your WordPress sites.

Site Loading Speed, Caching and Validation

  • Pingdom Tools tests the load time of URL, analyzes it and helps to find bottlenecks. Click on down-arrows for each file/path under the waterfall tab to see the headers and again for each recommendation under the Performance Grade tab for specifics.
  • Yslow, a browser plugin analyzes web pages and suggests ways to improve their performance.
  • W3 Total Cache is a superior caching plugin for WordPress sites.
  • Firebug Web Development Tool check Net tab for page element loading times.
  • Check out your site’s speed with this handy speed test.
  • Page Speed test online or via browser extensions for Firefox and Chrome. Results include minified HTML, CSS and JS files saved to configurable directory.
  • Caching Tutorial explains web and proxy caches and http headers.
  • REDbot checks the server clock and caching for a site, hover over each line of the response for full explanation.
  • WP Tutorial on Boosting Site Speed excellent step-by-step tutorial showing how to use plugins to improve speed of WordPress sites.
  • WebPageTest checks page loading speed, can select various browsers with screen shots reported. Advanced settings allow selection of connection speed for DSL, Cable, FIOS or 56K dialup.
  • W3C HTML Validator finds out if your pages don’t validate, which can make them slow to load.
  • W3C Link Checker
  • Test Mobile Readiness of web pages.

Site Accessibility Resources and Tools

The accessibility of a website must be directly proportional to the percentage of viewers who can actually see, read or hear the content. After all, if people can’t observe it, how are they going to get your message?

Since web developers don’t need to adapt the coding of sites for the majority of us to see the content, it may not come natural to them to include those who do need special consideration. It does take a little bit of extra time and thought to accommodate – or dare I say be helpful to – people with vision difficulties or those who use screen readers to use the Internet.

To get an idea if your sites pass muster, visit the accessibility links below for a little help.

Links for Accessibility

HERA accessibility testing provides reports that show exactly where a site should be improved. If any errors are found when your site is scanned, they’re clearly highlighted so that you can take corrective action. A really helpful part is the ‘Navigate by guidelines’ feature, where results are categorized by the accessibility guidelines. Stepping through the results under each guideline will show you exactly which parts of your site aren’t accessible, and it will help you learn more about the guidelines.

WAVE Accessibility test shows icons on the test results page where the guidelines weren’t met. Icons were extremely helpful in determining what parts of the page weren’t up to snuff. One feature to highlight is the ‘disable styles’ button in the upper right of the results screen. Click that button to see your site without style sheets applied. If your content can be read without too much trouble, then it’s probably ok.

Readability test provides results of three algorithms in judging the readability of text on the page. If your site deals with a technical subject, or if your content is too complex for the average Joe to easily understand, your site may not fair well on the readability tests. Keep in mind that Joe Public only reads at an 8th grade level. Sad, but true :(.

CSS Analyzer won’t give output until all CSS errors are corrected. It’s just not possible at this stage with WordPress sites due to partial implementation of HTML5.

UI Test Enter your URL at Site Test for handy direct links to accessibility and validation checkers. Very helpful when modifying a page to meet accessibility guidelines.

The guidelines we’re talking about are the Web Content Accessibility Guidelines (WCAG) and the portion of U.S. Law for Section 508 which requires that information technology is accessible to people with disabilities, at least in federal agencies.

CSS Resources and Tools

Here’s a small collection of resources and tools for learning CSS, Cascading Style Sheets. It’s through links like the following that our collective CSS skills are improved. Read more, learn more.

Links for CSS

To get an idea of what CSS can do for your site visit the CSS Zen Garden, a site for inspiration in designing with CSS. Studying the style sheets for the different themes presented here can teach you a lot about style and positioning.

Introduction to CSS by Dave Raggett at W3C. Even though it’s a bit dated this is a good place to start to see how CSS works. Get the basics about linking to a separate style sheet and setting link colors.

CSS Reference and Tutorial from the Mozilla Developer Network could be a one-stop shop for learning CSS. Pick the getting started tutorial if you’re not very familiar with using style sheets. If you already know the basics, you might want to bookmark the exhaustive CSS reference. It has browser support tabulated for all the CSS 3 properties.

SitePoint CSS Reference uses categories to organize pages into CSS-properties, CSS-selectors, at-rules, styling concepts and layout examples. Play around in the “live” area (you get there by selecting the “Play” tab) where you can post CSS rules or HTML markup in the left pane of the window and see the immediate effects in the right pane.

Interested when a particular feature showed up in the history of CSS? Check the CSS Properties Index for an alphabetical list of properties. Properties are tabulated for CSS1, CSS2, CSS2.1, and CSS3. Clicking on any property name will bring you a definition of that property along with its acceptable values, which elements it can be applied to, and whether it can be inherited.

Font stacks might be of interest in studying site designs and learning the underlying CSS. Each font stack is like a mini-library. Learn how to create your own font stack through examples of Eight Different Font Stacks. Extend the idea to include basic page design via 960 Grid, a CSS library.

Great tutorials on specific CSS topics include:

Once you start writing your own CSS you’ll want to know if everyone can see your site the way you intend it to be seen. Validating CSS will assure that your style sheet is valid and therefore understood by browsers that people use to see your site. Check your CSS style sheets with the W3C CSS Validator. Tip: change profile to CSS3 and change vendor extensions to warnings, until CSS3 properties are more widely in use.

Keep reading, people. It’ll make you better at what you do.