Fast By Design

Web Performance
Location: Palace Suite Level: Advanced
Average rating: **...
(2.33, 21 ratings)

In 2011 we started implementing performance improvements to speed our 40+ gaming sites. Our initial start render was between 4 seconds in Germany up to 12 seconds in Brazil. We started using the common solutions: CDNs, removing blocking js, combining files, using sprites, lazy loading, and more. The result was that we brought start render time down to 0.9 seconds in 6 months. At this point we already had 130 million unique visitors per month.

Our performance became a true problem once we started accumulating legacy code. At that point it was hard to optimize for performance and hard to develop features. With soaring costs to operate, bug fix and develop on this legacy system, we started exploring how we can construct an architecture to provide performance from bottom up.

We came to the conclusion that in order to have a fast product, performance needs to be built-in from its earliest stage * – and this principle is the backbone of our talk. We will show that it’s actually simpler to design for performance rather than optimize for it, and prove that this approach works well even when dealing with legacy systems that need to be kept operational while being more and more entwined with a new solution. Our design & implementation choices that we’ve applied in 2012 and we will show are:

  1. Moved the logic from the frontend to the backend, from an overworked JS layer to a scalable Erlang backend
  2. Separated the old pages – big, heavy, full of functionality – into small chunks of atomic functionality called “widgets”
  3. Moved from AJAX as being the only way to provide a sense of dynamism to our cached system, to a structure that actually responds in real time and can be used for user content & application behavior personalization
  4. Given “widgets” the ability to load independently and concurrently, and versioning them
  5. Increased productivity allowing our developers to develop and release “widgets” concurrently, without blockages
  6. Used SMACSS as a coding standard and SASS as a preprocessor to make CSS small, atomic and maintainable, and let each widget manage its own rendering, behavior and performance
  7. Created a new release process to test and release widgets on production, and offered a beta environment where anyone in the company can modify and release widgets easily
  8. Linked developers to a full software development chain that uses BDD, unit testing, CI, automated functional testing and exploratory testing as simple practices that they can use to build quickly and for speed

These subjects are very relevant for software developers, performance engineers and architects that are struggling with optimizing a system to load fast, while at the same time challenged by an ever changing business that wants the same system to perform more and more features. We walk the audience through tools, techniques and concepts that we successfully applied, and provide ideas that are replicable across the industry – such as componentization of JS, CSS, HTML and backend logic, autonomous development and release procedures that every developer can make use of, and how one can build a system that is dynamic without using large caching solutions. Our talk will detail the following topics:

  1. Notes on our legacy system that we’ve been optimizing and exploiting since 2011: Complexity, number of sites and domains of activity; “Classical” performance improvements that we made
  2. Initial design decisions and how we’ve exploited the old system while building the new
  3. Comparison between the old Javascript solution for storing business logic, and the current Erlang backend solution: We will show the big difference in the quantity of code that needs to reach and run on the browser
  4. Comparison of the two architectural approaches in terms of scalability and separation of concerns
  5. Full description of the “widgets” structure, CSS and HTML architectural description, comparing load times and aspect of widgets with the old system
  6. Description of the development and release flows for the “widget” system: detailing our approach to code and product quality in this highly concurrent system – a combination of BDD, unit testing, continuous integration, static code analysis, continuous deployment, performance monitoring
  7. Results noted by using the new approach to development and product quality – in terms of improvements in products and changes in our culture
  8. Details on user testing disciplines: How we used a/b testing to port some features to the new system; Things the new system enables us to do in terms of a/b testing, usability and analytics;
  9. A demo on this new architectural stack, showing how user personalized content and features can be built in such an environment

Conclusion: Our presentation shows that *performance can be approached holistically and very early in the product’s conception, in all aspects of software development, QA and release management. This gives the chance to overcome problems that are present with a more classical approach to performance and its improvement, such as high development and maintenance time or increasing technical complexity. At the end of the day, we leave the audience with information and tools to redesign their systems for performance, right from the core of their products.

Photo of Bogdan Vulcan

Bogdan Vulcan

Spilgames

I work with great people to deliver excellent and effective software products. That got me the taste for multiple aspects of the software domain – programming, team leading, architecture, project management, sales, business and organizational development. I work with Spilgames – the biggest worldwide platform for casual gaming – on helping cross functional teams develop and enhance their web technologies, processes and user-facing products. I focus on creating excellent and independent teams, in which passionate individuals learn, innovate, develop themselves and the organization. I live in The Netherlands and blog about geek leadership at leadthegeek.com.

Photo of Gabriele Petrone

Gabriele Petrone

Spilgames

Software Engineer with strong experience in designing, developing web-based global solutions and development of high traffic social game portals (+200 million unique visitor per month).

I love optimization of website structures with the use of CDNs, load balancing, caching, domain sharding, non blocking js, lazy loading, spriting.

Sponsors

Sponsorship Opportunities

For exhibition and sponsorship opportunities at Velocity conference, contact Gloria Lombardo at +1 (203) 381-9245 or glombardo@oreilly.com

Media Partner Opportunities

For information on trade opportunities with O'Reilly conferences contact Jaimey Walking Bear at mediapartners
@oreilly.com

Contact Us

View a complete list of Velocity Europe 2013 contacts