Discussion :

[Derko]

Bonsoir à toutes et tous !

Voila, j'ai développé un site web pour une amie qui avait besoin d'un site vitrine pour sa petite entreprise et comme j'étais en train de réapprendre HTML, CSS, PHP et JS je me suis proposé de lui faire moi-même gratuitement à hauteur de mes capacités actuelles.

J'ai terminé le site et je suis allé sur l'outil de Google "PageSpeed Insights" afin de vérifier mon code et "mes choix" de développement.

J'ai ensuite déroulé les données pour me retrouver la dessus :

(j'ai volontairement changé le contenu du h1 car c'est le nom prénom de mon amie et je ne veux pas qu'il se retrouve en clair sur un forum).

Mon soucis, c'est que je ne comprends pas du tout ce que cela signifie.
J'ai lu pas mal de documentations sur LCP mais je n'arrive pas à comprendre pourquoi ni comment modifier mon titre h1 pour qu'il ne fasse plus perdre 4 sec au premier chargement du site.

Voici le code de ma section "index" (c'est un site one page avec des sections de hauteur min 100vh, mais tout est contenu dans index.php. Il y a 5 sections pour un total de 344 lignes de code. C'est donc, comme vous pouvez le voir, un petit site) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!------------------->
<!-- Section Index -->
<!------------------->
<section id="index" class="index conteneur">
     <div class="index-title">
          <h1>Prénom Nom</h1>
          <h2>Rédactrice Freelance</h2>
     </div>      
</section><!-- FIN Index -->

Et voici, pour finir, le code CSS associé :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* CHARGEMENT DES POLICES (FONTS) */
@font-face {
    font-family: 'SourceSans3';
    src: url("../fonts/SourceSans3-VariableFont_wght.ttf") format("truetype")
}
@font-face {
    font-family: 'oldFont';
    src: url("../fonts/Old.ttf") format("truetype")
}
 
.index {
    background: url("../img/backgroundIndex.webp") no-repeat left fixed;
    background-size: cover;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}
 
.index-title{
    margin: auto;
    margin-top: 22%;
    color: #272f33;
}
 
.index h1 {
    margin: 0;
    font-size: 5em;
    line-height: 70px;
    text-align: center;
    font-family: "oldFont", sans-serif;
}
 
.index h2 {
    font-size: 2em;
    margin-top: 50px;
    margin-left: 50.55%;
    text-align: left;
    font-family: "SourceSans3", serif;
    font-weight: 500;
}

Je ne comprends pas comment un titre h1 tel que celui-ci peut autant impacter le chargement du site.

Si quelqu'un avait la gentillesse et la patience de m'expliquer de manière différente de la documentation car celle-ci ne m'apporte absolument rien...

Je vous remercie de m'avoir lu et je vous souhaite une très bonne soirée
Cordialement,
Derko.