Articles in The 'Front-end-Development' Tag


August 5 2009

Optimizing Web Page Load Time: An Introducing to YSlow

by Jordan Sandford

Today, I’ll introduce YSlow, an add-on for Firefox.

YSlow was born out of Yahoo’s development department after they wrote some best practices for making high performance web sites. All the gory details are found in their Best Practices for Speeding Up Your Web Site document.

You might know that Firefox has thousands of add-ons available to help you with all sorts of things, and to be accurate, YSlow is actually an add-on to the Firebug add-on for the Firefox web browser.

screenshot-of-yslow

Screenshot of FireBug with YSlow installed.

YSlow has four sections: Grade (grading performance), Components (listing web page components), Statistics (statistic on web page components) and Tools.

In the Grade tab inside YSlow, you’ll see that the grading is done on 22 performance metrics, which are divided into six categories: content, cookies, CSS, images, Javascript, and server. YSlow provides descriptions for each metric and a link to the full description in its Best Practices document. YSlow understands that there are different types of web sites and grades according to the ruleset you choose (e.g. blog, small website or large web site). You can create custom rulesets as well.

The Components tab provides all components that YSlow detects your web page uses and lists very useful and pertinent information about them under five categories: doc (genrally, any HTML, XML or XHTML file), js (Javascript), css, cssimage (images that your CSS files request) and image. It will show any component in red if the browser cannot find it (404 error). It also gives the count for all components by category.

The Statistics tab compares the page loading (total file size, to be exact) when components were not cached (saved from previous visits) verses when they components were actually cached when you ran the YSlow test.

The Tools tab provides features that can make some optimizations much easier. For example, to implement suggestion 4 in my previous post, click the All CSS link to combine all CSS used by the web page. Clicking on the All JS link will do the same thing for JavaScript.

My next post will delve a little deeper into YSlow.

July 10 2009

An Overview of Optimizing Your Web Pages for Speed

by Jordan Sandford

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

  1. Remove unnecessary HTML code (or, using techno-speak: remove unnecessary DOM elements).
    As an example, you don’t need a DIV as the only tag inside another DIV. As another example, you don’t need tags like DIV or SPAN sitting around with nothing inside them. Removing unnecessary HTML decreases “code bloat,” makes the browser display the page faster (a.k.a rendering time) and increases content-to-code ratio, which helps your SEO efforts. You want the search engines to have to sort through the least amount of code to get to your content.
  2. Use the least amount of websites to serve content (a.k.a. host names).
    Examples of different host names are: www1.mysite.com, www.ebay.com, www.mysite.com, mysite.com, www.youtube.com. The benefit is that every time the browser needs to find the internet address of a new website, it takes some time. The less address look-ups, the faster the page will display. Note: This is more applicable with images than with video and other web services like Google Maps, YouTube and Twitter.
  3. Move as much CSS and Javascript to external files as possible. This also helps with your content-to-code ratio and helps separate the content from the programming.
  4. Use the least amount of external files as possible.
    Any time a file is requested from a website, the browser has to wait for the request to go all the way to the server and then wait for a response. In addition, there is always a bit of “meta” information about this communication that must be transmitted as well.
    Here is an example: you may have 10 different external Javascript files that are responsible for different things on your site. Consider merging them, either using an automated or manual process.
  5. Optimize all files, including images, videos, PDFs and Flash files.
    Don’t forget to optimize text-based files such as CSS, Javascript, HTML and XML files by removing empty lines. Especially useful on Javascript and CSS files, “minifying” removes all unnecessary spacing. This causes the file to be the smallest possible while allowing browser to interpret the file correctly.
  6. If you have a lot of media content and a lot of traffic, use specialized servers that are tuned to serve specific types of content.
    These servers are part of systems called content delivery networks, or CDNs. A well known CDN is owned by Akami Technologies, and is used by large websites such as CNN. A more likely option for an average site would be Amazon’s CloudFront (read a review of CloudFront by CMSWire.com: Amazon Launches Cheap CDN for SMB Web Publishers).
  7. Even if you do not use a CDN, consider properly adjusting cache and compression settings in your website.
    Caches settings, when used properly, help the browser re-download content only when it has changed. Compression settings allow the transmission of the files to be faster, since the file will be compressed when in transfer, but uncompressed after it gets to the web browser.
  8. Limit the use of HTTPS.
    HTTPS is a secure communication system used when transmitting sensitive and personally-identifiable information back and forth to websites. This is extremely important for many sites that use sensitive data and want to maintain a high level of customer trust, but serving content via HTTPS is slower than by HTTP, so make sure your site only uses HTTPS where it must.
  9. Try to limit the amount of redirects needed between when a user clicks a link (or types a URL) to when they see the page.
    Redirects can cause slower load times, but many times are the only answer for various problems, including SEO issues. All redirects cause the “meta” information, mentioned in item 4 above, to be transmitted, regardless of whether any real content is transmitted. When redirects occur, especially multiple redirects, time is wasted when the browser has to wait for the real content to be transmitted.

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.

May 13 2009

Implementing Advanced Accessibility

by Jordan Sandford

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.

Keep in mind also, that accessibility not only includes catering to people with disabilities, but to people using non-mainstream browsers. This can include Web TV, Playstation or Nintendo Wii consoles as well as the large variety of cell phone browsers and other operating systems such as the Mac OS and Linux. All these varieties of browsers (most of the modern browsers anyway) endeavor to support the web standards, and the best way to cater to all of them at once it to support web standards in your front-end code (this includes HTML and CSS) and make sure your Javascript is error-free.

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:

label_tag_example_html

It will look like this in a browser:

10pounds

Now when a user clicks on “25 pounds,” the appropriate radio input will be checked.
Another accessibility tip for your web site is especially relevant if you are using any type of Javascript. First, always use the noscript tag, which, in the words of W3C, “allows authors to provide alternate content when a script is not executed.” Also, as websites are using more and more Javascript, what may often happen with browsers that are set to not use Javascript or browsers that cannot use Javascript, is that basic abilities to navigate the site become broken. For example, a user may not be able to go forward or backward in their history when clicking on a Forward or Backward button on the web page. Javascript may become so obtrusive that some web sites, even when viewed in browsers with Javascript enabled, will “break” the browser’s own forward or backward buttons. For more information about obtrusive Javascript, see the A List Apart article, Behavioral Separation.

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.

Toolbar

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.

© 2024 MoreVisibility. All rights reserved.