Ottimizzazione dei CSS per la velocità del sito - 9 modi

Ascolta questo articolo

Un sito lento fa sempre male! Penso che la frase ottimizzazione del codice CSS per velocizzare il sito, è spesso presente nelle ricerche così come nei reindirizzamenti 301 o robots.txt. O forse sei il tipo di sviluppatore che invia siti Web senza preoccuparsi delle prestazioni ottimali?

Se appartieni alla prima opzione, allora questo articolo è per te. Ora ti parlerò dei 9 modi migliori per aiutarti a ottimizzare il tuo CSS. Questi suggerimenti accelereranno il tuo sito e saliranno nelle SERP. Questo effetto aumenterà in modo significativo il flusso di nuovi visitatori sul tuo sito.

Il contenuto dell'articolo:

• L'importanza della velocità del sito web
• Usa gli sprite delle immagini
• Ottimizzazione CSS
• Riduci il codice non necessario
• Metti le tabelle in testa e gli script JS nel piè di pagina
• Separare i file CSS
• Riduci il numero di spazi nel codice
• Documenta il tuo codice
• Organizza il tuo codice
• Tecnica KISS (Keep it Simple Stupid)

L'importanza della velocità del sito per il ranking organico

Sarai sorpreso dall'importanza di siti web più veloci. Esistono diversi motivi principali, ma la loro influenza influisce in modo significativo sulla posizione del sito. Ragione principale:

1. Ai visitatori del sito Web non piace aspettare molto tempo prima che una pagina si carichi completamente;
2. I tuoi clienti torneranno sicuramente sul sito se funziona velocemente; i siti più veloci si posizionano sempre più in alto nei motori di ricerca;
3. Anche la velocità del sito aggiunge valore alla tua strategia SEO;

Queste risorse sono semplicemente fantastiche e fanno un'ottima impressione. Ora cosa faresti per rendere il tuo sito più veloce? Naturalmente, migliorare questa situazione potrebbe richiedere molte azioni da parte tua.

Ad esempio aggiornando il tuo server, la RAM, l'archiviazione o l'hardware in generale, ma sapevi che la ragione principale di un sito lento risiede nel tuo codice sorgente? La mancanza di CSS ottimizzati è il motivo più comune. Ciò significa che la riduzione delle dimensioni del file del foglio di stile anche di pochi kilobyte avrà un impatto significativo sul tempo di caricamento della pagina.

Usa gli sprite delle immagini

CSS Sprites è un mezzo per combinare più immagini in un unico file immagine. Usalo ulteriormente sul sito Web per migliorare le prestazioni. Questo uso di immagini sprite è una vecchia tecnica. Quando si tratta di ridurre le dimensioni del file CSS e ridurre i tempi di caricamento della pagina, questa tecnica è un must.

Gli sprite di immagini ti consentono di comprimere le immagini in un unico file .png di grandi dimensioni. Questo metodo riduce le richieste HTTP e accelera i tempi di caricamento della pagina. Uno sprite di immagini è un'ottima scelta se utilizzi molte icone e grafica sul tuo sito. Questa opzione ridurrà in modo significativo il sovraccarico dovuto all'estrazione di più immagini.

Ottimizzazione CSS

Abbreviare CSS sta semplicemente comprimendo il tuo file in un nuovo file con il minor numero di spazi possibile. Più piccolo è il codice, più velocemente verrà letto dal browser dell'utente.

Naturalmente, non devi farlo manualmente perché ci sono compressori automatici su Internet. Solo grazie a strumenti online così semplici è possibile eseguire la compressione in pochi minuti. Ecco uno di questi minifier: http://www.cssminifier.com

Riduci il codice non necessario

Non abbiamo bisogno di codice ripetuto. Codice come questo rallenta notevolmente il caricamento degli elementi. Il browser deve passare ripetutamente attraverso il codice duplicato, impiegando una frazione di secondo in più su questo Un altro trucco per aumentare la velocità di caricamento della pagina è ridurre il codice non necessario. Tale miglioramento può essere ottenuto verificando la presenza di codice ridondante o duplicato.

Metti le tabelle CSS nella testa e gli script JS nel piè di pagina

È buona norma mettere il foglio di stile in alto (tra i tag head) e il codice JavaScript in basso. Assicurati che il codice venga caricato prima del resto della pagina. Il motivo principale per posizionare JavaScript nella parte inferiore del sito è la sua grande dimensione. Oltre al suo ulteriore impatto sulla velocità del sito web. Pertanto, tali script sono posizionati nella parte inferiore del sito. Ciò consente loro di caricare dopo i componenti principali della pagina.

Gli stili essenziali necessari per modellare il contenuto nella parte superiore della pagina sono incorporati e applicati immediatamente al documento. Il file small.css completo viene caricato dopo il rendering iniziale della pagina. I suoi stili vengono applicati alla pagina al termine del caricamento, senza bloccare il rendering iniziale del contenuto critico.

Non incorporare URI di big data

Fai attenzione quando incorpori gli URI dei dati nei file di stile. Sebbene l'utilizzo selettivo di URI di dati di piccole dimensioni nel tuo CSS possa avere senso, l'incorporamento di URI di dati di grandi dimensioni può far sì che il tuo CSS sia più grande nella parte superiore della piega, rallentando i tempi di rendering della pagina.

Non incorporare attributi CSS

L'incorporamento di attributi CSS in elementi HTML (come ) dovrebbe essere evitato quando possibile, in quanto ciò spesso porta a inutili duplicazioni di codice. Inoltre, il CSS incorporato negli elementi HTML è bloccato per impostazione predefinita da Content Security Policy (CSP).

Separare i file CSS

Inoltre puoi separare i file CSS, ad esempio diversi fogli di stile. Ad esempio, se scegli come target più browser come IE, Chrome o Firefox. Ad esempio, invece di verificare la presenza di hack CSS in un foglio di stile, puoi utilizzare le istruzioni condizionali di IE per caricare un altro foglio di stile (per IE6, ad esempio).In questo modo non caricherai il codice di IE quando utilizzi Chrome. Ciò ridurrà notevolmente le dimensioni del file.

Riduci il numero di spazi nel codice

Dovresti sempre cercare di ridurre il numero di spazi nel tuo foglio di stile. L'aumento dello spazio bianco occupa byte liberi. Questo può fare la differenza tra un sito più veloce e uno più lento in progetti molto grandi: riducendo il numero di spazi bianchi, si riduce la dimensione del file. Pertanto, acceleriamo il download del file, a causa del minor peso.

Documenta il tuo codice

Dovresti documentare il tuo codice ove possibile. L'uso di commenti come /* Commenta qui */ può aiutarti a identificare il codice inutile. Sebbene l'aggiunta di commenti occupi molto spazio, è facile trascurarli: in alcuni casi, i commenti inutili vengono semplicemente eliminati. Questa tecnica ti consente di sbarazzarti del peso in eccesso di CSS in modo molto produttivo.

Organizza il tuo codice

Ottimizzazione del codice CSS è una tecnica di cui molti non penserebbero nemmeno di parlare. In effetti, a molti livelli, l'organizzazione del codice può aiutarti a ridurre significativamente le dimensioni del file. Di conseguenza, aumenta la velocità del tuo sito, mi chiedo come? È molto semplice.

Metti le tue classi CSS nel set corretto di rami. Questo metodo garantisce una duplicazione minima. Il codice non organizzato è un problema comune nel web design moderno. In alcuni scenari, organizzare il tuo codice disordinato in rami gerarchici è tutto ciò di cui hai bisogno per caricare il tuo sito Cerca di evitare hack CSS in un singolo foglio di stile. Utilizzare invece i metodi indicati ai punti 5 e 8.

Tecnica KISS (Keep it Simple Stupid)

L'ultima parola è assicurarti che tutto ciò che fai sia in linea con la tecnica KISS. KISS sta per Keep it Simple Stupid. Se crei di nuovo un file! Allora dovresti sicuramente essere sulla strada giusta per un codice organizzato, ben scritto, meno ridondante e pulito. Come puoi vedere, l'ottimizzazione dei CSS non è difficile. Soprattutto in alcuni casi, puoi cavartela con un paio di paragrafi di questo articolo. Queste tecniche aiuteranno a velocizzare il sito a volte.

Leggendo questo articolo:

• Ottimizzazione del codice del sito JS e CSS online: una guida dettagliata
• Ottimizzazione tecnica del sito Web: le azioni più importanti

Grazie per aver letto: AIUTO SEO | NICOLA.TOP