Google Pagespeed Insight: “Optimiser CSS Livraison de la suivante”. Comment?

J'ai testé mon site wordpress sur Google Page Speed, de la Perspicacité et il a marqué un 95/100. Il a suggéré que je devrais "Optimiser CSS Livraison" de 1 fichier css:

<link  type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />

Droit maintenant, il est assis dans le pied de page avec tous les codes javascript ci-dessous. Je l'ai déplacé en arrière entre les balise head et les mêmes résultats. Comment j'ai optimisé le css de la livraison du fichier css?

Ne ce fichier ont un tas de @import-t-il?
Aussi, 95 est un très bon score. Vous devez garder cela en perspective et diriger vos efforts vers des améliorations qui seront effectivement améliorer sensiblement l'expérience utilisateur de votre site.
non, c'est juste un tout dans un fichier css (style.css + d'impression.css + mobile.css + futurecss.css = 1 gros fichier css).
Si vous êtes à la concaténation de tous ces fichiers en un seul fichier?
non, il suffit de copier et coller. pas de @import.

OriginalL'auteur lee | 2015-02-05

  1. 4

    Dans le cas d'un grand fichier CSS, vous aurez besoin d'identifier et inline CSS nécessaire pour le rendu ci-dessus à la fois de contenu et de différer le chargement du reste de styles jusqu'à ce que après la au-dessus du pli de contenu.

    Prises à partir de: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

    Ses pas mieux fait de mettre tous les css ensemble. Vous devriez appeler d'abord le style de ce qui est nécessaire pour le rendu et ensuite appeler cette grande feuille de style de la vôtre.

    Et si vous voulez savoir comment faire pour reporter les feuilles de style et bien c'est comment:

    CSS optimisation de la distribution: Comment reporter css chargement?

    Espère que j'ai pensé à vous 🙂

    OriginalL'auteur Jonid Bendo

  2. 0

    95/100 est un excellent score. Vous êtes au point où plus de travail pour frapper 100 va vous donner des rendements décroissants par rapport à l'effort demandé pour y arriver.

    Mais si vous êtes à la mort, à l'approche de 100/100 vous aurez besoin de retirer le dessus du pli CSS à partir du fichier et de l'inclure dans une <style> bloc au sein de votre thème. Ensuite, vous pouvez tenir à distance sur le chargement du fichier CSS jusqu'à ce que le reste de la page est chargée et il ne sera plus rendu de blocage.

    Voici quelques infos que j'ai écrit sur la manipulation ci-dessus le pli CSS avec le WordPress Autoptimize plugin, y compris un JavaScript bookmarklet pour obtenir vous avez commencé à trouver au-dessus du pli CSS.

    Remarque: Vous devriez être en utilisant la wp_enqueue_style() fonction pour inclure ce script, plutôt que de l'inclure directement dans le pied de page. Découvrez cet article sur mon site pour voir comment mettre en file d'attente des scripts et des styles correctement.

    Bienvenue à Débordement de Pile! Veuillez noter que lorsque vous vous connectez à votre site web, vous devez explicitement le dire. Jetez un oeil à Comment ne pas être un spammeur.

    OriginalL'auteur jason_yingling