Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Steve (Builder.io) Profile picture
@Steve8708
Mar 29, 2022 • 15 tweets • 8 min read • Read on X
Scrolly
💡 Web performance tip

Optimizing your largest contentful paint (LCP) can be hard

Here are 8 tips, with code snippets and visuals, to help your pages load fast for optimal SEO and UX

🧵👇 Image
First, how is LCP measured?

> The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading

web.dev/lcp/ Image
As much as possible, serve all pages and content pregenerated from a CDN cache. This ensures that response times are fast, and content can be visible as quickly as possible

web.dev/optimize-lcp/#… Image
Preconnect to external domains to establish early connections to important origins

web.dev/uses-rel-preco… Image
Importantly - be sure to optimize and prioritize your images. Use nextgen formats, optimal sizing, and eager prioritize your LCP image and lazy load others:

Remove all blocking JS. Make sure to load all JS asynchronously, or even better, in a worker with Partytown

web.dev/optimize-lcp/#…
web.dev/efficiently-lo… Image
Similarly, as much as possible, remove blocking externally fetched CSS

CSS-in-JS libraries like styled-components or emotion can help a lot with this, or tools that can extract and inline critical CSS web.dev/extract-critic… Image
JS execution time can really hurt your LCP time as well. Be sure to optimize your site or app to require as little JS as possible to boot up.

Some projects that can help automate this for you include @QwikDev, Partytown, @MarkoDevTeam, and @astrodotbuild Image
Then, no site is complete without ways of managing and optimizing content. As much as possible, prefer API driven services for best performance, as opposed to those that require in-browser JS Image
Want to measure your LCP and see which tip above might help improve it the most?

This could help you out: builder.io/c/performance-…
Additionally, I want to give credit to @filrakowski that inspired this post via his fantastic tweet here. Go follow him!
Also, huge kudos to @hdjirdeh for his amazing article here that covers everything above and more: web.dev/optimize-lcp/
Services featured above: @builderio @cloudinary @LaunchDarkly @contentful
Oh ya! And don't forget to measure measure measure your site speed. Prefer tools that emulate real world devices like @RealWebPageTest and Google Pagespeed Insights over running Lighthouse in your desktop browser that may not match typical real world device specs
A few more great accounts to follow for learning about performance best practices: @jaffathecake @mgechev @addyosmani

Am I missing any? Lmk if so!

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with Steve (Builder.io)

Steve (Builder.io) Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Steve8708

Steve (Builder.io) Profile picture
Apr 18, 2023
ChatGPT now in your terminal!

Chat mode was just added to AI Shell, and it's shockingly handy
Totally free and open source, just requires an OpenAI API key - github.com/builderio/ai-s…
Hoping to add more backends in the future, such as Alpaca so you can use this completely free with no API keys needed

Looking for contributors! github.com/BuilderIO/ai-s…
Read 4 tweets
Steve (Builder.io) Profile picture
Feb 14, 2023
8 modern browser APIs you might not know, but really should:
structuredClone() gives you browser native deep cloning that supports a variety of types like Date, Set, Map, etc
Promise.allSettled helps you await multiple promises concurrently to increase perceived performance, while still handling errors effectively
Read 10 tweets
Steve (Builder.io) Profile picture
Jan 17, 2023
if only there was a better way A screenshot of a very overly complicated method
sauce: reddit.com/r/ProgrammerHu…
spoiler
Read 4 tweets
Steve (Builder.io) Profile picture
Jan 15, 2023
the code was written like 3 weeks ago ok Spiderman pointing at himse...
In all seriousness though, I know I post a lot of coding tips and "do this not that" best practices stuff, but I want to use this as a reminder to point out...
I don't write perfect code. No one does. My code has been complained about by fellow engineers as much as anyone, if not probably more.
Read 6 tweets
Steve (Builder.io) Profile picture
Jan 7, 2023
One new way you can make fetch() more elegant is to use the new Error.prototype.cause property in JS:

const res = await fetch(...)
if (!res.ok) {
throw new Error('...', { cause: res })
}

...

catch (err) {
if (err.cause.status === ...) {
// Handle each status
}
}
Full code example: Screenshot of the code: try { const res = await fetch('/u
You can even write your own tiny wrapper around fetch to make it more intuitive now too: Screenshot of the following code: async function myFetch(..
Read 7 tweets
Steve (Builder.io) Profile picture
Jan 7, 2023
Civet (@civetlang) is a new alternative syntax for TypeScript

Init flame war about syntax preferences:
Regardless of the syntax you prefer, the point of Civet is you can choose

You can write normal TSX opting into just a modern feature or two, or use a completely ruby/python style, or something in between similar to rust
Personally, I like the ability to bring more functional programming patterns to TSX, in an easy to incrementally opt-in way

I love TS, but there are some features of other languages that I miss, and I am intrigued by Civet's ability to potentially strike a balance for modern TS
Read 4 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(