Ottimizzazione del codice del sito JS e CSS online: una guida dettagliata

Ascolta questo articolo

Sito Web JS e ottimizzazione del codice CSS, è uno degli aspetti più significativi dell'ottimizzazione tecnica del sito web. La ragione di ciò è il rilascio di più risorse del sito, dovuto alla riduzione delle chiamate al database e alla migliore leggibilità della struttura del codice stesso.

Di norma, l'ottimizzazione del codice JavaScript e CSS aumenta notevolmente la velocità di risposta del sito. Pertanto, il sito funziona più velocemente e carica meno seriamente la parte del server.

Il contenuto dell'articolo:

• Codice JS e CSS: che cos'è?
• Ottimizzazione del codice JS e CSS: perché è necessario ottimizzare script e stili?
• Modulo Gzip per Apache, Nginx e Node.js
• Ottimizza Javascript con Minification
• Ottimizzazione CSS per l'utilizzo dei font web
• Utilizzando l'opzione di download del font appropriata
• Ottimizzazione del codice online
• Minimizza JS e CSS con i plugin CMS Wordpress

Codice del sito JS e CSS: che cos'è?

javascript e css sono linguaggi di programmazione comuni, ognuno dei quali apporta determinate funzionalità al sito. Grazie all'utilizzo dei principali linguaggi di programmazione web HTML, JS, CSS, si ottiene un'interazione ideale dell'utente con il sito.

javascript è un linguaggio di programmazione comune. Consente di creare vari script. La maggior parte di questi script viene eseguita nel browser dell'utente. JavaScript migliora l'interazione dell'utente con il sito. Mettere in evidenza un certo insieme di informazioni utilizzando mini-applicazioni (script) sul sito. La visualizzazione e l'output degli script JS avviene collegando questi ultimi al codice HTML della pagina. Quasi tutti i siti utilizzano JS (JavaScript) nella loro composizione.

css - fa riferimento a uno dei principali linguaggi di programmazione del sito. CSS (file di stile): contiene informazioni sull'aspetto di quasi tutti gli elementi del sito. Dal colore e dalla posizione alla famigerata animazione di un particolare elemento della pagina.

Ottimizzazione del codice JS e CSS: perché è necessario?

JS e CSS: di per sé, hanno un codice pesante abbastanza grande che ha molto superfluo. È difficile per un browser leggere un'enorme tela di codici in una frazione di secondo. Pertanto, il caricamento della pagina e dell'intero sito nel suo insieme rallenta. L'ottimizzazione di questi file è finalizzata a ridurre le dimensioni del codice, tagliando tutto il superfluo. Questo vale per:

• Caratteri inutilizzati ed extra;
• spazi;
• Righe di codice non finite e non funzionali.

Il processo stesso è simile alla compressione di un file normale. Il peso e le dimensioni di quest'ultimo diventano molto più piccoli. Tuttavia, il codice diventa completamente illeggibile per l'uomo. Ma i robot di ricerca e i browser aggirano perfettamente e comprendono l'intera struttura del file. Il tempo trascorso sul round viene ridotto più volte. Grazie a questa compressione, la velocità di download aumenta e la risposta complessiva migliora.

Modulo Gzip per Apache, Nginx e Node.js

Gzip è una tecnologia straordinaria che è stata creata in un momento in cui Internet non era veloce come lo è oggi. Gli archiviatori erano una tecnologia popolare (da allora hanno perso popolarità poiché le unità flash USB possono fornire fino a 1 TB di spazio di archiviazione).

L'idea era di utilizzare archivi per il traffico web su Internet (simile alla creazione di file di siti Web), quindi gzip è stato progettato per comprimere i file sui server Web comprimendo i file statici (di testo) a 99% della loro dimensione originale. Poiché JavaScript è un file di testo, gzip può essere utilizzato per comprimere i file JavaScript e ridurre il tempo di caricamento della pagina.

Ottimizza Javascript con Minification

L'ottimizzazione è un tipo speciale di minimizzazione JavaScript. Tali minimizzatori non solo rimuovono spazi, virgole, commenti, ecc. non necessari, ma aiutano anche a evitare il "codice morto":

• Compilatore di chiusura di Google
• UglifyJS
• Minificatore Microsoft AJAX

Ottimizzazione CSS per l'utilizzo dei font web

Google Fonts e produttori di font simili hanno rivoluzionato i font web, ma poche righe di codice del font possono consumare centinaia di kilobyte di larghezza di banda.

1. Scarica solo i font di cui hai bisogno: rimuovi i font inutilizzati e controlla se sono necessari nuovi font.
2. Scarica solo i pesi e gli stili di cui hai bisogno: la maggior parte dei produttori di font può limitare i download a determinati set di caratteri (ad esempio, solo latino), pesi (spessore) e corsivi (inclinazione). I browser possono eseguire automaticamente il rendering degli stili mancanti, anche se i risultati potrebbero essere scadenti.
3. Limita il numero di caratteri necessari: i caratteri usati raramente possono essere limitati a determinati caratteri. Ad esempio, il titolo "Tutorial CSS" in Open Sans può essere definito aggiungendo il parametro & text= alla stringa di query di Google Fonts: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Prendi in considerazione i caratteri variabili: i caratteri variabili definiscono un'ampia varietà di stili, pesi e corsivi utilizzando l'interpolazione vettoriale. Il file del font è leggermente più grande, ma ne serve solo uno, non più. Il carattere ricorsivo dimostra la flessibilità dei caratteri variabili.
5. Scarica i font dal tuo server locale. I caratteri self-hosting sono più efficienti. Sono necessarie meno ricerche DNS ed è possibile limitare il caricamento di WOFF2, supportato da tutti i browser moderni. I browser meno recenti (IE) potrebbero tornare al carattere del sistema operativo.
6. Considera i caratteri del sistema operativo: questo carattere web da 500K potrebbe sembrare fantastico, ma qualcuno noterà se passi al dominio pubblico Helvetica, Arial, Georgia o Verdana? I caratteri sicuri per il sistema operativo o per il Web sono un modo semplice per migliorare la produttività.

Utilizzando l'opzione di download del font appropriata

I caratteri Web potrebbero richiedere alcuni secondi per il caricamento e l'elaborazione. Hai bisogno:

1. Mostra un lampo di testo senza stile (FOUT): viene utilizzato per primo il primo carattere di fallback disponibile, ma viene sostituito quando il carattere Web è pronto.
2. Mostra flash di testo invisibile (FOIT): il testo non viene visualizzato fino a quando il carattere Web non è pronto. Questo è il processo predefinito nei browser moderni, che in genere attendono tre secondi prima di tornare a un carattere di fallback.
   Nessuno dei due è perfetto.

La proprietà CSS font-display e l'impostazione Google Font & display= possono scegliere un'alternativa:

• auto: comportamento predefinito del browser (solitamente FOIT).
• blocco: Effettivamente FOIT. Il testo è invisibile per un massimo di tre secondi. Non c'è sostituzione del carattere, ma il testo potrebbe apparire dopo un po'.
• swap: Effettivamente FOUT. Il primo fallback viene utilizzato fino a quando il carattere Web non è disponibile. Il testo è immediatamente leggibile, ma l'effetto di sostituzione dei caratteri può essere fastidioso. Il Font Style Matcher può essere utilizzato per definire un fallback di dimensioni simili.
• ripiego: un compromesso tra FOIT e FOUT. Il testo è invisibile per un breve periodo di tempo (in genere 100 ms), quindi viene utilizzato il primo fallback fino a quando il carattere Web non è disponibile.
• facoltativo: simile al fallback, tranne per il fatto che non vi è alcuna sostituzione del carattere. Il carattere Web verrà utilizzato solo se disponibile durante il periodo iniziale. La prima visualizzazione di pagina molto probabilmente visualizzerà il carattere di fallback, mentre le successive visualizzazioni di pagina utilizzeranno il carattere Web scaricato e memorizzato nella cache.

L'utilizzo di swap, backup o facoltativo può fornire un notevole aumento delle prestazioni.

Ottimizzazione del codice JS e CSS online

Su Internet esiste un numero abbastanza elevato di servizi online. Che in un paio di minuti sono in grado di eseguire tutto il lavoro di routine di compressione dei file JavaScript e di stile. Tutti hanno i propri algoritmi per lavorare con il codice. Sullo sfondo di tale diversità, si possono distinguere due servizi più significativi. La loro soglia di compressione effettiva è molto più alta rispetto a strumenti online concorrenti simili. Diamo un'occhiata più da vicino a questi due strumenti web:

cssresizer.com
Efficienza di compressione dell'84% rispetto ai concorrenti più vicini. La validità del codice viene preservata, anche con una compressione significativa. In questo modo puoi ottenere un ottimo codice ottimizzato. Lavorare con questo strumento è intuitivo e ci sono diversi metodi di compressione:

• Massimo;
• veloce;
• Decompressione;

Puoi comprimere per:

• URL - indirizzo;
• Upload di file;
• Inserimento diretto del codice;

Refresh-sf.com

Un'altra interfaccia web altrettanto potente per minimizzare JavaScript, CSS e HTML. Lo strumento utilizza UglifyJS 2, Clean-CSS e HTML Minifier per funzionare. L'efficienza di compressione in questo caso raggiunge 85%, senza violazioni visibili della validità del codice. La compressione può essere eseguita inserendo direttamente il codice nella finestra degli strumenti.

Minimizza JS e CSS con i plugin CMS Wordpress

Come tutti sappiamo, ha una distribuzione significativa in tutto il mondo. Secondo i dati del 2018, questo cms occupa una posizione di leadership. Prendi in considerazione un paio di plugin di ottimizzazione popolari specifici per WordPress:

Plugin di ottimizzazione automatica

Plugin di ottimizzazione HTML, JS e CSS. È uno dei plugin più popolari per velocizzare i siti su CMS Wordpress. Ha un'interfaccia di configurazione semplice e funzionale. Il processo di compressione avviene al volo.

• Ottimizzazione (HTML, JS, CSS) e configurazione CDN.
• Rimozione di emoji, caratteri Google, stringhe di query da risorse statiche.
• Capacità di ottimizzare le immagini.

Plugin Webcraftic Clearfy

Non vecchio come il plugin precedente. Ma è anche richiesto e popolare tra concorrenti simili. Webcraftic Clearfy - ha un'interfaccia di configurazione piuttosto complessa. Consiste in una combinazione combinata di plugin, per il miglior risultato.

Le pagine delle impostazioni sono suddivise in sezioni di menu. Pertanto, è possibile ottimizzare parti specifiche del sito, ad esempio HTML. Cosa può fare questo plugin?

• Ottimizzazione (immagini, JS, CSS, HTML e script);
• Traslitterazione cirillica e rimozione dei duplicati. Lavorare con gli attributi alt e creare il file robots.txt appropriato. Lavorare con le intestazioni del server e le loro risposte.
• Rimozione di widget WordPress non reclamati.
• Nascondere la versione di WordPress e rimuovere le variabili di query dalle query statiche. Nascondere il login dell'autore e la pagina di login dell'amministratore.
• Rimozione globale o pulizia dei commenti. Salva il controllo nei commenti.
• Impostazione di WordPress pulse e pannello di amministrazione superiore.
• Controllo sui componenti del plugin.

In conclusione, si può trarre una certa conclusione. Sulla base di quanto sopra, comprimere js e css non è una cosa così difficile. Grazie a queste azioni, la velocità di risposta del tuo progetto aumenterà in modo significativo.

Leggendo questo articolo:

• Ottimizzazione delle prestazioni delle pagine web
• Ottimizzazione dei CSS per la velocità del sito - 9 modi

Grazie per aver letto: AIUTO SEO | NICOLA.TOP