Το Manofmany.com είναι ένα περιοδικό αυστραλιανού στυλ αφιερωμένο στους άνδρες.
Καθημερινά η ομάδα δημοσιεύει ενδιαφέροντα πράγματα σε στυλ, gadgets, τεχνολογία κ.λπ.
Μετά από μια συνομιλία μαζί τους στο Google+, τους δώσαμε αυτήν την απλή αναφορά βελτιστοποίησης.
Χρόνος φόρτωσης
Διαφορετικά εργαλεία εμφανίζουν διαφορετικά δεδομένα:
- Γραμμή εργαλείων Chrome SEO – 7,43 δευτ
- Pingdom Tools – 12,62 δεκ
- GTMetrix – 9,86 δευτ
- Webpagetest.org – 24,14 δευτ
Μέγεθος σελίδας
Διαφορετικά εργαλεία εμφανίζουν διαφορετικά δεδομένα:
- YSlow: 3096,5 byte
- Εργαλεία Pingdom: 4,0 MB
- GTMetrix: 3,88 MB
- Webpagetesst.org: 3.816 KB
Θα χρησιμοποιήσω μόνο ένα εργαλείο περαιτέρω, το YSlow.
εξαρτήματα
Πάρα πολλά αιτήματα http: 51. Το 51 δεν είναι τεράστιο, αλλά μπορεί να βελτιωθεί.
Javascript
Υπάρχουν 15 αρχεία js, συνολικού μεγέθους 627,1K:
- https://apis.google.com/js/plusone.js – 22,9 k
- http://platform.twitter.com/widgets.js – 80,7 k
- http://www.google-analytics.com/ga.js – 37,3 k
- http://edge.quantserve.com/quant.js – 5,8 k
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13,6 k
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2,7 k
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7,1 k
- http://s3.buysellads.com/ac/bsa.js – 16,1 k
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2,1 k
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13,9 k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15,1 k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6,9 k
- https://apis.google.com/…/cb=gapi.loaded_0 – 129,7 k
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93,6 k
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178,9 k
Το JQuery.js θα μπορούσε να φορτωθεί από τη Βιβλιοθήκη Google για καλύτερη ταχύτητα.
Το μεγαλύτερο πρόβλημα είναι με τα αρχεία JS των social media. σίγουρα δεν χρησιμοποιούν την καλύτερη προσθήκη για κοινή χρήση μέσων κοινωνικής δικτύωσης. Θα μπορούσε να γίνει με ένα μόνο JS των 38,5 k ή ακόμα και χωρίς σενάρια.
Αυτό θα μειώσει τα 249,6K και θα αφήσει τον αριθμό JS στο 11. Είναι μια σημαντική βελτίωση στο μέγεθος της σελίδας.
CSS
Υπάρχουν 12 αρχεία css με συνολικό μέγεθος 63,7K.
Το μέγεθος δεν είναι τόσο μεγάλο, αλλά ο αριθμός είναι κάπως υψηλός.
3 αρχεία μπορούν να συνδυαστούν σε ένα: το θέμα styles.css και τα πρόσθετα Easy Columns και Contact Form.
Οι υπόλοιπες είναι γραμματοσειρές που έχουν φορτωθεί από τη Βιβλιοθήκη Google, οπότε το ερώτημα εδώ είναι : χρειάζεστε πραγματικά 9 γραμματοσειρές;
Συνήθως, θα πρέπει να χρησιμοποιείτε 2 γραμματοσειρές: μία για επικεφαλίδες και μία για κείμενο.
Το PT Sans και το Open Sans δεν είναι τόσο διαφορετικά, επομένως θα μπορούσατε να χρησιμοποιείτε μόνο ένα από τα 2.
Lora και PT Serif – το ίδιο όπως παραπάνω, χρησιμοποιήστε μόνο ένα ή απλώς χρησιμοποιήστε τη Georgia (είναι μια όμορφη γραμματοσειρά websafe).
Nixie One – Δεν το βλέπω να χρησιμοποιείται στον ιστότοπο.
Για γραμματοσειρές που χρησιμοποιούνται σπάνια, δεν έχει νόημα να τις φορτώνετε κάθε φορά, απλώς χρησιμοποιήστε γραμματοσειρές συστήματος: Georgia, Arial, Courier.
Αυτό θα βελτιώσει τα αιτήματα από 12 σε μόλις 3-4, οι βελτιώσεις μεγέθους δεν είναι τόσο μεγάλες, αλλά αθροίζονται.
εικόνες
Αυτό είναι το μεγαλύτερο πρόβλημα του ιστότοπου με τη μεγαλύτερη επίδραση στην ταχύτητα: 18 εικόνες, συνολικό μέγεθος 2597,5 K.
Αυτό είναι τεράστιο. πρέπει να βελτιστοποιήσουν τις εικόνες πριν τις ανεβάσουν.
Η μεγαλύτερη εικόνα στον ιστότοπο έχει 420K και ένα απλό smush. δείχνει ότι μπορεί να βελτιωθεί κατά 27,6%, δηλαδή 104K ακριβώς εκεί.
Αν μπορούμε να τα βελτιώσουμε όλα κατά 25%, αυτό είναι πάνω από 600.000 απώλεια βάρους.
Λύσεις:
1. Βελτιστοποίηση εικόνων
Χρησιμοποιήστε το Photoshop και Save for the web στο 60% και προοδευτικά επιλεγμένο. Εάν οι επισκέπτες σας χρησιμοποιούν Chrome, firefox ή IE9 progressive jpg φορτώνονται εξαιρετικά γρήγορα. Για τα υπόλοιπα, θα είναι λίγο πιο αργά από τα κανονικά jpg.
Διαφορετικά, απλώς Αποθήκευση για τον ιστό στο 60%-80% και βελτιστοποιημένος έλεγχος. Αυτό εξοικονομεί κανονικά jpg.
Στη συνέχεια, προχωρήστε στη μεταφόρτωση εικόνων στο WordPress.
Δεν υπάρχει Photoshop;
Χρησιμοποιήστε το jpegmini.com για να βελτιστοποιήσετε τις εικόνες πριν τις ανεβάσετε ή απλώς χρησιμοποιήστε μια προσθήκη WP για να το κάνετε αυτόματα κατά τη μεταφόρτωση.
2. Εξυπηρέτηση εικόνων
Προβάλετε στατικό περιεχόμενο από έναν τομέα χωρίς cookie και παραλληλίστε τις λήψεις στα ονόματα κεντρικών υπολογιστών.
Αυτά τα 2 πράγματα μπορούν να επιτευχθούν με τη φόρτωση εικόνων από έναν υποτομέα χωρίς cookie, κάτι σαν images.manofmany.com.
Τώρα, το πρόγραμμα περιήγησης μπορεί να κατεβάσει πολλά στοιχεία ταυτόχρονα βελτιώνοντας την ταχύτητα του ιστότοπου.
Τεμπέλης φόρτωση
Αυτό σημαίνει ότι οι εικόνες θα φορτωθούν μία προς μία και θα είναι ορατές στους χρήστες μόνο όταν είναι απαραίτητο.
Φορτώνονται όταν είναι ορατά μόνο στη θύρα προβολής του προγράμματος περιήγησης.
Με τη φόρτωση μόνο εικόνων πάνω από το πάσο, το κέρδος ταχύτητας είναι σημαντικό.
Άλλα πράγματα που μπορείτε να κάνετε
– προσωρινή αποθήκευση του προγράμματος περιήγησης
– συνδυασμός js (αν είναι δυνατόν)
– προσθήκη κεφαλίδας λήξης
– συμπίεση με gzip
– χρήση ετικετών
– Προσθήκη προφίλ για να δείτε ποια επηρεάζει τον χρόνο φόρτωσης και αντικαταστήστε με καλύτερα πρόσθετα
– Χρησιμοποιήστε κώδικα στο functions.php αντί για προσθήκες για απλά πράγματα όπως φόρτωση γραμματοσειρών Google
– επίλυση σφαλμάτων 404
– ελαχιστοποίηση ανακατευθύνσεων
– φόρτωση javascript στο κάτω μέρος της σελίδας
– μπορείτε να χρησιμοποιήσετε μόνο 5 αναρτήσεις ανά σελίδα αντί για 10
– θα μπορούσατε να χρησιμοποιήσετε μικρότερες εικόνες όπως μικρογραφίες, αλλά αυτό σημαίνει παρεμβολή στη σχεδίαση
Σύναψη
Τα περισσότερα από αυτά, είναι απλά πράγματα που μπορούν να έχουν τεράστιο αντίκτυπο.
Για μια πιο προηγμένη βελτιστοποίηση, θα πρέπει να δούμε το θέμα και τα πρόσθετα και να ελέγξουμε αν υπάρχουν προβλήματα απόδοσης.
Αφήστε μια