Τα τελευταία χρόνια, όλο και περισσότερες πλατφόρμες για τη βελτιστοποίηση έργων front-end προσφέρουν ευκαιρίες για αυτο-φιλοξενία ή μεσολάβηση πόρων τρίτων. Το Akamai σας επιτρέπει να ορίσετε για διευθύνσεις URL που δημιουργούνται μόνοι τους. Το Cloudflare διαθέτει τεχνολογία Edge Workers. Το Fasterzine μπορεί Διευθύνσεις URL σε σελίδες ώστε να παραπέμπουν σε πόρους τρίτων που βρίσκονται στον κύριο τομέα του ιστότοπου.
Εάν γνωρίζετε ότι οι υπηρεσίες τρίτων που χρησιμοποιούνται στο έργο σας δεν αλλάζουν πολύ συχνά και ότι η διαδικασία παράδοσής τους σε πελάτες θα μπορούσε να βελτιωθεί, τότε πιθανότατα σκέφτεστε να κάνετε διαμεσολάβηση τέτοιων υπηρεσιών. Με αυτήν την προσέγγιση, μπορείτε κάλλιστα να φέρετε αυτούς τους πόρους πιο κοντά στους χρήστες σας και να αποκτήσετε πληρέστερο έλεγχο της προσωρινής αποθήκευσης από την πλευρά του πελάτη. Αυτό, επιπλέον, σάς επιτρέπει να προστατεύετε τους χρήστες από προβλήματα που προκαλούνται από τη "συντριβή" μιας υπηρεσίας τρίτου μέρους ή την υποβάθμιση της απόδοσής της.
Καλό: Βελτιωμένη απόδοση
Η αυτο-φιλοξενία των πόρων κάποιου άλλου βελτιώνει την απόδοση με πολύ προφανή τρόπο. Το πρόγραμμα περιήγησης δεν χρειάζεται να αποκτήσει ξανά πρόσβαση στο DNS, δεν χρειάζεται να δημιουργήσει σύνδεση TCP και να εκτελέσει χειραψία TLS σε τομέα τρίτου μέρους. Μπορείτε να δείτε πώς η αυτο-φιλοξενία των πόρων κάποιου άλλου επηρεάζει την απόδοση συγκρίνοντας τα ακόλουθα δύο σχήματα.
Η λήψη των πόρων τρίτων γίνεται από εξωτερικές πηγές (λήφθηκαν από )
Οι πόροι τρίτων αποθηκεύονται στο ίδιο μέρος με το υπόλοιπο υλικό του ιστότοπου (προέρχονται από )
Η κατάσταση βελτιώνεται επίσης από το γεγονός ότι το πρόγραμμα περιήγησης θα χρησιμοποιήσει τη δυνατότητα πολυπλεξίας και ιεράρχησης δεδομένων από τη σύνδεση HTTP/2 που έχει ήδη δημιουργηθεί με τον κύριο τομέα.
Εάν δεν φιλοξενείτε πόρους τρίτων, τότε επειδή θα φορτωθούν από έναν τομέα διαφορετικό από τον κύριο, δεν μπορούν να τεθούν προτεραιότητες. Αυτό θα τους κάνει να ανταγωνίζονται μεταξύ τους για το εύρος ζώνης του πελάτη. Αυτό μπορεί να οδηγήσει σε χρόνους φόρτωσης για περιεχόμενο που είναι κρίσιμο για τη δημιουργία μιας σελίδας που είναι πολύ μεγαλύτερο από αυτό που θα μπορούσε να επιτευχθεί υπό ιδανικές συνθήκες. συζήτηση για την ιεράρχηση HTTP/2 που εξηγεί πολύ καλά όλα αυτά.
Μπορεί να υποτεθεί ότι η χρήση χαρακτηριστικών σε συνδέσμους προς εξωτερικούς πόρους preconnect θα βοηθήσει στην επίλυση του προβλήματος. Ωστόσο, εάν υπάρχουν πάρα πολλοί από αυτούς τους συνδέσμους σε διαφορετικούς τομείς, μπορεί στην πραγματικότητα να υπερφορτώσει τη γραμμή επικοινωνίας την πιο κρίσιμη στιγμή.
Εάν φιλοξενείτε μόνοι σας πόρους τρίτων, μπορείτε να ελέγξετε πώς ακριβώς δίνονται αυτοί οι πόροι στον πελάτη. Μιλάμε δηλαδή για τα εξής:
- Μπορείτε να διασφαλίσετε ότι χρησιμοποιείται ο αλγόριθμος συμπίεσης δεδομένων που ταιριάζει καλύτερα σε κάθε πρόγραμμα περιήγησης (Brotli/gzip).
- Μπορείτε να αυξήσετε τον χρόνο αποθήκευσης στην προσωρινή μνήμη για πόρους που συνήθως δεν είναι ιδιαίτερα μεγάλοι, ακόμη και με τους πιο γνωστούς παρόχους (για παράδειγμα, η αντίστοιχη τιμή για την ετικέτα GA έχει οριστεί στα 30 λεπτά).
Μπορείτε ακόμη και να επεκτείνετε το TTL για έναν πόρο σε, ας πούμε, ένα χρόνο, ενσωματώνοντας σχετικό περιεχόμενο στη στρατηγική διαχείρισης προσωρινής αποθήκευσης (κατακερματισμοί URL, έκδοση εκδόσεων, κ.λπ.). Θα μιλήσουμε για αυτό παρακάτω.
▍Προστασία από διακοπές στη λειτουργία υπηρεσιών τρίτων ή από τον τερματισμό λειτουργίας τους
Μια άλλη ενδιαφέρουσα πτυχή της αυτο-φιλοξενίας πόρων τρίτων είναι ότι σας επιτρέπει να μετριάζετε τους κινδύνους που σχετίζονται με διακοπές λειτουργίας υπηρεσιών τρίτων. Ας υποθέσουμε ότι η λύση δοκιμής A/B τρίτου κατασκευαστή που χρησιμοποιείτε υλοποιείται ως δέσμη ενεργειών αποκλεισμού που φορτώνεται στην ενότητα κεφαλίδας της σελίδας. Αυτό το σενάριο φορτώνεται αργά. Εάν το αντίστοιχο σενάριο αποτύχει να φορτώσει, η σελίδα θα είναι κενή. Εάν χρειάζεται πολύς χρόνος για να φορτώσει, η σελίδα θα εμφανιστεί με μεγάλη καθυστέρηση. Ή, ας υποθέσουμε ότι το έργο χρησιμοποιεί μια βιβλιοθήκη που έχει ληφθεί από έναν πόρο CDN τρίτου κατασκευαστή. Ας φανταστούμε ότι αυτός ο πόρος παρουσίασε αποτυχία ή μπλοκαρίστηκε σε μια συγκεκριμένη χώρα. Μια τέτοια κατάσταση θα οδηγήσει σε παραβίαση της λογικής του ιστότοπου.
Για να μάθετε πώς λειτουργεί ο ιστότοπός σας όταν κάποια εξωτερική υπηρεσία δεν είναι διαθέσιμη, μπορείτε να χρησιμοποιήσετε την ενότητα SPOF .
Ενότητα SPOF στο webpagetest.org
▍Τι γίνεται με τα προβλήματα με την προσωρινή αποθήκευση υλικού σε προγράμματα περιήγησης; (υπόδειξη: είναι μύθος)
Ίσως πιστεύετε ότι η χρήση δημόσιων CDN θα οδηγούσε αυτόματα σε καλύτερη απόδοση πόρων, καθώς αυτές οι υπηρεσίες διαθέτουν δίκτυα αρκετά υψηλής ποιότητας και διανέμονται σε όλο τον κόσμο. Αλλά στην πραγματικότητα όλα είναι λίγο πιο περίπλοκα.
Ας υποθέσουμε ότι έχουμε πολλούς διαφορετικούς ιστότοπους: website1.com, website2.com, website3.com. Όλοι αυτοί οι ιστότοποι χρησιμοποιούν τη βιβλιοθήκη jQuery. Το συνδέουμε μαζί τους χρησιμοποιώντας ένα CDN, για παράδειγμα - googleapis.com. Μπορείτε να περιμένετε το πρόγραμμα περιήγησης να πραγματοποιήσει λήψη και αποθήκευση της βιβλιοθήκης μία φορά και στη συνέχεια να τη χρησιμοποιήσει και στους τρεις ιστότοπους. Αυτό θα μπορούσε να μειώσει το φορτίο στο δίκτυο. Ίσως αυτό θα σας επιτρέψει να εξοικονομήσετε χρήματα κάπου και να βελτιώσετε την απόδοση των πόρων. Από πρακτική άποψη, όλα φαίνονται διαφορετικά. Για παράδειγμα, το Safari έχει μια δυνατότητα που ονομάζεται : Η κρυφή μνήμη χρησιμοποιεί διπλά κλειδιά με βάση την προέλευση του εγγράφου και την προέλευση του πόρου τρίτου μέρους. καλό άρθρο για αυτό το θέμα.
παλιές σπουδές и , καθώς και πιο πρόσφατα Paul Calvano, δείχνουν ότι οι πόροι δεν αποθηκεύονται στις κρυφές μνήμες του προγράμματος περιήγησης για όσο χρόνο θα περιμέναμε: «Υπάρχει ένα σοβαρό κενό μεταξύ του χρόνου αποθήκευσης στην προσωρινή μνήμη των πόρων του ίδιου του έργου και των πόρων τρίτων. Μιλάμε για CSS και γραμματοσειρές ιστού. Συγκεκριμένα, το 95% των εγγενών γραμματοσειρών έχουν διάρκεια ζωής κρυφής μνήμης μεγαλύτερη από μία εβδομάδα, ενώ το 50% των γραμματοσειρών τρίτων έχουν διάρκεια ζωής κρυφής μνήμης μικρότερη από μία εβδομάδα! Αυτό δίνει στους προγραμματιστές Ιστού έναν επιτακτικό λόγο να φιλοξενούν οι ίδιοι αρχεία γραμματοσειράς!».
Ως αποτέλεσμα, εάν φιλοξενείτε περιεχόμενο άλλων ατόμων, δεν θα παρατηρήσετε προβλήματα απόδοσης που προκαλούνται από την προσωρινή αποθήκευση του προγράμματος περιήγησης.
Τώρα που καλύψαμε τα πλεονεκτήματα της αυτο-φιλοξενίας τρίτων, ας μιλήσουμε για το πώς να ξεχωρίσουμε μια καλή εφαρμογή αυτής της προσέγγισης από μια κακή.
The Bad: Ο διάβολος βρίσκεται στις λεπτομέρειες
Η μετακίνηση πόρων τρίτων στον δικό σας τομέα δεν μπορεί να γίνει αυτόματα χωρίς να διασφαλιστεί ότι αυτοί οι πόροι αποθηκεύονται σωστά στην κρυφή μνήμη.
Ένα από τα κύρια προβλήματα εδώ είναι η προσωρινή αποθήκευση του χρόνου. Για παράδειγμα, οι πληροφορίες έκδοσης περιλαμβάνονται σε ονόματα σεναρίων τρίτων όπως αυτό: jquery-3.4.1.js. Ένα τέτοιο αρχείο δεν θα αλλάξει στο μέλλον και ως εκ τούτου δεν θα προκαλέσει προβλήματα με την προσωρινή αποθήκευση.
Ωστόσο, εάν δεν χρησιμοποιείται κάποιο σχήμα έκδοσης κατά την εργασία με αρχεία, τα σενάρια προσωρινής αποθήκευσης, τα περιεχόμενα των οποίων αλλάζουν ενώ το όνομα του αρχείου παραμένει αμετάβλητο, ενδέχεται να είναι ξεπερασμένα. Αυτό μπορεί να είναι ένα σοβαρό πρόβλημα, καθώς, για παράδειγμα, δεν επιτρέπει την προσθήκη αυτοματοποιημένων ενημερώσεων κώδικα ασφαλείας σε σενάρια που πρέπει να λαμβάνουν οι πελάτες όσο το δυνατόν γρηγορότερα. Ο προγραμματιστής θα πρέπει να κάνει μια προσπάθεια να ενημερώσει τέτοια σενάρια στην κρυφή μνήμη. Επιπλέον, αυτό μπορεί να προκαλέσει αποτυχίες εφαρμογής λόγω του γεγονότος ότι ο κώδικας που χρησιμοποιείται στον υπολογιστή-πελάτη από τη μνήμη cache διαφέρει από την πιο πρόσφατη έκδοση του κώδικα για την οποία έχει σχεδιαστεί το τμήμα διακομιστή του έργου.
Είναι αλήθεια ότι αν μιλάμε για υλικά που ενημερώνονται συχνά (διαχειριστές ετικετών, λύσεις για δοκιμές A/B), τότε η προσωρινή αποθήκευση τους χρησιμοποιώντας εργαλεία CDN είναι μια εργασία που μπορεί να λυθεί, αλλά είναι πολύ πιο περίπλοκη. Υπηρεσίες όπως το Commanders Act, μια λύση διαχείρισης ετικετών, χρησιμοποιούν webhook κατά τη δημοσίευση νέων εκδόσεων. Αυτό σας δίνει τη δυνατότητα να εξαναγκάσετε ένα flush της προσωρινής μνήμης στο CDN ή, ακόμα καλύτερα, τη δυνατότητα να εξαναγκάσετε μια ενημέρωση κατακερματισμού ή διεύθυνσης URL.
▍Προσαρμοστική παράδοση υλικών στους πελάτες
Επιπλέον, όταν μιλάμε για προσωρινή αποθήκευση, πρέπει να λάβουμε υπόψη το γεγονός ότι οι ρυθμίσεις προσωρινής αποθήκευσης που χρησιμοποιούνται στο CDN ενδέχεται να μην είναι κατάλληλες για ορισμένους πόρους τρίτων. Για παράδειγμα, τέτοιοι πόροι μπορεί να χρησιμοποιούν τεχνολογία ανίχνευσης πράκτορα χρήστη (προσαρμοστική υπηρεσία) για την εξυπηρέτηση συγκεκριμένων προγραμμάτων περιήγησης με εκδόσεις περιεχομένου βελτιστοποιημένες ειδικά για αυτά τα προγράμματα περιήγησης. Αυτές οι τεχνολογίες βασίζονται σε κανονικές εκφράσεις ή σε μια βάση δεδομένων με πληροφορίες κεφαλίδας HTTP, για να υπολογίσουν τις δυνατότητες του προγράμματος περιήγησης. User-Agent. Μόλις μάθουν με ποιο πρόγραμμα περιήγησης έχουν να κάνουν, του δίνουν υλικά που έχουν σχεδιαστεί για αυτό.
Εδώ μπορείτε να θυμηθείτε δύο υπηρεσίες. Το πρώτο είναι το googlefonts.com. Το δεύτερο είναι το polyfill.io. Η υπηρεσία Google Fonts παρέχει, για έναν συγκεκριμένο πόρο, διάφορους κωδικούς CSS, ανάλογα με τις δυνατότητες του προγράμματος περιήγησης (παρέχοντας συνδέσμους σε πόρους woff2 χρησιμοποιώντας unicode-range).
Ακολουθούν τα αποτελέσματα μερικών ερωτημάτων του Google Fonts που έγιναν από διαφορετικά προγράμματα περιήγησης.
Αποτέλεσμα ερωτήματος γραμματοσειρών Google από το Chrome
Αποτέλεσμα του ερωτήματος γραμματοσειρών Google που εκτελέστηκε από το IE10
Το Polyfill.io δίνει στο πρόγραμμα περιήγησης μόνο τα polyfills που χρειάζεται. Αυτό γίνεται για λόγους απόδοσης.
Για παράδειγμα, ας ρίξουμε μια ματιά στο τι συμβαίνει εάν εκτελέσετε το ακόλουθο αίτημα από διαφορετικά προγράμματα περιήγησης:
Σε απάντηση σε ένα τέτοιο αίτημα που εκτελείται από το IE10, θα ληφθούν 34 KB δεδομένων. Και η απάντηση σε αυτό, που εκτελείται από το Chrome, θα είναι κενή.
Angry: Κάποια ζητήματα απορρήτου
Αυτό το σημείο είναι τελευταίο στη σειρά, αλλά εξίσου σημαντικό. Το θέμα είναι ότι η αυτο-φιλοξενία πόρων τρίτων στον κύριο τομέα του έργου ή στον υποτομέα του μπορεί να θέσει σε κίνδυνο το απόρρητο των χρηστών και να επηρεάσει αρνητικά το κύριο έργο ιστού.
Εάν το σύστημά σας CDN δεν έχει ρυθμιστεί σωστά, ενδέχεται να καταλήξετε να στείλετε τα cookies του τομέα σας σε μια υπηρεσία τρίτου μέρους. Εάν το σωστό φιλτράρισμα δεν είναι οργανωμένο σε επίπεδο CDN, τότε τα cookie περιόδου λειτουργίας, τα οποία κανονικά δεν μπορούν να χρησιμοποιηθούν σε JavaScript (με httponly), μπορεί να σταλεί σε ξένο οικοδεσπότη.
Αυτό ακριβώς μπορεί να συμβεί με ιχνηλάτες όπως το Eulerian ή το Criteo. Οι ανιχνευτές τρίτων ενδέχεται να έχουν ορίσει ένα μοναδικό αναγνωριστικό στο cookie. Εάν αποτελούσαν μέρος του υλικού του ιστότοπου, θα μπορούσαν να διαβάσουν το αναγνωριστικό κατά την κρίση τους ενώ ο χρήστης εργαζόταν με διαφορετικούς πόρους ιστού.
Αυτές τις μέρες, τα περισσότερα προγράμματα περιήγησης περιλαμβάνουν προστασία έναντι αυτού του τύπου συμπεριφοράς παρακολούθησης. Ως αποτέλεσμα, οι ιχνηλάτες χρησιμοποιούν πλέον τεχνολογία , μεταμφιεσμένοι σε δικά τους σενάρια για διάφορα έργα. Συγκεκριμένα, τα προγράμματα παρακολούθησης προσφέρουν στους κατόχους ιστοτόπων να προσθέσουν ένα CNAME στις ρυθμίσεις τους για έναν συγκεκριμένο τομέα, η διεύθυνση του οποίου συνήθως μοιάζει με ένα τυχαίο σύνολο χαρακτήρων.
Αν και δεν συνιστάται να διατίθενται cookies ιστότοπου σε όλους τους υποτομείς (για παράδειγμα - *.website.com), πολλοί ιστότοποι το κάνουν αυτό. Σε αυτήν την περίπτωση, τέτοια cookies αποστέλλονται αυτόματα σε μεταμφιεσμένο ιχνηλάτη τρίτου μέρους. Ως αποτέλεσμα, δεν μπορούμε πλέον να μιλάμε για κανένα απόρρητο.
Επίσης, το ίδιο συμβαίνει με τις κεφαλίδες HTTP , τα οποία αποστέλλονται μόνο στον κύριο τομέα, αφού μπορούν να χρησιμοποιηθούν για τη δημιουργία χρήστης. Βεβαιωθείτε ότι η υπηρεσία CDN που χρησιμοποιείτε φιλτράρει σωστά αυτές τις κεφαλίδες.
Αποτελέσματα της
Εάν σχεδιάζετε να εφαρμόσετε σύντομα την αυτο-φιλοξενία πόρων τρίτων, επιτρέψτε μου να σας δώσω μερικές συμβουλές:
- Φιλοξενήστε τις πιο σημαντικές βιβλιοθήκες JS, γραμματοσειρές και αρχεία CSS. Αυτό θα μειώσει τον κίνδυνο αποτυχίας του ιστότοπου ή υποβάθμισης της απόδοσης λόγω του μη διαθέσιμου πόρου που είναι ζωτικής σημασίας για τον ιστότοπο λόγω υπαιτιότητας μιας υπηρεσίας τρίτου μέρους.
- Προτού αποθηκεύσετε στην κρυφή μνήμη πόρους τρίτων σε ένα CDN, βεβαιωθείτε ότι χρησιμοποιείται κάποιο είδος συστήματος έκδοσης κατά την ονομασία των αρχείων τους ή ότι μπορείτε να διαχειριστείτε τον κύκλο ζωής αυτών των πόρων με μη αυτόματη ή αυτόματη επαναφορά της κρυφής μνήμης CDN κατά τη δημοσίευση μιας νέας έκδοσης το σενάριο.
- Να είστε πολύ προσεκτικοί σχετικά με τις ρυθμίσεις CDN, διακομιστή μεσολάβησης και προσωρινής μνήμης. Αυτό θα σας επιτρέψει να αποτρέψετε την αποστολή cookie του έργου ή των κεφαλίδων σας
Client-Hintsυπηρεσίες τρίτων.
Αγαπητοί αναγνώστες! Φιλοξενείτε υλικό άλλων ανθρώπων στους διακομιστές σας που είναι εξαιρετικά σημαντικά για τη λειτουργία των έργων σας;
Πηγή: www.habr.com