Ottimizzazione delle immagini
Panoramica
Le immagini sono in genere i componenti più pesanti di una pagina web, sia in termini di byte che di numero di richieste HTTP. L'ottimizzazione delle immagini sul tuo sito web è fondamentale per migliorare l'esperienza degli utenti, ridurre i costi di consegna e migliorare la tua posizione nel posizionamento nei motori di ricerca. Ad esempio, i parametri Largest Contentful Paint di Google, nel loro algoritmo di posizionamento nei risultati di ricerca, sono fortemente influenzati da quanto ottimizzi le immagini sul tuo sito web.
Decisioni architetturali
Una soluzione di ottimizzazione delle immagini può essere progettata in diversi modi, in base alle tue esigenze in termini di costi, flessibilità e prestazioni. Quando si progetta una soluzione di ottimizzazione delle immagini, è necessario prendere le seguenti decisioni tecniche:
- Quali trasformazioni di immagini sono necessarie? Formattazione, ridimensionamento, ritaglio, ecc.
- Quando decidiamo quale trasformazione applicare per una specifica richiesta di immagine? Nel front-end sul lato client (design statico, reattivo, ecc.), sul lato server (in base al contenuto della richiesta, ad esempio il dispositivo) o entrambi?
- Dove eseguiamo la trasformazione? In una posizione centrale o in modo distribuito?
- Quando eseguiamo la trasformazione? Ogni volta o archiviamo immagini trasformate per un breve periodo? Viene eseguita in modo sincrono o asincrono?
Un'altra decisione importante da prendere è se si desidera creare la soluzione utilizzando i servizi AWS o acquistare una soluzione gestita da terze parti.
Casi d'uso comuni
Soluzione gestita dal cliente basata su CloudFront, S3 e Lambda
Il caso d'uso più comune per l'ottimizzazione delle immagini richiede una formattazione automatica basata sulle funzionalità del browser dell'utente e la possibilità al front-end di ridimensionare l'immagine. I framework di sviluppo web più diffusi, come Next.JS, forniscono componenti di immagine reattivi in grado di selezionare automaticamente la dimensione dell'immagine in base alla finestra di visualizzazione del dispositivo. L'architettura consigliata per questo caso d'uso comune è spiegata nel diagramma seguente:
- L'utente invia una richiesta HTTP per un'immagine con trasformazioni specifiche, come codifica e dimensione. Le trasformazioni sono codificate nell'URL, più precisamente come parametri di ricerca. Un URL di esempio sarà simile al seguente: https://exmaples.com/images/cats/mycat.jpg?format=webp&width=200.
- La richiesta viene elaborata da una posizione edge CloudFront nelle vicinanze che fornisce le migliori prestazioni. Prima di passare la richiesta a monte, viene eseguita una Funzione CloudFront sull'evento di richiesta del visualizzatore per riscrivere l'URL della richiesta. Funzioni CloudFront è una funzionalità di CloudFront che consente di scrivere funzioni leggere in JavaScript per personalizzazioni CDN su larga scala e sensibili alla latenza. Nella nostra architettura, riscriviamo l'URL per convalidare le trasformazioni richieste e normalizziamo l'URL ordinando le trasformazioni e convertendole in lettere minuscole per aumentare il tasso di riscontri nella cache. Quando viene richiesta una trasformazione automatica, la funzione decide anche quale sia la migliore da applicare. Ad esempio, se l'utente richiede il formato di immagine più ottimizzato (JPEG, WebP o AVIF) utilizzando il comando format=auto, la funzione CloudFront selezionerà il formato migliore in base all'intestazione Accetta presente nella richiesta.
- Se l'immagine richiesta è già memorizzata nella cache di CloudFront, si verificherà un riscontro nella cache e l'immagine verrà restituita dalla cache di CloudFront. Per aumentare la percentuale di accessi alla cache, abilitiamo Origin Shield, una funzionalità di CloudFront che funge da ulteriore livello di caching prima dell'origine, per alleggerirla ulteriormente dalle richieste. Se l'immagine non è nella cache di CloudFront, la richiesta verrà inoltrata a un bucket S3, creato per archiviare le immagini trasformate. Se l'immagine richiesta è già trasformata e archiviata in S3, viene semplicemente servita e memorizzata nella cache in CloudFront.
- In caso contrario, S3 risponderà con un codice di errore 403, rilevato da Origin Failover di CloudFront. Grazie a questa funzionalità nativa, CloudFront riprova a utilizzare lo stesso URL, ma questa volta utilizzando l'origine secondaria basata sull'URL della funzione Lambda. Quando viene richiamata, la funzione Lambda scarica l'immagine originale da un altro bucket S3, in cui sono archiviate le immagini originali, la trasforma utilizzando la libreria Sharp, archivia l'immagine trasformata in S3, quindi la serve tramite CloudFront dove verrà memorizzata nella cache per le richieste future.
Per implementare questa soluzione, segui i passaggi descritti in questo blog. Inoltre, il blog mostra come utilizzare il componente Image di Next.JS. È importante tenere presente che la soluzione permette di disabilitare l'archiviazione delle immagini trasformate in S3, per affidarsi esclusivamente alla cache di CloudFront per la pubblicazione delle immagini trasformate.
Soluzioni gestite da terze parti
Se preferisci utilizzare una soluzione di ottimizzazione delle immagini gestita da terze parti, prendi in considerazione le soluzioni disponibili sul Marketplace AWS, come Cloudinary, ImageKit.io o Cloudimage. Tutte e tre utilizzano CloudFront o dispongono di integrazioni con CloudFront se desideri gestire la tua distribuzione CloudFront. Tali fornitori di terze parti sono specializzati nell'ottimizzazione delle immagini, possono fornire funzionalità SaaS avanzate, ma a un costo aggiuntivo.