Σάββατο, 20 Απριλίου, 2024

FlyingPress: Βελτιστοποίηση WordPress ιστοσελίδων συν CDN

Share

Μιας και η ταχύτητα είναι πλέον σημαντική για το SEO ενός blog, το FlyingPress (συν το CDN του) κάνει τη βελτιστοποίηση WordPress ιστοσελίδων υπόθεση μερικών λεπτών, ακόμα και για ακόμα κι αν δεν έχεις ξανά χρησιμοποιήσει παρόμοια caching plugins στο παρελθόν.

Αυτή τη στιγμή που γράφεται το άρθρο, ένα από τα στοιχεία που παίζουν σημαντικό ρόλο στη κατάταξη των άρθρων και των σελίδων ενός blog στα αποτελέσματα αναζήτησης, είναι αναμφισβήτητα η ταχύτητα. Η Google έχει αναφερθεί αρκετές φορές στο παρελθόν για τη σημασία της ταχύτητας των ιστοσελίδων, ενώ έχει κατασκευάσει εργαλεία όπως το Google PageSpeed Insights για να βοηθάει τους προγραμματιστές και τους bloggers να βελτιστοποιήσουν τα sites τους. Επιπλέον, την ίδια υπηρεσία την έχει ενσωματώσει και στο Google Site Kit, το επίσημο πρόσθετο της για το WordPress.

Στο Inkstory έχω γράψει και δημοσιεύσει αρκετούς τρόπους με τους οποίους μπορείς να αυξήσεις την ταχύτητα της WordPress ιστοσελίδας σου. Στο σημερινό άρθρο, ωστόσο, θα εστιάσω κυρίως στους αρχάριους bloggers, που θέλουν να βελτιστοποιήσουν το blog τους χωρίς να προσλάβουν έναν τεχνικό ή να πληρώσουν ένα σκασμό λεφτά. Με όλα αυτά κατά νου, δώσε έμφανιση στις λεπτομέρειες και σε μερικά λεπτά θα έχεις ένα βελτιστοποιημένο blog με υψηλότερη βαθμολογία στο Google PageSpeed Insights.

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

Ορολογίες που πρέπει να γνωρίζεις:

  • Cache: Προσωρινή μνήμη
  • CDN: Content Delivery Network
  • Plugin(s): Πρόσθετο(α)
  • Caching plugins: Τα πρόσθετα που σου επιτρέπουν να ελέγχεις και να διαχειρίζεσαι τη προσωρινή μνήμη της ιστοσελίδας σου. Παράλληλα, πολλά παρέχουν έξτρα δυνατότητες και λειτουργίες, ώρες για τη βελτιστοποίηση των HTML, CSS και JavaScript αρχείων, CDN,κ.α.

Τι είναι το FlyingPress;

FlyingPress WordPress Caching Plugin

Το FlyingPress είναι ένα ελαφρύ, γρήγορο και εύκολο στη χρήση πρόσθετο για το WordPress, το οποίο σου επιτρέπει να αυξήσεις σημαντικά την ταχύτητα της ιστοσελίδας σου, απλά ενεργοποιώντας ορισμένες λειτουργίες με το πάτημα ενός κουμπιού. Παράλληλα, αυξάνει σημαντικά τη βαθμολογία που λαμβάνει η ιστοσελίδα σου μέσω του Google PageSpeed Insights, του GTMetrix και μεταξύ άλλων υπηρεσιών για τον έλεγχο της ταχύτητας, ενώ διορθώνει όλα τα Core Web Vitals.

Σε ποιους απευθύνεται;

Το πρόσθετο απευθύνεται σε όλους όσους τρέχουν τις ιστοσελίδες τους πάνω στο WordPress και θέλουν να τις βελτιστοποιήσουν χωρίς να έχουν απολύτως καμία γνώση πάνω σε τέτοιου είδους πρόσθετα ή πάνω σε γλώσσες προγραμματισμού. Το FlyingPress είναι ίσως το ευκολότερο στη χρήση caching plugin που υπάρχει αυτή τη στιγμή, ενώ η CDN υπηρεσία του μπορεί να ενεργοποιηθεί σε μόλις μερικά δευτερόλεπτα (χωρίς υπερβολές).

Πόσο εύκολα ρυθμίζεται;

Μπορείς να ρυθμίσεις πλήρως όλο το πρόσθετο σε λιγότερο από 1 ώρα, δοκιμάζοντας παράλληλα αν όλα λειτουργούν σωστά. Αν και το πρόσθετο δεν θα χαλάσει κάτι με την ενεργοποίηση του, θα χρειαστεί να ενεργοποιείς κάθε χαρακτηριστικό ξεχωριστά και στη συνέχεια να ελέγχεις εάν όλα λειτουργούν σωστά, περισσότερα όμως γι ‘αυτό στη συνέχεια του οδηγού.

Πόσο έμπιστο και σταθερό είναι;

Το FlyingPress είναι ένα σχετικά καινούργιο πρόσθετο το οποίο αναπτύσσεται ακόμα. Παρόλα αυτά, από την αρχή της κυκλοφορίας του ακόμα, παρείχε εξ ‘αρχής μερικά απ’ τα βασικότερα χαρακτηριστικά, και πολλά περισσότερα απ’ ότι παρέχουν άλλα πρόσθετα του είδους. Χρησιμοποιώ και το πρόσθετο αλλά και τη CDN υπηρεσία στο Inkstory και σε ορισμένα blogs πελατών, και μέχρι στιγμής λειτουργεί άψογα και χωρίς προβλήματα. Αν προκύψει κάτι, θα το αναφέρω ακριβώς από κάτω.

Τι είναι το FlyingCDN;

FlyingPress και FlyingCDN - Ρυθμίσεις του CDN

Το FlyingCDN είναι μια CDN υπηρεσία η οποία μπορεί να ενεργοποιηθεί μέσα από τις ρυθμίσεις του FlyingPress plugin. Για να λειτουργήσει η CDN υπηρεσία θα πρέπει πρώτα να έχεις αποκτήσει, εγκαταστήσει και ενεργοποιήσει το FlyingPress στην WordPress ιστοσελίδα σου. Η υπηρεσία χρεώνεται επίσης μηνιαίως και αντί να τραβάει τα χρήματα από την χρεωστική, πιστωτική, ή προ-πληρωμένη κάρτα σου, τα τραβάει μέσα από τον FlyingPress λογαριασμό σου, όπου σου παρέχεται ένα είδους ηλεκτρονικού πορτοφολιού.

Σε ποιους απευθύνεται;

Το FlyingCDN απευθύνεται σε όλους όσους επιθυμούν να αυξήσουν σημαντικά την ταχύτητα της ιστοσελίδας τους, παρέχοντας τα βασικότερα αρχεία από το κοντινότερο διακομιστή. Με πιο απλά λόγια, όταν ένας επισκέπτης φορτώσει μια σελίδα του blog μας, η CDN υπηρεσία παρέχει όλα τα αρχεία και τις φωτογραφίες από το κοντινότερο server, πράγμα που σημαίνει πως στους Έλληνες τα φορτώνει από ελληνικό server, στους Αμερικανούς από αμερικανικό server, τους Ισλανδούς από Ισλανδικό server κ.ο.κ.

Το CDN είναι πλέον απαραίτητο για να έχουμε επίσης καλή βαθμολόγηση ταχύτητας στο Google PageSpeed Insights, καθώς επίσης και για να φορτώνει η ιστοσελίδα μας γρήγορα, ακόμα και από τοποθεσίες όπου δεν υπάρχει καλή σύνδεση στο ίντερνετ. Παράλληλα, μειώνουμε σημαντικά το bandwidth από τον server μας και έτσι μειώνουμε τα έξοδα και την ανάγκη για να πάμε σε μεγαλύτερο server / hosting πακέτο.

Το FlyingCDN θα μετατρέπει επίσης αυτόματα όλες τις φωτογραφίες σε WebP μορφή, ενώ μπορείς να ενεργοποιήσεις και την επιλογή να ορίζεται αυτόματα στον κώδικα κάθε φωτογραφίας το μέγεθος της, μια “συμβουλή” που θα δεις να εμφανίζεται στο PageSpeed Insights για αρκετές ιστοσελίδες.

Πόσο εύκολα ρυθμίζεται;

Το FlyingCDN μπορεί να ενεργοποιηθεί απευθείας μέσα από τον λογαριασμό σου στην ιστοσελίδα του FlyingPress. Στον οδηγό παρακάτω δείχνω βήμα προς βήμα για το πως να ενεργοποιήσεις τη CDN υπηρεσία εύκολα και γρήγορα.

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

Πόσο έμπιστο και σταθερό είναι;

Όπως ανέφερα παραπάνω, το FlyingPress είναι ένα σχετικά καινούργιο πρόσθετο το οποίο συνεχίζεται να αναπτύσσεται μέχρι και σήμερα, αλλά λειτουργεί άψογα και παρέχει όλα τα βασικά χαρακτηριστικά που θα χρειαστείς. Παρόλο όμως που το FlyingPress είναι καινούργιο, τόσο αυτό όσο και το FlyingCDN παρέχουν ύψιστη σταθερότητα, κάτι το οποίο μπορώ να επιβεβαιώσω από τη χρήση που κάνω για πάνω από ένα χρόνο τώρα.

Κατέβασμα και Εγκατάσταση του FlyingPress στο WordPress

Το κατέβασμα, η εγκατάσταση και η ενεργοποίηση του FlyingPress και του FlyingCDN είναι πανεύκολη και απαιτεί να επενδύσεις μόλις μερικά λεπτά από τον χρόνο σου.

  1. Επέλεξε ένα από τα διαθέσιμα πακέτα

    FlyingPress WordPress Plugin Buy Now

    Το πρώτο πράγμα που θα χρειαστεί να κάνεις είναι να επισκεφτείς την ιστοσελίδα του FlyingPress και να επιλέξεις ένα πακέτο, κάνοντας κλικ στο κουμπί “Get FlyingPress“, είτε από το μενού στο “Pricing“. Επέλεξε το πακέτο κάνοντας κλικ στο κουμπί “Buy Now“. Τα πακέτα βασίζονται στον αριθμό των ιστοσελίδων που θα τα εγκαταστήσεις, οπότε αν θέλεις να βελτιστοποιήσεις μόνο ένα blog, τότε αγόρασε το μικρότερο πακέτο.

  2. Δημιούργησε ένα λογαριασμό

    FlyingPress WordPress Plugin Account and Buy

    Πατώντας στο κουμπί “Buy Now” θα μεταφερθείς στην επόμενη σελίδα, όπου θα χρειαστεί να συμπληρώσεις τα στοιχεία σου και να προχωρήσεις στην αγορά του πρόσθετου και την ολοκλήρωση του νέου σου λογαριασμού. Θα σου σταλθεί email αμέσως μετά την ολοκλήρωση της αγοράς, οπότε σιγουρέψου πως έχεις ελέγξει τόσο τον φάκελο με τα εισερχόμενα μηνύματα, όσο και τον φάκελο με τα ανεπιθύμητα.

  3. Ενεργοποίησε τη CDN υπηρεσία

    FlyingCDN CDN

    Εάν δεν επιθυμείς να χρησιμοποιήσεις τη CDN υπηρεσία του FlyingPress, το FlyingCDN, τότε μπορείς να παραλήψεις αυτά τα βήματα. Παρόλα αυτά, εάν ενδιαφέρεσαι να αποκτήσεις πλήρη ταχύτητα και να εξαφανίσεις όλες τις ειδοποιήσεις που σου εμφανίζει η Google για την ταχύτητα της WordPress ιστοσελίδας σου, τότε σου προτείνω να ενεργοποιήσεις την υπηρεσία. Από τον λογαριασμό σου στην ιστοσελίδα του FlyingPress, κάνε κλικ στην επιλογή “FlyingCDN” για να μεταφερθείς στην ανάλογη ενότητα.

  4. Προσθήκη χρημάτων για το FlyingCDN

    FlyingCDN Recharge Account

    Από την ενότητα “FlyingCDN“, κάνε κλικ στο κουμπί “Recharge Account” και πρόσθεσε τουλάχιστον 3,00$ ώστε να μπορέσει να ενεργοποιηθεί η CDN υπηρεσία. Το FlyingCDN κοστίζει 3,00$ μηνιαίως και παρέχει έως 200GB bandwidth. Για να μπορεί η CDN υπηρεσία να λειτουργεί, θα τραβάει αυτόματα τα 3,00$ κάθε μήνα μέσα από τον FlyingPress λογαριασμό σου. Σκέψου το σαν μια προ-πληρωμένη κάρτα η οποία τραβάει χρήματα μόνο όταν υπάρχουν μέσα. Μπορείς να καταθέτεις μέσα και περισσότερα χρήματα, όπως για παράδειγμα 10,00$ ώστε να καλύψεις τους επόμενους τρεις μήνες.

  5. Δημιουργία νέου CDN

    FlyingCDN Create CDN

    Μόλις καταθέσεις έστω 3,00$ στον FlyingPress λογαριασμό σου, στη συνέχεια κάνε κλικ στην επιλογή “Create new CDN“, πρόσθεσε το domain name της ιστοσελίδας σου και κάνε κλικ στο “Create“.

  6. Κατέβασμα του FlyingPress WordPress plugin

    FlyingPress WordPress Plugin Download

    Μέσα από τον λογαριασμό σου στο FlyingPress, πήγαινε στην καρτέλα “Subscriptions“. Από εκεί, κάνε κλικ στο κουμπί “Download FlyingPress” και αποθήκευσε το συμπιεσμένο αρχείο σε όποιον φάκελο του υπολογιστή σου προτιμάς (μπορείς και από κινητό ή tablet).

  7. Εγκατάσταση του FlyingPress στο WordPress

    FlyingPress Εγκατάσταση

    Κάνε σύνδεση στο διαχειριστικό λογαριασμό σου στο WordPress και στη συνέχεια από το αριστερό πλαϊνό μενού πήγαινε στα Πρόσθετα -> Νέο Πρόσθετο. Στη συνέχεια, κάνε στην επιλογή Προσθήκη νέου -> Επιλογή αρχείου και επέλεξε το συμπιεσμένο αρχείο που κατέβασες νωρίτερα από το FlyingPress.

  8. Ενεργοποίηση του plugin

    FlyingPress Ενεργοποίηση

    Μόλις το πρόσθετο ανέβει και εγκατασταθεί στο WordPress, κάνε κλικ στην επιλογή “Ενεργοποίηση πρόσθετου” για να το ενεργοποιήσεις στην ιστοσελίδα σου. Σε αυτό το σημείο θα πρέπει να απενεργοποιήσεις όποιο άλλο ενεργοποιημένο πρόσθετο έχεις που αφορά το caching και τη βελτιστοποίηση HTML, CSS και JavaScript αρχείων.


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

Σε καμία περίπτωση δεν προτείνεται να αφήσεις την ιστοσελίδα σου με τις βασικές ρυθμίσεις, καθώς αυτές είναι οι “ασφαλείς ρυθμίσεις”, που σημαίνει πως δεν παρέχουν τίποτα περισσότερο εκτός απ’ το παραδοσιακό caching και βασική βελτιστοποίηση.

Ρύθμιση του FlyingPress

Αυτή τη στιγμή που γράφεται το άρθρο, η σελίδα Ρυθμίσεων του FlyingPress περιλαμβάνει 10 ενότητες, όλες κατηγοριοποιημένες μέσα σε ένα περιβάλλον χρήσης. Έτσι, οτιδήποτε κι αν είναι αυτό που ψάχνεις, θα μπορείς να το βρεις με ευκολία, καθώς όλα βρίσκονται στο αριστερό πλαϊνό μενού του πρόσθετου.

Για να μπεις στο περιβάλλον χρήσης του FlyingPress, μπορείς είτε να κάνεις κλικ στο “FlyingPress” κουμπί που εμφανίζεται στη μαύρη διαχειριστική μπάρα του WordPress τέρμα επάνω, είτε κάνοντας κλικ στο “FlyingPress” που βρίσκεται στο αριστερό πλαϊνό μενού του WordPress.

Θα κάνω τον οδηγό όσο πιο αναλυτικό γίνεται, οπότε θα αναφέρω περιληπτικά κάθε βήμα ώστε ακόμα κι ένας αρχάριος να μπορεί να βελτιστοποιήσει πλήρως την WordPress ιστοσελίδα του. Η ίδια διαδικασία είναι για όλες τις ιστοσελίδες, συμπεριλαμβανομένων των blogs, ηλεκτρονικών καταστημάτων, portfolios, landing pages κ.ο.κ.

Dashboard

FlyingPress Dashboard

Το Dashboard περιλαμβάνει σημαντικές πληροφορίες για το caching της ιστοσελίδας σου, όπως πόσες σελίδες έχουν προστεθεί στη προσωρινή μνήμη cache. Θα μπορείς επίσης να δεις σε τι κατάσταση βρίσκεται το κλειδί-ενεργοποίησης του FlyingPress λογαριασμού σου (ενεργοποιημένο = Valid και απενεργοποιημένο = Invalid). Η ενότητα “Support” περιλαμβάνει ορισμένους συνδέσμους προς την ιστοσελίδα του FlyingPress και το Documentation στη περίπτωση που χρειαστείς επιπλέον βοήθεια.

Cache

Η ενότητα “Cache” είναι αυτή από την οποία ορίζουμε πως θα λειτουργεί το caching στην ιστοσελίδα μας. Παρακάτω αναφέρω κάθε λειτουργία και χαρακτηριστικό που παρέχει το FlyingPress μέσα σε κάθε ενότητα.

Additional Auto Purge

Επιλέγουμε “All Posts and Pages” για να καθαρίζει τη προσωρινή μνήμη απ’ όλα τα άρθρα και τις σελίδες. Εάν γνωρίζουμε τι κάνουμε, μπορούμε να επιλέξουμε συγκεκριμένες επιλογές, όπως να καθαρίζεται η προσωρινή μνήμη μόνο στις σελίδες, ή μόνο στα άρθρα.

Cache Lifespan

Εκτός κι αν γνωρίζουμε τι κάνουμε, θέτουμε το cache σε “Never“. Εάν η ιστοσελίδα μας είναι ειδησεογραφική και ανανεώνεται ανά μερικές ώρες, τότε μπορούμε να θέσουμε το χρονικό διάστημα σε 4 ή 24 ώρες, ανάλογα το πόσο συχνά δημοσιεύουμε νέο περιεχόμενο.

Exclude Pages from Caching

Προσθέτουμε όσες σελίδες δεν θέλουμε να προστίθενται στη μνήμη cache. Αν για παράδειγμα δεν θέλουμε μια συγκεκριμένη σελίδα να καθαρίζεται από την προσωρινή μνήμη επειδή δεν ανανεώνεται ποτέ, τότε μπορούμε να την εισάγουμε εδώ.

Ignore Query Strings

Προσθέτουμε όλα τα Query Strings που θέλουμε να παραλείψει το FlyingPress. Και πάλι, αν δεν γνωρίζουμε τι κάνουμε, το αφήνουμε κενό.

Optimize for Logged in Users

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

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

CSS

FlyingPress CSS

Από τη καρτέλα CSS θα έχουμε την δυνατότητα να βελτιστοποιήσουμε τα CSS αρχεία της ιστοσελίδας μας, και πιο συγκεκριμένα του theme και ορισμένων plugins μας. Η CSS είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται για τη μορφοποίηση και τον σχεδιασμό ιστοσελίδων, εφαρμογών, προγραμμάτων κ.ο.κ.

Minify & Optimize CSS Files

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

Generate Critical and Used CSS

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

Load Unused CSS

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

  • Asynchronously: Φορτώνει τα αρχεία ασύγχρονα (εύκολη λύση).
  • On user interaction: Φορτώνει τα αρχεία όταν ο χρήστης κουνήσει το βελάκι, το ποντίκι ή κάνει την οποιαδήποτε κίνηση (μέγιστη ταχύτητα).
  • Remove: Αφαιρεί τα CSS αρχεία εντελώς.

Οι πρώτες δύο επιλογές συχνά είναι οι καλύτερες για απλούς χρήστες που δεν έχω αρκετές γνώσεις πάνω στη βελτιστοποίηση ιστοσελίδων. Αν η επιλογή “On user interaction” δεν φορτώνει κάτι στον σχεδιασμό, τότε μπορείς να δοκιμάσεις την επιλογή “Asynchronously” η οποία θεωρείται και η πιο διαδεδομένη. Το “Remove” το επιλέγεις μόνο εάν γνωρίζεις τι κάνεις.

Force Include Selectors

Αν μια από τις παραπάνω αλλαγές χαλάει τον σχεδιασμό σου, δεν φορτώνει άλλο ορισμένα αρχεία ή κώδικα, ή οποιοδήποτε άλλο πρόβλημα που αφορά τον σχεδιασμό και τη λειτουργία της ιστοσελίδας, μπορείς να βάλεις τις λέξεις-κλειδιά από αρχεία που θέλεις να προστεθούν στο Critical & Used CSS. Για παράδειγμα, αν δεν φορτώνει το slider του blog σου, μπορείς να βρεις το αρχείο του και να προσθέσεις τη λέξη-κλειδί μέσα στο πεδίο για να ξεκινήσει να το φορτώνει κανονικά.

Lazy Render HTML Elements

Το Lazy Render HTML Elements σου επιτρέπει να ενεργοποιήσεις την δυνατότητα “lazy-loading“, για την οποία έχω ξανά αναφερθεί στο παρελθόν σε προηγούμενα άρθρα μου. Αυτή η λειτουργεία θα φορτώνει όλα τα elements καθώς ο χρήστης σκρολλάρει προς τα κάτω.

Έτσι, όλα θα ανοίγουν γρηγορότερα καθώς η σελίδα θα φορτώνει σιγά-σιγά τα στοιχεία που περιλαμβάνει και ανάλογα με τις κινήσεις του κάθε χρήστη. Συνήθως σε αυτό το πεδίο προσθέτουμε λέξεις-κλειδιά όπως #comments για να προσθέσει τη Lazy Render ιδιότητα στη φόρμα σχολίων. Αυτό είναι ιδανικό για όταν έχουμε για παράδειγμα στα άρθρα μας πολλά σχόλια και καθυστερούν στη φόρτωση ενός άρθρου. Τα καλά νέα είναι πως το FlyingPress θα αναγνωρίσει αυτόματα που τα στοιχεία στα οποία πρέπει να προσθέσει τη λειτουργία lazy-loading.

JavaScript

FlyingPress JavaScript

Όλες οι επιλογές που υπάρχουν μέσα στην ενότητα JavaScript είναι ιδιαίτερα επικίνδυνες. Αυτό σημαίνει πως υπάρχει μεγάλη πιθανότητα σε ένα από τα ερχόμενα βήματα να δεις κάτι να διαλύεται στην ιστοσελίδα. Οτιδήποτε δεν λειτουργεί, απλά το ξανά απενεργοποιείς και προχωράς με τα επόμενα βήματα. Αυτή είναι η ενότητα από την οποία βελτιστοποιούμε όλα τα JavaScript αρχεία που υπάρχουν στην WordPress ιστοσελίδα μας – και πίστεψε με, πάντα υπάρχουν και πολλές φορές είναι και αρκετά.

Minify JavaScript

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

Αυτή η δυνατότητα είναι αρκετά απλή: Αν ένας χρήστης επισκεφτεί την ιστοσελίδα μας, με το που πάει το βελάκι (κέρσορα) του ποντικιού πάνω σε έναν σύνδεσμο που μεταφέρει σε άλλο μας άρθρο ή σελίδα μας, θα φορτώνει στο παρασκήνιο όλο το άρθρο ή την σελίδα. Έτσι, με το που ο επισκέπτης κλικάρει, η σελίδα θα φορτώσει σχεδόν στιγμιαία. Παρόλα αυτά, αυτή η δυνατότητα απαιτεί ισχυρό και γρήγορο server και είναι καλό να μην την ενεργοποιούμε σε απλά shared hosting πακέτα. Μόνο οι δοκιμές μπορούν να δείξουν τα σωστά αποτελέσματα στο hosting που βρίσκεσαι.

Disable jQuery Migrate

Απενεργοποιεί εντελώς το jQuery Migrate, μια ιδιότητα του jQuery. Παρόλα αυτά, μιας και υπάρχουν ακόμα ορισμένα παλιά themes και plugins που χρησιμοποιούν αυτή την δυνατότητα, προτείνεται να ελέγξεις στη συνέχεια αν όλα λειτουργούν σωστά. Αν κάποιο πρόσθετο απαιτεί τη jQuery Migrate για να λειτουργήσει, τότε μπορείς είτε να το αντικαταστήσεις με ένα νεότερο και πιο σύγχρονο πρόσθετο, είτε να απενεργοποιήσεις αυτή την επιλογή από το FlyingPress.

Defer JavaScript

Εκτελεί κάθε script αφότου ολοκληρωθεί η ανάλυση των HTML αρχείων.

  • Defer Inline JavaScript: Εκτελεί και τα inline JavaScript αρχεία.
  • Exclude Scripts from Defer: Αφαιρεί scripts από το Defer.

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

Load Scripts on User Interaction

Αυτή η δυνατότητα θα προσπαθεί να αλληλοεπιδράει μαζί με κάθε επισκέπτη, όπως με την κίνηση του ποντικιού του, την εισαγωγή πληκτρολογίου, τη κύλιση και πολλά ακόμα. Η συγκεκριμένη επιλογή είναι ιδανική για όσους θέλουν να αυξήσουν ελάχιστα την ταχύτητα από εξωτερικούς κώδικες, όπως αυτούς από τις διαφημίσεις της Google AdSense και το αναδυόμενο παράθυρο του OneSignal για να τις browser ειδοποιήσεις.

Font

FlyingPress Fonts

Η καρτέλα “Font” του FlyingPress περιλαμβάνει τρεις βασικές επιλογές για τις γραμματοσειρές της ιστοσελίδας μας. Αυτές οι επιλογές είναι οι λιγότερο πιθανές για να εμφανίσουν προβλήματα, αλλά ρίξε μια ματιά στις γραμματοσειρές του blog σου ώστε να ελέγξεις πως εμφανίζονται σωστά μετά τις αλλαγές.

Optimize Google Fonts

Αν το theme που χρησιμοποιείς φορτώνει όλες τις γραμματοσειρές του απευθείας από το Google Fonts, τότε η ενεργοποίηση αυτή της επιλογής είναι σχεδόν απαραίτητη. Το FlyingPress θα συνδυάσει όλες τις γραμματοσειρές σε ένα αρχείο και στη συνέχεια θα τις κατεβάσει στον server που χρησιμοποιείς, απ’ όπου και θα τις φορτώνει κάθε φορά σε κάθε νέο επισκέπτη.

Σημείωση: Αν και αρκετοί developers θα διαφωνήσουν, αναφέροντας πως οι γραμματοσειρές της Google φορτώνουν από το γρήγορο CDN δίκτυο της, και άρα πρέπει να χρησιμοποιούμε αυτό καθώς τα cookies παραμένουν αποθηκευμένα στο πρόγραμμα περιήγησης του επισκέπτη, θα διαφωνήσω προτείνοντας να κάνουν μερικές δοκιμές.

Display Fallback Fonts

Το Google PageSpeed Insights, το GTMetrix και αρκετές άλλες υπηρεσίες για τη μέτρηση της ταχύτητας ιστοσελίδων, προτείνουν κάθε φορά που φορτώνει μια σελίδα, να εμφανίζονται άμεσα οι γραμματοσειρές. Για να επιλυθεί αυτό το πρόβλημα, το μόνο που έχεις να κάνεις είναι να ενεργοποιήσεις την επιλογή. Το χειρότερο που μπορεί να συμβεί είναι να δεις τις γραμματοσειρές του theme σου να αλλάζουν ή να μην φορτώνουν σωστά, κάτι το οποίο μπορείς να λύσεις άμεσα, απενεργοποιώντας αυτή την επιλογή.

Preload Fonts

Η δυνατότητα “Preload Fonts” κάνει ακριβώς αυτό που αναφέρει η ονομασία της, φορτώνει άμεσα τις γραμματοσειρές που έχουμε εισάγει μέσα στο διαθέσιμο πεδίο. Αυτό το κάνουμε μόνο εάν εμφανιστεί σφάλμα στο PageSpeed Insights που αναφέρει πως δεν γίνεται σωστό preloading των γραμματοσειρών ή συγκεκριμένα αρχεία γραμματοσειρών δεν εμφανίζονται σωστά όταν φορτώνει η σελίδα. Σε γενικές γραμμές, αν λειτουργεί και δεν εμφανίσει κάποιο πρόβλημα, κράτα το ενεργοποιημένο.

Image

FlyingPress Images

Η ενότητα “Image” περιλαμβάνει όλες τις επιλογές και τις ρυθμίσεις για να βελτιστοποιήσουμε τις φωτογραφίες και τα βίντεο στην ιστοσελίδα μας. Σε αντίθεση με άλλα ανταγωνιστικά plugins, το FlyingPress παρέχει ορισμένες ενδιαφέρουσες επιλογές, ενώ από την ίδια ενότητα θα μπορέσεις να ρυθμίσεις ελάχιστα και το FlyingCDN.

Lazy Load Images

Αναβάλει τη φόρτωση των εικόνων όταν δεν είναι απαραίτητο να φορτώσουν. Οι φωτογραφίες φορτώνουν από πάνω προς τα κάτω και καθώς ο επισκέπτης σκρολλάρει προς τα κάτω. Για την συγκεκριμένη επιλογή μπορείς να επιλέξεις μεταξύ του “Using JavaScript” και “Browser Native“.

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

Στο πεδίο “Exclude Above Fold Images from Lazy Load” μπορείς να επιλέξεις πόσες ή / και ποιες εικόνες θέλεις να αφαιρεθούν από αυτό τον περιορισμό. Αν για παράδειγμα έχεις ένα slider με 3 φωτογραφίες οι οποίες δεν εμφανίζονται αφότου ενεργοποιήσεις τη βελτιστοποίηση φωτογραφιών, τότε μπορείς να επιλέξεις να προσπερνάει τις τρεις πρώτες φωτογραφίες.

Iframe

FlyingPress iFRAME

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

Lazy-Load iFrames

Το συγκεκριμένο χαρακτηριστικό λειτουργεί με τον ίδιο τρόπο που λειτουργεί και το image lazy-loading που ανέφερα στην παραπάνω ενότητα. Αντί να φορτώνει όλα iframes κατευθείαν με το που φορτώσει ο χρήστης μια σελίδα, ξεκινάει και τα εμφανίζει καθώς σκρολλάρει παρακάτω. Το συγκεκριμένο χαρακτηριστικό μπορεί να αυξήσει αρκετά την ταχύτητα μιας ιστοσελίδας, αλλά μπορεί επίσης πολύ εύκολα να σταματήσει την λειτουργία αρκετών τρίτων themes και plugins.

Use Placeholder Image for YouTube iFrames

Αν προσθέτεις βίντεο του YouTube στα άρθρα, τις σελίδες ή σε οποιοδήποτε μέρος της ιστοσελίδας σου, ενεργοποιώντας το “placeholder image” το FlyingPress αντί για τον πραγματικό player του YouTube θα το εμφανίζει ως εικόνα. Όταν ο χρήστης κάνει κλικ πάνω στο βίντεο, αυτό θα ανανεωθεί εκείνη την στιγμή εμφανίζοντας τον player. Αν και αυτό θα έπρεπε να είναι ενεργοποιημένο σχεδόν για κάθε ιστοσελίδα, αν δεν ανεβάζεις βίντεο απ’ το YouTube, δεν υπάρχει λόγος να το ενεργοποιήσεις.

Ακριβώς από κάτω, ενεργοποίησε επίσης την επιλογή “Self-host YouTube Placeholder” για να κατεβάζει το FlyingPress τη placeholder φωτογραφία στον server σου.

CDN

FlyingPress - FlyingCDN CDN

Για το CDN έχω αναφερθεί σε ορισμένα προηγούμενα άρθρα, όλα εκ των οποίων θα τα βρεις διαθέσιμα παρακάτω. Το FlyingCDN είναι αναμφισβήτητα μια από τις καλύτερες, γρηγορότερες και οικονομικότερες CDN υπηρεσίες. Έως αυτή την στιγμή, το FlyingCDN κοστίζει 3,00$ μηνιαίως και για να ανανεώνεται θα χρειάζεται να προσθέτεις τα χρήματα στο FlyingPress πορτοφόλι σου.

Μόλις συνδέσεις την CDN υπηρεσία, στη συνέχεια επέλεξε την επιλογή “All files” ώστε να ξεκινήσουν όλα τα αρχεία και οι φωτογραφίες σου να παρέχονται από τους servers της CDN υπηρεσίας. Στη περίπτωση που αντιμετωπίσεις κάποιο πρόβλημα, όπως να μην εμφανίζονται ξαφνικά οι φωτογραφίες στην ιστοσελίδα σου, σιγουρέψου πως έχεις βάλει τον σωστό σύνδεσμο και πως έχεις καθαρίσει τη προσωρινή μνήμη (cache) του WordPress site σου.

Database

FlyingPress Database

Η database (Βάση Δεδομένων) της ιστοσελίδας σου είναι κρίσιμη για τη σωστή λειτουργία. Γνωρίζοντας πως να καθαρίζεις όλα τα περιττά και άχρηστα αρχεία από τη βάση δεδομένων, όχι μόνο μπορεί να αυξήσει την ταχύτητα, αλλά και να μειώσει τη συνολική χωρητικότητα της βάσης δεδομένων. Ωστόσο, θέλει μια μικρή προσοχή για να μην διαγράψεις κατά λάθος τα ανεπιθύμητα ή διαγραμμένα άρθρα και σχόλια του WordPress.

Από την συγκεκριμένη σελίδα του FlyingPress, θα έχεις την δυνατότητα να καθαρίσεις τα παρακάτω από τη βάση δεδομένων του WordPress site σου:

  • Post Revisions: Όλες οι αποθηκευμένες αλλαγές μέσα στα άρθρα που γράφεις.
  • Post Auto Drafts: Όλα τα αποθηκευμένα προσχέδια των άρθρων.
  • Trashed Posts: Όλα τα διαγραμμένα άρθρα.
  • Spam Comments: Όλα τα ανεπιθύμητα σχόλια.
  • Trashed Comments: Όλα τα διαγραμμένα σχόλια.
  • Expired Transients: Όλα τα περιττά και άχρηστα transients.
  • All Transients: Όλα τα transients.
  • Optimize Tables: Αυτόματη βελτιστοποίηση της Βάσης Δεδομένων.

Από την ίδια σελίδα θα έχεις επίσης την δυνατότητα να ορίσεις κάθε πότε θέλεις (και αν θέλεις) το FlyingPress να καθαρίζει και να βελτιστοποιεί τη βάση δεδομένων αυτόματα.

  • Daily (καθημερινά).
  • Weekly (εβδομαδιαίως).
  • Monthly (μηνιαίως).

Αν γράφεις πολλά άρθρα και κάνεις συνεχώς αλλαγές, τότε το Weekly είναι ίσως η κατάλληλη επιλογή. Παρόλα αυτά, το Monthly προτείνεται για το μεγαλύτερο ποσοστό των ιστοσελίδων. Μιας και το FlyingPress έχει την δυνατότητα να διαγράφει αρχεία, μην επιλέξεις να διαγράφει τα “Trashed Posts“, καθώς στο παρελθόν υπήρχαν plugins που εξαιτίας κάποιου προβλήματος, διέγραφαν αυτόματα παλιά άρθρα, τα οποία ενώ ήταν διαθέσιμα για ένα χρονικό διάστημα στα διαγραμμένα για άμεση επαναφορά, το cache plugin τα διέγραφε και από εκεί.

License

FlyingPress License

Τέλος, η σελίδα license σου επιτρέπει να εισάγεις ή να αλλάξεις το κλειδί ενεργοποίησης του FlyingPress, καθώς επίσης και να ενεργοποιήσεις τις δοκιμαστικές εκδόσεις (Beta Versions).

Συχνές Ερωτήσεις και Αντιμετώπιση Προβλημάτων

Αν έχεις περισσότερες απορίες ή προβληματισμούς σχετικά με τη χρήση του FlyingPress και FlyingCDN, ή γενικότερα για τα caching plugins και τη προσωρινή μνήμη, μπορείς να αφήσεις το σχόλιο σου στο τέλος του άρθρου.

  • Τι είναι το FlyingPress;

    Το FlyingPress είναι ένα WordPress caching συνδρομητικό πρόσθετο, το οποίο απευθύνεται σε αρχάριους αλλά και επαγγελματίες bloggers και κάτοχους ιστοσελίδων που θέλουν να βελτιστοποιήσουν την ταχύτητα της ιστοσελίδας τους. Το πρόσθετο σου επιτρέπει να διορθώσεις με το πάτημα ενός κουμπιού μερικά από τα πιο σημαντικά στοιχεία που απαιτούνται για υψηλότερη βαθμολογία στο Google PageSpeed Insights.

  • Τι είναι το FlyingCDN;

    Το FlyingCDN είναι μια CDN υπηρεσία η οποία κοστίζει 3,00$ μηνιαίως και παρέχει έως 100GB bandwidth κίνηση. Η υπηρεσία μπορεί να χρησιμοποιηθεί / ενεργοποιηθεί μόνο μέσα από το FlyingPress, οπότε η χρήση και των δύο πρόσθετων είναι απαραίτητη.

  • Τι να κάνω αν δεν εμφανίζονται οι εικόνες μετά την ενεργοποίηση του CDN;

    Στην περίπτωση όπου δεν εμφανίζονται άλλο οι εικόνες στην ιστοσελίδα σου μετά την ενεργοποίηση του FlyingCDN, σιγουρέψου αρχικά πως έχεις απενεργοποιήσει το lazy-loading του theme σου. Κάποια πρόσθετα επίσης παρέχουν lazy-loading λειτουργία, οπότε σιγουρέψου πως κανένα δεν προσθέτει αυτή τη λειτουργία στις εικόνες και τα βίντεο σου. Στη συνέχεια, καθάρισε τη προσωρινή μνήμη (clear cache) του FlyingPress και έλεγξε ξανά. Τέλος, βεβαιώσου πως ο σύνδεσμος που έβαλες μέσα στο FlyingPress, στην καρτέλα “CDN”, είναι ο σωστός που σου παρέχεται από τον λογαριασμό σου στο Flying-Press.com.

  • Τι να κάνω αν ο σχεδιασμός της ιστοσελίδας μου χαλάσει;

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

  • Σε τι βοηθάει το FlyingCDN;

    Το FlyingCDN θα παρέχει όλα τα αρχεία και τις φωτογραφίες της ιστοσελίδας σου από το κοντινότερο διακομιστή, παρέχοντας έτσι ύψιστη βαθμολογία στο Google PageSpeed Insights, στο GTMetrix, και σε παρόμοιες άλλες υπηρεσίες μέτρησης ταχυτήτων. Επιπλέον, όσο πιο γρήγορη είναι μια ιστοσελίδα, τόσο καλύτερη κατάταξη λαμβάνει στα αποτελέσματα αναζήτησης, οπότε μια CDN υπηρεσία είναι πλέον απαραίτητη ακόμα και για μικρομεσαία blogs και sites.

  • Μπορώ να αποκτήσω μόνο το FlyingCDN χωρίς το FlyingPress;

    Όχι, το FlyingCDN ενεργοποιείται μέσω του FlyingPress, οπότε και τα δύο είναι απαραίτητα για τη σωστή λειτουργία. Παρόλα αυτά, δεν αναφέρομαι για δύο διαφορετικά πρόσθετα, μα για ένα πρόσθετο και την ενεργοποίηση μιας ενσωματωμένης λειτουργίας, όπου στη προκειμένη περίπτωση είναι η CDN υπηρεσία.

  • Υποστηρίζει το FlyingPress το WordPress Multisite;

    Ναι, το FlyingPress και η CDN υπηρεσία του υποστηρίζουν πλήρως το WordPress Multisite. Άλλωστε, στο Inkstory – που είναι εξίσου Multisite – χρησιμοποιώ το FlyingPress και το FlyingCDN, χωρίς κανένα απολύτως πρόβλημα.

  • WP Rocket vs. FlyingPress: Ποιο είναι καλύτερο;

    Και το WP Rocket αλλά και το FlyingPress είναι δύο εξαιρετικά και έμπιστα πρόσθετα για τη βελτιστοποίηση WordPress ιστοσελίδων. Το WP Rocket υπάρχει περισσότερα χρόνια και προωθεί τη δική του CDN υπηρεσία, η οποία ξεκινάει από τα 7,99$ μηνιαίως. Παρόλα αυτά, προτιμώ το FlyingPress τόσο για αισθητικούς λόγους, όσο και για το περιβάλλον χρήσης του, το οποίο είναι ιδανικό για αρχάριους.

  • Μπορώ να δοκιμάσω το FlyingPress δωρεάν;

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

Σύνοψη..

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

Το FlyingPress σε συνδυασμό με το FlyingCDN είναι ότι πιο καλό κατάφερα να εντοπίσω όλα αυτά τα χρόνια σε caching plugin. Είναι εύκολο στη χρήση, παρέχει μοντέρνο και προσεγμένο περιβάλλον χρήσης, είναι σταθερό, ενημερώνεται ανά τακτικά χρονικά διαστήματα και η τεχνική τους υποστήριξη απαντάει συνήθως σε λιγότερο από 3-5 ώρες.

Εσύ ποιο caching plugin χρησιμοποιείς στο WordPress blog σου; Ήξερες τι είναι τα caching plugins ή αυτή είναι η πρώτη σου επαφή με αυτά; Θα χαρώ να ακούσω τις απόψεις και τις προτάσεις σου στα σχόλια στο τέλος του άρθρου.

Παναγιώτης Σακαλάκης
Παναγιώτης Σακαλάκηςhttps://inkstory.gr
Ο Παναγιώτης Σακαλάκης, με βάση το Κιλκίς, είναι Web Designer & Blogger, ιδρυτής της Inkstory Ο.Ε., του TechGuides και του TechWise Insider, καθώς επίσης & Host στα «The Blogging Dispatch» & «TechGuides» Podcasts. Όποτε δεν γράφει, βρίσκεται σε κάποιο βουνό με το Hard-Trail ποδήλατο του.
0 0 ψήφοι
Article Rating
Εγγραφή
Ειδοποίηση για
guest
0 Comments
Ενσωματωμένα σχόλια
Δείτε όλα τα σχόλια

Περιεχόμενο

Διαβάστε Επίσης

Αναζητάς περισσότερα;