Zoompf 2010 list of Alexa top 1000 and GEmetrix optimization checks


Another find – Zoompf, a Web Performance Optimization company, has a report (admittedly from 2010) on the most common problems with non-optimized web pages. You’ll need to provide contact info to get the report:

http://zoompf.com/secure-downloads/Zoompf-2010-State-Of-Web-Performance.pdf

This report considers standard WPO, but goes on to define some more interesting problems. A good example of these is referred to as a “pointless request”. This is when the method used to create a UI or interactive feature on a web page could be done more efficiently. An example would be a bitmap image of one color, which could be replaced with a CSS directive to make that region of the page the same color.

In other words, they are talking about “swapping green ingredients” – as in many sustainable design strategies, swapping in a greener component or element can improve the overall sustainability of the product. Astonishingly, the report notes that in 2010, almost 1/4 of the top 1000 Alexa sites were using single-color bitmaps instead of CSS to create background color!

The report makes a related comment on the sustainability of a web page for designers versus its actual use online:

…Furthermore, many aspects of the production websites exist solely to help developers while simultaneously hurting performance and user satisfaction. As an example, a large portion of the improvements derived from minifying HTML files came from eliminating the transmission of HTML comments present in those files…

The report goes on to note an even bigger problem – commented-out code

…HTML comments contained source code change information, developer comments about application functionality, and blocks of HTML which were commented out to disabled entire website features.  Disabling or manipulating the content and functionality of a production web application  using developer comments is a poor and unscalable approach to managing a website. Yet  we discovered this practice within the largest and most popular websites on the Internet…

A final plus in the report is the actual (2010) scores for the top 1000 websites, as computed by the Zoompf system, which is similar to many other WPO measures like YSlow.

I checked my sites in the Zoompf tester, and found that my plyojump.com web host is serving out some headers that could be improved – score only in the 70s. Green Boilerplate does much better, in the high 80s. A few flags were things I didn’t know about, e.g. putting in the ‘defer’ in the <script> tags on the page. Definitely a company worth a look.

After testing out the Zoompf system, I compared it to GTmetrix (http://www.gemetrix.com). This site also had a free “tester” option, and, like Zoompf, provided lots of useful output on optimization. A particular feature of the GTMetrix site was a report on inefficient CSS selectors, which I’ve seen discussed but never quantified anywhere else. It would be useful to devote a future post to efficient CSS. I have asked in the SASS and LESS forums whether the output of these tools is efficient, to no avail.

Here are the lousy rules from the Plyojump.com website.

  • Tag key with descendant selector and Class overly qualified with tag
  • .like_widget_dark .connect_widget_number_cloud_nub s    Tag key with 2 descendant selectors
  • .like_widget_dark .connect_widget_number_cloud_nub i    Tag key with 2 descendant selectors
  • div.connect_widget_number_cloud_extension_text table    Tag key with descendant selector and Class overly qualified with tag
  • div.connect_widget_number_cloud_extension_text td    Tag key with descendant selector and Class overly qualified with tag
  • .like_button_dark .connect_widget_button_count_nub i    Tag key with 2 descendant selectors
  • .connect_widget_like_button .liketextwithimage img    Tag key with 2 descendant selectors
  • .hidden .connect_widget_like_button .liketextwithimage img    Tag key with 3 descendant selectors
  • .connect_widget .like_button_dark .connect_widget_text a    Tag key with 3 descendant selectors
  • .connect_widget .connect_widget_whats_this a:hover    Tag key with 2 descendant selectors
  • .connect_widget .page_stream img    Tag key with 2 descendant selectors
  • .like_button_no_like .tombstone_cross img    Tag key with 2 descendant selectors

Unfortunately, some of the inefficient CSS is on a CDN – http://static.ak.fbcdn.net/rsrc.php/v1/yx/r/8oDLpMdwgEz.css. I found a similar problem on Green Boilerplate – the redirect for Google Analytics was flagged at an “F” (bad) score, and the expires of the JavaScript in the same analytics received a similar score.  However, I was able to fix a few things on GBP to make the site more sustainable.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s