Share
Viviamo in un mondo in cui le persone si aspettano sempre più velocità sempre maggiori. In poche frazioni di secondo, il tuo sito web può perdere preziosi visitatori e, a sua volta, denaro. Sebbene la maggior parte della gente pensi che i CDN siano per i "cani grandi", in realtà sono super economici e incredibilmente facili da usare in questi giorni.
In questo tutorial ti mostrerò come configurare e utilizzare i servizi Web di Amazon S3 e CloudFront per ridurre il tempo di caricamento del sito web e mostrare le differenze di rendimento.
Un CDN è una rete di consegna del contenuto (o distribuzione). Si tratta di una rete di computer con ciascun sistema collocato in punti diversi con gli stessi dati su ciascuno. Quando qualcuno accede alla rete, può accedere al file sul sistema più vicino o su quello con meno carico corrente. Ciò si traduce in una minore latenza e durata del download dei file migliori. Per saperne di più sui CDN vedi "Content Delivery Network" su Wikipedia.
Nell'immagine di esempio sopra, i visitatori accedono al server più vicino che offre le migliori prestazioni possibili. La rete di server sarebbe la CDN. Un host web regolare avrebbe un server centrale in cui tutti i visitatori avrebbero accesso. Quel server potrebbe trovarsi solo negli Stati Uniti o forse in Europa e comporterebbe tempi di latenza e di caricamento più lunghi per i visitatori più lontani.
L'uso di più di un server, anche in un solo continente, farà la differenza in termini di prestazioni.
Alcune persone mi hanno chiesto perché una CDN è importante, anche per i siti Web di dimensioni minori, e perché dovrebbero preoccuparsi di pagare per un altro servizio Web. La risposta semplice è, più veloce: meglio è. E perché non offrire ai tuoi clienti (visitatori) il meglio che puoi?
Più piccolo è il sito Web, minore è l'impatto che avrà un CDN. Anche se, se i tuoi visitatori si traducono in denaro per te, allora ogni piccola cosa aiuta.
Costa poco. È facile. E può tradursi in più denaro in termini di clienti e di risparmio sulle spese regolari del tuo host web.
Amazon offre una miriade di fantastici servizi web. Useremo il Simple Storage Service (S3) di Amazon e CloudFront. S3 è una soluzione di archiviazione dati nel cloud che può essere collegata a CloudFront, il CDN di Amazon.
Se stai cercando una soluzione all-in-one leggermente più semplice, Rackspace Cloud Files è un'altra grande opzione. Hanno collaborato con il CDN di Limelight Network che ha prestazioni leggermente migliori rispetto al CDN di Amazon al momento. Tuttavia, il loro servizio presenta alcuni inconvenienti che non troverai con Amazon. Non entrerò in tutti questi, ma uno di quelli più grandi per me è stata la mancanza di supporto CNAME personalizzato che si suppone arrivi ad un certo punto in futuro. Con il supporto CNAME puoi configurare un sottodominio personalizzato per accedere ai tuoi file come "cdn.yourdomain.com".
Per vedere i confronti recenti sul rendimento, visitare http://www.cloudclimate.com/cdns/
Ecco i prezzi S3 di Amazon per gli Stati Uniti. Per le altre aree, fare clic sull'immagine per visualizzare il prezzo completo.
Ecco i prezzi di Amazon CloudFront per gli Stati Uniti. Per le altre aree, fare clic sull'immagine per visualizzare il prezzo completo.
Utilizza la calcolatrice mensile di Amazon per avere un'idea migliore della tua bolletta. Il mese scorso, la mia fattura totale era inferiore a $ 5, con la maggior parte di quella sostenuta da 20 GB + di archiviazione dei dati. Come puoi vedere, è molto, molto economico, specialmente se prendi in considerazione i vantaggi in termini di prestazioni e flessibilità.
Per iniziare, dobbiamo registrarci per i servizi S3 e CloudFront di Amazon. Se hai già un account con Amazon devi solo accedere e completare la registrazione. In caso contrario, sarà necessario creare un account quindi procedere alla registrazione per S3 e CloudFront. La registrazione è semplicemente aggiungendo il servizio al tuo account. Non c'è niente di complicato.
Fare clic su ciascuna immagine per accedere alle informazioni del servizio e alla pagina di registrazione.
Una volta effettuato l'accesso, riceverai un ID chiave di accesso e una chiave di accesso segreta che puoi trovare sotto "Il tuo account"> "Credenziali di sicurezza". Questo è fondamentalmente il tuo nome utente e password per accedere a S3.
Per prima cosa dobbiamo creare un bucket per memorizzare tutti i nostri file. Per ulteriori informazioni sui "bucket" leggi "Amazon S3 Buckets Described in Plain English".
Per fare questo, faremo prima il login nel nostro account S3 usando l'ID della chiave di accesso e la chiave di accesso segreto con un'applicazione come Transmit (OS X), che è quello che userò. Per visualizzare più app o componenti aggiuntivi del browser per l'accesso a S3, consulta "Servizio di archiviazione semplice Amazon S3 - Tutto quello che avresti voluto sapere".
Una volta effettuato l'accesso, creeremo un bucket per inserire i file. Ho chiamato il mio "files.jremick.com". I bucket devono avere nomi univoci, devono essere compresi tra 3 e 63 caratteri e possono contenere lettere, numeri e trattini (ma non possono terminare con un trattino).
Per esclusivi, significano univoci sulla rete AWS. Quindi è una buona idea usare qualcosa come un URL o qualcosa di simile.
I file che abbiamo inserito in questo bucket sono ora accessibili da "files.jremick.com.s3.amazonaws.com". Tuttavia, questo URL è piuttosto lungo e possiamo impostarne rapidamente uno più breve. Configureremo una nuova voce CNAME nel nostro host web per farlo.
Per abbreviare l'URL predefinito creeremo una voce CNAME come ho fatto di seguito (questo è nel tuo host web). Ho scelto "file" come sottodominio ma puoi usare quello che vuoi.
Ora possiamo accedere a questi file bucket in "files.jremick.com". Molto meglio! Quindi, carica semplicemente i file che desideri all'interno del bucket "files.jremick.com".
Una volta caricati i file, ti consigliamo di impostare l'ACL (Access Control List) per consentire a tutti di leggere i file (se li vuoi pubblici). In Transmit è sufficiente fare clic con il pulsante destro del mouse, selezionare Ottieni informazioni, sotto autorizzazioni impostare "Leggi" su "Mondo" e fare clic su "Applica agli elementi inclusi ...". Ciò consentirà a tutti i file all'interno di questo bucket di leggere l'accesso al mondo.
Per impostazione predefinita, i file caricati sul tuo account S3 permetteranno solo l'accesso in lettura e scrittura al proprietario. Quindi, se carichi in seguito nuovi file, dovrai ripetere questi passaggi o applicare autorizzazioni diverse solo per quei file.
Ora che abbiamo impostato S3, creato un URL più breve e caricato i nostri file, vorremmo rendere questi file accessibili tramite CloudFront per ottenere una latenza estremamente ridotta per ridurre i tempi di caricamento. Per fare ciò abbiamo bisogno di creare una distribuzione CloudFront.
Accedi al tuo account AWS e accedi alla tua console di gestione Amazon CloudFront (nel menu a discesa "Il tuo account"). Quindi fare clic sul pulsante "Crea distribuzione".
Selezioneremo il bucket di origine (il bucket che abbiamo creato in precedenza), accediamo alla registrazione se lo desideri, specificando un CNAME e commenti e infine abilitiamo o disabilitiamo la distribuzione. Non è necessario inserire un CNAME o commenti, ma in seguito vorremmo impostare un URL più breve come in S3. Vorrei usare "cdn.jremick.com", ecco cosa sto impostando qui.
Come puoi vedere, l'URL predefinito è piuttosto brutto. Non è qualcosa che vorrete provare a ricordare. Quindi ora impostiamo un CNAME per l'URL carino e breve.
Per configurare il sottodominio CloudFiles personalizzato, faremo lo stesso processo che abbiamo fatto per S3.
Ora possiamo accedere ai file tramite CloudFront usando "cdn.jremick.com".
Quando qualcuno accede a un file tramite il bucket S3, funziona come un normale host di file. Tuttavia, quando qualcuno accede a un file tramite CloudFiles, richiede il file dal bucket S3 (l'origine) e lo memorizza nella cache sul server CDN più vicino alla richiesta originale per tutte le richieste successive. È un po 'più complicato di così, ma questa è l'idea generale.
Pensa a un CDN come a una rete intelligente in grado di determinare il percorso più veloce possibile per la consegna delle richieste. Un altro esempio potrebbe essere se il server più vicino è impantanato con il traffico, potrebbe essere più veloce ottenere il file da un server un po 'più lontano ma con meno traffico. Quindi CloudFront consegnerà il file richiesto da quella posizione.
Una volta che un file viene memorizzato nella cache nei server di rete CloudFront, non viene sostituito finché non scade e viene rimosso automaticamente (dopo 24 ore di inattività per impostazione predefinita). Questo può essere un grosso problema se stai cercando di spingere gli aggiornamenti immediatamente. Per aggirare questo è necessario per la versione dei file. Ad esempio, "my-stylesheet.css" potrebbe essere "my-stylesheet-v1.0.css". Quindi quando fai un aggiornamento che deve uscire immediatamente cambieresti il nome in "my-stylesheet-v1.1.css" o qualcosa di simile.
Il nostro contenuto viene caricato nel nostro bucket S3, la distribuzione CloudFront viene distribuita e i nostri sottodomini personalizzati sono configurati per un facile accesso. È giunto il momento di metterlo alla prova per vedere quale tipo di prestazioni possiamo aspettarci.
Ho impostato 44 immagini di esempio con dimensioni comprese tra 2 KB circa e 45 KB. Potresti pensare che si tratti di più immagini di quelle che la maggior parte dei siti web caricherà su una singola pagina. Potrebbe essere vero, ma ci sono molti siti web come portfolio, siti di e-commerce, blog, ecc. Che caricano altrettante e possibilmente più immagini.
Sebbene io stia usando solo immagini per questo esempio, ciò che è importante è la dimensione del file e la quantità per il confronto. I siti Web di oggi caricano diversi file JavaScript, CSS, HTML e immagine su ogni pagina. 44 richieste di file sono probabilmente meno di quelle che la maggior parte dei siti Web fanno in modo che una CDN possa avere un impatto ancora maggiore sul tuo sito rispetto a quanto vedremo in questo confronto.
Sto usando Safari's Web Inspector per visualizzare i risultati delle prestazioni, ho disabilitato le cache e shift + refresh 10-15 volte (circa ogni 2-3 secondi) per ogni test per ottenere una media decente di tempo di caricamento totale, latenza e durata.
Ecco i risultati delle prestazioni quando sono ospitati tramite il mio normale host web. Ordinato per latenza.
Ordinato per durata.
Gli stessi file esatti sono stati utilizzati per testare S3. Ordinato per latenza.
Ordinato per durata.
S3 è più veloce del mio normale host web, ma solo marginalmente. Se non hai voglia di fare casino con un CDN, S3 è comunque un'ottima opzione per dare al tuo sito web una buona spinta di velocità. Consiglio comunque di usare un CDN e vedremo perché in questo prossimo test.
Gli stessi file esatti sono stati utilizzati per testare CloudFront.
Ordinato per durata.
Ecco una rapida ripartizione del confronto delle prestazioni tra il mio normale host web e gli stessi file sul servizio CloudFront di Amazon.
Confronto della durata
50 ms o anche 100 ms non sembrano aspettare molto a lungo (0,1 secondi) ma quando lo ripeti per 30, 40, 50 o più file, puoi vedere come si aggiunge rapidamente a secondi.
Ecco un breve video per mostrare quanto sia notevole l'aumento del tempo di caricamento. Ho disabilitato le cache e fatto un aggiornamento forzato (shift + refresh) per assicurarmi che le immagini non vengano memorizzate nella cache.
Ci sono molti altri modi per aumentare le prestazioni del sito Web quando si utilizza un CDN.
Vedi le migliori pratiche per accelerare il tuo sito Web per ulteriori informazioni.
Una delle opzioni di cui sopra per aumentare ulteriormente le prestazioni era fornire file compressi con gzip. Purtroppo CloudFront non è in grado di determinare automaticamente se un visitatore può accettare o meno file compressi e offrire quello corretto. Fortunatamente, tutti i moderni browser supportano i file compressi in questi giorni.
Per offrire file compressi con gzip da CloudFront, possiamo dare al nostro sito web qualche logica per servire i file giusti o possiamo impostare Content-Encoding e Content-Type su alcuni file specifici per mantenere le cose un po 'più semplici. Gzip i file che si desidera e li rinomina in modo che non si esaurisca .gz. Ad esempio, "nomefile.css.gz" diventerebbe "nomefile.css" o per ricordare a te stesso che si tratta di un file gzip, chiamarlo "nomefile.gz.css". Ora carica il file gzippato nella posizione nel bucket S3 che desideri (non dimenticare di impostare ACL / Autorizzazioni).
Se non sei sicuro di come gzip un file, vedi http://www.gzip.org (OS X può farlo nel terminale)
Abbiamo bisogno di impostare Content-Encoding e Content-Type (se non è già impostato) sui nostri file in modo che, quando richiesto dal browser, sappia che il contenuto è gzip e sarà in grado di decomprimerlo correttamente. Altrimenti sembrerà così.
Possiamo farlo facilmente con Bucket Explorer. Una volta scaricato, inserisci la chiave di accesso AWS e la chiave segreta per accedere al tuo account S3. Trova il file gzip che hai caricato in precedenza, fai clic con il tasto destro e seleziona "Aggiorna MetaData".
Come puoi vedere, ha già impostato Content-Type su text / css, quindi non è necessario impostarlo (javascript sarebbe text / javascript). Abbiamo solo bisogno di aggiungere la giusta codifica del contenuto. Fai clic su "Aggiungi" e nella finestra di dialogo popup inserisci "Codifica contenuto" nel campo Chiave e "gzip" nel campo Valore. Fai clic su OK, quindi Salva e il gioco è fatto! Ora il browser visualizzerà il file correttamente.
Gzipping di un file può ridurre notevolmente la dimensione del file. Ad esempio, questo foglio di stile del test era di circa 22 KB e veniva ridotto a circa 5 KB. Per il mio blog ho combinato tutti i miei plugin jQuery con le schede dell'interfaccia utente jQuery. Dopo il minification è stato ridotto a 26.49KB, dopo essere stato gzipato è stato ridotto a 8.17KB.
Ci sono molti modi per aumentare le prestazioni del tuo sito web e secondo me vale la pena provare. Se i visitatori sono a solo 0,5 secondi o addirittura a 1 secondo dal lasciare il tuo sito web, una CDN potrebbe impedire che ciò accada. Inoltre, molti di noi sono appassionati di velocità, quindi perché non aumentare le prestazioni del tuo sito web se puoi? Soprattutto se potesse risparmiare denaro nel processo.
Se avete domande, fatemelo sapere nei commenti e cercherò di rispondere a loro. Grazie!
Accentsconagua