Lotrèk
30 April 2020

L’approccio Jamstack per aumentare la velocità di un sito web del settore turistico


Pierdomenico  profile image
Human:
Pierdomenico 
Tempo
di lettura
10'

La velocità di caricamento delle pagine di un sito web è uno dei fattori più influenti per il successo di un progetto: maggiore è la rapidità con la quale un utente riesce a navigare, maggiori sono le possibilità di scalare il posizionamento sui motori di ricerca. Non solo: più i contenuti saranno disponibili all’utente in tempi brevi, migliore sarà la sua esperienza e più sarà probabile ottenere una conversione.

Ma come si può ottenere questo risultato senza intraprendere progetti faraonici e dispendiosi in termini di costi di mantenimento server? Utilizzando l’approccio Jamstack!

Che cos’è Jamstack

Jamstack non è né un linguaggio di programmazione né uno strumento specifico, ma un metodo di sviluppo che punta a migliori performance, costi minori e una maggiore scalabilità della piattaforma.

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup"

— Mathias Biilmann (CEO & Co-founder of Netlify

Jamstack per il miglioramento della velocità del sito

Come fa quindi Jamstack a migliorare le performance? Semplicemente prende i contenuti dinamici del sito da delle API (es. Wordpress) e li unisce a dei template, generando quindi dei file .html che contengono js e css.

Come funziona il processo di generazione di un sito statico.

Tutto quello che deve essere dinamico all’interno del sito e non influisce lato Seo può essere ottenuto attraverso la chiamata di altre API. 

A questo punto, i nostri contenuti saranno disponibili all’utente in tempi fino a 6 volte minori rispetto a un sito dinamico che interagisce in tempo reale con un database, come ad esempio succede in un sito sviluppato su Wordpress.

La buona notizia è che, se abbiamo già un sito web su Wordpress, possiamo utilizzarlo in modalità headless, ovvero raccogliendo i contenuti tramite le API. Quindi, se si ha intenzione di ottimizzare il proprio sito in quest’ottica, gli interventi su Wordpress saranno minimi: basterà creare un template e utilizzare un framework che supporti l’approccio Jamstack.

I costi dell’approccio Jamstack

Arriviamo così a uno dei punti più interessanti, ovvero il risparmio che Jamstack garantisce, rispetto alle alternative, per aumentare la velocità di un sito. Avendo dei contenuti statici generati e, quindi, nessuna applicazione che gira in background come per Wordpress o richieste al database per prendere contenuti ed elaborazioni varie fatte in PHP, basterà una CDN (Content Delivery Network), che ha dei costi sostanzialmente minori rispetto a una macchina virtuale dedicata.

Tecnicamente, possiamo pensare di distribuire la nostra architettura in questo modo: un hosting relativamente piccolo per gestire la parte di contenuti con Wordpress e una CDN sulla quale servire il nostro sito web.

La scalabilità

Per definizione, una CDN è una rete distribuita geograficamente il cui compito è servire nel minor tempo possibile file e contenuti multimediali e ha quindi una predisposizione al bilanciamento e alla compensazione delle risorse necessarie per portare a fine il suo compito. Se il nostro sito avrà un picco improvviso, in seguito per esempio al lancio di un nuovo prodotto oppure a una campagna, non ci saranno problemi relativi ai server dedicati, sui quali andrebbero fatte lunghe e dispendiose operazioni di upgrade per poter garantire dei buoni tempi di risposta.

La sicurezza

Escludere qualsiasi interazione diretta tra database e template ci consente di non esporci a tutti quegli attacchi in cui è facile imbattersi quando si ha a che fare con siti Wordpress se, ad esempio, non è stato aggiornato un plugin o un tema.

Velocizzare un sito web per il settore turistico

Abbiamo proposto questa soluzione a I Just Drive, un nostro cliente che opera nel settore del turismo.

La sue esigenze erano:

  • migliorare la performance del sito
  • mantenere la possibilità di gestire i contenuti tramite Wordpress
  • mantenere la loro applicazione backend (si trattava di prodotto custom creato su misura per lui).

L’approccio Jamstack era quello che faceva al caso nostro! Abbiamo sfruttato le API del loro backend per gestire i pagamenti, installato un Wordpress per la gestione dei contenuti e poi generato il sito staticamente.

Per ragioni di infrastruttura, abbiamo gestito il tutto con Docker su una macchina Amazon AWS, dove già risiedeva il vecchio progetto senza quindi variare i costi di infrastruttura, mentre il sito statico è stato servito tramite CloudFront, servizio facente parte della stessa famiglia.

Come abbiamo strutturato la piattaforma del cliente, per far si che rispondesse alle nostre esigenze

A inizio progetto, il sito aveva grossi problemi di performance: la velocità di risposta non era soddisfacente ed era quindi necessario intervenire per non perdere potenziali clienti. A maggior ragione per il settore turistico questo era fondamentale: la concorrenza online è spietata ed è necessario quindi proporre un sito competitivo.

Risultati test performance successivi ai nostri interventi.

Siamo riusciti a ottenere dei risultati degni di nota: la pagina ha ridotto di 1 secondo i tempi di caricamento e le dimensioni del risultato finale sono  un terzo di quelle di partenza.

Attraverso l’approccio Jamstack siamo quindi riusciti a ottenere:

  • Un’ottimizzazione sostanziale delle performance e, quindi, una migliorata esperienza per l’utente 
  • Un miglior ranking, influenzato dalla velocità del sito
  • Una maggiore facilità d’intervento lato Seo e Content
  • Un processo di pubblicazione automatizzato.

Conclusioni

Negli ultimi anni questo tipo di architettura si è evoluto molto, la community cresce esponenzialmente e contribuisce alla crescita e allo sviluppo di nuove funzionalità che permettono di avere molteplici utilizzi.

Quindi se hai un sito corporate, un magazine on-line oppure un e-commerce di medie dimensioni l’approccio Jamstack fa al caso tuo. Per applicazioni a realtà molto grandi, al momento, la sua applicazione deve però essere valutata da un team esperto per non rischiare di aggiungere un livello di complessità dove coesistono molti servizi.

Qualche risorsa Interessante

https://jamstack.wtf/

https://github.com/agarrharr/awesome-static-website-services

https://jamstack.org/examples/

https://serverless.css-tricks.com/


Vuoi saperne di più?

Iscriviti e riceverai gratuitamente sulla tua mail news, insight e report mensili sui trend del momento.

Registrandoti confermi di accettare la nostra privacy policy.


Condividi

Ho iniziato ad approcciarmi con il mondo del web non appena finite le scuole superiori, una mia amica mi disse che frequentava una scuola di web design, così senza pensarci troppo mi iscrissi e fu amore a prima vista. Ho iniziato ad avvicinarmi alla progettazione e alla grafica, ma mi sentivo incompleto, volevo far funzionare quello che disegnavo, e allora è arrivato il mio secondo amore, lo sviluppo Front end. Dopo un esperienza in una grande realtà del digital, ho deciso che le Big Company non facevano per me, avevo bisogno di nuovi stimoli continui, e fu così che incotrai Lotrèk. Continuando ad andare avanti mi sono sentito trascinare sempre più in profondità nello sviluppo, e cosi ho iniziato ad interessarmi allo sviluppo Back end. Però non vi preoccupate, la mia vita non è solo fatta di righe di codice, suono il basso in una band e sono un Crossfitter.

Articoli Correlati

 Invio email in corso, yeah!
Richiesta inviata
Il tuo indirizzo email risulta già iscritto
C'è stato un problema riprova più tardi