Ταχύτητα λήψης σελίδας (Page Speed)

Η ταχύτητα λήψης σελίδας είναι ένας από τους βασικούς παράγοντες που η ίδια η Google δημόσια έχει ανακοινώσει.

Σχετική έρευνα αναφέρει ότι το 70% των καταναλωτών ισχυρίζονται ότι η ταχύτητα φόρτωσης της ιστοσελίδας επηρεάζει την τελική τους αγοραστική απόφαση. Αυτό σημαίνει ότι, όσο περισσότερος είναι ο χρόνος αναμονής, τόσο λιγότερες είναι αγορές – μετατροπές.

Σύμφωνα με τη Google:

  • Το 76% των ανθρώπων που ψάχνουν στα smartphone τους για κάτι κοντά τους θα επισκεφτούν ένα κατάστημα μέσα στη μέρα.
  • Το 53% των ανθρώπων θα αποχωρήσει από μια ιστοσελίδα εάν κάνει παραπάνω από 3 δευτερόλεπτα να φορτώσει.
  • H μείωση της ταχύτητας φόρτωσης μιας σελίδας σε κινητές συσκευές αυξάνει σημαντικά το ποσοστό των επισκεπτών που πραγματοποιούν μια μετατροπή (π.χ. μια αγορά).

mobile page speed

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 αρχεία αποθηκεύονται σε γρήγορους σέρβερ και έτσι επιτυγχάνονται μεγαλύτερες ταχύτητες.

Παράλληλα μειώνεται ο όγκος εργασίας του δικού μας σέρβερ.

cdn servers

Πρόσθετα (plug-ins) για βελτιστοποίηση ταχύτητας

Όλες οι σύγχρονες πλατφόρμες όπως wordpress, joomla, magento κλπ. διαθέτουν πρόσθετα τα οποία αναλαμβάνουν μια σειρά από βελτιστοποιήσεις όπως για παράδειγμα η καλή διαχείριση της προσωρινής μνήμης (cache).

  • Διαχείριση προσωρινής μνήμης (cache)
  • Συμπίεση εικόνων
  • Συμπίεση αρχείων
  • Συνένωση αρχείων (πολλά css ή js αρχεία)
  • Προτεραιότητα λήψης αρχείων

Τα πολλά πρόσθετα μπορεί να επηρεάσουν σημαντικά την ταχύτητα του ιστότοπου.

Εργαλεία

Τα παρακάτω εργαλεία αφορούν μετρήσεις και ανάλυση ταχύτητας λήψης ιστοσελίδων.

Pagespeed insights

Εργαλείο ανάλυσης από developers.google.com

pagespeed insights

GTmetrix

Αξιόπιστο και πλήρες εργαλείο για μετρήσεις και αξιολογήσεις (audits)

GTmetrix

Pingdom

Ένα επίσης καλό εργαλείο για μετρήσεις και αξιολογήσεις (audits). Με έναν διαφορετικό αλγόριθμο μέτρησης.

pingdom.com

WebPagetest

Χρησιμοποιώντας το WebPagetest, εκτός από τους βασικούς δείκτες απόδοσης (π.χ. load time, first byte, start render, user time, speed index κ.ά.), έχεις και μια πιο λεπτομερή ανάλυση για το πώς ανταποκρίνεται και ποια η κατάσταση του περιεχομένου της σελίδας σου.

webpagetest.org

dotcom-tools.com

Δωρεάν Online εργαλεί για μέτρηση απόδοσης ιστότοπου από διαφορετικές τοποθεσίες στο διαδίκτυο.

dotcom-tools.com

dotcom-tools.com/website-speed-test

Δωρεάν Online εργαλεί για μέτρηση απόδοσης ιστότοπου από διαφορετικές τοποθεσίες στο διαδίκτυο.

website-speed-test

UPTRENDS

Με το UPTRENDS μπορείς να τεστάρεις την απόδοση του ιστότοπού σου κάτω από διαφορετικές συνθήκες. Αυτό μπορείς να το πετύχεις δημιουργώντας διάφορα σενάρια, επιλέγοντας τον browser, την περιοχή, το είδος της συσκευής περιήγησης, ακόμα και τη μορφή της σύνδεσης στο διαδίκτυο (π.χ. 3G , ADSL κ.τ.λ).

uptrends.com

Audits tab

Εργαλείο δοκιμών από τον Chrome

  1. Ανοίγετε το Chrome DevTools
  2. Καλείτε το URL που θέλετε να δοκιμάσετε
  3. Κάντε κλικ στην καρτέλα Audits

Varvy Requests Tool

Εμφανίζει τις συνολικές κλήσεις που κάνει το site σε εξωτερικά έγγραφα.

Varvy Requests Tool

WP Rocket

plugin για wordpress. Κάνει μια σειρά από βελτιστοποιήσεςι και διαχειρίζεται σωστά την cache.

WP Rocket

W3 Total Cache

plugin για wordpress. Διαχειρίζεται σωστά την cache.

W3 Total Cache

Query Monitor

plugin για wordpress. Βρίσκει τι μπορεί να επηρεάζει την ταχύτητα του ιστότοπου όπως πρόσθετα κλπ.

Query Monitor

CDN Finder

Βρείτε τα CDN πίσω από ένα site.

CDN Finder

CDN Performance Checker

Ελέγξτε το CDN που χρησιμοποιείτε για απόδοση.

CDN Performance Checker