10 λόγοι που το site σας φορτώνει αργά (και πώς τους διορθώνετε)

h2: 1. Μη βελτιστοποιημένες εικόνες

Ένας μεγάλος όγκος μη βελτιστοποιημένων εικόνων είναι συνήθως ο πιο συνηθισμένος λόγος πίσω από την αργή φόρτωση ενός website. Οι εικόνες υψηλής ανάλυσης μπορούν να καταναλώσουν πολύ bandwidth κατά τη φόρτωση. Το να ανεβάζετε μεγάλες εικόνες και μετά να τις μικραίνετε στον browser αυξάνει άσκοπα το μέγεθος της σελίδας σας, κάτι που την κάνει να φορτώνει αργά. Αυτό ισχύει ανεξάρτητα από το CMS ή τον website builder που χρησιμοποιείτε.

Το format της εικόνας είναι ένας ακόμα σημαντικός παράγοντας.

Διαλέξτε το format που ταιριάζει στο περιεχόμενο: JPEG για φωτογραφίες, PNG ή SVG για επίπεδα γραφικά και λογότυπα, και WebP ή AVIF όπου το υποστηρίζει το CMS σας, γιατί συνήθως είναι ακόμα μικρότερα.

Συμπεράσματα:

• Ελέγξτε το μέγεθος αρχείου των εικόνων σας. Οτιδήποτε πάνω από 1MB είναι πραγματικά απαράδεκτο.
• Χρησιμοποιήστε JPEG για φωτογραφίες, PNG ή SVG για γραφικά, και WebP ή AVIF όπου το υποστηρίζει το CMS σας.
• Χρησιμοποιήστε waterfall tests για να σαρώνετε εύκολα τα μεγέθη εικόνων και να διορθώνετε.

h2: 2. Προβλήματα με JavaScript

Η διαθεσιμότητα plugins JavaScript/jQuery έχει κάνει πολύ βολική την προσθήκη δυναμικού περιεχομένου σε websites. Όμως, αν υλοποιηθεί λάθος, η JavaScript μπορεί να γονατίσει την ταχύτητα φόρτωσης του website σας.

Χρειάζεται χρόνος για να φορτωθεί, να ερμηνευτεί και να εκτελεστεί η jQuery και η JavaScript. Έτσι, αν χρησιμοποιείτε πολλαπλές κλήσεις API για να αποδώσετε δεδομένα JavaScript/jQuery, μπορεί να προκύψει σημαντική καθυστέρηση κατά τη φόρτωση των σελίδων.

Συμπεράσματα:

• Φορτώνετε τα scripts ασύγχρονα, και ενοποιήστε τα εργαλεία πίσω από έναν tag manager.
• Σκεφτείτε κάτι όπως το Segment ή το Google Tag Manager. Ένα script για όλα τα εργαλεία σας!

h2: 3. Βαριά embeds βίντεο και animation

Τα βίντεο φόντου που παίζουν αυτόματα, οι ενσωματωμένοι players και οι βαριές βιβλιοθήκες animation είναι συνηθισμένη αιτία αργών σελίδων. Είναι μεγάλα, συχνά τραβούν scripts τρίτων, και ανταγωνίζονται για bandwidth με το περιεχόμενο για το οποίο ήρθαν οι επισκέπτες σας.

Φορτώνετε τους video players μόνο όταν ο επισκέπτης πατήσει play, δείξτε μια ελαφριά εικόνα poster μέχρι τότε, και προτιμήστε CSS animations αντί για μεγάλες βιβλιοθήκες script. Αν θέλετε να κάνετε το website σας πιο γρήγορο, αυτό είναι συχνά ένα από τα πιο γρήγορα κέρδη.

Συμπεράσματα:

• Τα embeds βίντεο και οι βιβλιοθήκες animation είναι βαριά.
• Φορτώνετε τους video players με κλικ, όχι με τη φόρτωση της σελίδας.
• Προτιμήστε CSS animations αντί για μεγάλες βιβλιοθήκες JavaScript.

h2: 4. Υπερβολικά αιτήματα HTTP

Το να έχετε πολλά αρχεία JavaScript, CSS και εικόνων μπορεί να οδηγήσει σε πάρα πολλά αιτήματα HTTP. Όταν ένας χρήστης επισκέπτεται τη σελίδα σας, ο browser ζητά καθένα από αυτά τα αρχεία, και όσα μπλοκάρουν την απόδοση καθυστερούν τη σελίδα. Το HTTP/2 και το HTTP/3 μεταφέρουν πολλά αιτήματα σε μία σύνδεση, οπότε τα πολλά μικρά αρχεία κοστίζουν πολύ λιγότερο από ό,τι παλιά. Τα συνολικά bytes και τα αρχεία που μπλοκάρουν την απόδοση είναι αυτά που μετράνε περισσότερο σήμερα.

Συμπεράσματα:

• Βεβαιωθείτε ότι ο server σας υποστηρίζει HTTP/2 ή HTTP/3.
• Αναβάλετε ή αφαιρέστε CSS και JavaScript που μπλοκάρουν την απόδοση όπου είναι δυνατόν.
• Κάντε minify τα αρχεία CSS και JavaScript για να μειώσετε τα bytes που πρέπει να κατεβάσουν οι επισκέπτες.

h2: 5. Μη αξιοποίηση τεχνικών caching

Ενεργοποιήστε browser (HTTP) caching για στατικά αρχεία και server-side page caching για δυναμικές σελίδες. Το άρθρο μας για το PHP caching καλύπτει OPcache, object caches και page caches.

h2: 6. Ακατάστατος κώδικας

Ένας ακόμα συνηθισμένος ένοχος για την αργή φόρτωση είναι ο ακατάστατος κώδικας. Όταν φτιάχνετε το website σας, τα υπερβολικά κενά, τα inline styles, οι κενές γραμμές και τα περιττά σχόλια μπορούν να μεγαλώσουν το μέγεθος του stylesheet.

Αφαιρώντας αυτά τα περιττά στοιχεία, μπορείτε να συμπιέσετε τον κώδικα, να μειώσετε το μέγεθος αρχείου και να βελτιώσετε τον συνολικό χρόνο φόρτωσης, και αν παρακολουθείτε κατατάξεις μάλλον θα δείτε ώθηση και στις επιδόσεις SEO. Με τεχνικούς όρους, αυτή η διαδικασία λέγεται minifying. Αν δεν νιώθετε άνετα με τον κώδικα, υπάρχουν αρκετά online εργαλεία που καθαρίζουν και κάνουν minify τα αρχεία stylesheet. Εναλλακτικά, μπορεί να το κάνει ένας developer για εσάς ως μέρος της διαδικασίας build.

Συμπεράσματα:

• Αποφύγετε το inline CSS.
• Προσπαθήστε να μη δημιουργείτε πολλαπλά CSS stylesheets όταν μπορείτε να χρησιμοποιήσετε ένα.
• Κάντε minify!

h2: 7. Μη χρήση συμπίεσης (gzip ή Brotli)

Ενεργοποιώντας τη συμπίεση gzip, δίνετε εντολή στον server να συμπιέζει κάθε απόκριση κειμένου (HTML, CSS, JavaScript, JSON, SVG) πριν τη στείλει στον browser. Το Brotli συμπιέζει ακόμα περισσότερο και κάθε σύγχρονος browser το υποστηρίζει. Εικόνες όπως JPEG, PNG και WebP είναι ήδη συμπιεσμένες και δεν κερδίζουν τίποτα από αυτό.

Συμπεράσματα:

• Η συμπίεση gzip ή Brotli είναι ένα εύκολο κέρδος επιδόσεων.
• Συμπιέζει κάθε απόκριση κειμένου (HTML, CSS, JavaScript) πριν σταλεί στον browser.

h2: 8. Πάρα πολλές διαφημίσεις

Η πιο προφανής επίπτωση της υπερφόρτωσης του website σας με διαφημίσεις είναι η προσθήκη αιτημάτων HTTP, που χρειάζονται επιπλέον χρόνο επεξεργασίας.

Διαφημίσεις rich media, όπως pop-unders, interstitials και αυτόματες λήψεις, μπορεί να δημιουργήσουν εκατοντάδες αιτήματα HTTP κάνοντας το website σας να μην αποκρίνεται.

Φορτώνετε τις διαφημίσεις με μικρή καθυστέρηση, αφού αποδοθεί το κύριο περιεχόμενο.

h2: 9. Μη χρήση υπηρεσίας CDN

Ένα CDN σερβίρει στατικά αρχεία από έναν κόμβο κοντά στον επισκέπτη. Βοηθά περισσότερο όταν το κοινό σας είναι απλωμένο σε περιοχές. Για κοινό μίας χώρας σε έναν καλά τοποθετημένο server αλλάζει λίγα.

h2: 10. Η πλατφόρμα hosting σας

Αν έχετε περάσει όλες τις παραπάνω αιτίες και το website σας εξακολουθεί να αποκρίνεται αργά, κοιτάξτε την πλατφόρμα από κάτω του. Διαλέξτε έναν πάροχο hosting που περιλαμβάνει στην υπηρεσία τη ρύθμιση επιδόσεων.

Το managed hosting πρέπει να το περιλαμβάνει.

Στην EuroVPS χτίζουμε το web stack γύρω από την εφαρμογή σας, είτε τρέχει WordPress, Magento, PrestaShop ή Drupal.

h2: Συμπέρασμα

Στην EuroVPS, η ομάδα υποστήριξής μας μπορεί να εξετάσει μαζί σας τη διαμόρφωση του web server και της PHP και να σας βοηθήσει να βρείτε τι επιβραδύνει το site σας.