4 απαιτήσεις μιας μοντέρνας ιστοσελίδας
May 14, 2016
Η CreationP.net στην Digital Universe
September 22, 2016
Show all

Ο ρόλος του Optimization

Ίσως να έχετε ακούσει πολλές φορές να μιλάνε για website, image, video optimization και να αναρωτιέστε τί ακριβώς είναι αυτό το optimization.

Optimization, ή αλλιώς βελτιστοποίηση, είναι η διαδικασία κατά την οποία μετατρέπουμε ένα αρχείο μίας μορφής σε μια άλλη ή ακόμη να διατηρήσουμε την αρχική μορφή αλλά με δυνατότητες γρηγορότερης φόρτωσης από τον browser μας.

Για παράδειγμα: έχουμε ένα αρχείο εικόνας μεγέθους 2mb σε μια ιστοσελίδα. Όταν ο επισκέπτης θα μπεί σε αυτή την ιστοσελίδα ο υπολογιστής του θα πρέπει να κατεβάσει αυτή την εικόνα σε ένα προσωρινό αρχείο (cache) για να την εμφανίσει. Ο χρόνος που θα χρειαστεί είναι περίπου 5-20 δευτερόλεπτα μόνο για την εικόνα. Σε ένα άλλο site έχουμε την ίδια εικόνα, βελτιστοποιημένη, στα 100kb. Ο χρόνος εμφάνισης είναι μόλις μερικά χιλιοστά του δευτερολέπτου.

Τώρα φανταστείτε μια ιστοσελίδα η οποία περιέχει ένα slider με 3 εικόνες, εικόνες για background, εικόνες σε posts κλπ. Καταλαβαίνετε πως σε μεμονομένα περιστατικά ίσως ο χρόνος απόκρισης/εμφάνισης να μην είναι τραγικός αλλά αυτός αυξάνεται κατακόρυφα όσο περισσότερα εικονοστοιχεία έχουμε.

Το ίδιο συμβαίνει, λοιπόν, σε όλα σχεδόν τα αρχεία μιας ιστοσελίδας. Από τις εικόνες μέχρι τα .css. Είναι λοιπόν πολύ σημαντικό να κάνουμε ένα σωστό optimization και να αξιοποιήσουμε όλα τα εργαλεία που έχουμε διαθέσιμα.

Για να σας δώσουμε ένα ακόμα παράδειγμα για το πόσο σημαντικός είναι ο χρόνος φορτώματος μιας ιστοσελίδας αξίζει να αναφέρουμε πως αν σε ένα e-shop με ημερήσια κέρδη 100.000 ευρώ, 1 παραπάνω δευτερόλεπτο φορτώματος της ιστοσελίδας μπορεί να αποφέρει εώς και 2.5 εκατομμύρια χαμένα κέρδη τον χρόνο.

 

WordPress Optimization

Σε αυτό το άρθρο θα επικεντρωθούμε λίγο περισσότερο στην βελτιστοποίηση του WordPress.

Το wordpress αποτελεί την πιο διαδεδομένη πλατφόρμα κατασκευής ιστοσελίδων, και όχι άδικα. 26% όλων των ιστοσελίδων του Internet χρησιμοποιούν το WordPress εκ των οποίων περίπου 220 χιλιάδες από αυτά είναι μέσα στη λίστα του 1 εκατομμυρίου καλύτερων και μεγαλύτερων ιστοσελίδων παγκοσμίως.

Το wordpress μας δίνει πολλά εργαλεία, μέσα από plugins, για να μπορέσουμε να βελτιστοποιήσουμε την ιστοσελίδα μας με ασφάλεια και ταχύτητα. Φυσικά μια ολοκληρωμένη βελτιστοποίηση χρειάζεται αρκετή εμπειρία καθώς και “χειροκίνητη” δουλειά από τον προγραμματιστή της.

Σε γενικές γραμμές, για να γίνει μια σωστή βελτιστοποίηση χρειάζεται να ακολουθήσουμε τα εξης βήματα:

  • Βελτιστοποίηση εικόνων
  • Βελτιστοποίηση αρχείων css και js με minification
  • GZip και Expire Headers
  • Deflation τύπων αρχείων
  • Prefetching
  • Χρησισιμοποίηση CDN
  • Caching σε επίπεδο server και ιστοσελίδας
  • κ.α

 

Τα περισσότερα από αυτά μπορούν να γίνουν με plugins όπως το πολύ γνωστό W3C για caching. Για άλλα χρειάζεται να υπάρχει εμπειρία ώστε να πραγματοποιηθούν με άλλους τρόπους, όπως μέσα από το htaccess μας, χειροκίνητα.

Υπάρχουν πολλά εργαλεία online με τα οποία μπορείτε να μετρήσετε την ταχύτητα της ιστοσελίδας σας. Google Page Speed Insights, GTMetric, Web Page Speed κ.α είναι μόνο μερικά από αυτά.

Εδώ υπάρχει όμως και ένα μεγάλο ζήτημα. Βάζωντας και κάνωντας το τεστ στην ιστοσελίδα μας θα πάρουμε αρκετές πληροφορίες για το τι κάνουμε λάθος και τι πρέπει να διορθώσουμε. Μέσα από τα tests μας παρατηρήσαμε πως το Google Insights είναι ίσως το μοναδικό το οποίο δεν μας δίνει άξια βελτίωση. Ο αλγόριθμος του δεν θεωρείται ο καλύτερος από όλους τους ειδικούς παγκοσμίως και σίγουρα είναι μια υπηρεσία η οποία δεν πρέπει να λαμβάνεται υπόψην. Για παράδειγμα: έχουμε μια ιστοσελίδα που φορτώνει σε 5-7 δευτερόλεπτα και μας δίνει ένα score 85/100 και μια άλλη με χρόνο 1.8 δευτερόλεπτα και μας δίνει 65/100.

 

Το ίδιο μπορεί να ισχύσει και σε άλλες υπηρεσίες με χαμηλότερο score από όσο θα έπρεπε. Προσοχή όμως. Οι υπηρεσίες αυτές μετράνε την βελτιστοποίηση σε όλα τα στοιχεία μας και όχι πάντα τις καλές πρακτικές και την καλή λειτουργία (Κάτι που θα εξηγήσουμε σε επόμενο άρθρο).

Μην ξεχνάτε:

Ο ΤΕΛΙΚΟΣ ΣΚΟΠΟΣ ΜΑΣ ΕΙΝΑΙ Ο ΧΡΟΝΟΣ ΠΡΟΣΠΕΛΑΣΗΣ ΚΑΙ ΟΧΙ ΑΥΤΟ ΚΑΘΕΑΥΤΌ ΤΟ SCORE!

 

Δοκιμάσαμε λοιπόν το optimization που προσφέρουμε στους πελάτες μας στο ίδιο μας το site. Τα αποτελέσματα που θα δείτε έιναι το πριν και το μετά και σίγουρα αποτελούν ένα καθοριστικό στοιχεία της αξιοπιστίας των υπηρεσιών μας στον τομέα της βελτιστοποίησης.

 

Test Setup

 

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

Έχουμε λοιπόν:

  • Sliders
  • JS
  • Live Chat
  • Newsletter
  • Support/Ticket Center
  • Woocommerce
  • κ.α

Όποιος γνωρίζει, καταλαβαίνει πόσο εξοντωτικά είναι κάποια από αυτά στο χρόνο φόρτωσης μιας ιστοσελίδας.

 

Google Insights

Αρχίζοντας με το μάυρο πρόβατο θα δούμε πως τα αρχικά αποτελέσματα ήταν τραγικά με μόλις 12/100 και 15/100 αποτέλεσμα. Δεν περιμέναμε κάτι τόσο χαμηλό αλλά από την άλλη δεν είχαμε καμία βελτιστοποίηση πάνω.

Μετά την βελτιστοποίηση βλέπουμε μια τεράστια διαφορά στα αποτελέσματα. Ακόμα δεν είναι αυτό που περιμέναμε αλλά ποτέ δεν βασιστηκαμε στο Google Insights για την τελική μας άποψη.

 

 

GT Metrix

Προχωρώντας έχουμε το GT Metrix. Μια από τις 4 καλύτερες και πιο αξιόπιστες υπηρεσίες online.

Τα αρχικά αποτελέσματα ήταν αποκαρδιωτικά. Με Pagespeed score F(41%), χρόνος φόρτωσης 12.3 δευτερόλεπτα και C score στο YSlow ξέραμε ότι θα αποτελούσε μια πρόκληση η βελτιστοποίηση της ιστοσελίδας.

gtmetrix-before

 

Μετά την βελτιστοποίηση το αποτέλεσμα είναι παραπάνω από ικανοποιητικό. Το PageSpeed ανεβηκε από F σε A(96%) και ο χρόνος φόρτωσεις σε μόλις 1.9 δευτερόλεπτα. Μειώσαμε τα requests από 134 σε μόλις 50 και το συνολικό μέγεθος της σελίδας από 4.37Mb σε 448kb.

GTmetrix_after

Pingdom

Τρίτο σε σειρά αποτελεί το Pingdom, ένα απο τα πιο, επίσης, αξιόπιστα page speed tests στο διαδίκτυο.

Τα αρχικά αποτελέσματα συμβάδιζαν με το GTMetrix αν και ήταν λίγο πιο θετικά. Παρόλα αυτά βλέπουμε πως το αρχικό μέγεθος και ο χρόνος είναι επίσης υπερβολικά υψηλός.

pingdom-before

 

Μετά την βελτιστοποίηση βλέπουμε πως η τελική βαθμολογία ανέβηκε μόλις 12 μονάδες αλλά ο χρόνος προσπέλασης σε 1.8 δευτερόλεπτα. Το ίδιο και το μέγεθος της σελίδας.

Pingdom_After

 

Web Page Test

Τελευταίο εργαλείο ήταν το Web Page Test.

Η αρχική μας εικόνα συμβαδίζει με τα προηγούμενα και ήταν εξίσου αποκαρδιωτική. Σε αυτό το σημείο γνωρίζαμε πως θα αποτελούσε πρόκληση η βελτιστοποίηση. 21 δευτερόλεπτα load time, με τα περισσότερα F.

webpagetest-before

 

Μετά την βελτιστοποίηση βλέπουμε και εδώ θεαματικά αποτελέσματα. Ο χρόνος έπεσε σε 1.9, επιβεβαιώνοντας τις προηγούμενες μετρήσεις και 1.4 σε επαναλαμβανόμενη προσπέλαση. Μην ξεχνάτε και τι περιέχει η ιστοσελίδα, όπως αναλύσαμε στην αρχή.

 

Webpagetest_after

 

Το αποτέλεσμα

Τα αποτελέσματα που πήραμε μας επιβεβαιώνουν. Σίγουρα η πρόκληση της βελτιστοποίησης ήταν μεγάλη αλλά με αρκετή δουλειά το αποτέλεσμα ήταν κάτι παραπάνω από ικανοποιητικό.

Καταφέραμε μείωση στους χρόνους φορτώματος εώς και 93%. Μείωση στα requests εώς και 70% και στο μέγεθος της σελίδας εώς και 90% στο GT Metrix και 65% στο Pingdom.

Τα score στο pingdom έμειναν χαμηλά για λόγους που, όπως είπαμε, θα αναλύσουμε σε επόμενο αρθρο.

Leave a Reply

Your email address will not be published. Required fields are marked *