Improving Your Website's Core Vital And Page Experience Signals With Semalt 

1. Largest Contentful Page (LIP): This is defined how long it takes a page to load from the point of view of a real user. It is the time from clicking on a link to seeing the majority of the content on the screen of the device (pc or mobile).
2. First Input Delay (FID): It is defined as the time it takes for users to interact with a web page. Below are examples of some of the interactions:
   • Picking a choice from the top or primary menu
   • Clicking on a link in the site's navigation menu
   • Entering a user/viewer email address into a comment box
3. Cumulative Layout Shift (CLS): This is how stable a page is as it loads. In other words, it is the visual stability. It also means if elements on a web page move around as the page loads, then that web page has a high CLS, which can be considered bad.

3. What are Page Experience Signals?

1. HTTP CACHING: It is advisable for a webmaster to set the correct HTTP caching headers. It will be of double advantage because whenever a revisit (when a viewer/user visits a web page more than once) occurs to a web page, it loads faster, and there is less load on the webserver. 
   
   
   The cache, a compilation of local copies of resources, works because these resources don't change very often. When a browser can reuse a local copy, it saves the time to set up a connection and load that particular web page. 
   
   
   The trick to making the cache work effectively is HTTP caching headers, which are sent by the webserver to specify how long a resource is valid and when it last changed. The HTTP protocol gives ways to know how long a resource is valid. One of them is the expires header. The expires header gives a particular date after which a resource is invalid. On reaching this point, the browser will ask for the resource again. 
   
   
   Another way to know how long a resource is valid is Max-Age. Max age works in a similar fashion as the expires header, just that it specifies how long a resource is after it is downloaded instead of giving a specific date. 
   
   
   However, serving content that requires user interaction over a non-secure HTTP connection exposes user to the risk of data theft. It is important to know where and when users input any personal information, such as checkouts where payment information is being shared.
   
   
   To allow viewers to browse safely, a blogger needs to make sure the website has an up-to-date SSL certificate and migrate any of your URLs and on-page resources to HTTPS.
   
   
2. REDUCING BROWSER REFLOW: Reflow is the name of the web browsing procedure for re-calculating the positions and geometries of elements in the document for re-rendering part or all of the document. 
   
   
   It is important for developers to know how to increase the value of reflow time and understand the effects of various document properties. The document properties include CSS rule efficiency, different style changes, and DOM depth on reflow time.
   
   
   Often, reflowing a single element in the document may require reflowing its parent elements and any elements that follow it. 
   
   
   The most used techniques are grouped into six categories that cover 
   different aspects of page load optimization: 
   1. Most efficient browser display: Improving the browser's layout of a page. 
   2. Most efficient caching: Keeping one's application's data and logic off the network altogether.
   3. Optimal use for mobile devices: Tuning a site for the characteristics of mobile networks and mobile devices.
   4. Reducing the number of round-trips: Decreasing the number of serial requests response rotation.
   5. Reducing overhead request: Reducing upload size.
   
   
3. REDUCING THE FILE SIZE OF HTML DOCUMENTS: An obvious technique of improving the website's web page experience is to reduce the file size of the HTML documents. There are various ways to do this; these include rigid compression, acupuncture-like ID, and class name changes. 
   
   
   HTML, when delivered with the MIME type text/HTML - allows programmers to skip some tags. 
    
   Let's take, for example, if a programmer has a list of items ticked as <Pp> List item </Pp>, that programmer could write <Pp> List item. Or instead of a paragraph that he/she usually close with </q>, he/she could just use <q> My paragraph. 
   
   
   This method has been tested and trusted, and it works with HTML, head, and body, which are not required in HTML. Omitting optional tags keeps one's HTML formally valid while reducing the file size and making the code look much smaller. In an average document, this means about ten to 20 percent of space have been saved successfully. 
   
   
4. COMPRESS IMAGES: Image files are mostly created with extra information embedded in the file. For example, the JPEG file type is written by various image programs, including the name of the program that wrote them. Meanwhile, PNG images can often be made smaller by changing the way the image is encoded. 
   
   
   These transformations won't cause data loss. This means the compressed image looks identical to the uncompressed image but uses fewer bytes and takes lesser space.