PAGE SPEED

WordPress Page Speed Optimization.

Η ταχύτητα φόρτωσης της ιστοσελίδας σας (loading speed), είναι ένας από τους πιο σημαντικούς, αν όχι ο σημαντικότερος, παράγοντας που συνεισφέρει καθοριστικά στη διαμόρφωση της εμπειρίας του χρήστη (user experience - UX). Ένα website θεωρείται επιτυχημένο όταν προσφέρει στους χρήστες του την πληροφορία και το περιεχόμενο που αναζητούν. Όπως και η ίδια η Google ανακοίνωσε, «Η ταχύτητα φόρτωσης μιας ιστοσελίδας είναι ένας σημαντικός παράγοντας στην κατάταξη της με βάση τα οργανικά αποτελέσματα.»

Μία γρήγορη ιστοσελίδα δείχνει πολύ πιο επαγγελματική, ιδιαίτερα αν λάβουμε υπόψη ότι οι μισοί και πλέον επισκέπτες του web είναι mobile & tablet users, σε συσκευές δηλαδή με όχι και τις καλύτερες δυνατές ταχύτητες σύνδεσης (συγκριτικά με σταθερές συνδέσεις). Επίσης, σε περίπτωση που θέλετε η ιστοσελίδα σας να έχει υψηλό quality score (σημαντικό metric της Google, για να αγοράζετε φθηνότερα τα κλικ των keywords που σας ενδιαφέρουν), η ταχύτητα φόρτωσης διαδραματίζει πρωτεύοντα ρόλο!

Στην Hellenic Technologies σας παρέχουμε υπηρεσίες βελτιστοποίησης της ταχύτητας του site σας (speed optimization), χωρίς να υποβαθμίζουμε άλλα σημαντικά χαρακτηριστικά της ιστοσελίδας σας.

VIDEO

Η ομιλία μας για το Pagespeed στο WordCamp Athens 2017.

ΤΑΧΥΤΗΤΑ ΦΟΡΤΩΣΗΣ ΣΕΛΙΔΑΣ

Γιατί είναι σημαντικό να βελτιώσετε την ταχύτητα του site σας;

Το να μειώσετε το χρόνο φόρτωσης της ιστοσελίδας σας, είναι το πρώτο πράγμα που πρέπει να κάνετε για να αυξήσετε τις πωλήσεις σας, την εμπειρία του χρήστη (UX), καθώς και το ranking της σελίδας σας στη Google.

Αυξάνει τις μετατροπές (conversions)

Στατιστικά, για κάθε 1 δευτερόλεπτο καθυστέρησης στην ταχύτητα φόρτωσης της ιστοσελίδας σας, χάνετε περίπου 7% από τα conversions.

Βελτιώνει την κατάταξη του SEO

H Google αγαπάει τα γρήγορα sites. Όσο πιο γρήγορο είναι το site σας, τόσο καλύτερη βαθμολογία θα λάβετε.

Δίνει ώθηση στις πωλήσεις σας

Ιστοσελίδες που φορτώνουν μέσω κινητού, σε λιγότερο από 5 δευτερόλεπτα, κερδίζουν διπλάσια διαφημιστικά έσοδα.

Προσφέρει χαμηλότερα κόστη φιλοξενίας

Βελτιώνοντας την ταχύτητα του site σας, ελαχιστοποιείτε τα κόστη φιλοξενίας.

Διατηρεί τους πελάτες

Στατιστικά, το 79% των πελατών του site σας, οι οποίοι χρειάστηκε να περιμένουν αρκετό χρόνο κατά τη διαδικασία της αγοράς (λόγω αργής φόρτωσης της σελίδας σας) είναι βέβαιο ότι δε θα ξαναγοράσουν από την ιστοσελίδα σας.

Βελτιώνει την εμπειρία του χρήστη για συσκευές κινητών

Το 53% των επισκέψεων χρηστών από συσκευές κινητών στο site σας, εγκαταλείπουν την ιστοσελίδα σας, αν χρειαστεί να περιμένουν περισσότερο από 3 δευτερόλεπτα για να φορτώσει.

Βελτιώνει την εμπειρία του χρήστη

Για κάθε 1 δευτερόλεπτο καθυστέρησης στην ταχύτητα φόρτωσης της σελίδας σας, μειώνεται κατά 16% ο βαθμός ικανοποίησης του πελάτη.

Μειώνει το βαθμό εγκατάλειψης γενικά (abandonment)

Το 57% των επισκεπτών θα εγκαταλείψουν μία σελίδα, αν χρειαστεί να περιμένουν πάνω από 3 δευτερόλεπτα.

Μειώνει το ποσοστό εγκατάλειψης σε συγκεκριμένες σελίδες (bounce rate)

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

ΥΠΗΡΕΣΙΕΣ ΕΠΙΤΑΧΥΝΣΗΣ

Τι μπορούμε να κάνουμε για την ιστοσελίδα σας

Στην Hellenic Technologies λειτουργούμε με βάση τις κατευθυντήριες γραμμές και οδηγίες της Google για γρηγορότερη φόρτωση της σελίδας σας και για καλύτερη κατάταξη σε όρους SEO (search engine optimization). Η ομάδας μας αφού αναλύσει το site σας και τις γλώσσες προγραμματισμού HTML & CSS για τον κώδικα και τα γραφικά, προσδιορίζει τις περιοχές που δείχνουν να έχουν πρόβλημα, τις εξορθολογίζει και τις κάνει να λειτουργούν σωστά και αποδοτικά.

Πριν
7 sec.
Μέσος χρόνος φόρτωσης ιστοσελίδας
34 /100
Βαθμολογία ταχύτητας σελίδας από τη Google
Μετά
4 sec.
Μέσος χρόνος φόρτωσης ιστοσελίδας
58 /100
Ειδικά για τις desktop συσκευές, εγγυόμαστε βαθμολογία πάνω από 86/100 στη βαθμολογία ταχύτητας σελίδας από τη Google
Η ΠΡΟΣΦΟΡΑ ΜΑΣ

Τι σας προσφέρει η Hellenic Technologies για αύξηση του Page Speed

Συμπίεση όλων των αρχείων με τις εικόνες σας

Σμίκρυνση όλων των αρχείων του κώδικα CSS / JavaScript

Συνδυασμούς των αρχείων κωδικα CSS / JavaScript

Αναβολή ανάλυσης δεδομένων κώδικα JavaScript

Καθοριστικής σημασίας κώδικα CSS

Το εργαλείο CDN (Content Delivery Network) για το περιεχόμενό σας

Προφόρτωση αρχείων (prefetch)

Προπαρεχόμενα tags (prerender)

Εργαλεία μέτρησης αποτελέσματος.

Σας προτείνουμε το GTmetrix. Υπάρχουν επίσης και άλλα, όπως το Google PageSpeed, το Webpagetest.org, το Pingdom κ.α

Έχουμε πολύ μεγάλη εμπειρία στο Wordpress &
ειδικευόμαστε στην ενσωμάτωση ERP σε eCommerce

Χρυσοί Χορηγοί του
WordCamp Greece 2017

ΠΡΟΒΛΗΜΑΤΑ ΦΟΡΤΩΣΗΣ

1. Μεγάλο μέγεθος εικόνων & φωτογραφιών.

Είναι ίσως το μεγαλύτερο πρόβλημα (το Νο1 πρόβλημα) που αντιμετωπίζουν όλα τα sites που έχουν πλατφόρμα WordPress, σχετικά με:
  • Μεγάλου μεγέθους εικόνες (πάνω από 3MB) στο αρχικό slider του site σας.
  • Μεγάλος αριθμός εικόνων & φωτογραφιών (για παράδειγμα 15) στο carousel του site σας.
  • Πρέπει πάντα να λαμβάνετε υπόψιν, ότι η ιστοσελίδα σας θα απεικονίζεται και σε συσκευή κινητού.
ΛΥΣΗ ΣΤΟ ΠΡΟΒΛΗΜΑ ΤΟΥ ΜΕΓΕΘΟΥΣ ΕΙΚΟΝΑΣ

Συμπίεση των αρχείων με τις εικόνες σας.

Είναι η διαδικασία κατά την οποία κωδικοποιούμε τα δεδομένα μιας εικόνας ή τη μετατρέπουμε ώστε να καταλαμβάνει λιγότερο χώρο στο server. Σε εκτεταμένο βαθμό, η διαδικασία αυτή μπορεί να εμφανίσει δύο κύρια χαρακτηριστικά: συμπίεση χωρίς απώλειες και συμπίεση με απώλειες ή ακόμα συνδυασμό και των δύο.

1. Χειροκίνητα (manual)

Συνίσταται σε νέες εικόνες – φωτογραφίες. Μπορείτε να χρησιμοποιήσετε εργαλεία όπως τα κάτωθι:

Εν συνεχεία, φορτώνουμε τις εικόνες σε οποίο εργαλείο από τα παραπάνω επιθυμούμε, διαμέσω της πλατφόρμας WordPress.

2. Χρησιμοποιώντας κάποιο plugin

Μπορείτε να χρησιμοποιήσετε ένα συνδυασμό από τα κάτωθι plugins για να επιτύχετε ακόμα καλύτερα αποτελέσματα ταχύτητας φόρτωσης σελίδας:

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

ΑΠΟΤΕΛΕΣΜΑΤΑ

Χρησιμοποιώντας μόνο το Imagify Plugin, έχουμε τα παρακάτω αποτελέσματα αναφορικά με το μέγεθος μιας εικόνας:

Πριν
5.4 MB
Μετά
0.3 MB
Βαθμολογία site πριν τη συμπίεση
C 73 %
PageSpeed Score
D 64 %
YSlow Score
B 84 %
PageSpeed Score
D 64 %
YSlow Score

2. Μεγάλο μέγεθος αρχείων του κώδικα CSS / JavaScript.

Ένα πολύ σημαντικό πρόβλημα που απαντάται σε αρκετά themes της πλατφόρμας WordPress που «φορτώνουν» μεγάλο μέγεθος αρχείων του κώδικα CSS / JavaScript είναι τα εξής:
  • Πολλά αρχεία κώδικα εμπεριέχουν περιττά κενά (gaps)
  • Σε πολλά από τα συγκεκριμένα αρχεία κώδικα εμπεριέχεται μεγάλη ποσότητα από σχόλια (comments) και μορφοποιήσεις (formatting)
ΛΥΣΗ ΣΤΟ ΠΡΟΒΛΗΜΑ TOY ΜΕΓΕΘΟΥΣ TVN ΑΡΧΕΙΩΝ CSS/JS/HTML

Σμίκρυνση όλων των αρχείων CSS / JS / HTML.

Είναι η διαδικασία κατά την οποία μετακινούμε ή αλλάζουμε περιττά (άχρηστα) δεδομένα από τα αρχεία CSS / JS / HTML, ώστε να μειώσουμε δραστικά το μέγεθός τους για να φορτώνει ταχύτερα η σελίδα σας και χωρίς λάθη.

Τρόποι υλοποίησης (είτε πρόκειται για CSS, JS, ή HTML):

ΑΠΟΤΕΛΕΣΜΑΤΑ

Χρησιμοποιώντας μόνο το Imagify Plugin, έχουμε τα παρακάτω αποτελέσματα:

.entry-content p {
   font-size: 14px !important;
}

.entry-content ul li {
   font-size: 14px !important;
}

.product_item p a {
   color: #000;
   padding: 10px 0px 0px 0;
   margin-bottom: 5px;
   border-bottom: none;
}

.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
Βαθμολογία του site μετά τις παραπάνω διαδικασίες
A 92 %
PageSpeed Score
D 69 %
YSlow Score

3. Συνδυασμός CSS / JavaScript / Google Fonts

Είναι η διαδικασία κατά την οποία ΔΕΝ συνδέουμε διαφορετικά αρχεία CSS και JavaScript σε ένα αρχείο. Αυτή η διαδικασία μειώνει τα αιτήματα HTTP.

ΛΥΣΗ

Τρόποι υλοποίησης (είτε πρόκειται για CSS, JS, ή HTML):

ΑΠΟΤΕΛΕΣΜΑΤΑ
Βαθμολογία του site μετά τις παραπάνω διαδικασίες
A 96 %
PageSpeed Score
B 81 %
YSlow Score

4. Αναβολή ανάλυσης δεδομένων κώδικα JavaScript.

Αποτελεί ανάλυση του συγκεκριμένου JavaScript κώδικα AFS, που φορτώθηκε στη σελίδα σας και τοποθετήθηκε στο υποσέλιδο (footer). Συνδέουμε λοιπόν όλα αυτά τα αρχεία στο προς φόρτωση event και αφού φορτωθεί η ίδια η σελίδα, φορτώνονται και τα συγκεκριμένα αρχεία. Στην πραγματικότητα ένα εσωτερικό αρχείο (από το δικό μας server), καλεί ένα εξωτερικό αρχείο (από άλλο server), μετά τη φόρτωση.

5. Αναβολή φόρτωσης εικόνας - Lazy loading.

To Lazy Loading είναι μία τεχνική κατά την οποία οι εικόνες φορτώνονται στο site σας όταν ο χρήστης κάνει scroll στη σελίδα (δεν είναι δηλαδή προ-φορτωμένες). Στην περίπτωση αυτή η ταχύτητα φόρτωσης είναι σχετικά γρήγορη, ωστόσο τα διαφορετικά themes δημιουργούν κατά περίπτωση προβλήματα ασυμβατότητας.

ONLOAD

1
Ο περιηγητής (browser) φορτώνει την αμέσως επόμενη εικόνα και την τοποθετεί στο site

FULLY LOADED

2
Έχουν φορτωθεί εξ’ αρχής όλες οι εικόνες του site

ONSCROLL

3
Οι εικόνες εμφανίζονται και φορτώνουν μόνο κατά τη διάρκεια του scrolling

6. Καθοριστικής σημασίας κώδικας CSS (critical CSS) - Τί ακριβώς είναι;

Ο καθοριστικής σημασίας κώδικας CSS (critical CSS) είναι ένας απολύτως απαραίτητος αρχικός κώδικας CSS, ο οποίος ανιχνεύει τη φόρτωση, πριν την πλήρη φόρτωση της σελίδας σας. Βρίσκεται σε ορατό σημείο στο site σας (above the fold), στο πρώτο δηλαδή σημείο της οθόνης που έρχεται σε επαφή με το μάτι όταν ανοίξει η σελίδα σας. Ο critical CSS συνίσταται ως ενέργεια που πρέπει να γίνει στο site σας για να αυξήσει τη βαθμολογία στο Google Pagespeed, για να ακολουθήσει και ο υπόλοιπος κώδικας CSS.

1
Γράφουμε το URL
2
O browser μας ζητά τον κώδικα CSS
3
Κατεβάζουμε την εφαρμογή CSS
4
Πλήρης φόρτωση εικόνων

7. DNS προφόρτωση αρχείων.

Με την προφόρτωση αρχείων ο browser φέρνει δεδομένα από ένα URL και τα αποθηκεύει στην προσωρινή μνήμη (cache) για μελλοντική χρήση. Η DNS προφόρτωση αρχείων είναι μία τεχνική βελτιστοποίησης. Χρησιμοποιώντας ένα meta tag στην σελίδα του browser, ουσιαστικά φορτώνει το περιεχόμενο κάποιων hosts όπως για παράδειγμα το fonts.googleapis.com, κάνοντας DNS lookups.

- Στην πλατφόρμα WordPress μπορούμε να χρησιμοποιήσουμε το wp_resource φίλτρο.

- Δεν υποστηρίζεται από τον browser Opera Mini. Οι περισσότεροι browsers το κάνουν αυτόματα.

Prerenders (προπαρεχόμενα)

Το prerender είναι μία προέκταση του DNS prefetch. Όχι μόνο φορτώνει τα δεδομένα του site μας από το server φιλοξενίας (host), αλλά λειτουργεί σαν να είχαμε ανοίξει δεύτερο tab.

CDN - Content Delivery Network

Διασφαλίζει την καλύτερη δυνατή διανομή αρχείων του site.
Τα αρχεία είναι διαθέσιμα σε όλο τον κόσμο (worldwide)
Τα αρχεία σας αντιγράφονται στον server και δεν εξυπηρετούνται πλέον από το δικό σας URL αλλά από το CDN URL
Πολλά από τα plugins της προσωρινής μνήμης, δεν υποστηρίζουν τις ικανότητες του CDN

Βαθμολογία του site μετά τις παραπάνω διαδικασίες
A 94 %
PageSpeed Score
B 89 %
YSlow Score

Ορισμένα συμπληρωματικά πράγματα που πρέπει να έχετε στα υπόψη:

Πολύ σημαντικό: Ενεργοποιήστε την Gzip συμπίεση στον server

Μη χρησιμοποιήσετε @import στα αρχεία CSS. Αυτό γιατί μπορεί να προκύψει σημαντική καθυστέρηση στη φόρτωση της σελίδας

Χρησιμοποιείστε expire headers. Αυτό τίθεται σε εφαρμογή είτε από το htaccess είτε από κάποιο plugin

Δεν παρατηρούνται σφάλματα κατά τη διαδικασία φόρτωσης της σελίδας, ειδικά τα τύπου “Not found errors”

Χρησιμοποιείστε βέλτιστα μεγέθη εικόνων στην πλατφόρμα WordPress, ώστε να εξυπηρετούνται κλίμακες διαβάθμισης μεγέθους των εικόνων

Μην κάνετε κατάχρηση των WordPress plugins

Τα videos πρέπει να είναι ενσωματωμένα στο site σας ή να παίζουν μέσω ενός API και όχι μέσω του server

Θα ήταν χρήσιμο να μετακινήσετε τα query strings από πηγές όπως για παράδειγμα:
https://example.com/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.layeranimation.min.js?version=5.4.6

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

ΕΠΙΛΕΞΤΕ ΤΟ ΠΛΑΝΟ ΠΟΥ ΑΝΤΑΠΟΚΡΙΝΕΤΑΙ ΣΤΙΣ ΑΝΑΓΚΕΣ ΣΑΣ

Πακέτα υπηρεσιών για WordPress Optimization.

Στην Hellenic Technologies λειτουργούμε με βάση τις κατευθυντήριες γραμμές της Google για γρηγορότερη φόρτωση της σελίδας σας, με σκοπό την καλύτερη κατάταξη SEO (search engine optimization) και αντίστοιχα αισθητά καλύτερα scores σε ενέργειες digital marketing (και σε κάποιες περιπτώσεις χαμηλότερο cpc). Ωστόσο να σας υπενθυμίσουμε πως το Page Speed Optimization είναι πλέον μία δυναμική διαδικασία, κάτι που σημαίνει ότι σε οποιοδήποτε επόμενο update, ή αλλαγή του εκάστοτε "αλγόριθμου", ή ακόμη και απλή προσθήκη/αφαίρεση περιεχομένου, το Page Speed Score μεταβάλλεται ακαριαία. Αυτός είναι και ένας βασικός λόγος που δεν μπορούμε να εγγυηθούμε πλέον για τη μονιμότητα του αποτελέσματος στο Page Speed Score. Έτσι κρίνεται απαραίτητη η μηνιαία παρακολούθηση και η επιδιόρθωσή του.

BasicAll in One
Reports & TipsReports & TipsReports & Tips
Παροχή μηνιαίου report σχετικά με το pagespeed της ιστοσελίδας
Παροχή διαφόρων tips πάντα σχετικά με το παρεχόμενο report
PageSpeed Optimization ServicesPageSpeed Optimization ServicesPageSpeed Optimization Services
Ανάλυση ενεργειών που πρέπει να γίνουν για να γίνει το website ποιο γρήγορο.
Άυξηση Pagespeed
Cache Preload
Database Optimization
CSS/JS Compression
CSS/JS Combination
Image Compression
Δημιουργία Critical CSS
DNS Prefetch / Preload
Προσθήκη CDN στην ιστοσελίδα για ολα τα εξωτερικά assets.
TOTAL COST:
Do you have questions or want to discuss pricing plans? Order Now Order Now
TESTIMONIALS

Τι λένε οι πελάτες μας για εμάς.

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

ΕΛΑΤΕ ΣΕ ΕΠΑΦΗ

Επικοινωνήστε μαζί μας.

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