🔍 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 }
🔹 Crawling
Crawling is the first step. This is about finding your website in the first place.
Some pages are already known to Google through simple links. You can speed up this step with sitemaps.
Once Google has found your page, Google will crawl it.
⚡ 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 }
▶️ What browsers are supporting WebP?
The current support includes all main browsers.
It supports Safari only for iOS or macOS Big Sur 11+.
Using the picture tag ensures compatibility for older browsers and fallback alternatives in other formats!
⚡ 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 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!
2️⃣ What is WebP?
WebP is a next-gen 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.