Please enable JS

CDN σε μια ιστοσελίδα

CDN σε μια ιστοσελίδα

CDN σε μια ιστοσελίδα

Αν για μια ιστοσελίδα η χρήση CDN μπορεί, θεωρητικά, να βελτιώσει θεαματικά την απόδοσή της, τι μπορεί να ακυρώσει αυτόν τον σχεδιασμό;

Ενδιαφερόμενος απευθύνθηκε σε εμάς γιατί αντιμετώπιζε σοβαρό πρόβλημα με την ιστοσελίδα του και συγκεκριμένα με την προσθήκη CDN σε αυτή.

Χρησιμοποιούσε το CDN της Amazon και η εμπλοκή του, είχε ως αποτέλεσμα να μην εμφανίζονται διάφορα εικονίδια στο website ενώ αύξανε και τον χρόνο φόρτωσης της ιστοσελίδας, πράγμα που ακουγόταν (και είναι) εντελώς παράλογο.
Η ανωμαλία σε όλη την διαδικασία έγκειται στο ότι ενώ ο server της ιστοσελίδας βρισκόταν στην Αμερική, το CDN της Amazon έχει spots σε ολόκληρη την Ευρώπη και αν μη τι άλλο, θα  έπρεπε οι χρόνοι φόρτωσης της ιστοσελίδας να είναι (έστω και ανεπαίσθητα) βελτιωμένοι.

Εξετάζοντας το site, με ενεργοποιημένο το CDN, διαπιστώθηκε άλλη μια παραδοξότητα! Τα requests της ιστοσελίδας εμφανίζονταν αυξημένα κατά 30% (σε σύγκριση με αυτά που υπήρχαν χωρίς την εμπλοκή του CDN), πράγμα που δικαιολογούσε ένα μέρη και την αύξηση του χρόνο loading του website.

Μια ποιο προσεκτική ματιά στα υπο εξέταση δεδομένα της ιστοσελίδας, ανέδειξε την πηγή του προβλήματος. Το CDN της Amazon αδυνατούσε να φορτώσει την γραμματοσειρά fontawesome (η οποία είναι woff2 τύπου) με αποτέλεσμα κατά πρώτης να μην εμφανίζονται τα εικονίδια της ιστοσελίδας που βασίζονταν σε αυτή και κατά δεύτερο, λόγω της αδυναμίας φόρτωσης της το σύστημα προσπαθούσε να την φορτώσει πολλαπλές φορές (ουσιαστικά όσα ήταν και τα χρησιμοποιούμενα εικονίδια που παράγονταν από αυτή).

Όλη αυτή η ανωμαλία, οδηγούσε την ιστοσελίδα στο να έχει χαμηλή απόδοση και να μην εμφανίζει ορθά τα στοιχεία της. Το πρόβλημα δημιουργούνταν διότι η γραμματοσειρά fontawesome μπλοκάρονταν από την πολιτική CROSS (Cross-Origin Resource Sharing) διότι στα Headers του κώδικα δεν υπήρχε πουθενά η δήλωση Access-Control-Allow-Origin.

Η λύση που δόθηκε ήταν η προσθήκη μιας κατάλληλης συνθήκης στον vhost του Apache

AddType application/font-woff2      .woff2
AddType application/font-woff        .woff

Για πρόσθετη εξασφάλιση λειτουργίας της ιστοσελίδας προστέθηκε συνθήκη και στο htaccess αρχείο της εγκατάστασης (για να εξασφαλιστεί η ομαλή λειτουργία σε περίπτωση αλλαγής server)

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Στις δε ρυθμίσεις του λογαριασμού στην Amazon, επιλέχθηκε το «Forward all» στην επιλογή Query String Forwarding and Caching.

Το πρόβλημα της ιστοσελίδας διευθετήθηκε με αυτό τον τρόπο, η γραμματοσειρά πλέον φόρτωνε κανονικά από το CDN (και μια μόνο φορά) ενώ οι χρόνοι φόρτωσης της ιστοσελίδας μειώθηκαν κατά 25% (από την αρχική συνθήκη).
Η σπουδαιότητα της βελτίωσης του loading του website είναι εξαιρετικά σημαντική (μεσοσταθμικά μειώθηκε κατά 2 δευτερόλεπτα η φόρτωση της αρχικής σελίδας) αν σημειώσουμε ότι για κάθε παραπάνω δευτερόλεπτο loading μιας ιστοσελίδας, μειώνεται κατά 20% η περίπτωση ενδιαφέροντος του χρήστη.