Largest Contentful Paint element

flexi2202 Messages postés 3800 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 16 mai 2024 - Modifié le 16 mai 2024 à 00:19
flexi2202 Messages postés 3800 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 16 mai 2024 - 16 mai 2024 à 08:34

Bonjour à tous,

Je me décide à venir poster sur le forum car après avoir essayé des dizaines de solutions, je me retrouve toujours avec cette erreur "Largest Contentful Paint" dans Lighthouse en mode mobile. Pourtant, mes images existent et sont bien optimisées. Le dernier essai provenait de ce site de référence, mais sans succès.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

.flex-container {
display: flex;
flex-direction: row;
-webkit-align-items: center;
justify-content: center;
flex-wrap: nowrap;
}

.flex-item {
background-color: #ffff;
margin: 10px;
padding: 10px;
flex: 1;
align-self: stretch;
}
flex-item img {
object-fit: cover;
float: left;
margin-right: 10px;
max-width: 480px;
height: auto;
width: 100%;
margin-bottom: 10px;
}

<div class="flex-container">
  <div class="flex-item">
    <figure style="margin-left: 0; margin-right: 0;">
      <img srcset="https://phil.pecheperle.be/image-article-peche-perle/quelle-longueur-canne-pecher-gardon-perle-360w.webp 360w, 
https://phil.pecheperle.be/image-article-peche-perle/quelle-longueur-canne-pecher-gardon-perle-480w.webp 480w" sizes="(max-width: 600px) 360px,480px" src="https://phil.pecheperle.be/image-article-peche-perle/quelle-longueur-canne-pecher-gardon-perle-480w.jpg" alt="Quelle plombée pour pêcher le gardon à la perle" width="480" height="360">
    </figure>
    <div class="info-container">
    </div>
  </div>
</div>
A voir également:

1 réponse

Bonjour

Rien pour html mais juste un tuto, le lcp mesure la vitesse de téléchargement des pages, il y a pas que ce qui est dans le html qui influence.

https://www.hostinger.fr/tutoriels/largest-contentful-paint

0
flexi2202 Messages postés 3800 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 16 mai 2024 187
16 mai 2024 à 08:34

Bonjour 

Merci pour la reponse et le lien

Mais mon soucis se concentre sur l'image

maisje viens de refaire un test avec le code suivant et c'est pareil
toujours ce message d'erreur

<h2>pixel ratio (x descriptor)</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/logo.jopg" 
     srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/logo.png 1x, 
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/logo-hd.png 2x" 
     width="300"
     alt=""> 


<h2>viewport (w descriptor)</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/logo.png" 
     srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/logo.png 300w, 
             https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/logo-hd.png 600w" 
     sizes="(min-width: 600px) 600px, 100vw" 
     alt="">


 

0