+ Rispondi alla Discussione
Risultati da 1 a 6 di 6

inclusioni css in eccesso, cosa fare?

Ultimo Messaggio di w_t il:
  1. #1
    w_t è offline
    User
    Data Registrazione
    Mar 2008
    Località
    Arezzo
    Messaggi
    109

    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.

  2. #2
    User
    Data Registrazione
    Feb 2018
    Località
    roma
    Messaggi
    72
    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à?

  3. #3
    hub
    hub è online
    User
    Data Registrazione
    Apr 2015
    Località
    Varese
    Messaggi
    519
    Citazione Originariamente Scritto da w_t Visualizza Messaggio
    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.

    ,

  4. #4
    Utente Premium L'avatar di altraSoluzione
    Data Registrazione
    Jun 2017
    Località
    Roma
    Messaggi
    334
    Segui altraSoluzione su Twitter Aggiungi altraSoluzione su Google+ Aggiungi altraSoluzione su Facebook Aggiungi altraSoluzione su Linkedin Visita il canale Youtube di altraSoluzione
    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

  5. #5
    hub
    hub è online
    User
    Data Registrazione
    Apr 2015
    Località
    Varese
    Messaggi
    519
    Citazione Originariamente Scritto da altraSoluzione Visualizza Messaggio
    koala-app.com
    Ciao, grazie per la segnalazione dell'app

  6. #6
    w_t
    w_t è offline
    User
    Data Registrazione
    Mar 2008
    Località
    Arezzo
    Messaggi
    109
    Citazione Originariamente Scritto da criss345 Visualizza Messaggio
    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.

+ Rispondi alla Discussione

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.