Find: Nice podcast on The Web Ahead - Smart Responsive Web Design with Scott Jehl

Responsive web design creates a new set of development demands. How should we best implement complex sites to load quickly and meet the needs of a wide range of devices? Scott Jehl joins Jen Simmons to talk about the South Street toolset and other Filament Group discoveries of best practices.
Links for this episode:

• Scott Jehl, Web Designer/Developer, Boston, MA | Website, Web Application, and User Interface Design and Development
• Scott Jehl - Responsive and Responsible - BD Conf, Sept 2011 on Vimeo
• What we're thinking | Filament Group, Inc., Boston, MA
• Scott Jehl (scottjehl) on Twitter
• Designing with Progressive Enhancement: the book
• Scott Jehl on Github
• Filament Group on Github
• filamentgroup/Southstreet
• The Boston Globe
• 5by5 | The Web Ahead #25: Responsive Images with Mat Marquis
• filamentgroup/enhance
• filamentgroup/eCSSential
• Steve Souders - High Performance Web Sites
• CSS Lint
• Nicole Sullivan | Stubbornella.org
• NASA on Github
• filamentgroup/quickconcat
• filamentgroup/AppendAround
• Issues · scottjehl/Device-Bugs
• Move The Web Forward | Guide to getting involved with standards and browser development
• Cross Browser Testing Tool - BrowserStack
• WebPagetest - Website Performance and Optimization Test
• The Web Ahead (thewebahead) on Twitter

Find: Measure and optimize with mod_pagespeed experiments

Measure and optimize with mod_pagespeed experiments

By Jeff Kaufman, Software Engineer, PageSpeed Team

Making your site fast shouldn’t require lots of manual optimization. With mod_pagespeed, an open-source Apache module, you can automatically apply web performance optimization best practices like cache extension, image optimization, and css inlining to speed up your site without a lot of hassle. As of version 0.10.22.4, mod_pagespeed now supports A/B tests integrated with Google Analytics, allowing you to measure how much it speeds up your site on live traffic and experimentally determine the best settings.

When running an experiment, mod_pagespeed randomly assigns visitors to experimental configurations based on percentages you choose. You can run an experiment on 1% of your traffic, 100%, or anywhere in between without affecting other visitors. It also injects JavaScript to report experiment assignments back to your Google Analytics account in a custom variable. Within Analytics you can track the impact of experimental configurations on page load times, bounce rates, conversions, or any other Analytics metric.

We ran an example experiment, comparing mod_pagespeed running with default settings to mod_pagespeed in pass-through mode, on a small blog. This required adding the following lines to our pagespeed.conf:

ModPagespeedRunExperiment on ModPagespeedAnalyticsID "UA-XXXXXXXX-Y" # half the users get the pagespeed optimizations ModPagespeedExperimentSpec id=3;percent=50;default # half get an unoptimized site ModPagespeedExperimentSpec id=4;percent=50

While this site was static and contained mostly text, it did use some JavaScript and images and had not been manually optimized. We ran the experiment for a month, over which Analytics observed 11K page views, and we saw a 20% improvement in average page load time:

Find: Turbocharging web sites with new PageSpeed Service optimizations

Turbocharging web sites with new PageSpeed Service optimizations

Kishore

Rahul

By Rahul Bansal and Kishore Simbili, PageSpeed Team

We spend a lot of time working to make the web faster. Last year, we introduced PageSpeed Service, an online service that automatically speeds up loading of web pages.

We are constantly working on new optimizations (rewriters) that can make pages load even faster. Along these lines, we are introducing a new rewriter called "Cache and Prioritize Visible Content". This rewriter enables users to start interacting with the web page and consuming the content much sooner. It accomplishes this by optimizing the page as a whole using the following web page-aware techniques and with minimal configuration needed:

• Make HTML cacheable. Typically, most web pages are not cached because they contain small amounts of personalized information or other non-cacheable data. This rewriter separates the non-cacheable portions from the HTML and enables caching for the rest of the content on PageSpeed servers. When the page is loaded, PageSpeed servers send the cacheable parts immediately while non-cacheable parts are fetched from the origin server & patched into the browser later.

Prioritize visible content rendering. Rendering of a modern web page requires several network resources, but not all of them are needed right away. This rewriter automatically determines and prioritizes the content that is above the fold of the browser, so that it doesn’t have to compete with the rest of the page.

Defer Javascript. JavaScript execution is deferred until page load so that it doesn’t block rendering of visible content.