What are Page Experience & Web Core Vitals?

Page Experience includes users’ experiences when they access new web pages and consume content on the web, both on mobile devices and on desktop devices.

What are Page Experience elements?

Page experience includes many factors, as we mentioned earlier. The values used to measure Page Experience usability on a webpage of a website are respectively as follows:

– Mobile Friendliness 

While browsing the site of users who access our site via mobile devices; means that they can easily reach the results they want to achieve on mobile.

To measure the mobile usability of your site, you can use the ‘mobile usability’ section of Google Search Console.

– HTTPS-security

For a page to provide the best Page Experience in Google search results, it must be equipped with an HTTPS security protocol.

If you see an HTTP warning in your GSC report, it means that there is a problem with your security certificate (HTTPS). Try to migrate to HTTPS when this occurs.

– Core Web Vitals 

Core Web Vitals are a set of metrics pointing to the loading speed of different elements on webpages. It tells you how a user experiences your webpages; from the homepage, services pages, product pages, or blogs.

Core Web Vitals are generally divided into 4 different metrics. They are as follows:

• LCP (Largest Contentful Paint)
• CLS (Cumulative Layout Shift)
• FID (First Input Delay)
• FCP (First Contentful Paint)

All these metrics measure the user’s experience. However, we put extra emphasis on FCP and LCP, as they measure how fast the first elements are loaded on your page.

LCP refers to the first content item that appears to the user when opening the page: FCP refers to the first painted text that appears when the page is loaded. But in general, they are two metrics that complement each other.

In addition to these, CLS is another metric that processes user interface shifts, such as in-page images and text.

FID, on the other hand, is concerned with how quickly the browser responds to the first interaction the user took on a website.

Page Experience and Core Web Vitals Measurement Tools

We previously talked about the importance of core web vitals, which are metrics that directly affect Page Experience.

You can use the following tools to search for and identify issues regarding possible errors in Page Experience or page speed :

Google Search Console:

Check out Page Experience, Core Web Vitals, and Mobile Usability.

• Page Speed Insights
• GTMetrix
• WebPageTest
• Lighthouse (You can access it from the Inspect tab)

You can also access more features from these tools or from other free or paid sites.

Which website would you recommend at this point? As Digipeak, we definitely recommend that you take a look at the 5 websites we have mentioned above.

Core Web Vitals Apps That Can Improve Page Experience

We have emphasized the importance of page speed and page experience earlier. However, we should ask ourselves some questions, while optimizing the page experience.

For example:

• How long does it take for the largest item to load in front of the user (LCP)?
• How long does it take for the website to provide input when the user first interacts with the website (FID)?
• How stable are the on-page elements? Does the user interface shift a lot or not (CLS)?
• How fast does the first content take to load on the website (FCP)?

We need to ask such questions to optimize page speed. The possible results we may encounter from these questions.

How to Optimize Core Web Vitals?

After learning more about the Core Web Vitals metrics and how to analyze them, we might run into the following problems and solutions:

– Slow Server Response

Caching your content is one of the first things you can do to improve server responsiveness. When you use caching, static HTML versions of your pages will be saved, so you won’t have to reload all of your files every time someone visits your site.

– Remove Render Blocking Resources

This is a warning you can see a lot on Pagespeed or GTMetrix.

It mainly refers to HTML, JS, and CSS files.

In general, by giving the names of some JS or CSS files in the page speed results, you may see explanations such as “This file is not used completely, remove the unused part’.

The process you need to implement here is to collect the file names that come out in the tools we mentioned above.

Then you should manually block the JS or CSS files in question and see if they cause your site to go down.

(When blocking, do not forget to evaluate the main page, category, and blog content pages separately!)

The next step you need to do after blocking is the <async> or <defer> optimization. Before clarifying which file to give defer or async to, let’s take a look at the related concepts:

What is the <async> Tag?

While your pages are loading, you can specify which ones you want to load first from your internal source files, using the async tag.

Async is usually used for internal source files, important files that are being uploaded, and tracking files.

What is the <defer> Tag?

The defer tag is the inverse of async: we usually use external source files that are not high priority during page loading.

Defer uploads the files it is given after the HTML upload is finished and after the priority files and images are uploaded; thus, delaying the relevant files and contributing to the site loading faster.

– Optimize Images

If possible, we recommend that you upload the images to your site through a CDN service. Because the images that come from the main domain can be an extra load on the server.

In addition, we recommend that you generally use compressed and optimized images on your site.

Using WebP as the image format will make your images load faster and with a smaller load time.

– Feel Free to Use Lazy-Load

In order to optimize your LCP metrics, you can lazy load images <lazy-load> at the bottom of the page that can be seen as you scroll, rather than images such as sliders and banners at the top of the page.

– Specify the Width-Height Ratio

Don’t forget to give width and height values for text boxes and images on the page.

We recommend that you enter the aspect ratio values for elements such as logo, text box, pop-up placed in a certain position on the page. This in return has a great impact on CLS metrics.

By entering all width-height values correctly, your Core Web Vitals results will improve, and your site score will increase the overall  Page Experience.