La velocità del sito web è molto importante per l'esperienza dell'utente. Se il tuo sito è troppo lento, perderai sia visitatori che potenziali clienti. I motori di ricerca come Google tengono conto della velocità del sito Web nelle classifiche di ricerca. Quindi, quando ottimizzi la velocità del tuo sito web, dovresti prendere tutto in considerazione.

Ecco alcuni suggerimenti di base e generali per migliorare la velocità del sito web.

Rinvia il caricamento del contenuto quando possibile

Ajax ci consente di creare pagine Web che possono essere aggiornate in modo asincrono in qualsiasi momento. Ciò significa che invece di ricaricare un'intera pagina quando un utente esegue un'azione, possiamo semplicemente aggiornare parti di quella pagina.

Possiamo usare una galleria di immagini come esempio. I file di immagine di alta qualità sono sempre grandi e pesanti. Possono rallentare la velocità del sito web. Invece di caricare tutte le immagini quando un utente visita per la prima volta la pagina Web, possiamo semplicemente visualizzare le miniature delle immagini. Quindi, quando l'utente fa clic su di essi, possiamo richiedere in modo asincrono le immagini a dimensione intera dal server e aggiornare la pagina. In questo modo, se un utente vuole vedere solo poche immagini, non deve soffrire in attesa che tutte le immagini vengano scaricate. Questo modello di sviluppo è chiamato caricamento lento.

Eccezionale tema Claue con velocità di caricamento rapida

Le librerie di sviluppo Ajax/web come jQuery, Prototype e MooTools possono semplificare l'implementazione del caricamento differito dei contenuti.

CALDO!! La versione 2.0 di Claue è stata rilasciata

Visualizza la demo

Claue Magento Theme 2.0 è stato rilasciato con una serie di miglioramenti delle prestazioni e funzionalità esclusive. Ecco una sbirciatina ad alcuni dei cambiamenti di cui siamo più entusiasti

• Essendo basato sul tema Luma.
• Soddisfa tutti gli standard del tema Magento
• Miglioramento significativo delle prestazioni
• Compatibile con la maggior parte delle estensioni di terze parti.
• Pienamente compatibile con Magento 2.4.x

Questa seconda versione avanzata si differenzia completamente dalla precedente. Pertanto, se stai utilizzando Claue versione 1 e desideri eseguire l'aggiornamento a Claue versione 2, puoi ricostruire un nuovo sito Web solo no anziché aggiornare dalla vecchia versione.

Usa file JS e CSS esterni

Quando l'utente carica per la prima volta la tua pagina web, il browser memorizzerà nella cache risorse esterne come file CSS e JavaScript. Pertanto, invece dei file JavaScript e CSS inline, è meglio inserirli in file esterni.

CSS

L'uso di CSS in linea aumenta anche il tempo di rendering di una pagina web. Avere tutto definito nel tuo file CSS principale consente al browser di fare meno lavoro durante il rendering della pagina, poiché conosce già tutte le regole di stile che deve applicare.

Come bonus, l'utilizzo di file JavaScript e CSS esterni semplifica la manutenzione del sito perché è necessario mantenere solo i file globali anziché il codice sparso in più pagine Web.

Usa i sistemi di memorizzazione nella cache

Se scopri che il tuo sito si sta connettendo al tuo database per creare lo stesso contenuto, è ora di iniziare a utilizzare un sistema di memorizzazione nella cache per aumentare la velocità del sito web. Avendo un sistema di memorizzazione nella cache, il tuo sito dovrà creare il contenuto solo una volta invece di creare il contenuto ogni volta che la pagina viene visitata dai tuoi utenti. I sistemi di memorizzazione nella cache aggiornano periodicamente le loro cache a seconda di come la configuri, quindi anche le pagine Web in continua evoluzione (come un post di un blog con commenti) possono essere memorizzate nella cache.

I sistemi di gestione dei contenuti più diffusi come WordPress e Drupal avranno funzionalità di memorizzazione nella cache statica. Convertono le pagine generate dinamicamente in file HTML statici per ridurre l'elaborazione del server non necessaria. Per WordPress, dai un'occhiata a WP Super Cache (uno dei sei plugin WordPress critici installati da Six Revisions). Drupal ha una funzione di memorizzazione nella cache delle pagine nel core.

Esistono anche sistemi di memorizzazione nella cache del database e di script lato server che puoi installare sul tuo server web (se ne hai la possibilità). Ad esempio, PHP ha estensioni chiamate acceleratori PHP che ottimizzano le prestazioni attraverso la memorizzazione nella cache e vari altri metodi.

Evita di ridimensionare le immagini in HTML

Se un'immagine ha originariamente una dimensione di 1280x900px, ma è necessario che sia 400x280px, è necessario ridimensionare e salvare nuovamente l'immagine utilizzando un editor di immagini come Photoshop invece di utilizzare gli attributi di larghezza e altezza dell'HTML (ad esempio <img width=”400″ height= ”280″ src=”miaimmagine.jpg” /> ). Questo perché, naturalmente, un'immagine grande avrà sempre una dimensione del file più grande di un'immagine più piccola.

Invece di ridimensionare un'immagine utilizzando HTML, ridimensionala utilizzando un editor di immagini come Photoshop e quindi salvala come nuovo file.

Smetti di usare le immagini per visualizzare il testo

Non solo il testo in un'immagine diventa inaccessibile agli screen reader e completamente inutile per la SEO, ma l'utilizzo di immagini per visualizzare il testo aumenta anche i tempi di caricamento delle tue pagine web perché più immagini significano una maggiore velocità del sito web.

Se devi utilizzare molti caratteri personalizzati nel tuo sito Web, scopri i CSS @font-face per visualizzare il testo con caratteri personalizzati in modo più efficiente. Inutile dire che devi determinare se la pubblicazione di file di caratteri sarebbe più ottimale rispetto alla pubblicazione di immagini.

Ottimizza le dimensioni delle immagini utilizzando il formato file corretto

Scegliendo il formato immagine corretto, puoi ottimizzare le dimensioni dei file senza perdere la qualità dell'immagine. Ad esempio, a meno che non sia necessaria la trasparenza dell'immagine (livelli alfa) che il formato PNG ha da offrire, il formato JPG visualizza spesso immagini fotografiche con file di dimensioni inferiori.

Inoltre, ci sono molti strumenti che puoi utilizzare per ridurre ulteriormente il peso dei file delle tue immagini.

Carica JavaScript alla fine del tuo documento

È meglio se i tuoi script vengono caricati alla fine della pagina anziché all'inizio. Consente al browser di eseguire il rendering di tutto prima di iniziare con JavaScript. Questo rende le tue pagine web più reattive perché il modo in cui JavaScript funziona è che blocca qualsiasi cosa sotto di essa dal rendering fino al termine del download. Se possibile, fai riferimento a JavaScript subito prima del tag di chiusura <body> dei tuoi documenti HTML. Per saperne di più, leggi come posticipare il caricamento di JavaScript.

Utilizzare una rete di distribuzione dei contenuti (CDN)

La velocità del tuo sito web è fortemente influenzata dalla posizione dell'utente rispetto al tuo server web. Più sono lontani, maggiore è la distanza da percorrere per i dati trasmessi. Avere i tuoi contenuti memorizzati nella cache in più posizioni geografiche strategicamente posizionate aiuta a risolvere questo problema. Un CDN spesso aumenta leggermente i costi operativi, ma ottieni sicuramente un bonus di velocità.

Ottimizza la memorizzazione nella cache web

Oltre a utilizzare i sistemi di memorizzazione nella cache, dovresti creare siti Web che utilizzino il più possibile la memorizzazione nella cache. La cache Web è quando i file vengono memorizzati nella cache dal browser Web per un uso successivo. Le cose che i browser possono memorizzare nella cache includono file CSS, file JavaScript e immagini.

Oltre alle nozioni di base, come inserire codice CSS e JavaScript utilizzato in più pagine in file esterni, ci sono molti modi per assicurarsi di memorizzare nella cache i file nel modo più efficiente possibile.