Home Articoli tecnici Ottimizzazione delle prestazioni della CDN per l’applicazione con EdgeJS by Edgio
Applications

Ottimizzazione delle prestazioni della CDN per l’applicazione con EdgeJS by Edgio

About The Author

Outline

Un’introduzione sul caching strategico dei contenuti dinamici alla periferia della rete: Come funzionano e perché sono migliori delle CDN tradizionali.

Quando si tratta di prestazioni, la maggior parte delle CDN fa bene alcune cose, distribuiscono rapidamente file statici, forniscono un sovraccarico di rete per i tempi di picco del traffico e proteggono dagli attacchi DDoS a livello di rete. Storicamente ciò significava un aumento tangibile delle prestazioni e della sicurezza per risorse come immagini, video e altri contenuti statici. Con l’evolversi delle tecnologie Web, i suddetti vantaggi sono essenzialmente solo la posta in gioco che è stata stabilita quando le CDN sono entrate a far parte delle soluzioni di web delivery mainstream.

Il problema è che l’architettura CDN è stata sviluppata anni fa. L’architettura del sito Web è cambiata a passi da gigante, ma la maggior parte delle CDN non si è adattata al panorama in evoluzione.

Se state leggendo questo documento, avete un sito che probabilmente è stato progettato con una certa quantità di contenuto dinamico renderizzato sul lato server. Se stai usando una CDN legacy, probabilmente sei abituato a vedere qualcosa di simile nelle intestazioni di risposta quando recuperi gli strumenti di sviluppo del tuo browser.

cdn-cache: pass

Sostituire il valore per questa coppia a seconda del provider: Pass, Miss o Dynamic-content. Significa tutto la stessa cosa.

“Questa risposta viene dalla tua origine perché era troppo complicato.”

E cosa significa questo per le prestazioni del tuo sito? Significa che sacrificherai la velocità perché i tuoi contenuti dinamici provengono quasi sempre dalla tua origine semplice e semplice. Le pagine di categoria e prodotto, gli articoli e le richieste API vengono inviati direttamente all’origine quasi il 100% del tempo. La maggior parte delle CDN soffre della stessa piaga. Se sei fortunato puoi comprimere circa il 10-11% delle risposte dinamiche del tuo server nella tua cache edge. Scoprirai rapidamente che non hai abbastanza controllo granulare per ottimizzare le regole di cache per creare un sito Web che si carica istantaneamente e sembra un’app nativa.

Benvenuto a Edgio

In Edgio vantiamo la seconda CDN più grande del pianeta con oltre 300 POP distribuiti a livello globale e 250 TBS di capacità. Siamo sicuri, performanti e ovunque nel mondo. Ma, come abbiamo detto prima, sono solo le puntate da tavola. In Edgio, ci stiamo avvicinando al problema della CDN da una prospettiva diversa. Invece di essere legati a regole di vent’anni fa, abbiamo costruito una CDN reattiva e flessibile per i prossimi vent’anni e oltre. Abbiamo sviluppato il primo codice CDN configurabile al mondo che offre agli sviluppatori e ai membri del team DevOps la flessibilità e il controllo granulare di cui avranno bisogno per distribuire siti Web in meno di un secondo.

Non è magia, è il futuro dei CDN ed è disponibile ora

A questo punto, probabilmente stai pensando che questo sembra magico, beh potrebbe sembrare così, ma non lo è, è il futuro della distribuzione di applicazioni web. Invece di separare i team DevOps da quelli di progettazione, li stiamo riunendo consentendo di integrare la logica CDN negli ambienti locali, di staging e di produzione.

Memorizza facilmente nella cache tutto ciò che vuoi, per quanto tempo vuoi

Ogni configurazione Edgio inizia con un repository di codice che l’utente possiede e controlla. Ogni distribuzione è unica e atomica, il che significa che è possibile eseguire il rollback a qualsiasi versione in meno di un minuto. Sei libero di distribuire la configurazione insieme al tuo progetto o di mantenerla in un flusso di lavoro separato. La maggior parte dei nostri clienti finisce per incorporare le regole CDN nella pipeline ci/CD e nel normale flusso di sviluppo. Il risultato è una maggiore velocità dello sviluppatore senza sacrificare le prestazioni e il controllo. Gestisci la tua CDN come fai con la tua base di codice.

Sono abituato a pubblicare le mie modifiche di configurazione in un portale o facendo richieste API. In che modo è diverso Edgio?

Non preoccuparti, abbiamo endpoint API e un’interfaccia utente tradizionale disponibili quando lo desideri, ma per massimizzare completamente il tasso di successo della cache, le prestazioni del sito e la velocità degli sviluppatori, è consigliabile iniziare a utilizzare EdgeJS. Immergetevi.

Quando un progetto viene inizializzato inizierai con un semplice file di configurazione che include un set di regole consigliato. La configurazione è scritta in JavaScript, il linguaggio di sviluppo più diffuso al mondo, e distribuita in pochi secondi con la nostra CLI. Un file definisce i server di origine.

				
					module.exports = {
backends: {
  origin: {
    domainOrIp: "example.com",
    hostHeader: "example.com",
  },
},
				
			

Aggiungete gli endpoint API, i media bucket o qualsiasi altra origine di cui avete bisogno. Facilmente e con poche righe di codice.

E la flessibilità di memorizzazione nella cache?

Ottima domanda, è qui che inizia il divertimento. Aggiungiamo un altro file in modo da poter configurare i percorsi e scrivere alcune regole di caching. Crea regole per i tuoi contenuti e imposta le regole di caching edge, browser e service worker come meglio credi.

Cominciamo con quelle risorse statiche che le CDN gestiscono così bene.

				
					.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
  ({ cache, proxy }) => {
    cache({
      edge: {
      maxAgeSeconds: 60 * 60 * 24,
      staleWhileRevalidateSeconds: 60 * 60
      },
      browser: {
      maxAgeSeconds: 60 * 60 * 24,
      },
    })
    proxy('origin')
  }
)
				
			

Con una regola abbiamo stabilito qualcosa del genere per qualsiasi richiesta:

“Se vediamo una richiesta con un’estensione di file corrispondente, memorizzarla nella cache su Edgio e sul browser del client per ventiquattro ore.”

Se stai provando a farlo a casa, puoi fare clic sul tuo sito locale e osservare come vengono memorizzate e distribuite immagini, immagini, font, CSS e JS. Attivare una finestra in incognito per essere certi che la cache del browser sia vuota e visualizzare i risultati della cache localmente. Sì, a livello locale. Non è necessario implementarlo per vederlo funzionare. Sai esattamente come interagirà il tuo codice con la nostra CDN.

E il contenuto dinamico di cui hai parlato?

Oh, non preoccuparti, non l’abbiamo dimenticato. Siamo a soli 10 minuti e stiamo abbinando quei CDN legacy. Ora accendiamo i postbruciatori e li lasciamo nella polvere. Supponiamo di voler aggiungere un percorso per alcuni contenuti dinamici.

				
					router.match('/products/:productId', ({ cache, proxy }) => {
  cache({
    edge: {
      maxAgeSeconds: 60 * 60 * 24
      staleWhileRevalidateSeconds: 60 * 60
    }
  })
  proxy('origin')
})
				
			

E tradotto significa quanto segue:

“Memorizza nella cache tutte le pagine dei prodotti per un giorno.”
Quando la cache è scaduta, servire quella vecchia per un’ora mentre cerchiamo una nuova versione”

Ora hai visto la flessibilità e hai capito le basi. Speriamo che tu stia immaginando che tipo di impatto la distribuzione della tua CDN su Edgio può avere sulla velocità e le prestazioni del tuo sito. È possibile definire facilmente percorsi personalizzati e assegnare regole di memorizzazione nella cache. Ma cos’altro puoi fare con la piattaforma di applicazioni di Edgio e EdgeJS?

  • Inoltrare le richieste a un percorso diverso sull’origine,
  • Modificare le richieste
  • Modificare le risposte
  • Manipolare i cookie
  • Gestire i file statici
  • Percorso verso le funzioni senza server
  • Tornare al rendering lato server
  • Reindirizzamenti
  • Blocco del traffico
  • Eliminazione selettiva con chiavi cache personalizzate
  • O trasformare completamente la risposta della tua origine.

Sta a te decidere come sfruttare la tecnologia di nuova generazione di Edgio e gli esempi sopra riportati sono solo la punta dell’iceberg. In effetti, in Edgio siamo alla costante ricerca delle prestazioni, quindi abbiamo deciso di spingerci oltre, oltre il limite e nel browser del tuo visitatore con la nostra esclusiva soluzione HTML e di precaricamento delle risorse.

Per scoprire come eliminare virtualmente i tempi di risposta della rete e trasformare completamente il vostro sito Web dando al sito la sensazione di un’applicazione nativa, consultate il nostro articolo di follow-up: Ridurre i tassi di rimbalzo e migliorare l’esperienza del sito con il prefetching predittivo di Edgio.