Share
Trăim într-o lume în care oamenii așteaptă tot mai mult viteze mai mari și mai rapide. În fracțiuni de secundă, site-ul dvs. poate pierde vizitatori valoroși și, la rândul său, bani. Deși majoritatea oamenilor cred că CDN-urile sunt pentru "câinii mari", ei sunt, de fapt, foarte ieftini și incredibil de ușor de folosit în aceste zile.
În acest tutorial vă voi arăta cum să configurați și să utilizați serviciile Web Amazon S3 și CloudFront pentru a reduce timpul de încărcare a site-ului, precum și pentru a afișa diferențele de performanță.
Un CDN este o rețea de distribuire a conținutului (sau de distribuție). Este o rețea de calculatoare cu fiecare sistem plasat în diferite puncte cu aceleași date pe fiecare. Când cineva accesează rețeaua, aceștia pot accesa fișierul din cel mai apropiat sistem sau cel cu sarcină mai puțin curentă. Acest lucru are ca rezultat o mai bună latență mai mică și durata de descărcare a fișierelor. Pentru a afla mai multe despre CDN, consultați "Rețeaua de difuzare a conținutului" de pe Wikipedia.
În exemplul imaginii de mai sus, vizitatorii accesează serverul cel mai apropiat, care va oferi cea mai bună performanță posibilă. Rețeaua de servere ar fi CDN. O gazdă web obișnuită ar avea un server central în care toți vizitatorii vor avea acces. Acest server ar putea fi localizat numai în SUA sau poate în Europa și ar avea ca rezultat o perioadă mai lungă de timp și de încărcare pentru vizitatori mai departe.
Folosirea a mai mult de un server, chiar și pe un singur continent, va face o diferență în performanță.
Am avut destul de putini oameni sa ma intrebe de ce un CDN este important, chiar si pentru site-uri mai mici, si de ce ar trebui sa deranjeze plata pentru un alt serviciu web. Răspunsul simplu este, cu cât mai repede - cu atât mai bine. Și de ce nu oferiți clienților (vizitatorilor) cât mai bine?
Cu cât site-ul este mai mic, cu atât mai puțin impactul pe care îl va avea un CDN. Cu toate acestea, dacă vizitatorii dvs. traduc în bani pentru dvs., atunci fiecare bit ajută.
Este ieftin. Este ușor. Și se poate traduce în mai mulți bani din punct de vedere al clienților și de economisire a cheltuielilor dvs. regulate gazdă web.
Amazon oferă o mulțime de servicii fantastice de web. Vom folosi serviciile Amazon Simple Storage (S3) și CloudFront. S3 este o soluție de stocare a datelor în nor care poate fi legată de CloudFront, CDN al Amazonului.
Dacă sunteți în căutarea unei soluții ușor mai simple, all-in-one, Rackspace Cloud Files este o altă opțiune excelentă. Au colaborat cu CDN-ul Limelight Network, care are performanțe puțin mai bune decât CDN-ul Amazon în prezent. Cu toate acestea, serviciul lor are câteva dezavantaje pe care nu le veți găsi cu Amazon. Nu voi intra în toate acestea, dar una dintre cele mai mari pentru mine a fost lipsa de sprijin personalizat CNAME care se presupune că va veni la un moment dat în viitor. Cu ajutorul asistenței CNAME, puteți configura un sub-domeniu personalizat pentru a accesa fișierele dvs., cum ar fi "cdn.yourdomain.com".
Pentru a vedea comparațiile recente de performanță, vizitați http://www.cloudclimate.com/cdns/
Iată prețurile S3 ale lui Amazon pentru SUA. Pentru alte zone, faceți clic pe imagine pentru a vedea prețurile complete.
Iată prețurile CloudFront ale companiei Amazon pentru SUA. Pentru alte zone, faceți clic pe imagine pentru a vedea prețurile complete.
Utilizați calculatorul lunar al Amazonului pentru a obține o idee mai bună despre factura de la sfârșit. În ultima lună, factura mea totală a fost mai mică de 5 USD, majoritatea fiind suportate din stocarea datelor de 20GB +. După cum puteți vedea, este foarte, foarte ieftin, mai ales atunci când țineți cont de avantajele de performanță și flexibilitate.
Pentru a începe, trebuie să vă înscrieți pentru serviciile S3 și CloudFront de la Amazon. Dacă aveți deja un cont la Amazon, trebuie să vă conectați și să terminați înregistrarea. Dacă nu, va trebui să creați un cont, apoi să vă înscrieți pentru S3 și CloudFront. Înscrierea este pur și simplu adăugarea serviciului în contul dvs. Nu este nimic complicat implicat.
Faceți clic pe fiecare imagine pentru a accesa pagina de informații și înscriere a serviciului.
Odată ce v-ați înscris, veți primi un ID de cheie de acces și o cheie de acces secret, care poate fi găsită în secțiunea "Contul dvs."> "Certificatele de securitate". Acesta este, în principiu, numele de utilizator și parola pentru accesarea S3.
Mai întâi trebuie să creați o găleată pentru a stoca toate fișierele noastre. Pentru mai multe informații despre "găleți" citiți "Amazon S3 Buckets Described în engleză simplă".
Pentru a face acest lucru, vă vom conecta mai întâi la contul S3 utilizând ID-ul cheie de acces și cheia de acces secret cu o aplicație precum Transmit (OS X), ceea ce voi folosi. Pentru a vedea mai multe aplicații sau extensii de browser pentru a accesa S3, consultați "Amazon S3 Service Simple Storage - Tot ceea ce ați dori să știți".
După ce ne-am conectat, vom crea o găleată pentru a pune fișierele înăuntru. Am numit-o pe "files.jremick.com". Piesele trebuie să aibă nume unice, trebuie să aibă între 3 și 63 de caractere și pot conține litere, numere și liniuțe (dar nu pot fi terminate cu o linie).
Prin unicitate, ele inseamna unice in reteaua AWS. Deci este o idee bună să folosiți ceva asemănător unui URL sau ceva similar.
Fișierele pe care le-am pus în această cupă pot fi accesate acum la "files.jremick.com.s3.amazonaws.com". Cu toate acestea, această adresă URL este destul de lungă și putem configura rapid unul mai scurt. Vom configura o nouă înregistrare CNAME la gazda noastră web pentru a face acest lucru.
Pentru a scurta adresa URL prestabilită, vom crea o intrare CNAME așa cum am făcut mai jos (aceasta este la gazda web). Am ales "fișierele" ca subdomeniu, dar ați putea folosi orice doriți.
Acum putem accesa aceste fișiere la "files.jremick.com". Mult mai bine! Apoi, încărcați pur și simplu fișierele dorite în galeria "files.jremick.com".
Odată ce fișierele dvs. sunt încărcate, veți dori să setați ACL (Lista de control al accesului) pentru a permite tuturor să citească fișierele (dacă le doriți publice). În Transmiteți pur și simplu clic dreapta, selectați informații, sub permisiuni setați "Citiți" în "Lumea" și faceți clic pe "Aplicați la elementele închise ...". Acest lucru va da toate fișierele din această coșetă accesul în lume.
Implicit, fișierele încărcate în contul dvs. S3 vor permite accesul numai la citire și scriere proprietarului. Deci, dacă încărcați mai târziu fișiere noi, va trebui să parcurgeți din nou acești pași sau să aplicați permisiuni diferite doar pentru acele fișiere.
Acum, când am instalat S3, am creat o adresă URL mai scurtă și am încărcat fișierele noastre, vom dori să le facem accesibile prin CloudFront pentru a obține o latență super scăzută pentru a reduce timpul de încărcare. Pentru a face acest lucru, trebuie să creați o distribuție CloudFront.
Conectați-vă la contul dvs. AWS și navigați la consola dvs. de administrare Amazon CloudFront (din meniul derulant "Contul dvs."). Apoi faceți clic pe butonul "Creați distribuire".
Vom selecta galeria de origine (galeta pe care am creat-o mai devreme), vom activa logarea dacă doriți, vom specifica un CNAME și vom comenta și în final fie vom activa, fie vom dezactiva distribuția. Nu trebuie să introduceți un CNAME sau comentarii, dar vom dori să setăm o adresă URL mai scurtă mai târziu, ca și în cazul S3. Aș dori să folosesc "cdn.jremick.com", așa că aș fi aici.
După cum puteți vedea, adresa URL prestabilită este destul de urâtă. Nu e ceva ce vrei să încerci să-ți amintești. Deci, acum să setăm un CNAME pentru URL-ul destul de scurt, scurt.
Pentru a configura subdomeniul particularizat CloudFiles, vom trece prin același proces ca și în cazul S3.
Acum putem accesa fișiere prin CloudFront folosind "cdn.jremick.com".
Când cineva accesează un fișier prin cupa dvs. S3, acesta se comportă exact ca un gazda obișnuită a fișierelor. Când cineva accesează un fișier prin CloudFiles, cere însă fișierul din galeria dvs. S3 (originea) și cache-ul la serverul CDN cel mai aproape de cererea inițială pentru toate solicitările ulterioare. Este ceva mai complicat decât asta, dar asta e ideea generală.
Gândiți-vă la un CDN ca la o rețea inteligentă care poate determina cel mai rapid traseu posibil de livrare a solicitărilor. Un alt exemplu ar fi dacă serverul cel mai apropiat este împotmolit cu trafic, ar putea fi mai rapid să obțineți fișierul dintr-un server puțin mai departe, dar cu mai puțin trafic. Astfel, CloudFront va livra fișierul solicitat din acea locație.
Odată ce un fișier este stocat în memoria cache în serverele de rețea CloudFront, acesta nu se înlocuiește decât după expirarea acestuia și este eliminat automat (după 24 de ore de inactivitate în mod implicit). Aceasta poate fi o durere majoră dacă încercați imediat să împingeți actualizările. Pentru a face acest lucru va trebui să versiunea fișierelor. De exemplu, "my-stylesheet.css" ar putea fi "my-stylesheet-v1.0.css". Apoi, atunci când faceți o actualizare care trebuie să iasă imediat, ați schimba numele în "my-stylesheet-v1.1.css" sau ceva similar.
Conținutul nostru este încărcat în galeria noastră S3, distribuția noastră CloudFront este implementată, iar subdomenii personalizate sunt configurate pentru un acces facil. Este timpul să facem testul pentru a vedea ce fel de beneficii de performanță ne putem aștepta.
Am setat 44 exemple de imagini care variază de la aproximativ 2KB până la 45KB. S-ar putea să vă gândiți că acest lucru reprezintă mai multe imagini decât majoritatea site-urilor web care se vor încărca pe o singură pagină. Asta ar putea fi adevărat, dar există multe site-uri web, cum ar fi portofolii, site-uri de comerț electronic, bloguri etc. care să încarce cât mai multe imagini și, eventual, mai multe imagini.
Deși folosesc numai imagini pentru acest exemplu, ceea ce este important este dimensiunea fișierului și cantitatea pentru comparație. Site-urile de astăzi se încarcă mai multe fișiere javascript, CSS, HTML și imagini pe fiecare pagină. Solicitările de fișiere de 44 sunt probabil mai puține decât majoritatea site-urilor web, astfel încât un CDN ar putea avea un impact și mai mare asupra site-ului dvs. decât vom vedea în această comparație.
Folosesc Inspectorul Web al Safari pentru a vizualiza rezultatele performantelor, am dezactivat cache-urile și schimbarea + reîmprospătarea de 10-15 ori (la fiecare 2-3 secunde) pentru fiecare test pentru a obține o medie decentă a timpului de încărcare total, latență și durată.
Iată rezultatele de performanță când sunt găzduite prin intermediul gazdei mele web regulate. Sortați după latență.
Sortare după durată.
Aceleași fișiere au fost folosite pentru testarea S3. Sortați după latență.
Sortare după durată.
S3 este mai rapid decât gazda web obișnuită, dar numai marginal. Dacă nu v-ați simțit cumva să faceți un CDN, S3 este încă o opțiune excelentă de a oferi site-ului dvs. un impuls de viteză decent. Totusi recomand sa folositi un CDN si vom vedea de ce in acest test urmator.
Aceleași fișiere au fost utilizate pentru testarea cloud-ului.
Sortare după durată.
Iată o defalcare rapidă a comparării performanțelor dintre gazda web obișnuită și aceleași fișiere din serviciul CloudFront de la Amazon.
Compararea duratei
50ms sau chiar 100ms nu sună ca un timp foarte lung de așteptare (0,1 secunde), dar când repetați că pentru 30, 40, 50 sau mai multe fișiere, atunci puteți vedea cum se adaugă rapid până la secunde.
Iată un videoclip rapid care arată cât de vizibil este creșterea timpului de încărcare. Am dezactivat cache-urile și am efectuat o reîmprospătare forțată (shift + refresh) pentru a vă asigura că imaginile nu sunt stocate în cache.
Există și alte câteva modalități de a crește performanța site-ului atunci când utilizați un CDN.
Consultați cele mai bune practici pentru accelerarea site-ului Web pentru mai multe informații.
Una dintre opțiunile de mai sus pentru creșterea performanței chiar mai mult a fost furnizarea de fișiere gzipped. Din păcate, CloudFront nu poate determina în mod automat dacă un vizitator poate accepta sau nu fișierele gzip și poate servi unul corect. Din fericire, toate browserele moderne acceptă fișiere gzipped în aceste zile.
Pentru a servi fișierele gzipped de la CloudFront, putem oferi site-ului nostru o anumită logică pentru a servi fișierele potrivite sau putem seta Content-Encoding și Content-Type pe câteva fișiere specifice pentru a menține lucrurile puțin mai simple. GZip fișierele pe care le doriți și le redenumiți astfel încât să nu se termine .gz. De exemplu, "filename.css.gz" ar deveni "filename.css" sau pentru a vă reaminti că este un fișier gzip, nume-l "filename.gz.css". Încărcați acum fișierul gzip în locația din galeta dvs. S3 dorită (nu uitați să setați ACL / Permisiuni).
Dacă nu sunteți sigur cum să gzip un fișier, consultați http://www.gzip.org (OS X poate face acest lucru în terminal)
Trebuie să setăm Content-Encoding și Content-Type (dacă nu este deja setat) pe fișierele noastre, astfel încât atunci când este solicitat prin browser, acesta să știe că conținutul este gzipped și îl va putea decomprima în mod corespunzător. În caz contrar, va arăta așa.
Putem face acest lucru cu ușurință cu Bucket Explorer. Odată ce ați descărcat-o, introduceți cheia AWS Access Key și Secret pentru a vă conecta la contul dvs. S3. Găsiți fișierul gzip pe care l-ați încărcat mai devreme, faceți clic dreapta și selectați "Update MetaData".
După cum puteți vedea, acesta are deja setul Content-Type setat la text / css, deci nu trebuie să setăm că (javascript ar fi text / javascript). Trebuie doar să adăugăm dreptul de codificare a conținutului. Faceți clic pe "Adăugați" și în dialogul popup introduceți "Content-Encoding" în câmpul Key și "gzip" în câmpul Value. Faceți clic pe OK, apoi pe Salvează și ați terminat! Acum browserul va vizualiza corect fișierul.
Gsipping un fișier poate reduce foarte mult dimensiunea fișierului. De exemplu, această foaie de stil a fost de aproximativ 22KB și a fost redusă la aproximativ 5KB. Pentru blogul meu mi-am combinat toate pluginurile jQuery cu jQuery UI Tabs. Dupa minificare a fost redus la 26,49KB, dupa ce a fost gzipit a fost redus la 8,17KB.
Există o mulțime de modalități de a crește performanța site-ului dvs. și, în opinia mea, merită încercat. Dacă vizitatorii sunt la doar 0,5 secunde sau chiar 1 secundă de la părăsirea site-ului dvs., un CDN ar putea păstra acest lucru din întâmplare. În plus, cei mai mulți dintre noi sunt viteji de viteză oricum, așa că de ce nu crank până performanța site-ul dvs. dacă puteți? Mai ales dacă ar putea economisi bani în acest proces.
Dacă aveți întrebări, vă rugăm să anunțați-mă în comentarii și voi încerca să răspund la ele. Mulțumiri!
Accentsconagua