Boston Web Performance Group

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.

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

Join or login to comment.

Hit enter to add your reply

Vicki

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

0 · 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.

0 · December 6, 2013
AC

Thanks for organizing!

0 · 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!

0 · December 6, 2013

58 went

Jonathan K.

Event Host
Mark B.
Kristian
Kelsey M.
Nitin
Jared C.
Alvin C.
Josh
Jie Z.
David P.
Matt W.
D. K.
Manuel G.
Albert W.
Jordan M.
AC
David W.
Eugene B.
Arthur T.
Alexis C. +1
Ilya S.
Richard H.
bphillips
Praveen A.
Dan W.
Luke H.
Adi
Amir R.
Philippe H.
Mike L.
Vicki
Bill B.
James L. +2
Jud P.
poonam
Santiago Alvarez V.
Massimo M.
Sean Bennett D. +1
Connie C.
Elias Y.
A former member
+1 guest
A former member
A former member
A former member
A former member
A former member
A former member
A former member
A former member
A former member

Boston Web Performance Group

Boston, MA

Founded May 23, 2010

About us…

Organizers:

Contact

We're about:

· · · · · · ·

Meet with other web site administrators, developers, designers and business people who are interested in making their sites faster to get a better user experience, lower abandonment rates and more money.

Our Gold Sponsors:

Akamai® is the leading provider of cloud services for delivering, optimizing and securing online content and business applications. At the core of the Company's solutions is the Akamai Intelligent Platform™ providing extensive reach, coupled with unmatched reliability, security, visibility and expertise. Akamai removes the complexities of connecting the increasingly mobile world, supporting 24/7 consumer demand, and enabling enterprises to securely leverage the cloud. To learn more about how Akamai is accelerating the pace of innovation in a hyperconnected world, please visit www.akamai.com or blogs.akamai.com, and follow @Akamai on Twitter.

Instart Logic accelerates cloud application delivery for the world’s most performance-obsessed organizations. Its unique cloud-client platform and web application streaming technology solves performance challenges inherent in wireless connections and makes content delivery networks (CDNs) obsolete. Using web application virtualization in the browser, Instart Logic intelligently parses and streams content, providing a significant boost in web performance metrics like Document Complete, Start Render and Time to First Byte compared to vanilla CDNs.

New Relic is a software analytics company that makes sense of billions of metrics about millions of applications in real time. Our comprehensive SaaS-based solution provides one powerful interface for web and native mobile applications and consolidates the performance monitoring data for any chosen technology in your environment. Our 250,000 users that utilize our cloud solution every day to analyze more than 690 billion data points per day across more than 4 million applications. When your brand and customer experience depend on the performance of modern software, New Relic provides insight into your overall environment. Learn more at newrelic.com.

Our Silver Sponsor:

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.

Our Bronze Sponsor:

Test faster. Release Sooner.

Everyone wants to release the next hot app or bulletproof their website. But until now, it took a unique breed to thoroughly test them and to ensure they’ll perform at scale. That’s because functional and performance testing have traditionally been challenging, complex, costly and time-consuming. But not anymore. SOASTA is driven by a radical idea: Make powerful testing accessible to anyone. Do it in the cloud. Make it visual and far less complex. Deliver immediate actionable intelligence in real time. And incorporate testing for gesture and touch interfaces. Our SOASTA Platform, products and services are like no one else’s—uniquely innovative, flexible, fast, affordable and exceptionally effective. And we think that’s cool.

Our Gracious Host:

Wayfair.com offers a zillion things home – the largest selection of home furnishings and décor across all styles and price points. With an unparalleled selection of more than seven million home items from 12,000 brands, Wayfair.com helps people find the perfect product at the right price. Our unparalleled selection and superior customer service coupled with the convenience of online shopping, makes it easier than ever before to find exactly what you want for your home. Other e-commerce sites within the Wayfair.com brand portfolio include AllModern.com, the leading destination for original modern design, Joss & Main, the fastest growing private sale site for the home, and DwellStudio, a lifestyle retailer known for groundbreaking design and impeccable quality in modern home furnishings.

More Web Performance groups around the world:

San Francisco & Silicon Valley Web Performance Group

New York Web Performance Group

LA Web Speed

London Web Performance Group

Web Performance User Group

Vienna - Web Performance Group

Atlanta Web Performance Group

Austin Web Performance Group

Israel Web Performance Group

San Diego Web Performance Group

Dutch Web Performance & Operations Meetup