Αξιοποιήστε τη δυνατότητα ανάλυσης και αυτόματης συμπίεσης του PageSpeed Insights (πρώην Google Page Speed) για να βελτιστοποιήσετε τα γραφικά της ιστοσελίδας σας, αυξάνοντας παράλληλα την ταχύτητα απεικόνισης της.
Ένα από τα χρησιμότερα addons για τον Firefox, το Firebug, έχει αλλάξει δραστικά τον τρόπο με τον οποίο οι developers σχεδιάζουν sites στο Internet. Αντίθετα με τα παραδοσιακά προγράμματα του είδους, το Firebug “κατοικεί” στον ίδιο τον browser, και αυτό του χαρίζει, ας πούμε, στενότερη σχέση με όλα τα στοιχεία ενός site.
Ως εκ τούτου, μέσω αυτού είναι ευκολότερη η άμεση θέαση και εκτίμηση των όποιων αλλαγών στον κώδικα και στα υπόλοιπα στοιχεία ενός site, αφού ο deve-loper δεν χρειάζεται να τις δοκιμάσει offline και μετά να τις ανεβάσει στο site για να δει αν, όντως, λειτουργούν όπως υπολόγιζε. Σε αυτή τη “στενή σχέση” με το site αλλά και στη δυνατότητα επικοινωνίας με άλλα sites βασίζεται το νέο εργαλείο Page Speed της Google, που -όπως και παραπλήσιες προσπάθειες- αναλαμβάνει να αναλύσει όλα τα στοιχεία των σελίδων ενός site, να εκτιμήσει αν θα ήταν δυνατή η όποια βελτιστοποίησή τους και, στη συνέχεια, να προτείνει τρόπους για αυτήν. Ανάμεσα στην ανάλυση διαφορετικών τύπων κώδικα -HTML, Javascript- και δομής των σελίδων, το Google Page Speed αναλύει και τα γραφικά ενός site και τα συγκρίνει, σε σχέση με μια συμπιεσμένη εκδοχή τους από την online υπηρεσία Smush.it.
Και μάλιστα, δεν αναφέρει απλώς πως «θα μπορούσαν να συμπιεστούν περισσότερο», αν κρίνει πως ισχύει κάτι τέτοιο, αλλά παρέχει σχεδόν… έτοιμη προς χρήση τη συμπιεσμένη εκδοχή τους! Ας δούμε, λοιπόν, πώς μπορεί κανείς να το αξιοποιήσει για να μικρύνει το μέγεθος των γραφικών του site του, βελτιώνοντας σημαντικά την ταχύτητα πρόσβασης σε αυτό.
Βήμα 1
Το PageSpeed Insights βασίζεται στο Firebug του Firefox για τη λειτουργία του, οπότε θα πρέπει να το έχετε εγκατεστημένο σε αυτόν. Αν όχι, επισκεφθείτε τη διεύθυνση https://blog.getfirebug.com/ κάντε κλικ στο Add to Firefox, αποδεχόμενοι τις όποιες προτροπές και προειδοποιήσεις. Η εγκατάσταση ολοκληρώνεται πλήρως, έπειτα από μια επανεκκίνηση του Firefox.
Βήμα 2
Συνεχίστε με την εγκατάσταση του Google Page Speed. Μπορείτε να το βρείτε στο δικό του επίσημο site στη διεύθυνση https://developers.google.com/speed/pagespeed/insights/. Επιλέξτε πως θέλετε να το εγκαταστήσετε, κάνοντας κλικ στο σχετικό link, και ακολουθήστε την ίδια διαδικασία με πριν, τελειώνοντας με μια επανεκκίνηση του Firefox. Κατόπιν, θα μπορείτε να βρείτε τα δύο νέα σας add-ons στο σχετικό πλαίσιο του Firefox, Tools > Add-ons.
Βήμα 3
Η εγκατάστασή τους φαινομενικά δεν αλλάζει κάτι στον Firefox – και όντως, παραμένουν αδρανή μέχρι να τα χρειαστείτε και να τα καλέσετε οι ίδιοι. Επισκεφθείτε, λοιπόν, το site σας, και αφήστε το να φορτώσει πλήρως (για να είναι σωστή η εκτίμηση ταχύτητας του Google Page Speed). Μετά, κάντε κλικ στο πλήκτρο με το… ζωύφιο, που θα έχει κάνει την εμφάνιση του στην κάτω μπάρα του παράθυρου του Firefox. Θα εμφανιστεί το πλαίσιο του Firebug στο κατώτερο σημείο του. Επιλέξτε το tab Page Speed.
Βήμα 4
Κάντε κλικ στο… ένα και μοναδικό πλήκτρο Analyze Performance και δώστε λίγο χρόνο στο Google Page Speed για την εκτίμηση της ταχύτητας της σελίδας σας. Παρά το ότι, θεωρητικά, αυτή έχει “ήδη κατέβει”, το Google Page Speed ξανακατεβάζει εκ του μηδενός όλα τα στοιχεία – απλώς χρησιμοποιεί την κατεβασμένη σελίδα που ήδη απεικονίζεται ως “οδηγό” για το “τι να κατεβάσει/εκτιμήσει”. Γι’ αυτό και πρέπει πάντα να αφήνετε να ολοκληρωθεί η μεταφορά μιας σελίδας που θέλετε να εκτιμήσετε μέσω αυτού και για τον ίδιο λόγο μπορεί μια άλλη σελίδα του site σας να παρουσιάζει διαφορετικές επιδόσεις.
Βήμα 5
Όταν ολοκληρωθεί η εκτίμηση του Google Speed, θα παρουσιάσει μια λίστα με τους διαφορετικούς τομείς που αναλύει. Θα είναι ταξινομημένοι από αυτούς με τις χειρότερες επιδόσεις προς εκείνους που έχουν ελάχιστα ή και μηδενικά προβλήματα, και μπορείτε να κάνετε κλικ στον τίτλο οποιουδήποτε από αυτούς για να λάβετε περισσότερες πληροφορίες για το τι ακριβώς αφορούν – η σχετική εξήγηση ανοίγει σε νέα σελίδα/tab, οπότε… μην αγχωθείτε, αν “εξαφανιστεί” το Firebug, απλώς επιστρέψτε στη σελίδα/tab του δικού σας site, αφού τη διαβάσετε.
Βήμα 6
Εντοπίστε ανάμεσα στις υπόλοιπες κατηγορίες την Optimize Images και “ανοίξτε την”, κάνοντας κλικ στο μικρό “+” αριστερά από το όνομά της. Όπως θα δείτε και στη δική σας αναφορά, η περαιτέρω συμπίεση μπορεί να αποφέρει διαφορετικά κέρδη, ανάλογα με την εικόνα. Δεν υπάρχει, λοιπόν, λόγος να τις ανασυμπιέσετε όλες, απλώς, εκείνες που έχουν το μεγαλύτερο ποσοστό κέρδους (αναφέρεται σε ποσοστό “τοις εκατό” σε παρένθεση, π.χ. “34.5% reduction” – που το Google Page Speed θα έχει… βολικά τοποθετήσει στην κορυφή. «Αφήνοντας» το βελάκι επάνω από το όνομα μιας εικόνας, μπορείτε να δείτε ένα μικρό thumbnail της.
Βήμα 7
Σημειώνουμε πως μπορεί κάποιες εικόνες που δεν έχουν και τόσο μεγάλο κέρδος από μια ανασυμπίεση να είναι “μόνιμες” εικόνες στο site σας (π.χ. το λογότυπό του), και έτσι να αξίζει να στρέψετε την προσοχή σας και σε αυτές τις εξαιρέσεις. Όταν έχετε πια εντοπίσει όσες θέλετε να ανασυμπιέσετε, κάντε κλικ στο “See compressed version” που παρουσιάζεται δεξιά τους, και το Google Page Speed θα “ανοίξει” μια νέα, συμπιεσμένη από το Smush.it εκδοχή τους σε ένα νέο tab του Firefox. Σώστε καθεμιά από αυτές στο δίσκο, με δεξί κλικ>Save Image As «επάνω» τους.
Βήμα 8
Συνδεθείτε με έναν FTP client στο ftp όπου «κατοικεί» το site σας (εναλλακτικά θα πρέπει να «ανεβάσετε» τις εικόνες από το πλαίσιο διαχείρισης του -γνωστό ως backend- και να τις «ανταλλάξετε» με τις παλιές εκδοχές τους). Βρείτε το φάκελο όπου βρίσκονται οι παλιές εικόνες – στην περίπτωση που χρησιμοποιείτε το WordPress για το site σας, θα βρίσκονται στο httpdocs/wp-content/uploads/έτοςδημοσίευσης/μήναςδημοσίευσης. Εντοπίστε τις παλιές εικόνες στο FTP και μετονομάστε τις νέες στο δίσκο σας ώστε να έχουν το ίδιο όνομα. Ολοκληρώστε ανεβάζοντας τις νέες εκδοχές “επάνω” από τις παλιές ώστε να τις υπερκαλύψουν.
){kind=link}