⚡ Every Web Developer should know what the First Input Delay is

The First Input Delay is one of the metrics to measure your user's page experience on your website. It is a Core Web Vital and crucial for SEO.

↓ Learn more about the FID and how to improve it in 2 minutes ▶️ What is the First Input Delay (FID)?

The First Input Delay is a Core Web Vital focusing on the interactivity experience.

It measures the time between user interaction and the actual time the browser can respond to the input.

↓

{ 1 / 17 }

It's great to turn your skills into money and freelance as a web developer!

When you start freelancing, it is extremely important that you properly estimate the time you need for a realization, otherwise you will lose your clients' trust.

↓ Tips on how not to lose trust ▶️ Be sure how much time you can spend

This is one of the most important points.

There is a huge difference if you can spend 8 hours a day or 8 hours a week on an implentation.

If you have a well organized calendar this will bring you advantages.

{ 1 / 10 }

⚡ 5 Chrome Extensions for Front-End Developers you may not know existed

↓ Check them out and boost your productivity 1️⃣ META Seo inspector

You are working a lot with SEO? This extension is an absolute must!

It helps you quickly spot SEO issues all over your website. It can guide you already while building pages.

chrome.google.com/webstore/detai…

⚡ Every Web Developer should know what the Largest Contentful Paint is

The Largest Contentful Paint is one of the metrics to measure user's page experience on your website. It is a Core Web Vital and crucial for SEO.

↓ Learn more about the LCP and how to improve it ▶️ What is the Largest Contentful Paint (LCP)?

The LCP is a Core Web Vital focusing on the loading experience.

It measures the time until the largest element above the fold is rendered for your users. This is typical:

🔹 an image
🔹 a video
🔹 a background image

{ 1 / 17 }

⚡ Every Web Developer should know how to minify your CSS and JavaScript!

Minifying your code is crucial to ensure your website is fast and good performing.

👇 Learn how to minify your CSS/JavaScript in seconds! ▶️ Why you should minify CSS and JS

Minifying your CSS/JS reduces its size, no unnecessary white spaces, and no comments are loaded.
Those changes can drastically decrease the payload size of your request.

For JS, it even can strip down function and variable names!

{ 1 / 6 }

🔍 Every Front-End Developer should know the basics of how Google search works

Suppose you develop a Website you most likely want users to find your page. Optimize your page for Google ensures the correct audience will find your page.

↓ Learn how Google search works The goal of a website is to be found in Google.

To show your website at Google, it goes through these 3 steps:
🔹 Crawling
🔹 Indexing
🔹 Serving

In this thread, we will take a closer look at all the steps.

{ 1 / 12 }

⚡ Every Web Developer should know and use WebP images

The WebP image format is considered a next-gen image format and reduces the file size for images by 25-35%.
This is crucial for modern SEO and web performance.

👇 Read more about how to use WebP in seconds. ▶️ What is WebP?

WebP is an image format published by google in 2010.

It creates lossless images that are 26% smaller than PNG's and lossy images 25-34% smaller.
In reality, I have seen over 40% smaller sizes already.

And WebP supports transparency!

{ 1 / 7 }

⚡ Every Web Developer should know performance budgets

A performance budget is a set of constraints that apply to metrics that affect a website's performance. Having budgets helps to ensure your website performs well.

👇 Learn about web performance and performance budgets ▶️ Why is performance important?

Performance is an important part of the user experience, and it can directly impact your business.

User experience has also become a factor in Google page ranking.

Setting a performance budget defines the boundaries for your website.

⚡ Every Web Developer should know how to serve properly sized images

Serving images in the correct image dimensions is crucial for web performance. Loading incorrect sizes can increase the network payload.

👇 Learn how to serve the correct mage sizes in seconds ▶️ Why is this important to web performance?

Incorrectly sized images either increase your network payload, or the other way around, causes to have blurry images.

For example, a stock photo is usually 11MB. Proper size/compress can reduce it down to 400kb.

⚡ Every Web Developer should know what the Largest Contentful Paint is

The Largest Contentful Paint is one of the metrics to measure user's page experience on your website. It is a Core Web Vital and crucial for SEO.

👇 Learn more about the LCP and how to improve it ▶️ What is the Largest Contentful Paint (LCP)?

The LCP is a Core Web Vital focusing on the loading experience.

It measures the time until the largest element above the fold is rendered for your users. This is typical:

- an image
- a video
- a background image
- a headline

⚡ Every Web Developer should know how to serve scaled images

Serving your images scaled is crucial to ensure your performance is fantastic and your website loads fast for any of your users.

👇 Learn how to create and serve scaled images in seconds 1️⃣ What are scaled images?

A scaled image is an image that is created in different size variants to match the displayed size for your user.

It does allow you to serve drastically smaller images when there is no need for huge images.

👇

⚡ Every Web Developer should know how to create next-gen image formats

Serving your images in next-gen formats is crucial to ensure your performance is fantastic and loads fast for any of your users.

👇 Learn how to create images in the next-gen format in seconds 1️⃣ What are next-gen formats?

Next-gen formats are image formats such as
- WebP
- AVIF
- JPEG 2000
- JPEG XR

We will focus on WebP as this has the best support across all browsers and is most used!

⚡ As a Web Developer, you should always minify your CSS/JS!

Minifying your code is crucial to ensure your website is fast and good performing for modern SEO!

👇 Learn how to minify your CSS/JS in seconds! 1️⃣ Why you should minify CSS/JS

Minifying your CSS/JS reduces its size, no unnecessary white spaces, and no comments are loaded.
Those changes can drastically decrease the payload size of your request.

For JS, it even can strip down function and variable names!

⚡ Every Web Developer should know what Critical CSS is and how to use it

Using critical CSS and defer non-critical CSS can boost your website's performance which is becoming more important!

👇 Learn how to extract critical CSS and defer non-critical CSS ▶️ What exactly is critical CSS?

Critical CSS is any CSS that is relevant for elements being displayed above the fold. Above the fold are all elements that are rendered within a user's viewport when visiting your website. Anything else is non-critical!

⚡ Every Web Developer should know how to find unused code in their application

A lot of unused code can slow down your website. It is blocking the main thread with parsing, compiling, and executing the code.

👇 Learn how to find unused code in seconds 1️⃣ Using chrome dev tools

Chrome dev tools have a coverage tab that can reveal unused CSS. You can access this tab by:

- Open Dev Tools
- STRG+ Shift + P
- Searching "Coverage"
- Select "Start instrumenting coverage and reload the page"

👇