Wednesday, August 11, 2010

New WebPagetest UI

If you've been over to WebPagetest today you may have noticed that things have changed a bit (after you double-checked to make sure you were really at the correct site).  Thanks to Neustar Webmetrics (and Lenny Rachitsky in particular) for kicking in an actual designer to bring the UI out of the dark ages hopefully performance testing will be less intimidating to new users while still keeping all of the functionality that the more advanced users like.  All of the existing functionality is still there (with very similar navigation) but there are a few enhancements I managed to get in with the update as well...


 Feeds


Right at the bottom of the site (across all of the pages) is a blogroll (left column) of performance-focused blogs and a feed of recent discussions (right column) that pulls from the WebPagetest forums, the Yahoo Exceptional Performance group and the "Make the Web Faster" Google group.  If you have a blog that you would like included (that is focused on web performance) shoot it to me and I'll get it added to the feed.

Simplified Navigation


There used to be 3 separate "landing" pages.  One with some high-level information, one for testing individual pages and one for running visual comparisons.  All three have been collapsed into a single page.

New Performance Documentation Wiki


There are a lot of discussions in the forums that end up with really valuable information on how to fix something (keep-alives being broken for IE on Apache comes up frequently).  I decided to set up a new destination to serve as a place to document these findings as well as serve as a central repository for performance knowledge.  Web Performance Central is an open wiki for the community to contribute to the knowledge base of performance.  I will be hosting my documentation there and it is open for anyone else to do the same and hopefully we can start getting a reasonable knowledge base built (it's really bare right now - mostly just the site).

I'll commit to running the site without any branding and with no advertising so it can be a completely unbiased source for performance information.

More Prominent Grades



The grades for the key optimizations are now across the top of all of the results pages and clicking on any of them will take you to the list of requests/objects that caused the failure.  Eventually when the documentation is in place I hope to also link the labels to information on how to fix the problem.

Social Sharing


I also bit the bullet and added a 3rd party widgit to make it easier to share results.  It saves a couple of steps and makes it a lot easier to tweet things like "Wow, site X is painfully slow", etc.  I was a little torn because the addthis widget messes up the layout of the page a little bit in IE7 and below but let's face it, I don't expect that the target demographic for WebPagetest would be using outdated browsers so it was a tradeoff I was willing to make.

New Logo

I'm not a graphic designer by any stretch of the imagination and the UI designer provided the basis for the new logo but I wanted something that had a transparent background and that I could modify myself so I went and created a new one.  I HIGHLY recommend Inkscape for those that haven't tried it. It is a free (open source) vector drawing program that is used even by a lot of professional designers.  I managed to whip together the logo in a few minutes and create it in various different sizes (as well as a favicon) all from the same source (ahh, the beauty of vector graphics).


Finally, as a bonus for making it this far, there is an Easter egg in the new UI that lets you change the color scheme if you don't like the blue background.  Just pass a hex color code in as a query parameter and you can use whatever color you want (with the logo auto-switching from white to black as needed).  Here are some to get you started:

The original color scheme provided by the designer: http://www.webpagetest.org/?color=f1c52e
Green: http://www.webpagetest.org/?color=005030
Black: http://www.webpagetest.org/?color=000000
White:  http://www.webpagetest.org/?color=ffffff
Orange:  http://www.webpagetest.org/?color=f47321

The color will stick until you clear your cookies or manually reset it.  To reset it to the default just pass an invalid color: http://www.webpagetest.org/?color=0

As always, feel free to send me any feedback, suggestions or questions.

12 comments:

  1. Well done Pat. You're the man!

    ReplyDelete
  2. Great update! Of course I'm gonna complain about some stuff :)

    Is it possible to use checkboxes for Browser and Connection ? Easier to scan for the eye.

    And also remember the state of openness of Advanced settings ?

    Scrolling is also weird on Firefox and Opera (Mac)

    ReplyDelete
  3. Thanks, I'll take a look at remembering the Advanced settings state and seeing what I can do about the browser and connection selection (radio would make more sense than checkboxes but it may be a pain to have them be dynamic since they have to change based on location).

    Scrolling is actually weird on all browsers by design (sadly). I may yank the code that does it but there is some code that keeps the start button visible as you scroll down through the settings and it makes it behave strangely as you scroll to the bottom. I may be able to tweak it to not extend the height of the content pane when you get to the bottom which would help.

    ReplyDelete
  4. Vincent Voyer here, also we can't see the DSL/FIOS values, we only have the label. (we had connexion values, before)

    ReplyDelete
  5. What are you talking about, they are there ;-)

    (just fixed it - something I forgot to migrate from staging, thanks for pointing it out).

    ReplyDelete
  6. Excellent work, thanks a lot. I use it every day to analyze my webpage. Thanks a ton again, keep up the good work.

    ReplyDelete
  7. The new site does not work well with IE 7. The page hangs when presenting results more often than not and the banners obscure results on the rare occasion when it does. The test history button never loads the page, etc.

    ReplyDelete
  8. Which banners are causing problems? Except for the chrome around the page the actual page structure (particularly for the results) hasn't changed. When I tested on IE7 the only problem I saw was that the footer was mis-aligned from the main content by ~20px.

    ReplyDelete
  9. Patrick,

    When I use IE7 after the second hit attempt tries to render the results, for both the first and second results, I see two white rectangles where the results graphs are supposed to be.

    Also when I get the first hit results and attempt to click on the Optimization graph image to enlarge, I get the same results page with white rectangles where the results should be.

    And I too see the misaligned footer...

    ReplyDelete
  10. @Anonymous

    Thanks, I think I have it fixed now (also figured out how to fix the footer alignment while I was in there).

    ReplyDelete
  11. @Rik

    Thanks for the feedback - I just added the code to remember the state of the advanced settings window so you should see that persist (assuming you're not blocking cookies).

    Is the scrolling any better? I tweaked that a bit last week.

    ReplyDelete
  12. Yeah, much better! Thank you.

    ReplyDelete

All comments are moderated and may take a while to appear.

Note: Only a member of this blog may post a comment.