February 2016 Toronto Web Performance Group meetup

We met at Shopify‘s office.

David Bokan from the Google Chrome team in Waterloo talked about scrolling performance in Google Chrome

slides

David Barreto talked about optimizing Angular 2 apps for download size & performance

There nice charts in his slides showing the effects of AoT compilation, different chunk loading strategies, and more

The Shiny and New in Chrome/Blink Performance + Big Performance in Angular 2

Monday, Feb 6, 2017, 6:30 PM

Shopify Toronto
80 Spadina Ave. 4th Floor Toronto, ON

39 Members Went

Welcome to 2017.We hope all had a wonderful holiday break. I know that we did. And we’re more than delighted to get things started in 2017. As always, we’re doing our best to bring you all corners of the web performance ecosystems in the form of fascinating talks.One item being tabled was the idea of having more presentations from browser vendor…

Check out this Meetup →

#towebperf – performance @ Shopify

Bryson Gilbert presented techniques his team uses on Shopify’s main marketing site, shopify.com

Techniques

  • 10ms goal for generating pages on the server with Ruby on Rails
    • no database
    • no CMS
    • All content is in fast loading, versionable flat files.
  • marketing assets (icons, images, css, style guides) are stored in a Ruby gem and shared across different Shopify web properties (admin areas tools, internal tools, blogs etc).
    • optimize once, use anywhere
  • HTTP requests – in general, each shopify.com page loads 1 common js and css file (shared across all pages), and sometimes 1 page specific js and css file. 3rd party scripts are loaded if needed
    • the team is investigating inlining the page specific code – it is usually small, and could save 2 HTTP requests
    • some ab testing tools require blocking js to manipulate copy and images before gathering results. This sucks, but there is no choice
    • load as much 3rd part JS asynchronously as possible
    • lazy load images with lazysizes
  • responsive images – using a Ruby gem to make implementing img srcset attribute and lazy image loading easier across all web properties
  • icons – using inline .svg, no icon fonts
  • workflow – set up a Git precommit hook to run imageOptim on images so that unoptimized images never even get into the Git repo
  • fonts – just using @font-face, no inlining
    • just serving woff and woff2, best file size and adequate browser support for their audience (people on slow connections also tend to have browsers that don’t support woff, so they don’t get help up downloading fonts)
    • not optimized yet.
    • this is the hackiest part of optimization
  • going HTTPS only did slow down the site slightly

Measurement

  • SpeedCurve for monitoring performance, relating deploys to changes in performance
  • NewRelic RUM for checking on performance around the world.
  • Shopify is getting into Performance Budgeting by setting relative goals.

Future

  • HTTP2 will change how pages are optimized
  • resource hints will be helpful, but not 100% controllable
  • Better font loading is coming

Building a culture of performance

  • Sharing knowledge with documentation
  • Weekly frontend dev meetings to discuss failures & successes
  • Working performance into discussions early on in design process (can help with photo/image selection)

Other fun stuff (some from Barbara’s new book

  • Etsy publishes quarterly website performance reviews
  • Performance is respect for users. Optimized for their perspective, not your s. Real User Monitoring.
  • think about the 14kb rule
  • use inline CSS for above the fold content
  • loads js as late as possible
  • Latency on mobile – remember cell phones have to initiate a connection to a cell phone tower that is rarely a consistent distance away.
    • JS and AJAX eat mobile batteries fast

Toronto Web Performance Meetup – March 2015

EventMobi hosted us.

A Performance Bookmarklet by @micmro

slides and code

Check these out:

other neat bits

  • there are browser APIs for getting timing info about page loads
  • there is a http header for getting timing info in cross-domain requests
  • opening Chrome Dev tools can impact performance testing – for example slower load times due to downloading source maps
  • image caching images probably impacts results that these bookmarklets report, so be aware of whether caching is happening or not when looking at results

How to use ImageMagick by @newtron

slides

  • using responsive images well means generating lots of different sized images source art
  • ImageMagick is a command line tool available on many web servers that can help with resizing images, but it is horrible at optimizing images out of the box
  • Dave spent a ton of time testing out different compression & optimization settings to find the best balance
  • Dave integrated his findings into grunt-respimg, a Grunt task you can integrate in your build system

A Performance Bookmarklet (Tutorial) & How to use ImageMagick

Wednesday, Mar 18, 2015, 6:30 PM

EventMobi
243 College St, 3rd Floor Toronto, ON

35 Members Went

Hello #towebperf friends,here is the excellent lineup for our March meetup with two of our loyal members speaking:1. Tutorial: How to build a handy performance bookmarkletEver found yourself in a meeting having to quickly pull some performance characteristics of a website or web-app? Or do you go through the same manual steps to get specific dat…

Check out this Meetup →

November Web Performance Group Meetup

Web Performance Toronto

@HenriHelvetica from Forge Media + Design presented “The Biggest Loser: (Web) Images Edition”, thoughts and techniques for shrinking images. Here’s me notes!

Trends

  • Web archive says size of images downloaded is up to 1200kb per page. 57% increase this year. Graphs and trend tools available at http://httparchive.org/trends.php

  • Mobile devices aren’t helping themselves out – we consume more photos than ever before because we shoot more photos than ever before. Sites like Pinterest, tumblr and Instagram encourage us upload pictures without much thought to optimization. Do they do it for us?

  • Special images for Retina Displays and other high DPI screens are 2x to 3x the size, or 4x to 9x the amount of image data. Think of the data plans!

  • There are too many not-animated GIFs out there.

Image Formats to think about

  • Sprite sheets are helpful but sometimes difficult to make and maintain for large sites. Is it worth our time trying get automations for this work?
  • Discipline is a key part of all of this. Make yourself do the right thing and optimize images instead of tossing stuff online
  • Never use GIF when you can use PNG. PNG will almost always be smaller and faster to load

Web-p is Google’s image format

  • Lossy or lossless
  • Supports transparency, animation
  • Sometimes better compression than JPEG
  • Poor browser support
  • CPU intensive to encode and decode

SVG (scalable vector graphics) is a standardized format

Jpeg 2000 never caught on, probably due to patents

Tools

Photoshop’s ‘Save for Web’ tool has barely changed the way it compresses images over time. We have better tools now!

  • Jpegtran is a command line tool for tweaking JPEG files. Can be integrated into popular workflows with grunt-contrib-imagemin and gulp-image
  • Jpegoptim is another command line tool for optimizing JPEGs
  • Optipng is a command line tool for optimizing PNG files. Also included in grunt-contrib-imagemin and gulp-image
  • Pngout is another command line png optimizer. Jeff Atwood wrote about it. There’s a nifty Windows GUI for it called PNGGauntlet
  • Mozjpeg – Mozilla proves more file size can be squeezed out of JPEG. Cloudflare approves
  • ImageOptim – OS X GUI tool integrating some command line tools listed here and many others. Optimizes many images formats
  • Pngmini – OS X GUI tool that optimizes images (a bit lossy) to make them compress better with the usual PNG compression. Not really lossy compression, just a lossy optimization + regular compression
  • Afterwards, I found TinyPNG, a browser-based tool and Photoshop plugin which is similar

Want more content?

Remember FSTO Conf is coming up fast! Get your tickets for November 22 – 23, 2014.

Full Stack Toronto Nov 22-23, 2014

Standardization at Mozilla & The Biggest Loser: (Web) Images Edition

Wednesday, Nov 12, 2014, 6:30 PM

EventMobi
243 College St, 3rd Floor Toronto, ON

45 Members Went

Summer is over, but #towebperf is back!It’s time for another meetup! Are you ready?I’m thrilled to announce that Marcos Caceres and Henri Brisard will be joining us for the November edition.1. Standardization at Mozilla: how Firefox exposes functionality to developers and how developers can shape the standardization process of the platformMarco…

Check out this Meetup →

Toronto WebPerf Meetup July 18, 2014

Web Performance Toronto

Organized by Barbara Bermes. Hosted at EventMobi. Blake Crosby talked about Google Page Speed.

  • The Insights web application is good for testing out lives sites (yours, and those of others)
  • The Chrome plugin is good for testing your in-prgoress sites while offline/not publicly accessible, and appears in Chrome’s dev tools
  • The Apache and nginx Page Speed modules are great for speeding up existing websites and can be enabled/disabled on a per-vhost basis
  • The API could be good for integrating a speech check into a build process

Other similar tools include:

Blake showed that the top 4 sites in Alexa’s rankings (Yahoo, Google, Facebook, YouTube) all had Page Speed Insights rankings above 97%. Just for kicks, here’s a few lower ranking sites:

Alexa Rank URL Insights score
19 Sohu.com 70%
21 Yandex.ru 75%
22 vk.com 85%
23 bing.com 89%
24 wordpress.com 86%

He also talked about how SPDY and HTTP2 protocols are different and better than HTTP. Slides are here

Shalom talked about keeping a front-end codebase neat and tidy

  • Try custom icon fonts (see Font Awesome)
  • Try Object Oriented CSS
  • Did you know that browers still animated gif when they are off-screen? It’s safest to take your spinny activity indicator gifs out of the DOM when they aren’t needed