Η φόρμα επικοινωνίας σου θέλει 8 δευτερόλεπτα να φορτώσει, γιατί περιλαμβάνει μια τεράστια βιβλιοθήκη επικύρωσης, πολλά πρόσθετα jQuery και ένα script analytics. Μέχρι να είναι έτοιμη η φόρμα, οι μισοί επισκέπτες έχουν πάει στον ανταγωνιστή σου.
Η απόδοση της φόρμας μετράει. Μια αργή φόρμα φαίνεται χαλασμένη. Μια γρήγορη φόρμα φαίνεται ζωντανή. Σε αυτό το άρθρο θα δεις πώς βελτιστοποιείς τους χρόνους φόρτωσης και την ταχύτητα εισαγωγής.
Τι επηρεάζει την απόδοση της φόρμας;
Η απόδοση της φόρμας έχει δύο μέρη: χρόνο φόρτωσης (πόσο θέλει η φόρμα να εμφανιστεί) και ταχύτητα αλληλεπίδρασης (πόσο ζωντανή φαίνεται όταν γράφεις ή πατάς).
Ο χρόνος φόρτωσης επηρεάζεται από τις βιβλιοθήκες JavaScript (μια μεγάλη βιβλιοθήκη επικύρωσης προσθέτει 50kb κώδικα και τα πρόσθετα επικύρωσης, οι βιβλιοθήκες αυτόματης συμπλήρωσης και οι επιλογείς ημερομηνίας προσθέτουν βάρος), από το μέγεθος των αρχείων CSS (τα μεγάλα αρχεία CSS μπλοκάρουν την απόδοση, γιατί η σελίδα περιμένει να κατεβεί και να αναλυθεί το CSS πριν εμφανιστεί) και από scripts τρίτων (analytics, pixels παρακολούθησης, διαφημίσεις και widgets συνομιλίας προσθέτουν αιτήματα). Η ταχύτητα αλληλεπίδρασης επηρεάζεται από τον χρόνο εκτέλεσης του JavaScript (αν η επικύρωση τρέχει σε κάθε πάτημα πλήκτρου, ο browser πρέπει να αναλύσει και να εκτελέσει κώδικα για κάθε χαρακτήρα που γράφεται, κάτι που μπορεί να προκαλέσει καθυστέρηση), από το layout thrashing (η συνεχής αλλαγή του DOM και η ανάγνωση διαστάσεων αναγκάζει τον browser να υπολογίζει ξανά τη διάταξη, κάτι ακριβό) και από το μεγάλο μέγεθος της φόρμας (μια φόρμα με 50 πεδία αποδίδεται πιο αργά από μια φόρμα με 5 πεδία).
Μείωση του μεγέθους JavaScript της φόρμας
Το JavaScript είναι το μεγαλύτερο βάρος στην απόδοση. Μία βιβλιοθήκη επικύρωσης μπορεί να είναι 40kb. Μία βιβλιοθήκη επιλογής ημερομηνίας μπορεί να είναι 20kb. Μία αυτόματη συμπλήρωση μπορεί να είναι 15kb.
Πρώτη επιλογή: Χρησιμοποίησε επικύρωση HTML αντί για JavaScript. Τα πεδία φόρμας του HTML5 έχουν ενσωματωμένη επικύρωση. Το type="email" ελέγχει τη μορφή του email. Το required ελέγχει για κενές τιμές. Το pattern επικυρώνει με regex. Αυτό δουλεύει σε όλους τους σύγχρονους browsers και δεν χρειάζεται καθόλου JavaScript.
Δεύτερη επιλογή: Γράψε τη δική σου απλή επικύρωση αντί να χρησιμοποιήσεις βιβλιοθήκη. 50 γραμμές επικύρωσης σε απλό JavaScript είναι πιο ελαφριές από μια βιβλιοθήκη 40kb.
Τρίτη επιλογή είναι να φορτώνεις τις βιβλιοθήκες επικύρωσης με καθυστέρηση, μόνο αφού ο χρήστης προσπαθήσει να κάνει υποβολή. Οι περισσότερες υποβολές γίνονται αμέσως μετά τη φόρτωση της σελίδας, οπότε μέχρι τότε ο χρήστης ήδη γράφει. Φόρτωσε την επικύρωση στο παρασκήνιο αφού η σελίδα γίνει διαδραστική με window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
Κρίσιμο CSS για φόρμες
Βάλε το κρίσιμο CSS μέσα στη σελίδα (inline), ώστε η φόρμα να φαίνεται αμέσως. Το κρίσιμο CSS είναι το ελάχιστο στυλ που χρειάζεται για να εμφανιστεί η φόρμα, όπως <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Αυτό αποδίδει τη φόρμα αμέσως, ενώ το υπόλοιπο CSS φορτώνει ασύγχρονα με <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">, που φορτώνει το stylesheet χωρίς να μπλοκάρει την απόδοση της σελίδας.
Αναβολή των μη κρίσιμων scripts
Μετέφερε τα analytics, τα pixels παρακολούθησης και άλλα μη κρίσιμα scripts στο τέλος της σελίδας ή αναβάλλε τα. Χρησιμοποίησε <script async src="/analytics.js"></script>, όπου το async φορτώνει το script παράλληλα με τη σελίδα και δεν μπλοκάρει την απόδοση. Εναλλακτικά, χρησιμοποίησε <script defer src="/analytics.js"></script>, όπου το defer φορτώνει το script μετά το περιεχόμενο της σελίδας, ώστε η φόρμα να είναι διαθέσιμη πριν φορτώσουν τα analytics.
Βελτιστοποίηση της ανταπόκρισης των πεδίων
Αν η επικύρωση JavaScript τρέχει σε κάθε πάτημα πλήκτρου, η φόρμα φαίνεται αργή. Κάνε debounce στην επικύρωση, δηλαδή τρέξε την μόνο αφού ο χρήστης σταματήσει να γράφει για λίγο, με let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. Η επικύρωση τρέχει 300ms αφού ο χρήστης σταματήσει να γράφει, οπότε η φόρμα φαίνεται ζωντανή όσο γράφει και η επικύρωση γίνεται στο παρασκήνιο.
Μείωση του αριθμού πεδίων
Περισσότερα πεδία = πιο αργή φόρμα. Μια φόρμα με 50 πεδία έχει περισσότερα στοιχεία DOM, περισσότερο CSS να υπολογιστεί, περισσότερο JavaScript να τρέξει.
Ρώτα τον εαυτό σου: χρειάζομαι πραγματικά αυτό το πεδίο; Αν η απάντηση είναι «ίσως» ή «θα ήταν ωραίο», αφαίρεσέ το. Οι πιο σύντομες φόρμες φορτώνουν πιο γρήγορα και μετατρέπουν καλύτερα.
Φόρτωση βελτιώσεων με καθυστέρηση
Δεν χρειάζεται κάθε πεδίο φόρμας φανταχτερό επιλογέα ημερομηνίας ή αυτόματη συμπλήρωση στη φόρτωση της σελίδας. Φόρτωσε αυτές τις βελτιώσεις μόνο όταν τις χρειάζεται ο χρήστης, με <input type="date" id="date-field"> και if (!supportDate()) { loadDatePickerLibrary(); }. Έτσι, οι browsers που υποστηρίζουν εγγενώς πεδίο ημερομηνίας δεν κατεβάζουν επιπλέον βιβλιοθήκη.
Μετρήσεις απόδοσης φόρμας
Χρησιμοποίησε το performance.mark() για να μετρήσεις μετρήσεις ειδικές για τη φόρμα, όπως performance.mark('form-_blocked_-start'); performance.mark('form-_blocked_-end'); performance.measure('form-_blocked_', 'form-_blocked_-start', 'form-_blocked_-end'); const timing = performance.getEntriesByName('form-_blocked_')[0]; console.log('Form rendered in ' + timing.duration + 'ms');. Μέτρησε και την καθυστέρηση πληκτρολόγησης με το performance.measure(), για να παρακολουθείς πόσο διαρκεί η επικύρωση ανά πάτημα πλήκτρου.
Δοκιμή της απόδοσης της φόρμας
Χρησιμοποίησε τα Chrome DevTools για να μετρήσεις τον χρόνο φόρτωσης της φόρμας και την ανταπόκριση των πεδίων. Άνοιξε την καρτέλα Performance. Κατέγραψε μια συνεδρία όπου φορτώνεις τη σελίδα και αλληλεπιδράς με τη φόρμα. Ψάξε για μεγάλες εργασίες που μπλοκάρουν την αλληλεπίδραση. Ψάξε για layout thrashing (γρήγοροι επανυπολογισμοί).
Δοκίμασε σε αργά δίκτυα με περιορισμό ταχύτητας (Chrome DevTools > Network > slow 3G). Μια φόρμα που φαίνεται γρήγορη στον υπολογιστή σου μπορεί να φαίνεται αργή σε κάποιον στο κινητό με ασταθή σύνδεση.
Το WEMASY και η απόδοση φορμών
Ο Δημιουργός ιστοσελίδων του WEMASY σου επιτρέπει να φτιάξεις τις δικές σου σελίδες στην ιστοσελίδα σου. Μπορείς να προσθέσεις μια φόρμα στον Δημιουργό ιστοσελίδων.
Δες τα διαθέσιμα πακέτα WEMASY.