Sans savoir ce que votre CSS fait et vos raisons pour l'arranger comme celui-ci et comment/où son être utilisé et ce qui se fait avec la page il n'y a pas de bonnes réponses. Tout ce que PageSpeed vous dit, c'est qu'il y a des sélecteurs très efficaces qui vous permettent d'accéder très rapidement à un élément et d'autres qui sont moins efficaces et qui obligent le moteur CSS à parcourir un peu avant de trouver ce que vous voulez. Les deux vont appliquer le style que vous voulez, un type prend moins de cycles CPU que l'autre, mais dans la plupart des cas, nous parlons de quelques cycles de CPU ici et là et pas de secondes. La machine sur laquelle tourne le navigateur et le navigateur lui-même ont nettement plus d'impact que les sélecteurs eux-mêmes. Donc, cela signifie simplement que dans votre CSS, vous avez certains des sélecteurs moins efficaces. Par exemple, vous pouvez écrire des règles comme celles-ci (avec des éléments imbriqués) et vous en avez clairement certaines.
ul li {color: blue;}
ol li {color: red;}
mais aussi et plus efficacement que vous auriez pu faire cela (un seul sélecteur de classe) - mais vous devez modifier votre marge pour soutenir l'ajout de ces classes sur le li et dans le processus d'augmenter la 'poids' de votre page.
.ul-li {color: blue;}
.ol-li {color: red;}
pas que cet exemple assez trivial fera une différence significative, soit de façon, mais quand rendre la vitesse est vitale et vous travaillez localement sur un réseau rapide ou avec des machines anciennes/moins puissants, alors il peut payer. Si vous devez envoyer des connexions très lentes à des navigateurs distants plutôt que d'augmenter la charge utile que vous envoyez, cela risque d'empirer les choses. Fondamentalement, chaque fois que vous mettez l'un de ceux-ci, il est plus inefficace que de ne pas le faire.
Rules with descendant selectors
Rules with child or adjacent selectors
Rules with overly qualified selectors
Rules that apply the :hover pseudo-selector to non-link elements
sélecteurs trop qualifiés sont lorsque vous utilisez plusieurs sélecteurs pour arriver au même endroit
div.box-default div.box-caption .box-title a
effectue les opérations suivantes donnent les mêmes résultats, ou de nombreux box-carreaux probablement sur une page?
.box-title a
C'est aussi une quantité importante de travail pour construire des fichiers CSS et des balisages qui n'en ont aucun.
pour plus d'informations sur ce que ceux-ci sont (avec des exemples de type portée) s'il vous plaît consulter les liens suivants:
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
http://www.w3.org/TR/CSS2/selector.html#child-selectors
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
qu'est-ce que cela a à voir avec FIX? –