Jan Maessen - Prioritize Your Critical CSS and Images To Make Your Site Fast

Perhaps the most important goal of Web Performance Optimization is getting the page on the user’s screen as quickly as possible. Our data suggests that only about 40% of CSS is required to render the first page view. Inlining just that 40% at the top of the page and lazy loading the rest can speed up page loads substantially: 50% on desktop, and even more on mobile. Similarly, if we lazily load just the off-screen critical images on a page we can ensure that the browser uses its bandwidth to fetch on-screen image data first, again speeding up first paint.

To get prioritization to work well, though, we have to contend with a bunch of design tradeoffs. CSS has to lazy load without causing browser readahead to block the page render. We need to make sure CSS rules that are needed by our JavaScript code are downloaded before the code runs. Images can be loaded at various times, from DOMContentLoaded to the moment the user scrolls and the image becomes visible on screen. Different techniques have different advantages and disadvantages, and the best technique for mobile (with radio powerdown, connection times in the hundreds of milliseconds, and mobile data tariffs) isn’t necessarily best for desktop browsing (with always-on network and low latency).

We’ll cut through this thicket of options by presenting data we’ve gathered from sites around the web. We transform the pages automatically using the PageSpeed Optimization Libraries (https://developers.google.com/speed/pagespeed/psol). This lets us experiment with various possible combinations of optimization techniques to see which ones work together well. We’ve made these features available in our open source projects, mod_pagespeed (https://developers.google.com/speed/pagespeed/mod) and ngx_pagespeed (https://developers.google.com/speed/pagespeed/ngx), and in Google’s PageSpeed Service (https://developers.google.com/speed/pagespeed/service). But while we’ve automated the optimizations, what we’ve learned is useful to anyone who cares about site performance in general and mobile site performance in particular – and designing your site with these techniques in mind can produce even better results than automatic optimization.

Speaker Bio:

Jan-Willem Maessen has been working on the PageSpeed optimization libraries and mod_pagespeed since the early days of the project. He built the first PageSpeed image optimizer and the library identification mechanism, and lately has been working on improving mobile web performance using mod_pagespeed. Back before joining Google, Jan helped design and implement the Fortress programming language.

Schedule:

6:30-7:15 Eat pizza and meet other members

7:15-8:00 Presentation

8:00-8:30 Q&A, general socializing

Map: http://goo.gl/zWMqz

Street View: http://goo.gl/Yjs3U