Ταχύτητα Shopify: theme, apps και εικόνες

Κάθε κατάστημα Shopify τρέχει στους ίδιους servers και στο ίδιο CDN, οπότε ένα αργό κατάστημα είναι αργό εξαιτίας αυτών που φορτώνει: theme, scripts από apps, εικόνες και βίντεο. Η βελτιστοποίηση ταχύτητας στο Shopify σημαίνει να τα αφαιρέσεις και να τα μικρύνεις, όχι να αλλάξεις hosting. Στα περισσότερα καταστήματα τα μεγαλύτερα κέρδη έρχονται από την αφαίρεση αχρησιμοποίητου κώδικα apps, τη συμπίεση της εικόνας hero και το πιο αργό φόρτωμα των widgets.

Αυτός ο οδηγός δείχνει πώς να μετράς σωστά την ταχύτητα και μετά περνά από τις διορθώσεις με τη σειρά που συνήθως αποδίδουν. Είναι μέρος του οδηγού SEO για Shopify.

Μέτρα τις σωστές σελίδες

Δοκίμασε μια σελίδα προϊόντος και μια σελίδα collection, όχι μόνο την αρχική. Αυτές είναι οι σελίδες που κατατάσσονται και στις οποίες φτάνουν οι αγοραστές.

• Το Google PageSpeed Insights δίνει σκορ εργαστηρίου για μία φόρτωση και, αν το κατάστημά σου έχει αρκετούς επισκέπτες, πραγματικά Core Web Vitals από χρήστες του Chrome για τις τελευταίες 28 ημέρες. Οι αριθμοί πραγματικών χρηστών είναι αυτοί που χρησιμοποιεί η Google.
• Η αναφορά Core Web Vitals του Search Console ομαδοποιεί τα URLs σου κατά κατάσταση, ώστε να βλέπεις αν όλες οι σελίδες προϊόντων έχουν το ίδιο πρόβλημα.
• Η αναφορά web performance του Shopify στα Analytics δείχνει τις ίδιες μετρήσεις πραγματικών χρηστών στον χρόνο, κάτι χρήσιμο για να δεις αν μια αλλαγή βοήθησε.

Εστίασε στα τρία Core Web Vitals: Largest Contentful Paint (πόσο γρήγορα εμφανίζεται η κύρια εικόνα ή το κείμενο), Interaction to Next Paint (πόσο γρήγορα αντιδρά η σελίδα σε ένα πάτημα) και Cumulative Layout Shift (πόσο πηδάνε τα στοιχεία). Τα σκορ εργαστηρίου αλλάζουν από δοκιμή σε δοκιμή· μην κυνηγάς το τέλειο 100.

1. Αφαίρεσε κώδικα apps που δεν χρησιμοποιείς

Οι apps είναι η πιο συχνή αιτία για ένα αργό κατάστημα Shopify. Κάθε μία που αγγίζει το storefront μπορεί να προσθέσει JavaScript και CSS σε κάθε σελίδα.

• Κάνε λίστα με τις apps που έχεις. Απεγκατάστησε όσες δεν χρησιμοποιείς πια.
• Η απεγκατάσταση δεν αφαιρεί πάντα τον κώδικα που πρόσθεσε μια app στο theme. Ψάξε στα αρχεία του theme (Online Store > Themes > Edit code) για το όνομα της app και αφαίρεσε τα snippets και τα script tags που έμειναν.
• Προτίμησε apps που χρησιμοποιούν theme app extensions (app blocks που προσθέτεις στον editor του theme). Αφαιρούνται καθαρά όταν τις απεγκαθιστάς και φορτώνουν μόνο εκεί που τις βάζεις.
• Για τις apps που κρατάς, έλεγξε αν φορτώνουν σε κάθε σελίδα. Ένας πίνακας μεγεθών χρειάζεται μόνο τις σελίδες προϊόντων.

2. Διόρθωσε τη μεγαλύτερη εικόνα

Στις περισσότερες σελίδες προϊόντων και collections, το μεγαλύτερο στοιχείο είναι μια φωτογραφία προϊόντος ή ένα banner hero. Κάν' το γρήγορο:

• Ανέβαζε λογικά αρχεία. Άλλαξε το μέγεθος των φωτογραφιών σε περίπου 2.000 με 2.500 pixels πλάτος πριν τις ανεβάσεις και συμπίεσέ τες. Το CDN του Shopify σερβίρει αυτόματα μικρότερες εκδοχές και σύγχρονα formats όπως WebP, αλλά ένα τεράστιο αρχικό αρχείο εξακολουθεί να κοστίζει χρόνο.
• Μην κάνεις lazy load την πρώτη εικόνα. Οι εικόνες στο πάνω μέρος της σελίδας πρέπει να φορτώνουν αμέσως. Το lazy loading είναι για εικόνες πιο κάτω.
• Χρησιμοποίησε responsive εικόνες. Τα σύγχρονα themes χρησιμοποιούν τα φίλτρα image_url και image_tag του Shopify για να σερβίρουν το σωστό μέγεθος ανά οθόνη. Τα παλιότερα themes μπορεί να σερβίρουν ένα μεγάλο μέγεθος σε κάθε συσκευή.
• Απόφυγε βίντεο με αυτόματη αναπαραγωγή στο hero. Αν χρειάζεσαι βίντεο, δείξε πρώτα μια εικόνα poster και φόρτωσε το βίντεο μετά.

3. Φόρτωνε τα widgets αργότερα

Οι κριτικές, τα chat bubbles, τα pop-ups, τα carousels upsell και τα social feeds σπάνια χρειάζεται να φορτώσουν πριν από το προϊόν.

• Φόρτωνε το chat και τα pop-ups αφού η σελίδα γίνει διαδραστική ή μετά από μια καθυστέρηση.
• Βάλε τα widgets κριτικών πιο κάτω στη σελίδα, ώστε να μη μπλοκάρουν το κύριο περιεχόμενο. Κράτα το κείμενο των κριτικών μέσα στο HTML της σελίδας για το SEO.
• Αφαίρεσε tracking pixels τρίτων που δεν κοιτάς πια. Το καθένα είναι ακόμα ένα script.

4. Χρησιμοποίησε σύγχρονο theme

Τα themes για Online Store 2.0, μαζί με τα δωρεάν themes του Shopify που βασίζονται στο Dawn, είναι σχεδιασμένα γύρω από app blocks, responsive εικόνες και πιο ελαφριά JavaScript. Ένα theme πολλών ετών με βαριά sliders και jQuery μπορεί να είναι αργό ό,τι κι αν αφαιρέσεις.

Πριν αλλάξεις, δοκίμασε τη σελίδα προϊόντος του demo του νέου theme στο PageSpeed Insights. Ένα theme που είναι αργό στο δικό του demo θα είναι αργό και με τα δικά σου προϊόντα.

5. Σταμάτα τη μετατόπιση διάταξης

Περιεχόμενο που πηδάει καθώς φορτώνει η σελίδα χαλάει το Cumulative Layout Shift και εκνευρίζει τους αγοραστές.

• Δώσε πλάτος και ύψος στις εικόνες (το φίλτρο image_tag του Shopify τα προσθέτει).
• Κράτα χώρο για banners και announcement bars που εμφανίζονται μετά τη φόρτωση.
• Φόρτωνε τις custom γραμματοσειρές με font-display: swap και περιόρισε τον αριθμό των βαρών.

Τι δεν βοηθά πολύ

• Apps επιτάχυνσης. Οι περισσότερες προσθέτουν το δικό τους script στη σελίδα. Η αφαίρεση κώδικα κερδίζει την προσθήκη κώδικα.
• Αλλαγή hosting ή CDN. Στο Shopify δεν μπορείς, και δεν χρειάζεται.
• Minify μερικών kilobytes CSS. Σπάνια κουνάει τις μετρήσεις πραγματικών χρηστών σε σύγκριση με την αφαίρεση μιας app ή τη διόρθωση της κύριας εικόνας.

Κράτα το γρήγορο

Η ταχύτητα χειροτερεύει καθώς προσθέτεις apps και sections. Ξαναέλεγξε μια σελίδα προϊόντος μετά από κάθε νέα app, και κοίτα την αναφορά Core Web Vitals κάθε μήνα. Ένας έλεγχος site, όπως αυτός του zaDojo, επισημαίνει αργές σελίδες και υπερβολικά μεγάλες εικόνες σε όλο το κατάστημα, ώστε να μη δοκιμάζεις σελίδες μία μία.

Συχνές ερωτήσεις

Επηρεάζει η ταχύτητα του Shopify το SEO; Ναι, λίγο. Τα Core Web Vitals είναι σήμα κατάταξης, αλλά το περιεχόμενο και η συνάφεια μετράνε περισσότερο. Η ταχύτητα μετράει περισσότερο για τις πωλήσεις: οι αγοραστές φεύγουν από αργές σελίδες προϊόντων.

Ποιο είναι καλό σκορ ταχύτητας για Shopify; Στόχευσε σε «Good» Core Web Vitals στα δεδομένα πραγματικών χρηστών (Largest Contentful Paint κάτω από 2,5 δευτερόλεπτα, Interaction to Next Paint κάτω από 200 χιλιοστά του δευτερολέπτου, Cumulative Layout Shift κάτω από 0,1). Το σκορ εργαστηρίου στα 100 είναι οδηγός, όχι στόχος.

Γιατί το κατάστημά μου στο Shopify είναι αργό στα κινητά; Τα κινητά έχουν πιο αργούς επεξεργαστές και συνδέσεις, οπότε η βαριά JavaScript από apps βλάπτει πολύ περισσότερο εκεί. Δοκίμασε πρώτα στο κινητό.