I attended the Velocity Conference at the Santa Clara Convention Center recently and there were many sessions on how to improve the performance of your web sites on mobile or web, as well as discussions around what companies are doing to get the “above the fold” content within the 1000 ms threshold.

Here are snippets of some of the more interesting sessions I attended and the top web performance tips you can learn and apply.

Session #1 Responsive Web Performance in the Wild by Mark Zeman SpeedCurve

Mobile usage is nearing 50% of total web usage. Mark Zeman at speedcurve.com talked about some of the techniques to make websites more responsive on the Mobile devices by changing the size of images for different devices, using WebP, Conditional CSS and Conditional JS.

On Webpagetest you can run your test and analyze the results to see how much time it takes to start render, load the document, and load all the resources, whether your site is optimized for resources.

Session #2 Web Standards from the Future by Jonathan Klein Etsy

Jonathan spoke about some of the web standards which are either emerging or will be available in the future.

HTTP Origin Hints lets the browser find the server capabilities. This can reduce the content size and optimize transfer. Client Hints on the other side, lets the server find about the browser capabilities.  Both of these are not available in the today’s browsers.

WebP is the new image lossless format which is 25-34% smaller in size than JPEG and is available in Chrome 32+, Opera and soon in IE and Firefox (Nightly). WebP can result in over 30% reduction in bandwidth usage, though the render speed might not change significantly.

SPDY is the next version of HTTP 2.0 which aims HTTP multiplexing allowing multiple HTTP connections over the same TCP Connection. The goal of SPDY is to reduce bandwidth and improve the start render “above the fold” time and overall page load time. SPDY is available in almost all modern browsers.

velocitypic1 velocitypic2

The “Start Render” time is improved by 5% and Speed Index improved by 14% at the same time conserving bandwidth.

Link / DNS prefetching is a technique where web browsers can prefetch documents after the browser has finished loading the page. It can dramatically increase the speed index and load times for subsequent pages.

velocitypic3

Session #3 Look Ma, No Image Requests! Pamela Fox Khan Academy

Pamela discussed how they improved the very first experience a user has on Khan Academy. Some of the techniques she discussed are. First, the images are “above the fold”, meaning they’re visible without scrolling, while others are “below the fold”, requiring varying degrees of scrolling to see.

Technique #1: Optimize your image sizes using TinyPNG- you can achieve 50-75% compression.

Technique #2: Turn smaller images like your logo into data URI in CSS. This reduces a HTTP request and you bake it into the build process, CSS build script using python. You can use online tools  to convert images to data URI.

Technique #3: Use sprites for icons and you can create sprites using online sprite creator  or alternatively, use Fontawesome for icons, these are CSS based scalable vector icons.

Technique #4 Delay load images below the fold. You can implement this using a scroll handler and checking if the desired DOM elements are within that view and then loading/swapping the images.

Technique #5 Delete unused images

Session #4 Lessons Learned from Building a CSS Minifier by Stoyan Stefanov Facebook

CSS is the worst because it blocks page rendering. The bigger it grows, the more it blocks. Stoyan discussed ways to minify CSS using YUIcsmin, CSSShrink. Not everything can be minified, white spaces, quotes, numbers cannot be minified. At the same time colors can be minified and some useful tools can be found at http://www.csspatterns.com/

Session #5 Making Web POSH by Jan-Willem Maessen Google

In this talk on POSH (PageSpeed on shared hosting), Jan discussed how to reduce the bytes on wire between browser and server by compressing images, minifying Javascript, minifying and inlining CSS and do “In source resource optimization” using mod_pagespeed.

Page speed optimizations are automatically applied by this module on Apache and Nginx.

Optimizing images by WebP conversion saves a ton of bandwidth, Page speed sizes your images based on where they are appearing. PageSpeed optimizes resources in place to save bandwidth and rewrite pages and urls to makes them faster.

Reduce the number of round trips to fetch resources by optimizing on caching. Minimize DNS lookups and redirects. Combine external Javascripts into as few files as possible and combine CSS into as few files as possible and partition them optimally.

Inline the CSS that is actually used on the page. Limit image inlining to images that occurs above the fold. Inline low-quality versions of large above the fold images (and lazy load the full version version). Inline CSS @imports into the file in which they occur, reduces serial dependency for browser fetching and Avoid CSS @imports. Inline images referenced in CSS files.

Session #6 Delivering Optimized Images on the Modern Web by Joshua Marantz

Josh discussed how to deliver images as efficiently as possible to each client while providing a responsive experience to phones, tablets, and the desktop. The goal is to render above the fold page in as few bytes as possible (< 15k). On Retina display’s one CSS pixel is no longer a device pixel. You can use the srcset feature to deliver the best image format and javascript “polyfill” to load hi-res images on zoom actions or large above-the-fold images can be inlined at low resolution and, after onload, swapped with the hi-res version.

Session #7 Making Web Fonts Fast(er) by Ilya Grigorik Google

Google Web Fonts are the most popular Web fonts with more than 1 Billion delivered daily, with Open Sans and Roboto topping the list. Ilya discussed how to make Web fonts served faster. As a general UX best practice, keep the number of fonts to few and audit there usage periodically. Compress, gzip your fonts, WOFF 2.0 uses the Brotli compression which results in 30% reduction and faster decompression. The browser will pick the right family and format.

velocitypic4

In order to optimize the critical rendering path (CRP) eliminate blocking JavaScript, place the CSS at the top and inline the font data in the css src:url(data:application/x-font-woff;) and cache your fonts because more often you will be using the same Web fonts across multiple sites.  Measure your font latency using resource timing API from Google.

So here are the top web performance tips from the Velocity talks, hope you find them useful.

  1. Use SPDY / HTTP Multiplexing to improve the bandwidth usage and “above the fold” render time.
  2. Web fonts (WOFF/WOFF2) provides a lot of benefits in zoom, read, and search. Optimize them by using Google Fonts or Typekit.
  3. Images: WebP can reduce the size of images by 30%. Delay loading images below the fold and Load images in CSS as data.
  4. CSS:  Load the CSS at the top of the page, inline CSS and combine external CSS files with a separate font CSS and load the Web Fonts as data.
  5. JavaScript:  Minify and combine JavaScript file, load external JavaScript them at the bottom of the page.
  6. Use pagespeed for “in source resource optimization” without modifying your web page.