Come ottimizzare la consegna CSS – 7 semplici passaggi

immagine vettoriale di ottimizzazione CSSSono finiti i giorni in cui esperti di design e blogger leader del settore raccomandavano di costruire pagine Web non più di 30 kilobyte …


Allora, questo “limite” doveva gestire HTML, JavaScript, immagini, CSS e Flash. Siamo onesti, non ci vuole molto per superare completamente i 30 kb.

Poiché JavaScript e CSS hanno guadagnato popolarità, è diventato comune per i soli CSS superare il limite massimo di 30 KB. Ciò è particolarmente vero per i siti Web più grandi.

Tuttavia, non dovresti concentrarti eccessivamente sul tuo “numero di kilobyte” quando crei e progetti pagine per il tuo sito web. È importante conservare le tue pagine ottimizzato e stretto quando si scrive il tuo CSS.

L’ottimizzazione non riguarda solo la riduzione al minimo delle dimensioni dei file. Si tratta di mantenere le pagine libere da ingombri e gonfiori, rendendoli il più organizzati ed efficienti possibile. Man mano che imparerai di più sulle migliori pratiche di ottimizzazione CSS, scoprirai che crei automaticamente file di dimensioni inferiori.

Ecco 5 semplici cose che puoi fare per ottimizzare il tuo CSS in questo momento.

Come ottimizzare completamente la consegna CSS

1. Utilizzare la scorciatoia

Scrivere in stenografia è diventata una pratica molto comune. Questo è di gran lunga il modo più semplice per ridurre il codice e quanto tempo impieghi a programmare. Se non lo fai ancora, non c’è tempo come il presente.

proprietà del carattere css

Esistono numerosi elementi per i quali è possibile utilizzare la scorciatoia, ma i più comuni includono:

  • Margine
  • Imbottitura
  • Font
  • Contorno
  • Confine
  • sfondo
  • List-style

valori di configurazione abbreviataPuoi anche combinare i valori usando la scorciatoia. Specificando valori diversi, il browser utilizzerà essenzialmente un modo specificato per interpretare le regole.

Usando qualsiasi volontà abbreviata rendere il tuo codice complessivo molto più conciso. Stai salvando sia caratteri che righe.

Se si utilizza la stenografia in ogni area possibile, ciò può ridurre drasticamente la dimensione complessiva del file.

2. Sbarazzarsi degli hack

cioè regola cssPer servire le regole CSS specifiche di IE, l’uso di hack CSS condizionali ti dà il vantaggio di servire un file CSS predefinito più piccolo e più pulito.

Aiuta con i browser che sono più conformi agli standard. Tuttavia, il peso della pagina aggiuntivo verrà scaricato solo dai browser che lo richiedono.

Se devi usare un hack, è indispensabile che il codice che usi sia specifico per la versione di Internet Explorer su cui ti concentri.

Esistono numerosi codici pre-scritti che servono da hack se non vuoi scrivere il tuo. Prenditi il ​​tempo per guardare davvero il codice pre-scritto e assicurarti che sia accurato altrimenti ciò potrebbe comportare ulteriori problemi.

Ora, se puoi usare i CSS per ottenere i risultati che desideri, fallo senza alcun hack. Naturalmente, questo dipende dal fatto che tutte le altre cose siano uguali. Il tuo codice complessivo sarà molto più leggero e più semplice quando usi meno hack sul tuo sito.

3. Essere intelligenti sull’uso degli spazi bianchi

Per il tuo codice CSS, lo spazio bianco è indispensabile per leggibilità.

Gli spazi bianchi includono elementi, quali schede, spazi e interruzioni di riga aggiuntive. Ogni piccolo spazio bianco che puoi eliminare è simile all’eliminazione di un personaggio.

rimuovere le righe vuoteTuttavia, spesso non è consigliabile lesinare su spazi bianchi per il bene di un file più piccolo. Hai ancora bisogno di mantenere una leggibilità ottimale sulle tue pagine web.

Lo spazio bianco è importante per la formattazione, quindi vuoi trovare un equilibrio. Se si scrive in blocchi di grandi dimensioni nel testo per eliminare alcuni spazi bianchi, la breve attenzione dei lettori su Internet li farà scattare via.

Un modo per fornire sia una dimensione del file più piccola che una migliore leggibilità è abbandonare le schede e inserire una sola riga tra i paragrafi. Ciò fornisce uno spazio sufficiente dal punto di vista della leggibilità, ma elimina anche parte di quello spazio non necessario.

Ora, per la versione di produzione del tuo file CSS, puoi rimuovere lo spazio bianco. Sarà ancora presente nel tuo file di lavoro.

Questo è un altro modo per scendere a compromessi in modo da avere sia file più piccoli che formattazione leggibile.

4. Eliminare i ripristini e i frame

Quando si utilizza un framework CSS, è indispensabile rivedere la documentazione.

È altrettanto importante guardare ogni singola riga che si trova nel tuo file CSS. Ci sono momenti in cui scoprirai che ci sono alcune regole nel framework che non desideri per il tuo progetto attuale. Questi possono essere rimossi.

rimosse le regole CSS inutilizzate

Potresti scoprire che puoi ottenere dettagli di presentazione in un modo più conciso ed elegante …

Questo potrebbe non essere quello che usi di solito, ma se funziona, può consentire un framework più pulito. Quando li conosci, questo ti aiuta anche a evitare la duplicazione involontaria di set di regole.

Le stesse informazioni si applicano anche ai ripristini. Quando si utilizzano i ripristini, aiutano a neutralizzare lo stile predefinito di un browser. Ora, se hai familiarità con il sito web che stai creando, non è raro trovare certe dichiarazioni che sai che non ti serviranno.

Ad esempio, su un blog generale, probabilmente non li userai. Sbarazzati di tutto ciò che non ti serve per il sito specifico che stai costruendo. Puoi assicurare un lavoro meglio ottimizzato quando si utilizzano un insieme di regole per quanto riguarda un reset o un framework.

Tuttavia, nel loro stato predefinito, non dovrebbero essere accettati. Per mantenere leggibili e snelli i tuoi file CSS, guarda ogni singola dichiarazione e riduci quelle inutili.

5. CSS a prova di futuro

Sintassi CSS

Un’altra utile opzione di ottimizzazione CSS: separa la maggior parte delle regole dalle dichiarazioni specifiche del layout.

Assegnare il layout al proprio file individuale, se possibile. Altrimenti, almeno dargli una propria sezione può essere utile.

In definitiva, il posizionamento e i float – che sono i metodi attuali usando CSS – non erano pensati per servire come strumenti di layout.

Alcuni arrivano fino a dire che questi sono in realtà simili agli hack di layout. Al momento non esiste un’alternativa praticabile e la speranza è che, una volta concordati gli standard di layout, inizino a ottenere supporto dai browser.

Una volta che si verifica questo supporto, non dovrebbe essere molto difficile scambiare le proprietà del modello a scatola che sono state hackerate per quelle destinate ai layout.

In questo momento, il la scelta migliore è gestire il layout usando le proprietà giuste. In genere ciò condensa il peso della pagina in modo più efficace rispetto all’utilizzo del set limitato di proprietà attualmente disponibili per compensare le stranezze.

6. Tieni sempre la documentazione aggiornata relativa al tuo lavoro

Che tu stia lavorando su un sito Web in gruppo o da solo, è indispensabile tenere traccia di tutto ciò che hai fatto.

Ad esempio, da solo, potresti dimenticare qualcosa che hai fatto. Come team, qualcuno può fare qualcosa e potresti non esserne consapevole finché non apporti modifiche che possono causare problemi con vari elementi del codice.

aggiungendo commento cssLe duplicazioni di codice rappresentano una grande area di preoccupazione sia per i team che per i singoli progettisti, in particolare quando si utilizzano noti costruttori di siti Web. Wix, Squarespace e altri software per la creazione di siti Web lo sono noto per aver duplicato il codice o averlo perso completamente dal loro database.

L’uso delle guide dei fogli di stile e delle guide di markup sono scelte di documentazione valide. Puoi anche usare i commenti CSS è un’altra opzione e questo può essere utile per sezionare gli elementi dei file CSS che sono lunghi. Inserendoli nella guida di stile o di markup, si impedisce loro di aggiungere le dimensioni del file.

Uno dei modi più veloci per gonfiare il codice è fare lo stesso lavoro due volte. La codifica è complessa, quindi è indispensabile conservare una documentazione accurata di tutto ciò che hai fatto.

Se lavori da solo, è ideale rivedere questa documentazione ogni volta che ti siedi per iniziare a lavorare. Quando lavori in gruppo, assicurati che tutti codifichino lo stesso documento aderisce a uno stile di comunità o guida di markup in modo che le modifiche alla codifica siano facilmente comprensibili da tutti nel gruppo.

7. Comprimi i tuoi file (Ottimizzazione CSS 101)

compressione e ottimizzazione css gif

Compressione: c’è un po ‘più di questo …

Un modo efficace per ottimizzare i CSS è utilizzare la compressione. Questo è un modo per garantire che i tuoi file siano compatibili con il browser anche se non sono leggibili dall’uomo.

Rispetto alle copie di lavoro, queste saranno una frazione delle dimensioni. Esistono diverse applicazioni che è possibile sfruttare per semplificare il processo di compressione.

Questi eseguiranno attività, come trovare e correggere eventuali proprietà CSS che si sovrascrivono a vicenda, comprimendo spazi bianchi e cercando possibilità di utilizzare la scorciatoia CSS.

Oltre alla comodità di queste applicazioni, possono anche aiutarti a saperne di più sulle attività che puoi svolgere a mano se preferisci. Puoi anche utilizzare vari editor di testo per aiutarti a formattare i tuoi file CSS.

Possono servire versioni zip dei vari file CSS che hai. Questo in genere viene fatto utilizzando PHP. Se desideri utilizzare strumenti di ottimizzazione e compressione, assicurati di rivedere più opzioni prima di scegliere quella giusta per te.

Ora, queste applicazioni sono generalmente brave a minimizzare gli errori, ma non sono perfette. Per questo motivo, è necessario rivedere sempre il CSS dopo aver utilizzato un’applicazione per garantire l’accuratezza. Il codice ottimizzato e pulito è fondamentale per le dimensioni del file, ma anche per la leggibilità e la manutenzione.

Il tuo turno

I principi discussi qui sono solide considerazioni per CSS, ma anche per JavaScript, HTML e altri linguaggi di programmazione. Rispetto al rendering del tuo sito Web, i file CSS non sono così importanti per l’utente finale.

Tuttavia, i principi discussi qui aiutano sia l’esperienza di sviluppo che l’esperienza dell’utente.

La maggior parte delle buone società di web hosting ti aiuteranno con l’ottimizzazione CSS. I siti Web più veloci ti rendono un cliente felice, ma i file più piccoli hanno anche un carico minore sui loro server.

Abbiamo testato tutti gli host web canadesi e consigliamo SiteGround. Non solo ti aiutano a ottimizzare la consegna dei CSS, ma il loro supporto tecnico non ha eguali.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map