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.
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.
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 #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
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.
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
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.
So here are the top web performance tips from the Velocity talks, hope you find them useful.
- Use SPDY / HTTP Multiplexing to improve the bandwidth usage and “above the fold” render time.
- Web fonts (WOFF/WOFF2) provides a lot of benefits in zoom, read, and search. Optimize them by using Google Fonts or Typekit.
- Images: WebP can reduce the size of images by 30%. Delay loading images below the fold and Load images in CSS as data.
- 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.
- Use pagespeed for “in source resource optimization” without modifying your web page.