P3PC: Quantcast
P3PC is a project to review the performance of 3rd party content such as ads, widgets, and analytics. You can see all the reviews and stats on the P3PC home page. This blog post looks at Quantcast. Here are the summary stats:
| impact on page | Page Speed | YSlow | doc. write |
total reqs | total xfer size | JS ungzip | DOM elems | median Δ load time |
|---|---|---|---|---|---|---|---|---|
| small | 93 | 98 | n | 2 | 3 kB | 3 kB | 2 | 53 ms |
| column definitions | ||||||||
| Click here to see how your browser performs compared to the median load time shown above. |
Quantcast does web analytics. They go beyond the typical traffic stats providing information about user demographics for advertisers. It was easy to signup for Quantcast and embed their snippet. Go to the Compare page to see the snippet in action.
Snippet Code
Let’s look at the actual snippet code:
| 1: | <!– Start Quantcast tag –> |
| 2: | <script type=”text/javascript”> |
| 3: | _qoptions={ |
| 4: | qacct:”p-d0TvozDaU_91o” |
| 5: | }; |
| 6: | </script> |
| 7: | <script type=”text/javascript” src=”http://edge.quantserve.com/quant.js”></script> |
| 8: | <noscript> |
| 9: | <img src=”http://pixel.quantserve.com/pixel/p-d0TvozDaU_91o.gif” style=”display: none;” border=”0″ height=”1″ width=”1″ alt=”Quantcast”/> |
| 10: | </noscript> |
| 11: | <!– End Quantcast tag –> |
A quick walk through the snippet code:
- lines 3-4 – Define some variables used by the script.
- line 7 – Load the quant.js script.
- lines 8-10 – Provide a NOSCRIPT block that loads an image beacon using HTML.
Performance Analysis
This HTTP waterfall chart was generated by WebPagetest.org using IE 7 with a 1.5Mbps connection from Dulles, VA. Let’s step through each request.
- item 1: compare.php – The HTML document.
- item 2: quant.js – The main Quantcast script. This is loaded using normal SCRIPT SRC HTML tags, so it blocks subsequent resources in IE7 and older browsers, but not in newer browsers.
- item 3: pixel.quantserve.com/pixel.gif – A beacon back to Quantcast.
- item 4: *-waterfall.png – The waterfall image in this page. This is the main content of the page. Notice how it’s blocked by quant.js in IE7.
The Quantcast snippet is fairly performant. The few things worth noting are:
1. The quant.js script blocks resources and rendering.
The quant.js script is loaded using normal SCRIPT SRC HTML tags. Newer browsers (IE 8, Firefox 3.6, Safari 4, Chrome 2+) download this in parallel with subsequent resources. But in IE 6&7 and Opera all subsequent resources are blocked until quant.js is done downloading, as shown in the waterfall chart. In all browsers, all DOM elements below the SCRIPT tag are blocked from rendering and all JavaScript is blocked from executing. Since nothing else in the page depends on quant.js, it would be better to load it asynchronously, as is done with Google Analytics’ async snippet.
2. quant.js is only cacheable for one day.
This is the script that publishers add to their pages. As such, it has to have a short expiration time so that the end users will update their cache somewhat frequently to get bug fixes and other updates. However, one day might be too aggressive. As a point of comparison, Google Analytics’ ga.js is cacheable for one week.
3. The beacon returns a 200 HTTP status code.
I recommend returning a 204 (No Content) status code for beacons. A 204 response has no body and browsers will never cache them, which is exactly what we want from a beacon. In this case, the image body is less than 100 bytes, and the beacon’s HTTP headers prevent it from being cached. Although the savings are minimal, using a 204 response for beacons is a good best practice. Quantcast’s NOSCRIPT beacon, on the other hand, should return a 200 status code to avoid the browser thinking there’s an error.
Overall, Quantcast has a small impact on page performance. The most important improvement would be to load quant.js asynchronously.
Other posts in the P3PC series: