Data + Storage Media + CDN Videos Webcasts

Βελτίωση ταχύτητας μιας ιστοσελίδας χρησιμοποιώντας Azure Storage και Azure CDN

Οι περισσότερες ιστοσελίδες σερβίρουν κάποιου είδους στατικό περιεχομένο, όπως φωτογραφίες, βίντεο ή αρχεία ήχου. Το Azure παρέχει τη δυνατότητα το περιεχόμενο αυτό να σερβιριστεί με διάφορους τρόπους. Στο άρθρο αυτό θα δούμε ποιοι είναι αυτοί οι διαφορετικοί τρόποι, καθώς και τα θετικά και αρνητικά τους σημεία.

Video

Demo

Για να μπορέσουμε να μετρήσουμε τη διαφορά στην ταχύτητα της κάθε λύσης, δημιουργήσαμε ένα πολύ απλό demo όπου ανεβάσαμε φωτογραφίες, αρκετά μεγάλες σε μέγεθος, και παρατηρήσαμε το χρόνο που απαιτείται για να φορτωθούν στην εφαρμογή μας.

assets-loading-demo

Παρατηρήσεις:

  • οι φωτογραφίες έχουν κλιμακωθεί σε 170px για λόγους καλύτερης παρουσίασης,
  • ο συνολικός χρόνος είναι ενδεικτικός και εξαρτάται από τη ταχύτητα δικτύου,
  • η browser cache είναι άδεια πριν από κάθε request,
  • για τη μέτρηση χρησιμοποιούμε το load event κάθε φωτογραφίας,
  • ο συνολικός χρόνος που παρουσιάζεται αφορά το μέσο όρο συνολικού χρόνου φόρτωσης έπειτα από 10 δοκιμές.

Την εφαρμογή αυτή μπορείτε να τη βρείτε στη διεύθυνση assetsloading.azurewebsites.net και τον κώδικα στο github.

Azure App Service (Web App)

Ένας τρόπος για να εξυπηρετήσουμε στατικό περιεχόμενο είναι μέσω του σέρβερ που είναι υπεύθυνος για την εξυπηρέτηση και της κύριας web εφαρμογής μας. Ο σέρβερ, μέσω του Azure App Service, ο οποίος εξυπηρετεί την εφαρμογή μας αναλαμβάνει το έργο και δαπανά πόρους για να διεκπεραιώσει αιτήματα που αφορούν το στατικό περιεχόμενο. Πρόκειται για μια λύση πολύ απλή και αφορά εφαρμογές με λίγες απαιτήσεις σε φωτογραφίες και κάθε άλλου είδους στατικό περιεχόμενο.

assets-loading-azure-app-service

Azure Blob Storage

Ένας άλλος τρόπος είναι να χρησιμοποιήσουμε το Azure Blob Storage, όπου αποθηκεύουμε τις φωτογραφίες μας σε ένα δημόσιο container και, χρησιμοποιώντας τη διεύθυνση του storage account μας, σχηματίζουμε εύκολα links για τα αρχεία αυτά.

Πρόκειται για μια ιδιαίτερα οικονομική λύση, κατάλληλη για να αποθηκεύουμε μεγάλο όγκο στατικών αρχείων και να εξυπηρετούμε τεράστιο αριθμό requests, αφού το Azure Blob Storage αναλαμβάνει το scaling μόνο του χωρίς να χρειάζεται να επέμβουμε.

Ένας περιορισμός που υπάρχει με το Azure Blob Storage είναι ότι, κατά τη δημιουργία ενός Storage Account, επιλέγουμε και την περιοχή στην οποία θέλουμε να λειτουργεί η υπηρεσία αυτή. Έτσι, αν επιλέξουμε North Europe η ταχύτητα φόρτωσης μια φωτογραφίας, για παράδειγμα, θα διαφέρει σημαντικά για ένα χρήστη που συνδέεται από Ελλάδα σε σχέση με έναν άλλο που συνδέεται από Αμερική.

Παρόλα αυτά, συγκρίνοντας το χρόνο που απαιτείται από το Azure Blob Storage σε σχέση με το app service του προηγούμενου παραδείγματος, παρατηρούμε ότι το Azure Blob Storage είναι πιο γρήγορο κατά περίπου 5 δευτερόλεπτα.

assets-loading-blob-storage

Δημιουργία Azure Storage Account

Από το portal, επιλέγοντας NewStorageStorage Account και συμπληρώντας τα στοιχεία της φόρμας, όπως φαίνεται στην παρακάτω φωτογραφία:

create-azure-storage-account

μπορούμε να δημιουργήσουμε ένα Storage Account και στη συνέχεια να ανεβάσουμε τα αρχεία σε ένα public container, π.χ. loadingdemo, όπως φαίνεται στην παρακάτω φωτογραφία:

azure-storage-container

Οι φωτογραφίες μας θα εξυπερούνται πλέον από το url https://{storage_account_url}/{container}/{image_file} (π.χ.: https://azureheads.blob.core.windows.net/loadingdemo/image-01.jpg)

Azure CDN

Ο τρίτος τρόπος είναι με τη χρήση του Azure Content Delivery Network (Azure CDN), με τον οποίο οι φωτογραφίες μας, κι όποιο άλλο στατικό περιεχόμενο, αντιγράφονται σε διαφορετικούς σέρβερ ανά τον κόσμο και κάθε request εξυπηρετείται από το σέρβερ που βρίσκεται γεωγραφικά πιο κοντά στο χρήστη που κάνει το αίτημα.

Συκρίνοντας το χρόνο που απαιτείται με το Azure CDN, σε σχέση με τους δύο παραπάνω τρόπους, βλέπουμε ότι ο χρόνος φόρτωσης των ίδιων φωτογραφιών είναι σημαντικά λιγότερος, δηλαδή παρατηρείται μια βελτίωση περίπου 230% σε σχέση με το Azure Blob Storage και περίπου 340% σε σχέση με το Azure Web App Service.

assets-loading-azure-cdn-m

Δημιουργία Azure CDN

Για να δημιουργήσουμε μια υπηρεσία Azure CDN μπορούμε από το portal να επιλέξουμε NewWeb + MobileCDN και, αφού συμπληρώσουμε τα στοιχεία μας και επιλέξουμε τον πάροχο για την υπηρεσία αυτή, πατάμε Create.

azure-cdn-create

Αφού δημιουργηθεί η υπηρεσία CDN, το δεύτερο βήμα είναι να δημιουργήσουμε ένα endpoint όπου θα δηλώσουμε στο Azure CDN από πού να ζητήσει το περιεχόμενο που θέλουμε να εξυπηρετήσει. Αυτό γίνεται μέσω του Origin Type και μπορεί να είναι Storage, Cloud Service, Web App ή Custom Origin. 

Στην περίπτωση μας θα χρησιμοποιήσουμε το Azure Storage Account που δημιουργήσαμε στο προηγούμενο βήμα και θα συνδέσουμε τον container που δημιουργήσαμε, όπως φαίνεται στην παρακάτω φωτογραφία:

azure-cdn-endpoint

Οι φωτογραφίες μας θα εξυπηρετούνται πλέον από το url https://{azure_cdn_endpoint}/{image_file} (πχ: https://azureheads.azureedge.net/image-01.jpg)

About the author

Paris Polyzos

I am a Software Engineer, with 10 years of experience in the field. I hold an MSc in Electrical & Computer Engineering, while, since the early days of my career, I had the chance to work in large and challenging projects. Nowadays, I am mainly focused on the cloud where I design and build complex software for a new company of the ZuluTrade Group. I am particularly passionate about the Web, Microsoft technologies and the cloud; thus, my new-found enthusiasm is Microsoft Azure!

Add Comment

Click here to post a comment

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.