- Home
- Categorie
- Digital Marketing
- Posizionamento Nei Motori di Ricerca
- ottimizzazione sito pagespeed insights e css
-
ottimizzazione sito pagespeed insights e css
Ciao a tutti
l'analisi di alcune pagine del mio sito tramite lo strumento pagespeed insights mi restituisce il seguente risultato:
"La tua pagina presenta 1 risorse CSS di blocco. Ciò causa un ritardo nella visualizzazione della pagina.
Non è stato possibile visualizzare alcun contenuto above-the-fold della pagina senza dover attendere il caricamento delle seguenti risorse. Prova a rimandare o a caricare in modo asincrono le risorse di blocco oppure incorpora le parti fondamentali di tali risorse direttamente nel codice HTML.
Ottimizza la pubblicazione CSS degli elementi seguenti:....etc.....etc...."Ho sempre saputo che è meglio mettere i css su fogli di stile esterni ma ora lo strumento di google sembra proprio affermare il contrario.
Qual è la verità?
Grazie a tutti
-
Ciao giuliorn71.
Puoi postare il dominio? Per rendermi conto ...
F.
-
Inserisci il css per renderizzare la parte alta della pagina inline, e deferizza tutto il resto
-
Che cosa significa?
-
Css inline = codice Css all interno della pagina, in questo modo risparmi 1 chiamata esterna per il codice necessario alla visualizzazione della parte alta della pagina
Css deferizzato = inserisci il restante Css in una file esterno da chiamare alla fine della pagina in maniera
-
Ok grazie. Adesso mi è più chiaro. Quale parte del codice css devo inserire inline e quale deferizzarlo?
-
La parte di codice da inserire inline è quella necessaria al rendering della pagina visibile above the fold che puoi trovare sia a mano che con l'aiuto di chrome, una migliore spiegazione la puoi trovare sul seoblog di Giorgio Tave a questo indirizzo: http://seoblog.giorgiotave.it/caricare-jquery-asincrono-wordpress/3963
Ciao
Enea
-
Sto leggendo gli articoli di Enea e Maurizio e sono davvero interessanti.
A chi atterra su questo topic consiglio di leggerli.
Tags: WordPress, Performance, jQuery, Page Load Time, caricamento asincrono.
F.
-
@overclokk said:
La parte di codice da inserire inline è quella necessaria al rendering della pagina visibile above the fold che puoi trovare sia a mano che con l'aiuto di chrome, una migliore spiegazione la puoi trovare sul seoblog di Giorgio Tave a questo indirizzo:://seoblog.giorgiotave.it/caricare-jquery-asincrono-wordpress/3963
Ciao
EneaOk grazie, ora ho capito.
Io non uso cms ma il codice l'ho scritto io. Il sito tutto sommato è semplice e i fogli di stile .css esterni pesano mediamente 7-8 kb.
Inserendo parte del codice inline, il file .css esterno chiaramente si alleggerirebbe e potrà pesare circa 2-3 kb. E' conveniente richiamare un file esterno per soli 2-3 kb?
Forse mi conviene inserire tutto il codice inline?
Altra domanda:
Visto che ho anche impostato il caching del browser tramite file htaccess, una volta richiamato il file all'accesso del sito, dovrebbe rimanere in memoria nel caching del browser per il tempo da me stabilito. Quindi la chiamata esterna non verrebbe risparmiata? Quindi, forse, conviene lasciare tutto così come è?
Tieni conto che ho diverse tipologie di pagine ognuna delle quali richiama un file .css esterno.
lo stesso file .css esterno è richiamato da centinaia di pagine.
Grazie a tutti.
-
Ovviamente il sistema funziona anche per pagine html non generate da cms.
Quando navighi su un sito la seconda pagina che visiti è molto più veloce della prima proprio perché avendo gli script in cache il browser non li deve riscaricare nuovamente, per avere una migliore idea del funzionamento ti consiglio di fare dei test con questo strumento: http://www.giorgiotave.it/speedoo/ analizzando i dati puoi verificare direttamente come funziona, e puoi anche vedere se conviene inserire il codice css inline oppure farlo caricare esternamente.
Quello che ho imparato dalla mia esperienza è che bisogna sempre sperimentare e trovare il giusto setup.
Ciao
Enea
-
Perfetto. Grazie.
Farò qualche test e deciderò cosa fare.
Grazie di nuovo.
