Je joue à l'optimisation max sur PageSpeedInsight. C'est plus un défi technique et un moyen de comprendre à ce stade : il s'agit d'un bête logo de 48x48 px qui fait tilter la machine : elle me dit "images diffusées en basses résolution"
D'après lui, la Taille affichée est 48x48, la Taille réelle est 48x48 et la Taille attendue est 72x72.
J'ai le même message que j'utiliser une image 48x48 ou 72x72, alors qu'attend-il réellement ?
Mais là pour mon petit logo je peux bien le mettre en plusieurs taille si ça le chante, je doute que ça modifie quoi que ce soit...
EDIT : En fait lorsque je passe le logo à 72 la taille attendue devient 108 : comme si le code impliquait un grossissement de la taille du logo, alors que ni le html ni le CSS ne mentionne sa taille.
Pour faire un test j'ai utilisé le premier code du cours html d'openclassroom :
as-tu bien mis la meta viewport de cette manière : <meta name="viewport" content="width=device-width, initial-scale=1" /> ? Ta description donne l'impression que sur mobile il y aurait un léger zoom (ce qui est fréquent tant qu'on ne précise pas initial-scale).
Pas d'aide concernant le code par MP, le forum est là pour ça :)
as-tu bien mis la meta viewport de cette manière : <meta name="viewport" content="width=device-width, initial-scale=1" /> ? Ta description donne l'impression que sur mobile il y aurait un léger zoom (ce qui est fréquent tant qu'on ne précise pas initial-scale).
Bonne suggestion, j'y ai cru mais toujours pas : même résultat avec la structure complète. C'est d'ailleurs la seule erreure mentionnée :
Est-ce que ça peut venir de mon hébergeur ?
Voici le code de test qui me donne le même résultat que mon site initial :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Le titre de ma page</title>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>
Vous trouverez le logo d'OpenClassrooms
</p>
<img src="//course.oc-static.com/courses/1603881/logo-openclassrooms.png" alt="Logo d'OpenClassrooms">
</body>
</html>`
EDIT : c'est pas mon hébergeur, j'ai essayé ailleurs avec le même résultat.
EDIT bis : c'est lié au formal png ou webp : pas de problème en jpg.
Voici un exemple de code qui a tous les points pagespeed :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="description" content="Put your description here.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Le titre de ma page</title>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>
Vous trouverez le logo d'OpenClassrooms
</p>
<img src="//user.oc-static.com/upload/2022/11/25/16693911549083_FR_1603881_HTML-CSS_Static-Graphics_p1c3-2.jpg" alt="Logo d'OpenClassrooms">
</body>
</html>`
EDIT ter : il suffisait d'expliciter la taille de l'image en CSS :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="description" content="Description de ma page.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le titre de ma page</title>
</head>
<body>
<style>img {
width: 938px;
height: 72px;
image-rendering: pixelated;
}</style>
<h1>Bienvenue sur ma page</h1>
<p>
Vous trouverez le logo d'OpenClassrooms
</p>
<picture>
<img src="//course.oc-static.com/courses/1603881/logo-openclassrooms.png" alt="Logo d'OpenClassrooms">
</picture>
</body>
</html>
Ah ! Alors plutôt qu'en CSS, utilise les attributs width et height sur l'image, dans le HTML. C'est la bonne pratique qui permet au navigateur de réserver la place nécessaire pour afficher l'image sans devoir décaler le contenu plus bas.
(j'avoue, je n'avais pas regardé ton code sur CodePen ^^' )
Pas d'aide concernant le code par MP, le forum est là pour ça :)
pinaillage sur PageSpeedInsights
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)