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:
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 sTag key with 2 descendant selectors
.like_widget_dark .connect_widget_number_cloud_nub iTag key with 2 descendant selectors
div.connect_widget_number_cloud_extension_text tableTag key with descendant selector and Class overly qualified with tag
div.connect_widget_number_cloud_extension_text tdTag key with descendant selector and Class overly qualified with tag
.like_button_dark .connect_widget_button_count_nub iTag key with 2 descendant selectors
.connect_widget_like_button .liketextwithimage imgTag key with 2 descendant selectors
.hidden .connect_widget_like_button .liketextwithimage imgTag key with 3 descendant selectors
.connect_widget .like_button_dark .connect_widget_text aTag key with 3 descendant selectors
.connect_widget .connect_widget_whats_this a:hoverTag key with 2 descendant selectors
.connect_widget .page_stream imgTag key with 2 descendant selectors
.like_button_no_like .tombstone_cross imgTag key with 2 descendant selectors