Articles written in August, 2009

August 31 2009

Optimizing Web Page Load Time: Using YSlow, part 1


In this post, I will look a little deeper into using YSlow to optimize your web pages for speed.

Let’s start off with the Grade section. Usually, when you click the Grade tab, YSlow will quickly run through a few processes and show you a gray progress bar. It is collecting information, analyzing and grading your page’s performance. YSlow shows your overall grade in the top left, and by default, it will show all 22 metrics (in some order that I haven’t figured out yet) and their grade. Click each of the six sections on the top to show only metrics in those categories (e.g., server). The Grade tab is a great way to remember some things to check in analyzing your page’s performance. Remember, though, not all 22 metrics should be taken as hard and fast rules. It often depends on the type of your site and your specific situation.

One way to quickly see what is going on with your performance is to analyze how many HTTP requests (i.e. any request for any type of file your browser makes when displaying a web page) are occurring as well as how much data is being downloaded. The Statistics tab shows a nice overview of this information with pie charts to boot. There is obviously a direct correlation between the amount of data that is downloaded to the amount of time it takes to fully display your page. The Statistics tab shows the total data amount, or “weight,” that is downloaded as well as how many HTTP requests were needed. It breaks this into two helpful categories: Empty Cache and Primed Cache. Empty cache represents the situation where you have never been to that site before and you visit the page that is being analyzed for the first time. Technically, it means that browser does not have anything the page requests already stored in temporary memory. After making those requests, it stores what requested files it can into temporary memory so that the next time it needs to request those files, it can just pull them from the temporary storage, which is many times faster than requesting it over the Internet. Primed Cache represents the scenario when your browser has at least some of the requested files already stored in memory.

Next to each of the two pie charts, YSlow displays a categorized table of items it requested and the “weight” of all items in each category. The categories are: HTML/Text, JavaScript File, Stylesheet File, CSS Image, Image and Favicon. If either your empty or primed cache shows more than one request for a CSS image, these images may be good candidates for CSS image sprites. Image sprites is a technique used to reduce the amount of HTTP Requests by putting all multiple images in one larger image (like a pasteboard) and using the CSS background-position rule to only show the appropriate image at the appropriate area of your web page layout. How practical this may be depends on whether any of the images reside on other servers and whether any of them are 8-bit (256 color) images. If the files exist on other servers, you should ask yourself if you should combine them. One reason you may not combine them, even all images are full-color is that the image is often updated by some other website that resides on that 3rd party server.

Use similar logic for determining if you should combine the Javascript and Stylesheet files that your site uses. To be able to combine the files, you’ll have to know which files to combine. That is where the Components tab comes into play. I’ll cover that section in my next post. Until then, enjoy your break.

August 26 2009

Lorem Ipsum – “Say What?”


What is Lorem Ipsum? Lorem Ipsum, also known as “greeking” in the design industry, is simply dummy text that is used as a placeholder for the actual text that will fill a certain area of a design.

Blocks of text are essentially visual elements in a design. They are groupings of smaller shapes that make up larger ones visually. It is extremely important to keep this in mind when designing, because you may run into a problem when the Lorem Ipsum you’re using does not match the word count of the actual text that is coming from the client. You might have a beautiful design in the beginning and in the end have to redesign entire areas to fit your content.

Think of page layout being similar to putting a puzzle together. If you are missing pieces of the puzzle, it is much harder to put together and can be quite a headache for the designer and later, the client. If there are spaces that are detrimental to the design, then it is all important to acquire the actual text that will be used before starting the layout process. In some cases, the client may be working on the content and can only give an idea of the word count that will be used. That’s when Lorem Ipsum comes in handy!

Another useful attribute of Lorem Ipsum for designers is that clients won’t get hung-up on whether or not you spelled “the” correctly. They may have the urge to read and make comments that are not directly related to the design. Lorem Ipsum keeps everyone on the same page and allows the creativity of a design to be noticed.

August 5 2009

Optimizing Web Page Load Time: An Introducing to YSlow


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 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.

© 2016 MoreVisibility. All rights reserved