Yearly Archives: 2012

Do background-images lazy-load with display:none?

So, do background-images lazy-load with display:none? I did a quick test by loading this testpage created by Steve Souders on webpagetest.org. These are the results:

Conclusion: don’t rely on setting display:none on background-images to have them lazy load.

Site slower with CDN? Check your CSS!

A couple of days ago we implemented a CDN for a Drupal-based website, using MaxCDN/ NetDNA and the Drupal CDN module. We were very surprised to discover the site became … slower. It took us some time to identify the problem, but CSS turned out to be the culprit;

  1. The supplier created separate CSS-file for each and every template using SASS, causing some automated duplication of CSS
  2. Some of that CSS was not in the theme .info-file and wasn’t added using drupal_add_css either, but the link was hardcoded in the template-file
  3. The CSS that was added the normal way (i.e. not hardcoded in the template) was picked up and modified by the CDN module (changing paths for e.g. images and fonts into URL’s pointing to the CDN)
  4. CSS that was hardcoded in the template was not visible for the CDN-module, so the paths were not updated and still pointed to the origin webserver
  5. Because of duplication of e.g. background-images and fonts, pointing at both the CDN and the origin-server, these assets were downloaded twice and the extra file-size resulted in a site that was slower with than without a CDN

Once we understood the problem, the solution was pretty simple;

  1. clean up the CSS, avoiding to re-declare e.g. @font-face in multiple templates (resulting in a smaller CSS file download size as well)
  2. add CSS using drupal_add_css (with the option not to aggregate, as IE8 might choke on the massive amount of CSS) for the CDN module to take that into account as well

Web Performance Optimization can be so much fun!

lyteShare.js high-performance social widget for your sharing pleasure

Based on last week’s performance analysis of popular sharing-services (AddThis, ShareThis and Lockerz/AddToAny) I decided to continue working on my high-performance & privacy-respecting but rather ad-hoc lyteShare alternative. The result is a 1.6Kb JavaScript file (or the non-minimized version here) that, upon being included in a HTML-file, looks for a div like this one:

and adds sharing-buttons for Twitter, Google+ and Facebook to that div (Linkedin, Yammer and Tumblr are also supported). You can see lyteShare.js in action on this test-page. The webpagetest.org test result is great when compared to that of the big boys;

ShareThisAddThisLockerz/ AddToAnylyteShare.js
Document Complete0.677s0.487s1.352s0.364s
Start Render0.715s0.279s0.304s0.275s
Fully Loaded1.507s3.718s1.407s0.596s
Full Download size70 KB384 KB 111 KB9 KB
WebPageTest URLsharethis resultaddthis result lockerz/ addtoany resultlyteshare result
3rd party tracking?yes yes yesno

Now the question is; does the world really need yet another social sharing widget solution, even if it is easy, fast & not a vehicle for 3rd party behavioral web tracking? Does the world (and this blog) even need social sharing widgets at all?

Sharing widgets harm your website’s performance

[UPDATE: I reworked lyteShare into a standalone javascript-thingie]

Doing Web Performance can be so easy, really! I was asked to do a performance analysis of a new website and one of the things I didn’t like was the fact that the footer contained social media sharing buttons using the ShareThis widget. I’m not a fan of sharing widgets in general, as they tend to slow webpage loading and rendering down and as they almost invariably come with “3rd party tracking” for behavioral marketing purposes.

So why not do a quick comparison between a simple page with ShareThis, AddThis, AddToAny/ Lockerz share and one which uses inline javascript to render the buttons? For that purpose I quickly created lyteShare, an inline JavaScript thingie that dynamically adds the Facebook, Twitter and Google Plus sharing buttons after the load event has been fired. I’m not going to bother you with code (but you can look at the page’s source here if you want)  it’s probably far from perfect and it sure isn’t pretty, but it works and the webpagetest.org-results tell it all.

ShareThisAddThisLockerz/ AddToAnyinline JS (“lyteShare”)
Document Complete0.677s0.487s1.352s0.283s
Start Render0.715s0.279s0.304s0.298s
Fully Loaded1.507s3.718s1.407s0.500s
Full Download size70 KB384 KB 111 KB7 KB
Test Reportsharethis resultaddthis result lockerz/ addtoany resultlyteshare result
3rd party tracking?yes yes yesno

So yep, ShareThis, AddThis  and AddToAny/ Lockerz (and all sharing widgets really) are performance-hogs that also track your visitors’ every move while offering little or no added value to what anyone could do with some simple JavaScript (or server-side code, for that matter).

Conclusion: if performance is of any importance for your website (and it should be), you really have to avoid using 3rd party widgetery!