Inlining CSS en HTML pour la vitesse de la page

J'essayais d'optimiser la vitesse de mon site Web pour Google PageSpeed Insight. Le test de vitesse s'est plaint de mes fichiers CSS externes, j'ai donc essayé de les intégrer dans le document HTML, ce qui a entraîné une augmentation significative de la vitesse de la page. Maintenant, mes styles CSS ne sont pas exactement minuscules. J'ai inséré environ 12 Ko de code CSS, ce qui fait que chaque page est plus grande de 12 Ko. Donc, en substance, cela devrait ralentir la vitesse de la page pour tous les utilisateurs qui regardent plus d'une page.Inlining CSS en HTML pour la vitesse de la page

Je sais que Google ne recommande que l'insertion de «petites» feuilles de style. Je ne considérerais pas vraiment 12 Ko comme étant très petit. Je ne suis donc pas très content de cette solution et je vais probablement restaurer ma version précédente.

Existe-t-il des recommandations sur le moment de l'intégration ou non?

Merci

Source

2016-02-19 Konstantin

pour obtenir 100 là-bas, vous devrez peut-être inline cela, je l'ai fait aussi pour 30k-60k IIRC. – YOU

Utilisez-vous des feuilles de style supplémentaires, telles que les polices google, ou toute autre feuille externe personnalisée qui renvoie vers une URL réelle? –

Sachez que si plusieurs pages de votre site Web utilisent les mêmes styles CSS, il peut être judicieux de les diffuser dans un fichier externe, car le navigateur conserve normalement ce fichier dans le cache et n'a pas besoin de le télécharger à nouveau. Inlining styles signifie effectivement les télécharger à nouveau pour chaque page html. – GavinBrelstaff

Le meilleur moyen est d'utiliser des fichiers CSS externes, mais les compresser, puis en utilisant les version compressée. Cela réduira considérablement la taille des fichiers et augmentera également la vitesse de la page.

Source

2016-02-19 10:54:06

Merci, je suppose que c'est ce que je vais faire. – Konstantin

Dans le cas de fichiers CSS volumineux, Google recommande d'insérer uniquement les styles requis pour le contenu au-dessus du pli, et de différer le chargement des styles restants jusqu'au contenu au-dessus de la ligne de flottaison.

Pour plus d'informations, consultez les documents Pagespeed Insights.

Source

2016-02-19 10:55:20 reinder

Ce sujet est actuellement débattu, les gars de Google recommandent d'inclure le CSS au-dessus de la ligne critique dans votre HTML pour optimiser votre site et avoir une peinture initiale rapide. Cela va cependant à l'encontre du principe d'un separation of concerns.

La majorité de votre CSS reste dans une feuille de style compressée externe, mais certaines grandes pièces de base de votre mise en page/en-têtes etc. seront en ligne. Vous pouvez sélectionner manuellement ces styles ou utiliser un générateur de CSS critiques like this one

The latest advice from Jake Archibald at Google est inline CSS critique, puis diviser les feuilles de style comprimés dans des composants qui sont chargés lorsque le composant lui-même est chargé dans le balisage:

<link rel="stylesheet" href="/site-header.css"> 
    <header>…</header> 

    <link rel="stylesheet" href="/article.css"> 
    <main>…</main> 

    <link rel="stylesheet" href="/comment.css"> 
    <section class="comments">…</section>

Source

2016-02-19 11:23:32 Pixelomo

Inlining CSS en HTML pour la vitesse de la page

Répondre

Questions connexes