Thread by @ryanflorence on Thread Reader App
Extracto
@ryanflorence: Took a PageSpeed score from 52 to 97 on a page with 28 high res screenshots in three steps: 1. Lazy load images <img loading="lazy" /> 2. Compress to lossy webp (still looks great) $...…
Contenido
More from @ryanflorence
Aug 16
A while back, @kentcdodds built an incredible version of TodoMVC in Remix: github.com/kentcdodds/rem…
The login page could be thought of as a "hello world" in Remix, it gets 100 on PageSpeed insights and sends 72kb of JS: pagespeed.web.dev/report?url=htt… 
Can't send custom headers to PageSpeed, but locally I turned on 4G throttling and 4X CPU slowdown.
TTFB: 59ms
FCP+LCP: 1.26s
TTI: 2.3s
That TTI is tricky though because every single link and button will work before the 75KB of JS downloads. So it's actually interactive at 1.26s 
The best part though is that you don't even notice the network when you're using the app. Thanks to the APIs Remix provides to add optimistic UI, the network is effectively hidden completely.
May 5
This is what Server Rendering is all about,
what React Router nested routes are all about,
what Remix is all about,
what React 18 Streaming is all about.
Parallelize, unblock, move the bars to the left.
Top: Remix without streaming
Bottom: Remix with streaming 
A common misconception is that Suspense gets rid of spinners. Quite the opposite!
Suspense, allows you to fallback to a spinner and stream the shell early to *unblock* the browser resource fetches (like render blocking stylesheets) from the server side data fetch.
With streaming, the browser can download all the resources while the server loads data from your data source.
By the time the data is ready and streams down, the browser is 100% ready to render and hydrate because all CSS/fonts/JavaScript were loaded in parallel!
Jan 15
At the moment, Remix is (perhaps ironically) more approachable to traditionally back end focused developers.
When your back end is fast, everything is fast. Remix is optimized for modern infra, and requires nearly zero knowledge of frontend stuff, most app code is server side.
Meanwhile, we're asking frontend developers to go sign up for Cloudflare Workers, AWS, use Docker, DynamoDB, Postgres, even run a Redis server at the edge.
Next to stability, plowing cowpaths for these stacks is our short-term focus.
If you can write a script for an SSG build that talks to some API somewhere, I promise you can learn how to do the same thing on a server, and actually build faster user experiences.
Backend code is actually easier for me most of the time.
Just not DNS ... I'm the worst there.
Dec 7, 2021
🧵 I've been watching React Server Components closely, now that Remix v1 is out, I started running some experiments to see where they fit and how they can help Remix.
I'm gonna post some of the experiments here, but you should read the whole article:
The React team built a demo (that doesn't fully take advantage of the entire vision, so take this with a grain of salt).
Remix alone is twice as fast for initial load regardless of the network:
Initial load is only one thing though. What's it like to navigate around?
This is a silly metric, but I think it captures the "feeling" of using an app that is fast vs. slow.
Speed run: show every page on slow 3G!
Jun 22, 2021
Love new JS features like array spreading:
let numbers = [1,2,3]
let largest = Math.max(...numbers)
Way better than this old goofiness:
Math.max.apply(Math, numbers)
> Well, you see, now, Math is an object with the method max and functions are acktshually objects too, but just callable objects, so max has an object member apply which is also a callable object (or function you see) and apply let's you apply a function context (not scope) ...
> so *sniff* when we ~apply~ Math.max, we have to provide a context, or `this`, and for no reason whatsoever, we used `Math`, could have used null, but the point is the second argument of apply is that you can call max with the arguments as an array
Mar 14, 2021
Wheeeeeewwwww
I just hacked the heck out out shiki syntax highlighter. It inlines the theme colors into the markup, but that's no good for dark mode.
It only allows hex values for theme colors (vscode-textmate really) things but I tricked it to spit out css custom properties!
So now instead of:
<span style="color: #4271ae">function</span>
It does:
<span style="color: var(--base0D)">function</span>
So what? Well, thanks to the wonderfully abstract and beautiful Base 16 syntax highlighting system, you simply define 16 css custom properties: 