Optimizing web performance with Core Web Vitals

My Hello World! A deep dive into Core Web Vitals, and news about React Server Components, iPhone 15/15 Pro review & Magic Bike 2

In this edition:

• 🙋‍♂️ Hello World!

• 📣 What's new with @lauthieb

• 📰 Fresh insights (articles, videos, podcasts)

• 🧐 Digging in... Core Web Vitals: Enhancing your web application's performance

• 📱 Tech news highlights

• 💌 Thank you

---

If you're just discovering this newsletter or if someone forwarded you this edition and you'd like to subscribe to Webpreneurs:

For your information, this newsletter was initially written in French and later pivoted to English in order to reach a wider audience following a request from the community. That's why at certain points, you'll find resources in French which will be prefixed with "[French]". Enjoy!

---

Hey there! 👋

I'm thrilled to invite you to the first edition of Webpreneurs, the newsletter for web enthusiasts eager to embark on entrepreneurial ventures.

In Webpreneurs ☕, you'll find:

• 🚀 Productivity

• ⛰ Entrepreneurship / Career

• 💻 Tech / Engineering

• 💰 Business

• 🌱 Startups

• 🖼 Product

• 🎨 Design

• 🤖 AI

... & good vibes 😃

I'll try to co-create with you through your feedback, so please don't hesitate to react in the comments below this edition or to contact me through my social networks.

As this is the very first edition, I propose to share a bit more about myself, Laurent, who's behind Webpreneurs.

---

🙋‍♂️ Hello World!

Allow me to introduce myself, Laurent Thiebault! I'm 29 years old, married, and a proud father of two adorable little girls, Clémence & Louise. For almost a decade now, I've been deeply passionate about technology in general, the web, and business, with the primary goal of contributing to the creation of meaningful projects that improve our world and society.

I love giving people time by helping them do more in less time, and I adore simplifying complex and fascinating subjects to help my audience grow their knowledge in a fun and enjoyable way. So you can understand why I eventually wanted to start writing to you!

In terms of my education and professional experience, I completed a Master's in Computer Science (MIAGE) through an apprenticeship program at the University of Lille. I quickly immersed myself in the world of front-end development and now hold the position of Engineering Manager at Decathlon Digital, where I'm responsible for the technical aspects of the Design System, of which I am one of the co-founders.

In parallel, I create content under the pseudonym @lauthieb about the digital world (whenever time allows), which I share on my social networks as well as on my blog. I invite you to visit www.lauthieb.dev to learn more.

Well, like many people, I've tried things that didn't last, and I regularly experience imposter syndrome or writer's block, so I can't say where this newsletter will take me. But I wanted to give it a try, and I hope you'll enjoy it. 🤞

---

📣 What's new with @lauthieb

These past few weeks, Figma has released two major features:

Figma Variables

Variables in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows. Here is the guide to learn about this.

AI has been integrated into FigJam

Figma has released JamBot, the new FigJam plugin that brings Artificial Intelligence directly into this whiteboarding tool.

---

📰 Fresh insights

For over two years now, I've found a process and tools that allow me to manage my tech watch as I wish to be efficient both in terms of discovery through RSS feeds or Twitter X lists (I struggle a bit with algorithms that push content I don't control), organized storage, tracking reading progress, and indexing for retrieval years later.

There was one thing missing... Sharing it with as many people as possible! That's the whole point of this section that will appear in each edition. Let's dive in! 👀

📝 Articles

1. Josh W. Comeau's latest article is a gem for understanding the benefits of React Server Components. Check it out here 📖.

2. This article by Ahmad Shadeed discusses the new viewport-related CSS units, which are very useful for adapting our interfaces when viewed on mobile devices. Check it out here 📖.

3. [French] The latest

   Quoi de neuf les devs ?
   is incredibly comprehensive as always. Well done, Fred, for your hard work! I highly recommend it below:

   Quoi de neuf les devs ? Numéro 52

🎬 Videos

1. [French] An excellent French video by Kodaps Academy on the difference between React Server Components & SSR:

2. A video from Fireship explaining the current trend of open-source projects stopping the use of TypeScript:

3. [French] The latest video from Basti Ui, who designed the Tinder application on the Apple Vision Pro, is very inspiring:

🎧 Podcasts

1. [French] The episode of Génération Do It Yourself by the famous Matthieu Stefani with Frédéric Biousse was a gem! I discovered a kind, intelligent person with a remarkable journey!

2. The latest episode of the Double Slash Podcast by Patrick Faramaz & Alex Duval on Web Dev news for September 2023 was, as always, a very interesting episode for understanding the latest updates related to the world of web development:

---

🧐 Digging in... Core Web Vitals: Serving better performance for your web application

As I mentioned earlier, I have some experience in development, particularly in front-end. So, in each edition, I'd like to take a moment to introduce or reintroduce a topic, share an experience, basically provide a space where I hope to teach you something new!

And this time, let's delve into... Core Web Vitals.

Website performance is crucial for delivering an exceptional user experience. Core Web Vitals are three key metrics that assess this performance.

Largest Contentful Paint (LCP) measures the time it takes for the main content of the page to appear, influencing the first impression.

First Input Delay (FID) evaluates the site's responsiveness during user interactions, essential for a smooth experience.

Cumulative Layout Shift (CLS) measures visual stability by avoiding unexpected layout shifts.

These 3 indicators are therefore essential for understanding and improving the overall experience of your users when they navigate your web application.

Why are they important?

• Improved User Experience.

• Impact on Search Engine Optimization (SEO).

• Reduction in Bounce Rates.

• Expanded Accessibility.

How to measure Core Web Vitals?

You can use tools like PageSpeed Insights, Lighthouse, Google Search Console, Chrome UX Report, and web-vitals.

How to optimize?

1. LCP: Compress images, use caching, preload critical resources, and utilize a Content Delivery Network (CDN).

2. FID: Minimize blocking scripts, optimize JavaScript code, use workers, and preload essential resources.

3. CLS: Define element dimensions, allocate space, avoid intrusive ads, and load fonts asynchronously.

In the end, Core Web Vitals are essential for providing a quality user experience. Start optimizing them now to stay competitive online and retain your visitors.

If you want to learn more in detail, I invite you to check out my recent blog post on this topic:

---

📱 Tech news highlights

Here are the latest news in the digital world that caught my attention recently:

1. [French] Of course, the iPhone 15! I recommend STEVEN's high-quality video released last Friday:

2. Naturally, working full-time at Decathlon Digital, I'm fortunate to learn and grow within an innovative company, so I want to talk to you about it in this first edition. Decathlon has just released its Magic Bike 2, a high-performance connected bike with remarkable design. Congratulations to all the teams involved in this project! Check out Jérôme Dubreuil's LinkedIn post about it.

   

3. [French] Looking for a daily dose of startup news? I recommend Thib Actus' Instagram account (and podcast)! It's a gem I discovered this month, a media outlet similar to Hugo Décrypte but focused on the startup world! 🚀 Well done, Thibault!

---

💌 Thank you

A big thank you to each and every one of you for being here for the first edition of my newsletter.

Your feedback is important to me, so please don't hesitate to share it. All criticism is valuable! Stay tuned for more content in the upcoming editions.

Thank you again for reading, and see you soon! 👋

Laurent

---

If you're just discovering this via a link or if someone forwarded you this edition and you'd like to subscribe to Webpreneurs: