Google Page Speed: cosa significano questi messaggi?

Question

Ho eseguito l'estensione di Google Page Speed ??Firefox su alcune pagine e in "selettori CSS efficienti" ha elencato varie cose che sono inefficienti nel mio CSS.

Ma alcuni dei messaggi sembrano un po 'enigmatici - cosa significano questi (in grassetto):

  

menu div # h3.soon piccolo
   Chiave tag con 2 selettori discendenti e ID troppo qualificato con tag e classe troppo qualificato con tag

     

table.data tr: nth-child (2n) td
   Chiave tag con 2 selettori discendenti e Classe eccessivamente qualificata con tag

     

table.data tr.disabled td
   Chiave tag con 2 selettori discendenti e Classe troppo qualificata con tag e Classe troppo qualificata con tag

Suppongo che pensino che i selettori dei discendenti siano cattivi, ma ci sono molti "eccessivamente qualificati" anche. Probabilmente non farò troppi sforzi per sistemare tutto questo (ce ne sono molti) ma sarebbe bello sapere cosa significa realmente Google qui!

Answer 1

Prima di tutto, non ho mai usato Page Speed, ma il messaggio non è così enigmatico se ti prendi un secondo per leggerlo.

  

menu div # h3.soon piccolo

     

Chiave tag con 2 selettori discendenti e ID con qualifica eccessiva   tag e classe eccessivamente qualificati con   tag

Chiave tag con 2 selettori discendenti: quanti piccoli tag hai che non saranno presto contenuti in un altro tag con classe? Nessuna? Il nesting CSS sarebbe totalmente inutile in questo caso.

ID troppo qualificato con tag: #menu non deve essere anteposto con div. Molto probabilmente non hai altri tag nel tuo markup con il menu ID (non dovresti, è un ID!), Quindi anteponi il menu con div in ridondante.

Classe eccessivamente qualificata con tag: .on presto non è necessario anteporre a h3. Molto probabilmente non avrai nessun altro tag nel tuo markup con classe presto diverso dai tag h3, quindi anteporre .soon con h3 non è necessario.

Gli altri messaggi seguono in modo simile.

-Stephen

Answer 2

Stephen l'ha detto bene.

Il motivo per cui stanno segnalando i tuoi selettori è che le regole CSS sono abbinate da destra a sinistra.

La preparazione di un ID con un elemento (come nel contenuto div #) non è necessaria perché il browser ha già abbinato il selettore quando raggiunge "div". Ma il browser è ancora costretto a valutarlo.

I selettori discendenti sono costosi perché il browser deve verificare tutte le istanze dell'elemento dom a cui fa riferimento il selettore più a destra rispetto a tutti i possibili antenati. Discendenti multipli aggravano la penalità di prestazione.

Detto questo, il guadagno in termini di prestazioni ottenuto dall'ottimizzazione dei selettori (nella maggior parte dei casi) è trascurabile.

Answer 3

Sta dicendo che non c'è motivo di usare il tag dato che dai una classe, quindi lo stai già limitando e deve fare una ricerca extra.

Ad esempio:

div#menu h3.soon .small

Qui non c'è motivo di iniziare con div poiché vedrai presto la classe piccola in classe in un tag h3 sotto l'elemento html con menu id.

Stanno suggerendo qualcosa del genere

#menu .soon .small {...}

o persino

#menu {...}

.soon {...}

.small {...}