Éliminez les ressources qui bloquent le rendu

flexi2202 · 18 Septembre 2023

Bonjour à tous,

Cela fait des jours que j'essaie de résoudre un problème avec Google PageSpeed Insights.

Lorsque je scanne ma page, j'obtiens ce message :

"Éliminez les ressources qui bloquent le rendu.

Des ressources bloquent la première visualisation (first paint) de votre page. Envisagez de diffuser des feuilles de styles JS/CSS essentielles en ligne et de différer la diffusion de toutes les feuilles de styles JS/non essentielles.

Pour l'instant, l'en-tête de mon site est le suivant, en haut de la balise <head>

Code:

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" defer>

mais j'ai deja essaye une multitude de chose sans que rien ne fonctionne

Code:

       <script>
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css';
  document.head.appendChild(link);
</script>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" media="print">


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" async>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" defer>

Furtif · 18 Septembre 2023

Bah, perso je commencerai par mettre mes css, js, sur mon serveur plutot que d'aller les chercher sur un serveur tiers...

rick38 · 18 Septembre 2023

Les fichiers CSS sont forcément bloquants.
Utilisez PurgeCSS pour enlever de bootstrap.min.css tout ce qui ne sert à rien, vous passerez de 200 Ko à 40 Ko et PageSpeed ne vous dira plus rien.
Je sais, je l'ai fait.

Quant au jquery-3.6.0.min.js, il n'est plus nécessaire pour Bootstrap 5, donc à enlever.
Mais sinon les .js faut mieux les charger en asynchrone, attribut async dans la balise script.

flexi2202 · 19 Septembre 2023

Merci pour les reponses je regarde a cela des que j'ai fini de remettre mon site a niveau
encore merci

Éliminez les ressources qui bloquent le rendu

Fichiers joints