Vai al contenuto principale

Come aumentare le prestazioni del tuo sito web: parte 3 - JavaScript e CSS

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Di recente, abbiamo trattato molte cose che puoi fare per ottimizzare le prestazioni del tuo sito web. Finora, tuttavia, non abbiamo parlato di due componenti vitali della maggior parte dei siti Web moderni: JavaScript e CSS. Senza di loro, gran parte di ciò che rende il Web moderno così eccezionale non sarebbe possibile, ma possono anche influire sulle prestazioni del tuo sito.

Il punto è che qualsiasi script o codice aggiuntivo che aggiungi al tuo sito Web può rallentarlo. Tuttavia, ci sono modi per "ottimizzare" il codice per ridurre al minimo il suo impatto sul tuo sito web dal punto di vista delle prestazioni. In questo modo, ottieni il meglio da tutti i mondi senza degradare l'esperienza dell'utente (UX).

In questo articolo parleremo brevemente di cosa sono JavaScript e CSS e di come influiscono sulla velocità del tuo sito web. Successivamente, discuteremo tre modi per ottimizzare il modo in cui il tuo sito utilizza entrambi. Andiamo!

Una rapida panoramica di cosa sono JavaScript e CSS

A meno che tu non stia visitando un sito web che è tutto testo nero su sfondo bianco, siamo disposti a scommettere che c'è almeno un po' di CSS che fa la sua magia sotto il cofano. Lo stesso vale per JavaScript, che è ampiamente utilizzato nella maggior parte dei siti Web per offrire molte funzioni interessanti.

Se hai familiarità con il blog ManageWP, probabilmente hai già familiarità con JavaScript e CSS. Tuttavia, vale sempre la pena dare un'occhiata ad alcune delle cose incredibili che entrambe le lingue ti permettono di fare.

Ad esempio, quando si tratta di JavaScript, ci sono molte fantastiche librerie con funzionalità avanzate che puoi controllare, come anime.js. Ciò consente di implementare un'ampia gamma di microinterazioni, molte delle quali si basano anche su CSS:

Quando si tratta di CSS, alcune persone ci fanno arte letterale. Se hai un po' di tempo da bruciare, dai un'occhiata a CodePen e dai un'occhiata ad alcuni degli incredibili effetti che gli utenti hanno ottenuto usando CSS "semplici":
Alcuni interessanti esempi di CSS in azione.
Il punto principale da ricordare è che i siti web moderni bisogno sia JavaScript che CSS. Tuttavia, anche il modo in cui li implementi è importante, soprattutto se ti interessa l'ottimizzazione del sito web (cosa che dovresti fare!).

Perché JavaScript e CSS influiscono sulla velocità del tuo sito web?

In poche parole, qualsiasi codice aggiunto al tuo sito Web avrà un impatto sui suoi tempi di caricamento. Con JavaScript e CSS, ad esempio, il tuo server deve eseguire il rendering del codice in modo che i visitatori possano vedere il risultato. Inoltre, più codice aggiungi, più grandi saranno i tuoi file di pagina.

In alcuni casi, l'impatto del codice può essere limitato. Quando si tratta di tempi di caricamento, tuttavia, ogni millisecondo conta. Per monitorare le prestazioni del tuo sito, puoi utilizzare servizi come Pingdom Tools, che ti consentono di monitorare le dimensioni delle pagine e i tempi di caricamento delle pagine:
La home page di Pingdom Tools.
Un'altra ottima opzione è eseguire stress test utilizzando strumenti come Load Impact. Con questo particolare servizio, puoi simulare il comportamento del tuo sito Web quando più utenti tentano di accedervi contemporaneamente, il che può darti una valutazione più accurata rispetto ai soli test di velocità:
La home page dell'impatto del carico.
Anche se utilizzi librerie CSS e JavaScript esterne, possono comunque influire sulle prestazioni del tuo sito poiché devono essere prima "recuperate". In altre parole, a meno che non si preveda di utilizzare HTML non elaborato per tutto (il che è negativo), sarà necessario cercare metodi di ottimizzazione che consentano di ridurre l'impatto dell'utilizzo di JavaScript e CSS.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

3 modi per ottimizzare l'uso di JavaScript e CSS sul tuo sito web

Esistono diversi modi per ottimizzare il tuo sito Web per ridurre l'impatto di JavaScript e CSS sui tempi di caricamento. Per i migliori risultati possibili, ti consigliamo di implementarli tutti.

1. Rimanda l'analisi di JavaScript

Quando visiti un sito web, il tuo browser recupera il codice e lo visualizza. Ciò include HTML, CSS, JavaScript e qualsiasi altro codice nei file di pagina. Tuttavia, a volte il tuo browser non visualizzerà una pagina finché non "finisce" di acquisire il JavaScript, il che può richiedere del tempo con il codice esterno.

Il modo più semplice per risolvere questo problema è configurare il tuo sito Web per posticipare il caricamento dei file JavaScript fino alla visualizzazione del resto della pagina. In questo modo, passerà meno tempo prima che gli utenti vedano l'intera pagina, mentre il loro browser elabora JavaScript in background. È un piccolo trucco elegante che può dare l'impressione di tempi di caricamento più rapidi e non è difficile da implementare.

Per differenziare JavaScript, dovrai cambiare il tuo tema header.php deporre. Per ottenere i migliori risultati possibili, lo farai utilizzando un tema figlio. Per accedere al file, vai a public_html / wp-content / themes / yourchildtheme directory utilizzando il tuo client FTP preferito e aprilo, in modo da poter aggiungere il seguente codice prima del Parole chiave:

function parseJSAtOnload() {
  var element = document.createElement("script");
  element.src = "https://managewp.com/blog/script_to_be_deferred.js";
  document.body.appendChild(element);
}

if (window.addEventListener)
  window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
  window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;



Questo codice dice a WordPress di non caricare prima un particolare file JavaScript après rende il resto del contenuto della pagina. Nota che questo esempio di codice utilizza un segnaposto - script_to_be_deferred.js. Perché funzioni, dovrai solo sostituirlo con il nome del file e il percorso dello script che desideri differire. Al termine, salva le modifiche in header.php e sei a posto!

2. Piccolo JavaScript e CSS online

Nella maggior parte dei casi, si consiglia di utilizzare file separati per JavaScript e CSS, quindi utilizzarli nel file HTML. Dopotutto, questo si traduce in un codice molto più pulito e più facile da mantenere.

Tuttavia, quando parliamo di frammenti molto semplici (o piccoli), la regola non regge. Se hai solo bisogno di aggiungere poche righe di codice, puoi farlo manualmente nel tuo file HTML, che chiamiamo "inline".

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

L'integrazione di JavaScript e CSS potrebbe non rendere il codice più bello, ma può migliorare le prestazioni del tuo sito Web in quanto ridurrà al minimo il numero di file aggiuntivi da caricare.

Tieni presente, tuttavia, che dovresti utilizzare questo approccio solo per frammenti molto brevi. Inoltre, assicurati di commentare il tuo codice in modo da non dimenticare cosa fa ogni frammento.

3. Minimizza CSS e JavaScript

Il concetto di minificazione è piuttosto semplice: prendi uno snippet di codice e rimuovi tutti i caratteri estranei, come gli spazi bianchi. Potrebbe non rendere il codice più carino, fondamentalmente perché stai rimuovendo anche il fattore di leggibilità. Tuttavia, un computer può ancora dare un senso a questo e può aiutare a ridurre i tempi di caricamento della pagina.

Prendi questo semplice frammento CSS, ad esempio, che cambia la spaziatura dei tuoi sottotitoli H1 e H2:

h1 {spaziatura parole: 10px; } h2 {spaziatura parole: -5px; }

Dopo aver minimizzato questo codice, dovrebbe apparire così:

h1 {spaziatura parole: 10 px} h2 {spaziatura parole: -5 px}

A seconda dell'estensione della minificazione che desideri, puoi anche sostituire i nomi delle variabili con alternative più brevi per ridurre ulteriormente la dimensione del file. Più CSS e JavaScript aggiungi al tuo sito web, più codice si sommerà. Ciò significa che la minificazione può fare molto, specialmente per i siti Web con molte funzionalità complesse.

Come puoi immaginare, minimizzare il codice a mano non è ciò che chiameresti un'attività divertente. Fortunatamente, ci sono un sacco di strumenti che puoi usare online dove digiti il ​​tuo codice e si prenderanno cura di ridurre al minimo tutto per te - quindi approfittane!

Conclusione

Più funzionalità e stili aggiungi al tuo sito web, più tempo ci vorrà per caricarlo. Ciò significa che JavaScript e CSS possono avere un impatto diretto sulle prestazioni del tuo sito web. Tuttavia, questo non è un motivo per evitarlo, poiché sono lingue incredibilmente potenti.

Tuttavia, quello che pouvez è ottimizzare il modo in cui usi JavaScript e CSS per assicurarti che non rallentino il tuo sito web. Questo articolo ha esaminato tre modi principali per raggiungere questo obiettivo:

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

  1. Rimanda l'analisi dei file JavaScript.
  2. Piccolo JavaScript e CSS online.
  3. Minimizza il tuo CSS e JavaScript.

Hai domande su come ottimizzare l'uso di JavaScript e CSS? Parliamone nella sezione commenti qui sotto!

Credito immagine: Pixabay.

Fonte

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer