Elimina JavaScript e CSS che bloccano il rendering nei contenuti above the fold

Sto costruendo un sito Drupal 7. Questi sono alcuni dei moduli che utilizzo: Adaptivetheme (tema), pannelli Viste e contenuto, Pannelli, Mini pannelli, Pannelli ovunque, Gestione pagine, Superfish per menu, Addthis, Scelto (menu a discesa).

Per migliorare le prestazioni del mio sito e la gestione dei file CSS e JS sto usando il modulo Advagg .

Quando eseguo il test di Pagespeed di Google , visualizzo il seguente errore come "Dovrei risolvere":

Elimina JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold La
tua pagina ha 6 risorse di script di blocco e 8 risorse di CSS di blocco. Ciò causa un ritardo nel rendering della pagina.
Nessuno dei contenuti above the fold sulla tua pagina potrebbe essere reso senza attendere il caricamento delle seguenti risorse. Prova a rinviare o caricare in modo asincrono le risorse di blocco o incorporare le parti critiche di tali risorse direttamente nell'HTML.

Queste sono le informazioni fornite da Google:

Esiste un modo per modificare le impostazioni del modulo Advagg o del core Drupal e risolvere questo problema?

C'è un altro modo per raggiungere questo obiettivo?

Aggiornamento - dopo aver implementato le modifiche in base alla risposta di mikeytown2 ho ricevuto il seguente messaggio sul test di Pagespeed di Google:

Elimina JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold La
tua pagina ha 6 risorse di script di blocco e 4 risorse di CSS di blocco. Ciò causa un ritardo nel rendering della pagina.
Nessuno dei contenuti above the fold sulla tua pagina potrebbe essere reso senza attendere il caricamento delle seguenti risorse. Prova a rinviare o caricare in modo asincrono le risorse di blocco o incorporare le parti critiche di tali risorse direttamente nell'HTML.

7 theming javascript performance

— EB84
fonte

Non sono sicuro di advagg, ma per core non c'è niente da fare, non ci sono impostazioni come questa. Per advagg non sono riuscito a vederli, ma mi sono fermato a usarlo abbastanza presto comunque. Forse ci sono impostazioni come questa ora. Personalmente pubblicherei una richiesta di supporto nella loro coda di problemi, chiedendo questo, e se il manutentore dirà che non sono disponibili, cambierebbe in richiesta di funzionalità.

— Mołot,

La tua domanda è troppo ampia. Il tuo sito utilizza CSS e JS, così come ogni altro sito su Internet. Finché viene mantenuto l'ordine in cascata dei CSS, ci sono poche ragioni per cui non è possibile aggregare tutti i CSS in 1 file. Finché il tuo JS è incapsulato ok non c'è motivo per cui non possa essere unito in 1 file (come esempio estremo). Se è possibile fornire dettagli su quali file / risorse CSS e JS sono richiesti dalla pagina; potresti essere in grado di ottenere risposte più informate.

— Tenken

@tenken come è troppo ampio? Ha CSS e JS collegati in modo bloccante e li vuole in modo non bloccante. Questi modi sono praticamente spiegati ( da Google, ad esempio come OP si riferisce alle raccomandazioni di Google Pagespeed). Il tuo commento non ha nulla a che fare con il problema OP richiesto.

— Mołot,

tutti i file css e js collegati si bloccano a meno che il loro codice incorporato o l'uso asyncnon sia supportato dai vecchi browser. Ad esempio, l'aggregazione Drupal predefinita include <link>tag per tutti i tuoi CSS. Se il tuo sito CSS o JS è troppo complesso avrai sempre questo problema. Se costruisci il tuo sito correttamente puoi aggregare i file in modo sicuro. Senza informazioni sulle dipendenze dei file, i dettagli della domanda sono troppo ampi: un modulo non può mai risolvere il suo problema; è tutto su come sono scritti CSS e JS e il suo ordine di inclusione e complessità. non ha mai detto di voler non bloccare, il tuo presupposto è quello che vuole.

— Tenken

@tenken Ho aggiornato la mia domanda e ho fornito maggiori informazioni sui moduli, spero che ti possa aiutare a capire quali CSS e JS utilizzo.

— EB84

Risposte:

Il README ha una guida su come eseguire questa operazione utilizzando l'attuale versione 7.x-2.31 + di AdvAgg . Vedi anche questa pagina wiki sul gruppo ad alte prestazioni . La maggior parte dei siti può ottenere un punteggio 100/100 perfetto su https://developers.google.com/speed/pagespeed/insights/ . Di seguito le istruzioni su come ottenerlo per una nuova installazione di AdvAgg.

Assicurati di controllare il sito dopo ogni sezione per assicurarti che la modifica non abbia rovinato il tuo sito. Le modifiche in AdvAgg Modifier sono in genere le più problematiche ma offrono i maggiori miglioramenti.

Aggregazione CSS / JS avanzata

Vai a admin/config/development/performance/advagg

Seleziona "Usa impostazioni consigliate (ottimizzate)"

AdvAgg Compress Javascript

Installa AdvAgg Compress Javascript se non abilitato e vai a admin/config/development/performance/advagg/js-compress

Seleziona JSMin se disponibile; altrimenti seleziona JSMin +
Seleziona Rimuovi tutto (file più piccoli)
Fare clic sul collegamento di compressione batch per elaborare questi file

AdvAgg Async Font Loader

Installa AdvAgg Async Font Loader se non abilitato e vai a admin/config/development/performance/advagg/font

Seleziona File locale incluso in aggregato (versione: XXX). Se questa opzione non è disponibile, seguire le indicazioni riportate di seguito sotto le opzioni su come installarla.
Seleziona "Usa localStorage in modo che il flash di testo non modificato (FOUT) avvenga una sola volta."
Seleziona "Imposta un cookie in modo che il lampo di testo non modificato (FOUT) avvenga solo una volta."

AdvAgg Bundler

Installa AdvAgg Bundler se non abilitato e vai a admin/config/development/performance/advagg/bundler

Impostazioni HTTP / 2.0

In "Numero target di pacchetti CSS per pagina" selezionare 25
In "Numero target di pacchetti JS per pagina" selezionare 25
In "Logica di raggruppamento" selezionare "Dimensione file"

Impostazioni HTTP / 1.1 (impostazione predefinita)

In "Numero target di pacchetti CSS per pagina" selezionare 2
In "Numero target di pacchetti JS per pagina" selezionare 5
In "Logica di raggruppamento" selezionare "Dimensione file"

25 bundle contro 2 e 5 hanno a che fare con la memorizzazione nella cache del browser. Più file equivale a una migliore possibilità che il browser abbia quel combo nella sua cache, ma più file significa che più connessioni vengono stabilite e aperte in HTTP 1.1. Usa 2 per CSS poiché questo numero non attende nuove connessioni; JS è 5 poiché la maggior parte dei browser ha un limite di connessioni simultanee di 6. Questo numero per i bundle è stato scelto dopo molti test. In HTTP 2.0 esiste una connessione di streaming e la penalità per più file CSS e JS è quasi inesistente; pertanto l'ottimizzazione per la cache del browser è la scelta migliore; quindi 25 dovrebbero essere usati per CSS e JS quando servono HTTP / 2.0.

AdvAgg Relocate

Installa AdvAgg Relocate se non abilitato e vai a admin/config/development/performance/advagg/relocate

Seleziona "Usa impostazioni consigliate (ottimizzate)"

Modificatore AdvAgg

Installa AdvAgg Modifier se non abilitato e vai a admin/config/development/performance/advagg/mod

Seleziona "Usa impostazioni consigliate (ottimizzate)"

Generazione di file CSS critici

Vai su https://www.sitelocity.com/critical-path-css-generator e inserisci tutte le landing page necessarie per i CSS critici; la top 10 di solito è un buon inizio. Se hai Google Analytics, questo ti mostrerà come trovare le tue landing page principali https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages o per Piwik https: //piwik.org/faq/how-to/faq_160/ . Se non sai da quale pagina iniziare, fai la homepage del tuo sito. Puoi anche usarlo per generare CSS https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=it

I nomi di file e i percorsi seguenti sono per il tema "bootstrap"; iniziano tutti con sites/all/themes/bootstrap/critical-css/; nel tuo tema crea la critical-css/directory. La directory successiva si basa sull'utente; anonymous/, all/o authenticated/può essere utilizzato.

La directory successiva può essere urls/o type/. Guardando urls/; front è un caso speciale per la prima pagina, tutti gli altri percorsi usano current_path () come directory e nome file con l' .cssaggiunta alla fine; Vedi https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

Guardando type/questo è un caso speciale per i tipi di nodo. Usa il nome della macchina e aggiungi .cssalla fine. A qualsiasi nodo di questo tipo verrà quindi applicato e integrato questo file CSS critico. Di seguito sono riportati alcuni esempi che mostrano come funziona.

percorsi dei file di esempio validi per la pagina "anteriore": sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

percorsi di file di esempio validi per la pagina "node / 1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

percorsi di file di esempio validi per il tipo di nodo di "pagina": sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Se vuoi un modo automatico per generare questi file css, fourkitchens ha un eccellente articolo su come configurarlo: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-tema

— mikeytown2
fonte

Questa è un'ottima panoramica su come usare AdvAgg! Grazie. Forse questo testo potrebbe essere l'inizio di una pagina di "documentazione" collegata per la pagina del tuo progetto :)

— tenken

Già fatto :) drupal.org/node/2189523#comment-8594829

— mikeytown2

@ mikeytown2 grazie per l'ottima risposta. Ho implementato tutte le modifiche e ho aggiornato la domanda. Ho ottenuto un punteggio leggermente più alto - grazie!

— EB84

Osservando l'output sembra che non hai selezionato tutte le caselle in Ottimizza ordinamento JavaScript nella advagg/modpagina E / O non hai spostato tutto il JS nel piè di pagina. Inoltre, se potessi vedere la fonte completa delle pagine che generalmente aiuta con i consigli (basta link al tuo sito).

— mikeytown2,

Grazie per aver fornito tali informazioni. Se vuoi meno file CSS sulla pagina vai su advagg / bundler e cambia il valore CSS da 4 in giù a 1. Questo ti darà un punteggio migliore ma tieni a mente i commenti che ho fatto sopra a riguardo. Sembra che il tema adattivo usi drupal_add_html_head () per aggiungere js condizionali nel browser, dovrò verificare che sia ciò che sta accadendo; significa che più di 1 tema ha bisogno di drupal.org/node/2217451 . Inoltre ho creato questo problema per risolvere il blocco del rendering css drupal.org/node/2223267

— mikeytown2

Non otterrai mai punteggi veramente alti con i moduli drupal precompilati, l'unico modo per raggiungere questo obiettivo è frequentare e analizzare attentamente ciascuno dei suggerimenti forniti dallo strumento di velocità di Google , affrontando ciascuno di essi in modo indipendente.

Alcune cose che ho fatto per ottenere 95 in un sito di notizie molto attivo , che quando ho scritto questo, hanno ottenuto un punteggio migliore di nytimes (ora non lo fa):

[script di blocco] Ritardare l'esecuzione di script di terze parti come sharethis, widget di facebook, google plus, ecc., da eseguire solo dopo il rendering completo della pagina. Ciò ha richiesto alcune semplici sostituzioni di stringhe sull'output di html.tpl.php per catturare quegli script e metterli in coda per la successiva esecuzione.
[script di blocco] Memorizza la variabile $ scripts di html.tpl.php (con json_encode) in una variabile javascript per metterli in coda per l'esecuzione dopo il caricamento della prima pagina. Questo è innaturale, ma necessario. È stato necessario risolvere alcuni problemi specifici del browser.
[blocking css] Implementato qualcosa di simile alla tecnica di Keith Clark , ma con rel = "prefetch". Ciò introduce la necessità di risolvere il FOUC .
[Minificazione e compressione] Esternalizzare la compressione e la minificazione su un server di distribuzione dove posso usare imagemagic, yui-compressore, pngoptim e altre cose per superare quelle regole, senza trasformare l'installazione drupal in un disordine ingestibile.

— jacmkno
fonte