up

Zoompf's Web Performance Blog

Note: Archived Content

This is the archived version of the Zoompf blog. Since our acquisition by Rigor, all our new research and posts on web performance are being published on The Rigor Blog

5 New WPO Features

 Billy Hoffman on June 25, 2014. Category: announcements

Today I am happy to announce that we have launched a new version of Zoompf WPO! We’ve added some great new features and other improvements based largely on feedback we received from our users. Here is what is new:

Optimized Image Comparison

As I’ve written about many times before, images are a huge part of the web. Zoompf tests not only for lossless image optimizations, but also lossy image optimization. Lossy optimizations are especially important because they can reduces images by 50% or more with a slight loss in quality. As I presented at the Velocity Conference, when done properly these lossy optimizations are largely invisible to the user. However, designers are often sensitive to any change to the source image. They want to compare any optimization with the original image to see how the image has changed.

To help our users see the differences between a lossy optimized image and the original, we added an interactive image comparison control to Zoompf WPO, as shown below:

image-compare

This control allows you to slide a divider back and forth, exposing more or less of the original or optimized image. This allows you to quickly compare how a lossy optimization alters the source image. It is our hope that this gives designers the reassurance to know that an optimization not will negatively impact their users. Zoompf WPO shows this control for all image optimizations.

Lossy Optimization Bundle

One of the most loved features of WPO is our Optimized Resource Bundle. While Zoompf is scanning your site, it is performing lossless and lossy optimizations on your content to determine if a resource can be optimized and by how much. Since we have done all the optimizations for you already, we provide these optimized resources as a ZIP file you can download. In the past, the optimized resource bundle has only contained the losslessly optimized versions of your content. This was to ensure that designers could copy over the optimized content without fear of reducing quality.

Now that you can easily see the impact of lossy image optimizations with the Optimized Image Comparison control mentioned above, we wanted to provide an easy way to get these images in bulk. So we have added the Lossy Optimization Bundle. This bundle includes a mix of lossless and lossy optimized content. If an image can be both optimized using both lossless and lossy methods, the smaller image is included. Using the lossy optimization bundle, designers can be sure they are using the best optimizations possible for their content.

lossy-bundle

You can download the lossy optimization bundle under the “Reports&” section while looking at a scan.

URL Shading and 3PC Labels

Knowing which pages are affected by an issue is the first step in resolving the problem. In the past , Zoompf displayed the URL of an affected page as a fully qualified URL in a single color. If the URL was inside of a table, we may truncate the URL after a few hundred characters.

In retrospect, this was a terrible approach from a readability perspective. It’s hard for the eye to mentally parse a long, single line of text without any spaces and in a single color. We also found that simply truncating a URL was a poor way to reduce its size.

Our insight came when we realized that a URL is composed of different parts, and some parts were more important than others when trying to figure out to what a URL resolves. So, we use a new approach, that looks like this:

url shading

We use color to emphasize the important parts of a URL (the hostname, the file name if present) and deemphasize the less important parts (the path, the query string). We also are smart about how we truncate and where we truncate. In the image above, we reduce the size of the path, and add an ellipsis. The result is a far more readable URL.

We also now label a URL as being third party content, as shown below:

wpo-3pc

This label lets know you the content is from a third party, so you can quickly see which problems affects your content and which affects third party content. As always, you can control whether Zoompf tests third party content for performance issues using the “Audit Third Party Content” under the “Options” section when launching a new scan. Our third party content detection is powered from our database on ThirdPartyContent.org.

Targeted Response Bodies

I started my career in software the way many do: working in the QA department testing code. A big hassle was often convincing the developer that a problem was real. I quickly found that if I could include some evidence of the problem, like a screen shot, there was less back-and-forth with the developer as they fixed the issue.

To help QA and developers resolve issues faster, we have always shown the response body, and highlighted in the response where the problem is. For example, if we detect a page is loading a large number of external JavaScript files we will highlight all the <script src> tags in the response. However, as HTML pages continue to grow in size, it can be tedious looking through 100 KB of text, While we have always include a “jump to cause of issue” link, there is a better way.

Zoompf WPO now has targeted response bodies. We automatically clip the response to only show the problem text and surrounding areas, as shown in the screen shot below.

targeted-bodies

You always have the option to see the entire body by clicking on the link. Targeted response bodies help remove the clutter so WPO users can see exactly what the problem is.

Improved Scan Summary Page

Zoompf has long showed a roll up of how many bandwidth savings was possible for a scan via both lossless optimizations and lossy optimization. Now, in addition to the total percentage savings, we also show you the total byte savings as well.

total-byte-savings

One of Zoompf WPO’s key features is our “Summary of Issues”. This provides a list of all the performance issues we discovered on your site, sorted by highest impact and ease-of-fix. This table answers the question “If I can only fix 3 performance issues this dev cycle, which should they be.” We made a few requested changes to make it even better. First, we numbered the defects to make it easier to read. Next, we made the “severity” and “Affected URLs” columns sortable, so you can see not only the most severe issues, but also which issues affect the most pages.

summary-table

Additional Improvements

We have made literally hundreds of other improvements to both the WPO web interface, and the underlining performance scanner. A few of the less nerdy highlights are:

  • PDF reports now have a footer with page numbers.
  • All our byte sizes are now formatted to use KB or MB. So instead of “376,810” you will see “376 KB”
  • Our savings tables, which show the savings for optimizing individual items, now includes a new column showing both the percentage savings and the savings in bytes.
  • Our savings tables also now includes the total savings for all items, in bytes, at the bottom of the table.
  • The navigation UI has been simplified, so that reports and scan tools are only available when looking at a scan. Breadcrumb UI now exists on all pages.
  • The “Audit Third Party Content” option now uses the ThirdPartyContent.org database.

Moving Forward

We are very proud to release this new version of WPO to our users. The ideas for the lossy optimizations bundle, targeted response bodies, and our improvements to the scan summary page came directly from our customers. If you have any improvements or suggestion, please let us know and we will work hard to incorporate them into the product.

Want to see what WPO is all about? You can see videos on the Zoompf Youtube Channel where I use WPO to check real websites in our “How Fast Is” series. If you’d like a preview of what Zoompf WPO would find on your website, you can use our free performance scan.

Comments

Have some thoughts, a comment, or some feedback? Talk to us on Twitter @zoompf or use our contact us form.