WordPress: Ρύθμιση του Above The Fold για καλύτερη ταχύτητα

Αν ασχολείστε με το WordPress και επιθυμείτε να διορθώσετε την στο site σας, η ρύθμιση του Above The Fold είναι απαραίτητη.Above The Fold

Τι σημαίνει Above The Fold και γιατί η Google το θεωρεί σημαντικό;

Τα PageSpeed Tools της Google, αναφέρουν επανειλημμένως το Above The Fold σαν ένα πολύ σημαντικό παράγοντα που μπορεί να δώσει περισσότερη ταχύτητα ή να επιβραδύνει την σας.

Above The Fold ή πάνω από την πτυχή ονομάζεται το μισό της πρώτης σελίδας μιας εφημερίδας ή μιας ιστοσελίδας που συχνά εμπεριέχει κάποια σημαντική ιστορία ή μια φωτογραφία. Οι ιστοσελίδες δεν εμφανίζονται ολόκληρες στους επισκέπτες ενός site και συνήθως είναι ορατό μόνο το πάνω μισό.

Αυτό λοιπόν που ζητάει η Google από τις ιστοσελίδες, είναι να δίνουν προτεραιότητα στο CSS που βρίσκεται στο πάνω μισό του site, ούτως ώστε να φορτώνει γρηγορότερα.

Μαζί με το συγκεκριμένο CSS καλό θα ήταν να μην υπάρχει κάποιο javascript στην αρχή της σελίδας, αλλά να φροντίσετε να φορτώνονται στο τέλος, κοντά στο footer.

Οι παρακάτω εικόνες εμφανίζουν τον πηγαίο κώδικα στο header και στο footer του iGuru.gr. Θα προσέξετε ότι δεν υπάρχει javascript στο header, όπως δεν υπάρχει και CSS στο footer.

Header
Above The FoldFooterΚάπου εδώ θα μιλήσουμε για το Autoptimize.

Με το Autoptimize θα μαζέψουμε το CSS της σελίδας σας, και θα φτιάξουμε το Above The Fold.

H παρακάτω εικόνα σας εμφανίζει τις ρυθμίσεις για το CSS

Τι κώδικα τε όμως στο τελευταίο κουτάκι Inline “abobe the fold CSS”;

Βρείτε το style.css που χρησιμοποιεί το theme που έχετε επιλέξει. Βρίσκεται στο wp-/themes/iguru όπου iguru είναι το όνομα του δικού σας theme.

Προσοχή, η δημοσίευση αφορά self hosted εγκαταστάσεις του WordPress, και όχι sites που φιλοξενούνται από το WordPress.com.

Ανοίξτε το αρχείο με τον αγαπημένο σας editor (notepad++ ή geany στο Linux) και αντιγράψτε όλο τον κώδικα που περιέχει.

Αμέσως μετά ανοίξτε την παρακάτω σελίδα (περιέχει ένα αυτοματοποιημένο εργαλείο που θα εντοπίσει για εσάς τον κώδικα του Above the fold).

https://jonassebastianohlsson.com/criticalpathcssgenerator/

Γράψτε το url της ιστοσελίδας σας, και από κάτω στο μεγάλο πλαίσιο επικολλήστε τον κώδικα που αντιγράψατε από το style.css.

Με ένα click στο 3. Create Critical Path CSS, θα σας εμφανιστεί ο κώδικας που θα αντιγράψετε και θα επικολλήσετε στο κουτάκι Inline “abobe the fold CSS” του Autoptimize.

Αποθηκεύστε τις ρυθμίσεις σας στο Autoptimize και είστε έτοιμοι. Αμέσως μετά μπορείτε να δοκιμάσετε το αποτέλεσμα στο GTMetrix. Θα πρέπει να πρώτα όλα τα cached files.

Μείνετε συντονισμένοι για μεγαλύτερες ταχύτητες!

iGuRu.gr The Best Technology Site in Greecefgns

κάθε δημοσίευση, άμεσα στο inbox σας

Προστεθείτε στους 2.100 εγγεγραμμένους.

Written by giorgos

Ο Γιώργος ακόμα αναρωτιέται τι κάνει εδώ....

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Το μήνυμα σας δεν θα δημοσιευτεί εάν:
1. Περιέχει υβριστικά, συκοφαντικά, ρατσιστικά, προσβλητικά ή ανάρμοστα σχόλια.
2. Προκαλεί βλάβη σε ανηλίκους.
3. Παρενοχλεί την ιδιωτική ζωή και τα ατομικά και κοινωνικά δικαιώματα άλλων χρηστών.
4. Διαφημίζει προϊόντα ή υπηρεσίες ή διαδικτυακούς τόπους .
5. Περιέχει προσωπικές πληροφορίες (διεύθυνση, τηλέφωνο κλπ).