Rendering Slow? Too Much CSS3? Ask RSlow

Marcel Duran (Google Inc.), David Calhoun (CBS Interactive)
Web Performance Mission City B4
Presentation: external link
Average rating: ***..
(3.75, 4 ratings)

Based on my recent data driven experiment comparing binary image formats with their correspondent inline versions and a CSS3 rendered image it was noticeable that besides payload, rendering might be an issue specially in real worldf web applications of both desktop and mobile browsers.

Following similar methodology to measure the rendering performance impact on the previous experiment, I’ll gather the most popular frontend techniques being used in the wild on the web for the purpose of improving performance therefore user experience, such as:

  • animated GIFs vs CSS3 transform: rotate
  • CSS3 transform: translate3d(0,0,0) to turn on hardware acceleration
  • replacing tags by DIVs with background-image on mobile
  • scrolling issues with box-shadow on webkit

Measuring the rendering performance results of several tests will potentially provide a good analysis base to recommend when is good, bad or irrelevant to use such techniques and with YSlow extensibility I’ll combine the results into a new ruleset called RSlow that will analyze the page providing advices on when to include or remove these techniques for faster rendering and better user experience.

In this talk I will share details of the methodology, some background of the common techniques and the outcome of my experiment as well as RSlow in action for a few selected pages.

Photo of Marcel Duran

Marcel Duran

Google Inc.

Marcel Duran is the Front End Lead for Yahoo!’s Exceptional Performance Team. He has been into web performance optimization on high traffic sites in Yahoo! Front Page and Search teams where he applied and researched web performance best practices making pages even faster. He is now dedicated to YSlow and other performance tools development, researches and evangelism. His goal is to make the web even faster than it can be and believes there is no such thing as “just a few milliseconds won’t hurt”.

Photo of David Calhoun

David Calhoun

CBS Interactive

Comments on this page are now closed.

Comments

Picture of Marcel Duran
Marcel Duran
06/26/2012 8:16pm PDT

Sponsors

Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at the conference, contact Gloria Lombardo at glombardo@oreilly.com

Media Partner Opportunities

For media partnerships, contact mediapartners@ oreilly.com

Press and Media

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com

Contact Us

View a complete list of Velocity contacts