Ταχύτητα λήψης σελίδας (Page Speed)
Η ταχύτητα λήψης σελίδας είναι ένας από τους βασικούς παράγοντες που η ίδια η Google δημόσια έχει ανακοινώσει.
Σχετική έρευνα αναφέρει ότι το 70% των καταναλωτών ισχυρίζονται ότι η ταχύτητα φόρτωσης της ιστοσελίδας επηρεάζει την τελική τους αγοραστική απόφαση. Αυτό σημαίνει ότι, όσο περισσότερος είναι ο χρόνος αναμονής, τόσο λιγότερες είναι αγορές – μετατροπές.
Σύμφωνα με τη Google:
- Το 76% των ανθρώπων που ψάχνουν στα smartphone τους για κάτι κοντά τους θα επισκεφτούν ένα κατάστημα μέσα στη μέρα.
- Το 53% των ανθρώπων θα αποχωρήσει από μια ιστοσελίδα εάν κάνει παραπάνω από 3 δευτερόλεπτα να φορτώσει.
- H μείωση της ταχύτητας φόρτωσης μιας σελίδας σε κινητές συσκευές αυξάνει σημαντικά το ποσοστό των επισκεπτών που πραγματοποιούν μια μετατροπή (π.χ. μια αγορά).
Think with Google Source: Google/SOASTA
Υπάρχουν πολλές παράμετροι που μπορούν να επηρεάσουν την ταχύτητα λήψης μιας ιστοσελίδας.
Οι περισσότερες από αυτές έχουν σχέση με τις εικόνες ή/και βίντεο αλλά υπάρχουν και άλλα θέματα που πρέπει να προσεχθούν και να βελτιωθούν μερικά από τα οποία αναφέρονται στη συνέχεια.
Έχει υπολογιστεί ότι στο διαδίκτυο το 60% της μετάδοσης δεδομένων αφορά εικόνες.
Συμβουλές
Animated gif
Τα gif διαρκείας είναι ασύμφορα. Προτιμήστε βίντεο H.264 ή WebM.
Η ετικέτα picture (html)
Ιδιαίτερα χρήσιμη στο responsive design. Μπορείτε να έχετε την ίδια εικόνα σε διαφορετικές διαστάσεις για διαφορετικές διαστάσεις οθονών ιδιαίτερα για φορητές συσκευές.
SVG format
Όπου είναι δυνατό (όπως λογότυπα) καλό είναι η μορφή εικόνας να είναι σε ανυσματική μορφή svg
.
Προγράμματα όπως illustrator και inkscape επεξεργάζονται ανυσματικές εικόνες.
Εικόνες ή γραφικά μπορούν να ενσωματωθούν στο έγγραφο html με την ετικέτα svg
. Έτσι μειώνεται ο αριθμός κλήσεων προς τον υπηρέτη (server). Άρα πιο σύντομη λήψη.
rel=dns-prefetch
Η ιδιότητα rel=dns-prefetch
καταχωρείται στην ετικέτα link
και σκοπός της είναι να καθορίσει τη θέση του server στο διαδίκτυο πριν κάνει κλήσεις σε αυτόν.
Στα περισσότερα sites οι κλήσεις μπορεί να αναφέρονται από 5 μέχρι 15 διαφορετικούς servers (με διαφορετικά ονόματα χώρου). Αυτό καθυστερεί (λόγω DNS lookup) τη λήψη των εγγράφων και καλό είναι να περιορίζονται οι διαφορετικές dns κλήσεις στον ελάχιστο αριθμό.
Η rel=dns-prefetch
βελτιώνει την ταχύτητα λήψης και η μορφή της είναι όπως στο παράδειγμα.
<link rel="dns-prefetch" href="https://cdn.example.com">
DNS = "Domain Name System"
Lazy loading (ασύγχρονη λήψη)
Σχετικά νέα w3 τεχνολογία σύμφωνα με την οποία κατεβαίνουν πρώτα οι εικόνες που φαίνονται στο επάνω μέρος της οθόνης ενώ οι παρακάτω κατεβαίνουν καθώς ο χρήστης κυλά προς τα κάτω (scroll down).
Σε αρκετές πλατφόρμες έχει αρχίσει να εφαρμόζεται ως προκαθορισμένη επιλογή όπως επίσης και σε πολλά πρόσθετα που έχουν στόχο την αύξηση ταχύτητας λήψης.
<img src="views/me.jpg" loading="lazy" alt="hello here i am" />
Preload key requests
Είναι ένα αίτημα που γίνεται μέσω της ετικέτας link. Σκοπός είναι να ληφθούν αρχεία με μεγαλύτερη προτεραιότητα και εκτός κανονικής σειράς.
Η σύνταξη της εντολής είναι όπως στο παράδειγμα παρακάτω:
<link rel="preload" href="ui.js" as="script">
Έστω η παρακάτω δομή
index.html |--app.js |--styles.css |--ui.js
και η σειρά κλήσης των αρχείων είναι: index.html, app.js, styles.css, ui.js
Κανονικά, τα αρχεία styles.css και ui.js θα κληθούν αφού έχει ληφθεί (κατέβει) το αρχείο app.js
Για να δώσουμε προτεραιότητα στα αρχεία styles.css και ui.js εισάγουμε τον κώδικα:
<head> ... <link rel="preload" href="styles.css" as="style"> <link rel="preload" href="ui.js" as="script"> ... </head>
Με το παραπάνω σκριπτ τα αρχεία styles.css και ui.js θα ληφθούν παράλληλα.
Τεχνολογίες
Τεχνολογίες για γρήγορες λήψεις είναι:
CDN (Content Distribution Network)
Είναι ένα δίκτυο από σέρβερ κατανεμημένο γεωγραφικά έτσι ώστε να μεταφέρει στον χρήστη γρήγορα περιεχόμενο.
Ιδιαίτερα, αρχεία που μπορούν να θεωρηθούν στατικά όπως εικόνες, βίντεο, javascript και css αρχεία αποθηκεύονται σε γρήγορους σέρβερ και έτσι επιτυγχάνονται μεγαλύτερες ταχύτητες.
Παράλληλα μειώνεται ο όγκος εργασίας του δικού μας σέρβερ.
Πρόσθετα (plug-ins) για βελτιστοποίηση ταχύτητας
Όλες οι σύγχρονες πλατφόρμες όπως wordpress, joomla, magento κλπ. διαθέτουν πρόσθετα τα οποία αναλαμβάνουν μια σειρά από βελτιστοποιήσεις όπως για παράδειγμα η καλή διαχείριση της προσωρινής μνήμης (cache).
- Διαχείριση προσωρινής μνήμης (cache)
- Συμπίεση εικόνων
- Συμπίεση αρχείων
- Συνένωση αρχείων (πολλά css ή js αρχεία)
- Προτεραιότητα λήψης αρχείων
Τα πολλά πρόσθετα μπορεί να επηρεάσουν σημαντικά την ταχύτητα του ιστότοπου.
Εργαλεία
Τα παρακάτω εργαλεία αφορούν μετρήσεις και ανάλυση ταχύτητας λήψης ιστοσελίδων.
Pagespeed insights
Εργαλείο ανάλυσης από developers.google.com
GTmetrix
Αξιόπιστο και πλήρες εργαλείο για μετρήσεις και αξιολογήσεις (audits)
Pingdom
Ένα επίσης καλό εργαλείο για μετρήσεις και αξιολογήσεις (audits). Με έναν διαφορετικό αλγόριθμο μέτρησης.
WebPagetest
Χρησιμοποιώντας το WebPagetest, εκτός από τους βασικούς δείκτες απόδοσης (π.χ. load time, first byte, start render, user time, speed index κ.ά.), έχεις και μια πιο λεπτομερή ανάλυση για το πώς ανταποκρίνεται και ποια η κατάσταση του περιεχομένου της σελίδας σου.
dotcom-tools.com
Δωρεάν Online εργαλεί για μέτρηση απόδοσης ιστότοπου από διαφορετικές τοποθεσίες στο διαδίκτυο.
dotcom-tools.com/website-speed-test
Δωρεάν Online εργαλεί για μέτρηση απόδοσης ιστότοπου από διαφορετικές τοποθεσίες στο διαδίκτυο.
UPTRENDS
Με το UPTRENDS μπορείς να τεστάρεις την απόδοση του ιστότοπού σου κάτω από διαφορετικές συνθήκες. Αυτό μπορείς να το πετύχεις δημιουργώντας διάφορα σενάρια, επιλέγοντας τον browser, την περιοχή, το είδος της συσκευής περιήγησης, ακόμα και τη μορφή της σύνδεσης στο διαδίκτυο (π.χ. 3G , ADSL κ.τ.λ).
Audits tab
Εργαλείο δοκιμών από τον Chrome
- Ανοίγετε το Chrome DevTools
- Καλείτε το URL που θέλετε να δοκιμάσετε
- Κάντε κλικ στην καρτέλα Audits
Varvy Requests Tool
Εμφανίζει τις συνολικές κλήσεις που κάνει το site σε εξωτερικά έγγραφα.
WP Rocket
plugin για wordpress. Κάνει μια σειρά από βελτιστοποιήσεςι και διαχειρίζεται σωστά την cache.
W3 Total Cache
plugin για wordpress. Διαχειρίζεται σωστά την cache.
Query Monitor
plugin για wordpress. Βρίσκει τι μπορεί να επηρεάζει την ταχύτητα του ιστότοπου όπως πρόσθετα κλπ.
CDN Finder
Βρείτε τα CDN πίσω από ένα site.
CDN Performance Checker
Ελέγξτε το CDN που χρησιμοποιείτε για απόδοση.