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
Aug 22, 2024
LLMs are pretty cool when they're not being incredibly stupid

In your products, you need more of the smart parts and less of the dumb parts

Steal my tricks for making LLMs as least dumb as possible 🧵 Two code examples pointing out that adding specificity to the prompt yields better results
The Achilles heel of LLMs is hallucination, aka giving confidently wrong answers

E.g. if you ask chatgpt "how do I create a user with 's APIs" it'll say "create a POST to /api/v1/users"

Thing is, this API doesn't exist, and never did

So what can you do? Builder.io
A diagram showing AI gives both correct responses and incorrect hallucinations
LLMs are bad at acknowledging what they don't know

But they are good at answering questions from a well defined context

So instead, you can provide a set of information via RAG (retrieve it and supply it in the prompt) and tell the LLM to *only* answer questions from this data A code example showing RAG
Read 15 tweets
Steve (Builder.io) Profile picture
Aug 17, 2024
Don't be that teammate who blindly refactors code and only makes things worse.

Let's look at some good vs bad refactoring patterns with real examples 🧵 Code screenshot with text that says "this refactor caused us downtime"
Let's take this code.

I hired a developer once that saw us calling this `functions.runWith(...)` repeatedly with different options and decided to consolidate it all into one createApi function Code example with some redundant function calls
This new, consolidated code, had a huge issue.

Can you see it?

When we started deploying these APIs, they began breaking left and right. Code that consolidates the function calls into one, also consolidating the options each gave into one set of options used for all
Read 18 tweets
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

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!

:(