Real Life Coding Stuff

For smart Primates & ROBOTS (oh and ALIENS ).

Saturday, February 15, 2025

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?

, , No comments

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?

 

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?

So, you can face this situation while testing your website's any page speed performance score for mobile and desktop.
You can see the similar test result on Google PageSpeed Insights.
The header heading Core web Vitals Assessment LCP is 10.6 seconds but the bottom report shows LCP 3.5 seconds.
The difference between Core Web Vitals (LCP) and Google PageSpeed reports (LCP) depends on many factors. here are some of them:

The Core Web Vitals:

The Core Web Vitals metrics score represents the real actual user's experience.
It also depends on users' conditions, device, location and network conditions.
So the LCP is showing different users.

The Google PageSpeed Insights:

Actually it generates metrics tests from a self defined environment.
So it does not get the data of real world end users for ex: device hardware, poor device network, what software extension installed in device or network speeds. It is also same for other metrics for ex: First Contentful Paint (FCP), Time to First Byte (TTFB), Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP)

Hope you understand.

If you need any other explanation or help just comment.

 

Share:
Fore more, continue here...

Friday, January 17, 2025

Image Zoom Hover Effect

, , No comments

Image Zoom Hover Effect

Animations are good and it make website's pages attractive and more live. It feel user to see live things. Here you can user videos etc or gif image, But the problem is after using videos or gif file your website's page will heavy and load slow. These heavy file will consume your hosting spaces and also consume user's data and bandwidth. 

So in this case we can use animations to make some zoom-in and zoom-out effect to JPG and PNG file. Using this we can save data and bandwidth. We will do it with simple CSS. Here we are not using any JavaScript, which can make it complex. below are 2 images. 1st one is normal image, and when your mouse hover then it will zoom. see 2nd image.

Here is the below code action for image zoom-in zoom-out:

Image Zoom Hover in Effect, Image Zoom Hover out Effect
                                                    1st Image zoom hover out effect

 

Image zoom hover in effect
                                                        2nd Image zoom hover in effect

 

 

 

Here is the below code for image zoom-in zoom-out:

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Zoom Hover Effect</title>
  <style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

section {
  text-align: center;
}

.image-container {
  position: relative;
  overflow: hidden; 

  display: inline-block;
  width: 100%;
  max-width: 500px;
 border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}

.image-container img {
  display: block;
   border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  transform: scale(1.1); /* Default size */  /* IMPORTANT PART */
  transition: transform 9.5s ease-in-out; /* Smooth transition for zoom effect */
}


.image-container:hover img {
  transform: scale(2); /* Zoom in */ /* IMPORTANT PART */
}

  </style>
</head>
<body>
  <!-- Container for the Zoom Effect -->
  <section>
    <h2>Image Zoom Hover Effect</h2>
    <div class="image-container">
      <img src="1.jpg" alt="Zoom Effect Image">
    </div>
  </section>
</body>
</html>

 

Share:
Fore more, continue here...

Featured Post

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?

Core Web Vitals Assessment showing LCP 10.6s while google pagespeed report showing LCP 3.5s why?   So, you can face this situation while t...

Ads Inside Post

Powered by Blogger.

Arsip