What are Google Web Vitals?

 


Hello:) This is RC Town.

Today's technical review is Core Web Vitals.

Everyone visits the site once.

I'm sure you've often seen pages with slow access.

​

​

You created your first site.

too slow

If you are not sure what to optimize your site for,

​

I hope this post is helpful.

Core Web Vitals are web content users'

Refers to the various measures that affect the user experience.

Put simply,

Accessing, moving, and clicking on web pages

You can think of it as a measure of user behavior.

​

Google, in particular,

We value LCP / FID / CLS.

​

LCP is HTML, that is, on the browser screen.

This refers to the time it takes for the entire render to complete.

All the various elements such as images and text necessary for the homepage screen

This refers to the total exposure time.

​

In order to improve the LCP

Change the layout to a lightweight format

It should shorten the loading time of the whole.

​

FID refers to the interaction between a web page and a user.

Put simply,

when clicked in browser

How long does the page take an action

says

​

To improve FID

Send only the code you need to your users

by minimizing the code

The process should be kept simple.

​

CLS is an indicator of visual stability.

This part can be difficult

Situations that lead to unexpected pages

will be placed, for example

Because the button is asynchronous (you can do the following even if you can't load all of them)

I can't press the button I'm supposed to press

Have you ever had the experience of pressing a different button?

​

This experience can actually be irritating, but

Maybe lead to serious problems.

​

To improve CLS

Media size and video size

Beware of making the same loading longer

Avoid excessive animation.

​​

These three metrics can have a significant impact on your SEO.

​

It is said that Web Vitals have a significant effect on Google SEO.

Although not directly mentioned,

The ranking algorithm itself is based on the consumer's page experience.

Because it affects SEO

​

Improving the consumer's page experience

Web Vitals can be said to have an important meaning for SEO.


​​It was RC Town. :)

댓글

댓글 쓰기

이 블로그의 인기 게시물

11st App UI UX Analysis Review

이미지
  Hello~ This is Soft Labs. ​ Today, we will analyze the mobile app 11st. Recently, a YouTuber media designer summarized the 10 principles of mobile UI UX very well. Based on that, let's analyze the 11th Street app. ​ Analysis is the most important when designing or benchmarking mobile layouts! Let's find out with 10 mobile principles!!  ! ​ ​ ​ ​ ​ ​ ​ first.  font size Font size is very important in mobile apps. If it is too large or too small, it is said that the readability of the web app is severely reduced. So, I write down the principle, but I set it to 12px with 1rem as the default. It is important to design no less than that.  And the maximum size is said to be best not to exceed 24px, which is twice that size. 11th Street seems to be firmly aligned as if to answer that!! ​ ​ ​ ​ ​ second.  increase button size It is said that the most common mistake when creating a mobile app is to make the button size too small. However, functional elements such as bu...
자세한 내용 보기

アルシータウンニュースレター Vol.27

이미지
  アルザフ27                                                                   魅力的なフロントエンドを作るPython Webフレームワークの3つ  Pythonは古くからサーバー側のフレームワーク用の言語で書かれており、ほぼすべての規模、ほぼすべての環境のプロジェクトをサポートしています。 しかし、Pythonは伝統的にバックエンド領域に閉じ込められていました。 フロントエンド、クライアント側コードを作るための目的でPythonを書く文化は、少なくともまだまだ大きく拡散していない。  最近、いくつかのプロジェクトはフロントエンドでPythonをJavaScriptに変換したり、Webアセンブリを介してフロントエンドでPythonを実行したりしようとしましたが、現在実装されている方法は薄くて原始的です。 開発者にとって今すぐ良い選択肢はありませんか？ もちろんあります。 新しいPython Webフレームワークスイートを使用すると、バックエンドでプログラム的にフロントエンドコードを生成する宣言的なPythonコードを書くことができます。 Pythonオブジェクトを使用してHTMLエンティティと対応するJavaScriptベースの動作を記述し、クライアントに提供されたときにフレームワークにこれらのオブジェクトを自動的に生成させることができます。   このパラダイムに従う3つのPython用Webフレームワークを紹介します。 すべてがバックエンドのPythonコードでHTML、CSS、JavaScriptなどのフロントエンドコードを記述できるようにし、したがってPythonオブジェクトモデルを介してフロントエンドオブジェ...
자세한 내용 보기

アルシータウンニュースレター Vol.29

이미지
  アルザフ29号                                                                   「プログラミング言語開発の甘草」LLVMの理解と活用方法  現在、開発環境分野では毎日新しい言語と既存言語に対する改善が注がれている。 モジラのラスト、アップルのスウィフト、ジェットブレインズのコトリン、そして実験的なPython変形であるMojoなどが代表的だ。 すべての開発者にスピード、安全性、利便性、移植性、およびパフォーマンスの幅広い選択肢を提供します。 この変化の多くは、言語、特にコンパイラを構築するための新しいツールです。 コンパイラの中でも代表ランナーである  LLVM は、スウィフト言語を作ったイリノイ大学のクリス・ラトナーが初めて開発したオープンソースプロジェクトだ。  LLVMを使用すると、新しい言語を作成するだけでなく、既存の言語開発を強化する作業も簡単にできます。 LLVMは、新しい言語を作成する過程で大変であり、あまり出てこない多くの部分、例えば出力されたコードを複数のプラットフォームやアーキテクチャに移植し、ベクトル化などのアーキテクチャ固有の最適化を生成する、例外などの一般的な言語メタフォーを処理するためのコードの作成などの作業を自動化する。 自由なライセンスのおかげで、ソフトウェアコンポーネントとして必要に応じて再利用したり、サービスとして配布したりできます。   LLVMを使用する言語はすでに私たちに慣れていることが多い。 AppleのSwift言語はLLVMをコンパイラフレームワークとして使用し、RustはRustツールチェーンの重要なコンポーネントとして使用します。 C / C ++コンパイ...
자세한 내용 보기