PostgreSQL on WASM and Web Almanac 2022

A podcast for frontend and full-stack developersAll things site speed, #webperf, #Jamstack, and the future of the Web. Our newsletter serves as a weekly roundup of events, news, and resources.

What to Expect This Week

Set a reminder to join us on twitter spaces live tomorrow at 3pm PST.

Supabase and Snaplet Built PostgreSQL for the Browser

Hot off the presses, the teams at Supabase and Snaplet released an open source PostgreSQL Server that runs in the browser! It's called postgres-wasm and Peter Pistorius will be joining us to explain how they did it and why it matters. In the meantime, you can read the blog post from Supabase and the post from Snaplet that describe it in more detail.

Web Almanac 2022 Edition

The 2022 edition of the Web Almanac came out this week. By surveying the HTTP archive, it aims to provide a comprehensive look every year at how web development trends have evolved compared to previous years. The sections on JavaScript, Page Weight, and Mobile Web make for interesting reading.

Here's a summary of key takeaways from the JavaScript Chapter in particular:

How much JavaScript do we load?
- JavaScript's extensive use enhances web interactivity but also contributes to slower performance.
- In 2022, JavaScript shipped to browsers increased by 8% for mobile and 10% for desktop.
- Unused JavaScript remains a problem, with median mobile pages loading 162 KB, and at the 90th percentile, 604 KB.
- This unused portion represents 35% of all loaded scripts, suggesting optimization through dynamic import() could be beneficial.
- Moreover, JavaScript requests per page rose slightly, increasing load times.

How is JavaScript processed?
- Bundlers and transpilers, crucial build tools, optimize JavaScript processing.
- Bundlers, like webpack, used by 17% of top 1,000 websites, and Parcel, with a 1.2%-1.9% adoption range, optimize source code.
- Transpilers, particularly Babel, used by 26% of top million pages, ensure older browser compatibility.
- However, inefficient use can lead to unnecessary JavaScript shipment, affecting performance, thus configurations should be optimized for efficiency and compatibility.

How is JavaScript requested?
- Requesting JavaScript impacts performance.
  - 76% of mobile pages use the async attribute on scripts to prevent render blocking, but defer's lower usage implies missed performance gains.
  - ES6 modules related attributes, type="module" and nomodule, are scarcely used.
  - Resource hints, preload, prefetch, and modulepreload, are employed to specify early fetching of resources.
  - With preload used on 15% of mobile pages, prefetch surprisingly has three hints per page, hinting at possible resource wastage.
  - The advice for developers is to judiciously use resource hints and reduce JavaScript usage to enhance performance.
- JavaScript in the document head, used by 77% of mobile and 79% of desktop pages, often causes render blocking.
  - async or defer attributes can mitigate this.
  - Script injection, present in 25% of scripts on average and up to 70% on some pages, harms performance by affecting metrics like Largest Contentful Paint.
  - Equally concerning is the balance between first and third-party scripts; a median host serves 10 of each, rising to 34 third-party scripts in the worst cases.
  - Finally, third-party scripts exceed first-party ones in byte cost at all percentiles, underscoring the need for better script management.
- Dynamic import(), enhancing startup performance, is used by 0.34% of mobile and 0.41% of desktop pages.
  - Web workers, which improve responsiveness by offloading tasks, are utilized by 12% of pages.
  - On the other hand, worklets, aiding in rendering pipelines, have a minuscule presence with only 13 paint worklet and four audio worklet users per million websites.

How is JavaScript delivered?
- JavaScript is improved via compression, minification, and source maps.
- Only 34% of pages use Brotli, a superior compression method, with many small scripts uncompressed.
- Minification audits show potential for enhancement on 32% of mobile and 21% of desktop pages.
- Source maps, aiding debugging, are found in 14-15% of JavaScript resources, with few using source map HTTP headers.

Responsiveness
- JavaScript affects website responsiveness, with most sites meeting good First Input Delay (FID) standards, yet having room to improve Interaction to Next Paint (INP) scores.
- Main thread tasks exceeding 50ms are key contributors to poor responsiveness, especially on mobile.
- Although new APIs for task scheduling and data fetching are available, outdated methods like synchronous XHR and document.write persist on many sites.
- Additionally, unnecessary Babel transforms are found on about two-thirds of websites, affecting performance.

How is JavaScript used?
- Web development favors libraries and frameworks like jQuery, used largely due to its WordPress integration, and core-js, often used with Babel.
- Libraries frequently coexist on webpages, with jQuery standing out.
- Despite 57% of mobile pages having JavaScript vulnerabilities, this statistic is decreasing.
- Web components and shadow DOM provide logic and styling encapsulation, but their adoption is slow, partly due to is attribute incompatibility with Safari.
- Regular updates to dependencies enhance safety.

Let’s discuss what surprised you and what didn’t about the web and JavaScript are actually used.

Last Week on JavaScript Jam

We covered how to participate in Hacktoberfest , an annual online event that encourages participation in open source. GitHub developer advocates Brian Douglas and Rizèl Scarlett helped walk us through what Hacktoberfest is and how to participate. We also heard from Filip Rakowski from a maintainer’s point of view.

PostgreSQL on WASM and Web Almanac 2022

What to Expect This Week

​Supabase and Snaplet Built PostgreSQL for the Browser

Web Almanac 2022 Edition

Last Week on JavaScript Jam

Events & News​

October

November

December

JavaScript Jam on the Web

💌 Subscribe to JavaScript Jam

Supabase and Snaplet Built PostgreSQL for the Browser

Events & News