Jump to content

Élément identifié comme "Largest Contentful Paint"

Phenomene
 Share

Recommended Posts

Phenomene Proficient

Phenomene

Posted
Posted

Bonjour,

Mon texte de la page d'accueil sur mobile est considéré comme élément largest contenful paint. J'ai déjà retirer du texte, des images. Quand  j'enlève totalement le texte c'est la première image qui est considéré comme élément largest contenful paint. J'ai fait de nombreuse recherche sur le sujet et je ne trouve pas comment faire. Je pensais que le cdn arrangerait ce problème mais non. Quelqu'un aurait une idée ?

 

Élément identifié comme _Largest Contentful Paint_.jpeg

Link to comment
Share on other sites
Phenomene Proficient

Phenomene

Posted
  • Author
Posted

Je suis justement en train de travailler sur la police et en ajoutant ce code ça fou le bazar. Je n'ai plus les mêmes données sur la page speed avant de faire les modifications d'autres éléments se sont ajoutés et on pris la place de ceux que j'avais avant. C'est un peu compliqué à expliquer. Peut-être qu'il faut un peu de temps au serveur pour faire les modifications et que sur la page speed je ne vois plus les "erreurs". Par contre pour les fichiers css/js je ne peux rien faire. J'ai aussi pensé au serveur et je pense sérieusement changé. 

@font-face {

font-family: 'FontAwesome';

src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");

src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");

src: url("../fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55l.woff2

font-display: swap;

font-weight: normal;

font-style: normal; }

 

Link to comment
Share on other sites
Ewonta Collaborator

Ewonta

Posted
Posted

Beaucoup dépend de la manière dont le template est conçu. C'est un problème courant, et vous devez supprimer les éléments superflus ou envisager la possibilité de modifier le template. 😏

Link to comment
Share on other sites
Phenomene Proficient

Phenomene

Posted
  • Author
Posted

Merci pour la documentation mais, j'ai presteshop 1.6.1.1.2 et la documentation c'est pour prestashop 8. Mais, il y à sûrement des différences et peut-être des similitudes non !

Link to comment
Share on other sites
Manu-41 Veteran

Manu-41

Posted
Posted

Vous aurez toujours quelque chose en LCP. Savez vous que google donne plus d importance au contenue qu à la vitesse d'un site? Cela a été dit par le porte parole de google. 

Link to comment
Share on other sites
Mediacom87 Grand Master

Mediacom87

Posted
Posted
Il y a 6 heures, Phenomene a dit :

Est-ce que l'on peut avoir deux cdn sur le même hébergeur ? Si je veux cloudfaire et le cdn d'ovh, c'est possible ou pas ! Merci

Il ne faut surtout pas le CDN OVH qui est nid à problèmes.

Link to comment
Share on other sites
Phenomene Proficient

Phenomene

Posted
  • Author
Posted

J'essaie de créer une règle font display. Je sais que certain me dirais que c'est une perte de temps ! J'ai pris comme modèle ce code.

@font-face {

font-family: 'FontAwesome';

src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");

src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");

font-display: swap;

 

Pour créer ce code

 

font-family: 'FontAwesome';

src: url("../fonts/fontawesome-webfont.eot?v=40"); quand je mets ce code, l'affichage des icônes comme facebook ou instagram sont remplacés par un rectangle

src: url ("../fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55l.woff2") format("woff2")

url("../fonts/fontawesome-webfont.woff?v=40") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=40") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=40#fontawesomeregular") format("svg");

font-display: swap;

Ou me suis-je trompé ? Un oeil neuf serait le bienvenue. Merci

 

Link to comment
Share on other sites
Manu-41 Veteran

Manu-41

Posted
Posted

Il faut héberger la police sur votre serveur.   Ar la vous allez encore charger une police , faire un appel chez Google. Sur votre serveur, je trouve que c est mieux.  

Vous téléchargez la police dans un dossier de votre serveur, vous ajoutez le chemin vers ce donner dans votre code. Priorité au woff2.

Link to comment
Share on other sites
Phenomene Proficient

Phenomene

Posted
  • Author
Posted

Si comme moi vous avez des images (produit phare page accueil) identifiées comme "Largest Contentful Paint", il vous suffit de changer la valeur dans Produits mis en avant sur la page d'accueil. Je mets une photo pour que cela soit plus clair. Sous prestashop 1.6.

produit phare Élément identifié comme _Largest Contentful Paint_.jpeg

Link to comment
Share on other sites
Phenomene Proficient

Phenomene

Posted
  • Author
Posted

Maintenant, c'est mon logo qui est considéré comme "Largest Contentful Paint". Quelqu'un aurait une idée ? Merci

header.tpl

<div class="container">
                            <div class="row">
                                <div id="header_logo">
                                    <a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
                                    
                                        <img class="logo img-responsive" src="{$ddlx_logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}" width="370" height="99"/> 
                                         

Logo Largest Contentful Paint.jpeg

Link to comment
Share on other sites
Phenomene Proficient

Phenomene

Posted
  • Author
Posted
55 minutes ago, Phenomene said:

Si comme moi vous avez des images (produit phare page accueil) identifiées comme "Largest Contentful Paint", il vous suffit de changer la valeur dans Produits mis en avant sur la page d'accueil. Je mets une photo pour que cela soit plus clair. Sous prestashop 1.6.

produit phare Élément identifié comme _Largest Contentful Paint_.jpeg

Et bien en faite cela ne fonctionne pas.

Link to comment
Share on other sites
Phenomene Proficient

Phenomene

Posted
  • Author
Posted
3 hours ago, Manu-41 said:

Il faut héberger la police sur votre serveur.   Ar la vous allez encore charger une police , faire un appel chez Google. Sur votre serveur, je trouve que c est mieux.  

Vous téléchargez la police dans un dossier de votre serveur, vous ajoutez le chemin vers ce donner dans votre code. Priorité au woff2.

Dans le Fichier : /www/themes/evolutionX/css/font-awesome/font-awesome.css J'ai trouvé 

@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
   font-weight: normal;
  font-style: normal; }

Est-ce à cet endroit qu'il faut que mette la police src: url ("../fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55l.woff2") format("woff2") Mais comment ? Quelqu'un aurait une idée ? Merci

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...