web-dev-qa-db-fra.com

Google Pagespeed demande d'éliminer les fichiers "au-dessus du pli" nécessaires au rendu de la page.

J'ai dirigé mon site dans Google Pagespeed et il est revenu

"Éliminer le code JavaScript et CSS bloquant le rendu dans le contenu au-dessus du pli"

Le problème est que ces actifs de "blocage du rendu" sont requis pour le rendu. Un péché:

  • Google Fonts CSS (Google CDN)
  • BootStrap CSS (MaxCDN)
  • Site CSS (Local)

Je suis confus. Comment puis-je rendre ma page sans mon fichier css.css, les fichiers bootstrap et les polices google?

performancepage-speedrender
5
Bar Akiva

Perte de temps ... le plus souvent ... insight ... pas nécessaire.

Pagespeed Insights de Matrix et de Google n'est pas obligatoire et ne vous récompensera pas avec un classement Google de niveau 9 d'écureuil secret.

Google, Bing et vos utilisateurs ne se soucient pas de la matrice de scoring de pages, pourquoi le feraient-ils? en fin de compte, il s’agit de la rapidité avec laquelle la page se charge et c’est ce que les utilisateurs et les moteurs de recherche récompensent les sites.

Le meilleur impact de la vitesse d'un site Web est un hébergement décent ...

Un bon hébergement a le plus grand impact sur la vitesse de la page en supposant que vous n’ayez aucun problème fondamental. Des éléments tels que le blocage du rendu, l’expiration et les autres informations souvent signalées ne sont pas des problèmes fondamentaux. La plupart ne réduisent pas le débit de la page à un niveau inacceptable.

En fait, si vous regardez les 100 meilleurs sites au monde, ils sont RAPIDES, mais leur score est extrêmement faible en termes d’analyses pageSpeed.

Utilisez un outil de test avec une réelle signification ...

Je vous recommande d'utiliser un outil de test approprié et WebPagetest en utilisant plusieurs passes avec plusieurs serveurs de votre région cible. Visez moins de 2 secondes, idéalement moins de 1,5 seconde et moins de 1 seconde est extrêmement bon.

Qu'est-ce que le blocage de rendu?

Le blocage du rendu est l'endroit où une ressource est appelée avant le contenu réel. Attendre le téléchargement d'une ressource peut ralentir le test de la page. Ce processus est souvent appelé chargement des ressources "au-dessus du pli" et la résolution du problème consiste à placer cette ressource ". en dessous du pli (après le contenu).

Pour résoudre ce problème, vous devez charger les polices de manière asynchrone, ce qui signifie qu'elles ne font pas partie du <head> </head>, pour une solution, reportez-vous au chapitre suivant.

Résolution du blocage du rendu des polices de caractères Google

Si vous souhaitez obtenir le 100/100 le plus proche dans Google insight ou d'autres sites Web basés sur Matrix, vous pouvez résoudre le problème de blocage du rendu des polices Google en utilisant Webfont Loader .

Ce qui ressemble à ceci:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Autres fichiers CSS

Si vous avez d'autres ressources, telles que des fichiers CSS ou JS, chargées en interne ou en externe, vous devez les charger en bas de la page. Cela ne comprend pas les scripts Java essentiels (par exemple, modernizr ou CSS de base sur votre site (par exemple, style.css). La plupart des fournisseurs fourniront une sorte d’API pour le chargement de CSS via JavaScript au-dessous du pli.

Malheureusement, tous les fournisseurs de CSS ne disposent pas d'une API ou n'offrent pas une solution élégante; vous devez donc développer et déployer votre propre code JavaScript qui chargera la ressource CSS au bas de la page.

Exemple de chargement de fichiers CSS au bas de la page à l'aide de JavaScript

Ci-dessous est un script qui chargera à peu près n'importe quel fichier CSS que vous voulez en bas, que ce soit interne ou externe, ce n'est pas un problème. Placez-le avant </body>

<script type='text/javascript'>
//<![CDATA[ 
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("path/to/font-awesome/css/font-awesome.min.css");
//]]> 
</ Script>
4
Simon Hayter