Category: Speaking
Follow-up 3rd party footprint
The following post outlines the links, tools and articles I mentioned in my 3rd party footprint talk
Main Slides
Shared Links and Articles
- Third-Party JavaScript (Ben Vinegar): http://thirdpartyjs.com/
- HTTP Archive: httparchive.org
- Big queries: interesting stats: http://bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100/4
- The impact of third party content on retail web performance: http://intechnica.co.uk/the-impact-of-third-party-content-on-retail-web-performance.aspx
- How we Make JavaScript Widgets Scream https://www.youtube.com/watch?v=4rlbTVkyJc4
- Nielsen and promotional space http://www.useit.com/alertbox/response-times.html
- Pat Meenan: Front-end SPOF: http://www.slideshare.net/patrickmeenan/frontend-spof and http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
- Government UK, adding social buttons did not increase their traffic dramatically: https://insidegovuk.blog.gov.uk/2014/02/20/gov-uk-social-sharing-buttons-the-first-10-weeks/
- Steve Souders, Caching policies: http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/
- Steve Souders, Don’t doc write: http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/
- Asynchronous List: https://developers.google.com/speed/docs/insights/UseAsync
Tools and Tricks
- Ghostery plugin: https://www.ghostery.com/en/
- 3 D Tilt Firefox Plugin: https://addons.mozilla.org/en-US/firefox/addon/tilt/
- Philips’ script loader pattern: http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ or Method Queue Pattern: http://www.speedawarenessmonth.com/the-non-blocking-script-loader-pattern/
- Stoyan’s dynamic script tag: http://www.phpied.com/social-button-bffs/
- SPOF-O-Matic: https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg
- 3PO plugin: http://www.phpied.com/3po/
- Continuos integration: Ebay & SPOF: http://www.ebaytechblog.com/2013/01/22/early-detection-of-frontend-single-points-of-failure/#.UyTqyeddW_I
- Command Line Interface SPOF: https://github.com/lafikl/spof?utm_content=buffer3bda5&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer
- Heise’s 2-click button: http://www.heise.de/extras/socialshareprivacy/
- JSManners: https://github.com/triblondon/thirdpartysla
WebPagetest Results
- Herold Sun: www.webpagetest.org/result/140222_EA_J3R/
- Wired: www.webpagetest.org/domains.php?test=140222_NH_J10&run=1&cached=0
- TechCrunch: http://www.webpagetest.org/video/compare.php?tests=140323_P3_GRK,140323_37_GRM
- SPOF Wired: http://www.webpagetest.org/video/compare.php?tests=140224_7X_28Q,140224_4K_28R
- Alexa AUS 139: myshopping.au.com http://www.webpagetest.org/video/compare.php?tests=140317_NE_P%2C140317_ZN_Q&thumbSize=200&ival=5000&end=visual
- Home Depot: http://www.webpagetest.org/video/compare.php?tests=140317_KM_5D%2C140317_EB_5E&thumbSize=200&ival=5000&end=visual
- TechCrunch: http://www.webpagetest.org/video/compare.php?tests=140319_9B_EKD%2C140319_00_EKE&thumbSize=150&ival=5000&end=visual
- Walmart passes SPOF test: http://www.webpagetest.org/video/compare.php?tests=140319_0S_HN4,140319_GJ_HN5
- Weather Network: http://www.webpagetest.org/video/compare.php?tests=140321_4B_DJ2%2C140321_9H_DJ3&thumbSize=200&ival=5000&end=visual
Follow-up on my talk “Embracing Performance in Today’s Multi-Platform Macrocosm”
Hello everyone, this is a follow-up blog post on my talk presented at BDConf in San Diego and WebExpo in Prague.
If you landed here because you’ve typed in the URL after attending my talk, great! Thanks for making it all the way here. I hope you enjoyed my talk.
If you landed here via Google, Twitter or any other sites, I welcome you too, of course! You might want to first have a look at my slides (see link below) before clicking on any of the other links below.
Either way, feel free to leave a comment or contact me via twitter with my handle @bbinto.
Enjoy!
Slides
Slides available on SlideShare
Links and articles, recommended content
- NYC Times: Why waiting in line is torture
- Perception of Speed
- The New Multi-Screen World Study
- Chris Heilmann: HTML5 mythbusting
- Who killed my battery: Analyzing Mobile Browser Energy Consumption
- CSSEmbed – automatically data: URI-ize (200ms HTTP request rule)
- CSS WebKit reference
- The Evolution of Web Development for Mobile Devices
Maven Tools
- Google Closure Compiler
- Minify-maven-plugin
- HTMLCompressor
- PhantomJS and Confess
- Compass for data URI
Continuos Integration Tools (<3)
General Links
Image Credits
- http://www.orionsarm.com/im_store/galactic_center.png
- http://amandabellestarr.com/wp-content/uploads/2012/10/Photo0029FourBySix.jpg
- http://www.seambliss.com/blog/wp-content/uploads/2013/04/tailor.jpg
- http://4photos.net/photosv5/long_road_1341321574.jpg
- http://blog.bicycletheory.com/files/2011/09/checklist.jpg
- http://www.dessinateur-plan-martin-cyr.com/images/technologue_dessin_tech.jpg
- http://hdwallpaperfreedownload.com/wp-content/gallery/cn-tower-hd/cn-tower-wallpaper-hd-20.jpg
- http://walleh.com/wp-content/uploads/2013/06/The-Self-Builder-blog-Wallpaper.jpg
- http://sweetclipart.com/multisite/sweetclipart/files/legal_scales_black_silhouette.png
The Power of a Private HTTP Archive Instance: Finding a Representative Performance Baseline
(Note: cross-posted at programming.oreilly.com)
Be honest, have you ever wanted to play Steve Souders for a day and pull some revealing stats or trends about some web sites of your choice? Or maybe dig around the HTTP archive? You can do that and more by setting up your own HTTP Archive.
httparchive.org is a fantastic tool to track, monitor, and review how the web is built. You can dig into trends around page size, page load time, content delivery network (CDN) usage, distribution of different mimetypes, and many other stats. With the integration of WebPagetest, it’s a great tool for synthetic testing as well.
You can download an HTTP Archive MySQL dump (warning: it’s quite large) and the source code from the download page and dissect a snapshot of the data yourself. Once you’ve set up the database, you can easily query anything you want.
Setup
You need MySQL, PHP, and your own webserver running. As I mentioned above, HTTP Archive relies on WebPagetest—if you choose to run your own private instance of WebPagetest, you won’t have to request an API key. I decided to ask Patrick Meenan for an API key with limited query access. That was sufficient for me at the time. If I ever wanted to use more than 200 page loads per day, I would probably want to set up a private instance of WebPagetest.
To find more details on how to set up an HTTP Archive instance yourself and any further advice, please check out my blog post.
Benefits
Going back to the scenario I described above: the real motivation is that often you don’t want to throw your website(s) in a pile of other websites (e.g. not related to your business) to compare or define trends. Our digital property at the Canadian Broadcasting Corporation’s (CBC) spans over dozens of URLs that have different purposes and audiences. For example, CBC Radio covers most of the Canadian radio landscape, CBC News offers the latest breaking news, CBC Hockey Night in Canada offers great insights on anything related to hockey, and CBC Video is the home for any video available on CBC. It’s valuable for us to not only compare cbc.ca to the top 100K Alexa sites but also to verify stats and data against our own pool of web sites.
In this case, we want to use a set of predefined URLs that we can collect HTTP Archive stats for. Hence a private instance can come in handy—we can run tests every day, or every week, or just every month to gather information about the performance of the sites we’ve selected. From there, it’s easy to not only compare trends from httparchive.org to our own instance as a performance baseline, but also have a great amount of data in our local database to run queries against and to do proper performance monitoring and investigation.
Visualizing Data
The beautiful thing about having your own instance is that you can be your own master of data visualization: you can now create more charts in addition to the ones that came out of the box with the default HTTP Archive setup. And if you don’t like Google chart tools, you may even want to check out D3.js or Highcharts instead.
The image below shows all mime types used by CBC web properties that are captured in our HTTP archive database, using D3.js bubble charts for visualization.

Mime types distribution for CBC web properties using D3.js bubble visualization. The data were taken from the requests table of our private HTTP Archive database.
Querying the Database
Sometimes, you want to get some questions answered without creating a chart. That’s when you can query the MySQL tables directly. Let’s run a simple query on the requests table.
For example, some of the CBC sites use YUI, some use jQuery—but we would really like to avoid having pages serve both. A simple sample query like the one below could help identify those sites:
SELECT req_referer
FROM requests
WHERE url LIKE "%/jquery_.js%" OR url LIKE "%/i/l/yui/%"
GROUP BY req_referer
And More …
We will share more of the queries and insights we’ve gathered from our HTTP Archive instance that helped us identify bottlenecks. In addition, we will also discuss how this setup came in very handy to discover problems with some unnecessary page weight that we thought we didn’t have.
Join our talk at the Velocity conference in Santa Clara in June titled “The Canadian Public Broadcaster on A Diet: Slimming Down for A Whole Nation.” The talk will not only cover the private HTTP Archive instance but furthermore cover many other aspects of how to focus on (mobile) web fitness and how to “slim down.”