addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupsimageimagesinstagramlinklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1outlookpersonJoin Group on CardStartprice-ribbonImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruseryahoo

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

  • Dec 5, 2013 · 6:30 PM
  • Wayfair Offices - 4 Copley Place

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. 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 and ngx_pagespeed, and in Google’s 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.


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

7:15-8:00 Presentation

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


Street View:

Join or login to comment.

  • Vicki

    I was really intrigued by the no load script. Where can I find more information on that?

    December 10, 2013

  • Brian C.

    Afraid I was delayed a work and not able to attend what sounds like a very interesting talk. Will a video be available?

    1 · December 6, 2013

  • Vicki

    Jan gave a fantastic presentation, clear and informative. This morning I found myself counting the seconds it took to load new sites on my phone! Thanks for Jonathan.

    December 6, 2013

  • AC

    Thanks for organizing!

    December 6, 2013

  • James L.

    Jan definitely has some useful info on CSS. Totally going to give it a try at work. Thanks for the Meetup/presentation!

    December 6, 2013

58 went

Our Sponsors

  • Wayfair

    Wayfair hosts our meetups, and is looking to hire great engineers!

  • Akamai

    Any experience. Any device. Anywhere.

  • Instart Logic

    Cloud application delivery

  • Catchpoint

    10% off to Members + "Complete Web Monitoring" ebooks


    Web and mobile app test automation solution.

  • O'Reilly

    O'Reilly provides discounts to all members, and free books

  • AppDynamics

    Next generation application performance management

  • Yottaa

    Yottaa provides a selection of books on Web Performance for each Meetup

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy