- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- inclusioni css in eccesso, cosa fare?
-
inclusioni css in eccesso, cosa fare?
Buongiorno,
avrei una domanda alla quale non ho mai dato una risposta definitiva:- in una pagina html includo sull'head uno sproposito di link a file css, es:
<head>
<link rel="stylesheet" href="/assets/css/bootstrap.css">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/css.css">
...etc...
...etc...
...etc...... e cosi per 20 inclusioni ...
...etc...
</head>... ma in definitiva ne utilizza solo la metà e della metà utilizzata, usa solo qualche classe, il resto è da considerare spazzatura.
Secondo voi in che modo impatta nella pagina e quanto?
Sarebbe bene fare una scrematura in questi casi, oppure dato che non vengono portati quà sul browser fisicamente, non impattano come peso e quindi possiamo lasciarli la, onde complicarsi la vita a fare la cernita delle classi utilizzate??Vi ringrazio molto.
-
Come mai hai tutti questi link ai css? E' un template di quelli che ci sono tante cose ma alla fine te ne servono giusto la metà?
-
@w_t said:
in che modo impatta nella pagina e quanto?
Ciao, come regola meno file ci sono, e più piccoli sono, migliori saranno le prestazioni.
Si devono comunque accettare dei compromessi, se hai bisogno di jQuery solo questo a seconda della versione pesa 90 / 120 Kbyte, e userai una piccolissima parte delle sue librerie.
Stessa cosa se la struttura del tuo sito si basa su Bootstrap, solo bootstrap.css può pesare "parecchio" e in molti casi se ne usa una piccolissima parte, tutto il resto è zavorra anche se in gran parte aiuta il browser che riesce a caricare dinamicamente componenti e classi che ti servono.Puoi anche usare uno dei tanti metodi, ma alcuni sono molto complessi, per ridurre il peso, questo è il metodo più semplice per Bootstrap 3, selezioni solo i componenti che ti occorrono, griglie, classi varie, poi esporti:
getbootstrap.com/docs/3.3/customize/
Se il tuo sito carica tanti file CSS inizia sicuramente a disattivare quelli che non servono.
Di quelli che ti restano calcola il peso complessivo, se il totale è di circa 200 / 300 kByte (meno è e meglio è) potresti anche unificarli tutti in un unico file CSS.
E' vero che i browser moderni parallelizzano ma è anche vero che una sola richiesta è meglio.Fai la stessa cosa con tutti i file JS, inizia un po' alla volta a disattivare quelli che non usi, qui però dovrai usare l'Inspector di Chrome o qualsiasi altro browser per leggere in Console quali sono gli errori. Solitamente non è molto complesso, se disattivi un JS che si occupa di alcune animazioni esisterà sicuramente un file JS (script, main, etc,) che contiene l'inizializzazione, opzioni, etc, di quel file. Quindi se per esempio disattivi AOS.js l'Inspector ti segnalerà che un file tenta di inizializzarlo ma non lo trova, basterà disattivare le inizializzazioni. E così via per tutti i JS che escluderai.
Anche qui se alla fine il totale dei file non è eccessivo puoi unificarli tutti in un unico file.
Infine per spingere ancora di più l'ottimizzazione procedi con il Minify, per i file JS puoi usare uno dei tanti servizi online:
skalman.github.io/UglifyJS-online/
refresh-sf.com/per i css:
csscompressor.com/
cssminifier.com/Procedi sempre con molta cautela, fai test e prove su computer, cellulari tablet.
,
-
In aggiunta agli ottimi suggerimenti di hub, per la minimizzazione e l'unificazione ti consiglierei Koala, che è molto pratico e veloce perché esegue il lavoro in tempo reale sul tuo PC, senza bisogno di utilizzare tool esterni: koala-app.com
-
-
@criss345 said:
Come mai hai tutti questi link ai css? E' un template di quelli che ci sono tante cose ma alla fine te ne servono giusto la metà?
la metà è dire troppo, il 10% ne usa, il resto è tutto quello che serve agli effetti, stili etc..., che in questo caso non vengono utilizzati, li include tutto ugualmente.
