Sia siakaramalegos

Vintage Bundles, aka Modern JavaScript for Modern Browsers

Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.

Slides and Controls

The slides are deployed here. To advance the slides, use n for next and p for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.

Articles and research/tests

[Deploying ES2015+ Co

Testing double-fetching of module/nomodule JS code (including the Safari hack)

<script type="module" src="module.js"></script>
<script nomodule src="nomodule.js"></script>

Test page: https://jg-testpage.github.io/es-modules/module-nomodule/

Get in the Fast Lane: Measuring Web Performance

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Pinterest reduced load times by 40% and saw a 15% increase in sign ups. Starbucks implemented a 2x faster time to interactive resulting in a 65% increase in rewards registrations. AliExpress reduced load by 36% and saw a 10.5% increase in orders.

Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. During this hands-on, full-day workshop, you will learn how to:

Optimize and familiarize yourself with your DevTools environment
Understand which metrics matter
Measure the performance of existing applications
Diagnose and prioritize performance problems

Get in the Fast Lane: Measuring React Performance

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Pinterest reduced load times by 40% and saw a 15% increase in sign ups. Starbucks implemented a 2x faster time to interactive resulting in a 65% increase in rewards registrations. AliExpress reduced load by 36% and saw a 10.5% increase in orders.

Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues in React apps using the React Profiler, Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. During this hands-on, full-day workshop, you will learn how to:

Optimize and familiarize yourself with your DevTools environment, including the React Profiler
Understand which metrics matter
Measure the performance of existing applications
Diagnose and prioritize performance problems

	<div class="webmentions content-grid-sibling" id="webmentions">

	{% set mentions = webmentions \| getWebmentionsForUrl(metadata.url + webmentionUrl) %}
	{% set reposts = mentions \| webmentionsByType('repost-of') %}
	{% set repostsSize = reposts \| size %}
	{% set likes = mentions \| webmentionsByType('like-of') %}
	{% set likesSize = likes \| size %}
	{% set replies = mentions \| webmentionsByType('in-reply-to') %}
	{% set repliesSize = replies \| size %}

	<link rel="preload" as="font" type="font/woff2"
	href="./fonts/muli-v12-latin-regular.woff2" crossorigin>

	<link rel="preload" as="font" type="font/woff2"
	href="./fonts/muli-v12-latin-700.woff2" crossorigin>

	/* latin */
	@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
	<link href="https://fonts.googleapis.com/css?family=Muli:400" rel="stylesheet">