hack-summary.md

Performance Hack - December 2013

Legacy of the hack

• The majority of the hacks will be be made a reality
• Pretty bad performance bug was found and fixed!
• The Rashboard hack will help developer teams understand the real-time performance of the site
• Everyone was excited about the potential of RUM data after James's talk
• N&K data developers joined in and were keen to develop ideas useful to News
• Great to see the unsurmountable stairs between floor 3/4 start to break down as everyone worked and chatted in the same space for 2 days
• Increased awareness of performance, especially for new devs
• Developers were free to work on what they felt was important, tackling issues that can be over looked during sprints
• Lot's of innovative ideas and discussions flowing - great buzz generally

Another Hack?

• It would be great to have an "engineering" hack every quarter.

Hacks

Dashboard + RUM = Rashboard

🏆 WINNER! - Best Tool

• Provides useful metrics to the dev team
• JS Errors, visits, page load times etc
• http://dashboard.bbcnewshq.com/news

Code: https://github.com/BBC-News/rashboard

Devs: Mark McDonnell, Dave B, Leo

CSS Union + IE8 fixed width style

🏆 WINNER! - Best Performance hack

• Instead of spitting CSS out to smartphone, tablet and wide we use one
• This makes the code simpler without increasing page weight and reduces requests
• Abstracted media queries in Sass, now we can provide an IE8 CSS file which fixes the widths to "Desktop" size.

Code: https://github.com/BBC-News/responsive-news/compare/ux-framework-mega-branch...ux-framework-unified-hack

Devs: David V

Double image load bug

🏆 WINNER! - Best Surprising / Most embarrassing performance blunder

• Story pages seemed to be bigger than they should
• After investigating F&A we're loading images twice :(
• Fixed it and saved 17% download

Code: https://github.com/BBC-News/responsive-news/pull/1455

Devs: Rob C

PHP profiling with unit tests

• Profiles performance of individual unit tests
• Excludes code from core framework to focus on code we can change
• Uses d3 to visualise method calls

Code: https://github.com/BBC-News/responsive-news/compare/phpunit_xhprof

Devs: Liam W, Matt A

Stringer

• The current stream on the local live pilot is very inefficient as it has to do many API calls
• Stringer is middleware that aggregates the required APIs to provide a single feed for the front-end
• Implemented in node

code: https://github.com/BBC-News/stringer

Devs: Oliver, Simon

Happy / Sad release

• Uses performance data to show if the release is better or worse than last

code: ?

Devs: Will

Image optimsation

• Static png's aren't always optimized as best they can be as we only use img min and not any other algorithms
• Zopfli was in most cases better when put through image optim

Devs: Will

Cucumber with docker

• Current cucumber tests take 20 mins and makes code reviews painful
• Running the features parallel in docker containers will speed them up

Devs: Steven

CSS in local storage

• Instead of using the browsers file cache, localstorage is 43% faster.

Code: https://github.com/BBC-News/responsive-news/pull/1456

Devs: Jake

Imager 2.0

• Make an imagechef recipe for every single pixel width - no client side scaling
• Make quality of images variable based on editorial priority - picture galery high, others low
• Added user options to control images, no images, low, standard and high.

Code: https://github.com/BBC-News/responsive-news/compare/imager-2.0

Devs: Tom M

Resource timing

• Uses RUM to collect perfomance timeline data on downloade rescources
• Identify badly perfomornmigng requests
• Useful to monitor 3rd party scrips

Code: https://github.com/BBC-Data/rum-tiles/tree/news_hack_day

Devs: James S, James B(N&K data team)

Disable images for slow connections

• Detect slow connections
• Show a message to the user asking if they wish to disable images
• 60% size reduction

Code: https://github.com/BBC-News/responsive-news/tree/image-bandwidth-dehancer

Devs: Wayne, Sam and Catharine

Photo gallery in webgl

• Recreate the picture gallery with webgl, add more animation and compare the fps.
• Demo (inside reith): http://wwwpreview.test.newsonline.tc.nca.bbc.co.uk/news/special/perf-day/in_pictures.html
• Here is the result:

Live site:

Test page:

Wider issues

We also identified some issues that are out of our control. These unfortunately are also pretty damaging to our performance:

• Initial request from our servers is very slow
  • Three times slower than the guardian (1 sec Vs 3 secs) from US
  • This occurs because all requests come back to London where as the Guardian use Amazon which is distributed
  • ACTION - We need path to get our pages always on CDN

Image shows the loading of our pages against the Guardian, you can see how much slower our pages start to render. The good news is that we catch up in the end as our page renders faster.

• IGOR needs optimising

  • With IGOR the browser needs to fetch configuration from the server in London to know whether to redirect to another domain.
  • The request is blocking and has to be serves from London.
  • ACTION - Work with GN and frameworks on a IGOR++

• Advertising blocks the rendering

  • The user sees a blank page or a partially rendered one before while the ad requests are made.
  • ACTION - work with GN to implement asynchronous ads

• Promo images on the navigation are often not optimised

  • A 100kb was uploaded, this could have been optimised to 24kb, a saving of 77%.
  • Created ticket - https://jira.dev.bbc.co.uk/browse/IBROADCAST-155
  • Apparently it's an agency that uploads the images #facePalm