Ταχύτητα ιστότοπου και ασύγχρονη JavaScript

ασύγχρονη

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

Το δύσκολο σημείο στο οποίο τοποθετούνται οι έμποροι είναι να έχουν και οι δύο πολύ γρήγορος ιστότοπος και εξακολουθούν να ενσωματώνουν ενσωματώσεις και κοινωνικά στοιχεία που μπορεί να δημιουργήσουν εξαρτήσεις από το πόσο γρήγορα θα φορτωθεί ο ιστότοπός σας Ένα τέτοιο παράδειγμα είναι κοινωνικά κουμπιά. Στο Martech, έχουμε κοινωνικά κουμπιά σε κάθε σελίδα του ιστότοπου. Λοιπόν… εάν οι πόροι του Facebook φορτώνονται αργά μια μέρα, επιβραδύνει τον ιστότοπό μας. Στη συνέχεια, προσθέστε Twitter, Pinterest, Buffer κ.λπ. σε αυτό και οι πιθανότητες γρήγορης φόρτωσης του ιστότοπού σας μειώνονται σχεδόν σε τίποτα.

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

Μπορείτε να δείτε τι επηρεάζει την ταχύτητα της σελίδας σας εκτελώντας μια δοκιμή στο Pingdom:
φόρτωση σελίδας pingdom

Ασύγχρονο JavaScript σας επιτρέπει να γράψετε κώδικα που λέει στα στοιχεία να φορτώσουν μετά η σελίδα έχει φορτωθεί πλήρως. Χωρίς εξαρτήσεις! Έτσι, η σελίδα σας φορτώνεται και μόλις ολοκληρωθεί, ξεκινά ένα σενάριο που φορτώνει τα άλλα στοιχεία - σε αυτήν την περίπτωση τα κοινωνικά μας κουμπιά. Εάν είστε προγραμματιστής, μπορείτε να διαβάσετε ένα υπέροχο άρθρο, Lazy Loading Ασύγχρονο JavaScript.

Ακολουθεί ένα απόσπασμα για το πώς να το κάνετε σωστά από τον Emil Stenström:

(συνάρτηση () {function async_load () {var s = document.createElement ('script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName (' script ') [0]; x.parentNode.insertBefore (s, x);} if (window.attachEvent) window.attachEvent (' onload ', async_load); else window.addEventListener ('load', async_load, false);}) ();

Το αποτέλεσμα είναι εάν αυτές οι ενσωματώσεις τρίτων μερών είναι αργές ή εκτελούνται αργά, δεν επηρεάζει ποτέ το περιεχόμενο της κεντρικής σελίδας σας από την εμφάνιση. Εάν δείτε την πηγή της σελίδας μας, θα δείτε ότι φορτώνω όλα τα επιπλέον κοινωνικά σενάρια χρησιμοποιώντας αυτήν την τεχνική. Η διαδικασία βελτίωσε τα δευτερόλεπτα ταχύτητας του ιστότοπού μας - και δεν πνιγεί κατά τη φόρτωση. Δεν έχουμε μετατρέψει όλες τις εξωτερικές μας εξαρτήσεις σε Ασύγχρονο JavaScript, αλλά θα το κάνουμε.

Ποια είναι η γνώμη σας;

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