Come controllare l’ordine della combinazione di stili e script enqueued – problema di velocità del sito

Sappiamo che usando wp_head() e wp_footer() tutti gli script e gli stili sono accodati usando wp_enqueue_styles e wp_enqueue_scripts hook. Quello che facciamo è accodare i nostri fogli di stile e script usando functions.php . Analogamente, anche i plugin WordPress accodano i loro fogli di stile e script usando lo stesso metodo.

Quindi, alla fine ci sono molti stili e script in coda nell’intestazione o nel piè di pagina. Che cosa consiglia Google PageSpeed ​​è:

Ottimizza l’ordine di stili e script – Google Page Speed

Sappiamo che wp_enqueue_script() e wp_enqueue_style() offrono un parametro $deps , in cui possiamo definire la profondità o la priorità dello script o del foglio di stile. Ma questo riguarda solo gli script e gli stili, non in entrambi. Quindi, con un carico combinato di script e fogli di stile dal tema, e / o tema figlio e / o plug-in e / o API di terze parti ecc. Come possiamo permettere a WordPress di accodarli tutti in un modo tale che la velocità del sito migliora con la qualità di un sito web del suono?
Oppure, sono a prova di proiettile per echeggiare gli stili prima, rispetto agli script?

Solutions Collecting From Web of "Come controllare l’ordine della combinazione di stili e script enqueued – problema di velocità del sito"

Cercherò di rispondere nel miglior modo ansible dato che non esiste un metodo antiproiettile.

Spetta allo sviluppatore progettare realmente come viene dipinto il DOM, WordPress non può indovinare su cosa un tema / plugin / utente sta per fare, può semplicemente fornire alcune linee guida e strumenti di base. Il problema, naturalmente, è quando molti plug-in vengono aggiunti a un sito, puoi avere un pasticcio tra le mani. Questo è ciò che separa una struttura del sito ben realizzata da uno in cui si è frettolosamente fermato.

$deps non definisce realmente la priorità, fornisce solo il contesto di dipendenza. È ansible definire la priorità nel hook dell’azione utilizzando il parametro $priority . Non c’è niente di sbagliato nell’usare più wp_enqueue_scripts con diverse impostazioni di $priority .

Alcuni suggerimenti.

  • Crea una struttura di carico per il tuo css / js, annotalo, analizzalo usando Strumenti per sviluppatori, Firebug, ecc. Per verificare come viene dipinta la pagina.
  • Utilizzare l’azione wp_enqueue_style per wp_enqueue_style
  • Usa $priority e $in_footer per le tue azioni
  • Carica javascript in modo asincrono se ansible, e carica il javascript in base alle esigenze.
  • Cache tutto

Esempio di controllo del caricamento del frame negli strumenti di sviluppo, il mouse su questi dettagli fornisce più informazioni sullo stack di chiamata. inserisci la descrizione dell'immagine qui