Το Aghiuta.com είναι ένα ιστολόγιο παρακολούθησης και πολιτικών μέσων γραμμένο από τον Florin Popescu. Εδώ είναι η βελτιστοποίηση του WordPress που κάναμε για αυτό το ιστολόγιο.
Πριν από τη βελτιστοποίηση
Η ταχύτητα φόρτωσης της πρώτης σελίδας ήταν 4,3 δευτερόλεπτα.
Η αρχική σελίδα έχει 86 αιτήματα και 1,3 MB.
- 14 javascripts – 505,6 k
- Φύλλο στυλ 20 τοποθεσιών – 41,1 k
- 23 αρχεία – 601 κ
JS
Το Facebook Connect JS έχει 174,4K και φορτώνεται σε 0,69 δευτερόλεπτα. Το Facebook Like Box μπορεί να εισαχθεί ως γραφικό στοιχείο κειμένου αντιγράφοντας τον κώδικα iframe από τη Like Box του Facebook Developers και έτσι απαλλαγείτε από το αρχείο JS.
Το θέμα Gonzo περιλαμβάνει ένα αρχείο script.js που έχει 101,3K. Περιλαμβάνει πολλά σενάρια όπως:
- fitvids
- flexslider
- jquery easing
- καρτέλες tabber
- πίσω τέντωμα
- beautifulphoto lightbox
- elastislide
Το Backstretch χρησιμοποιείται για τη μεγάλη εικόνα φόντου, αλλά τουλάχιστον τέσσερις από τις υπόλοιπες δεν χρησιμοποιούνται: flexslider, prettyphoto, elastislide, καρτέλες tabber.
Το Fitvids κάνει τις ενσωματώσεις βίντεο να ανταποκρίνονται, οπότε μάλλον χρειάζεται.
Το jQuery Easing έχει κάποιο αποτέλεσμα στο κλικ (η διαφάνεια από τη φόρμα αναζήτησης).
Επιπλέον, το jQuery Easing (8,1 K) φορτώνεται για άλλη μια φορά από το πρόσθετο LayerSlider (26K) το οποίο δεν χρησιμοποιείται πουθενά.
Αφαίρεσα τα αχρησιμοποίητα σενάρια και το μέγεθος του αρχείου μειώθηκε από 101,3 K σε μόνο 29 K.
Κουμπιά κοινής χρήσης αρχείων JS
Η προσθήκη που τοποθετεί τα κουμπιά κοινής χρήσης στον ιστότοπο έχει πολύ μεγάλο αντίκτυπο στον χρόνο φόρτωσης:
- Plus 1 – 25,8K
- Google Api – 84,2K
- Twitter – 84,5K
- Social Bar – 1,8K
Όλα αυτά μπορούν να λυθούν χρησιμοποιώντας ένα άλλο πρόσθετο ( Jetpack ) που φορτώνει ένα μόνο αρχείο JS 35K για όλα τα κουμπιά.
Το jQuery μπορεί να φορτωθεί από τη Βιβλιοθήκη Google αντί να φορτωθεί από τον διακομιστή.
Το Addfreestats JS δίνει ένα σφάλμα 404. Συνιστούμε τη χρήση του Google Analytics.
CSS
Υπάρχουν πάρα πολλά αρχεία CSS (20), μερικά φορτωμένα με @import που δεν είναι η καλύτερη επιλογή για απόδοση.
Συνδυάσαμε ό,τι ήταν δυνατό (μερικές φορές ο συνδυασμός αρχείων js ή css προκαλεί σφάλματα) και τώρα έχουμε μόνο 7 αρχεία CSS.
εικόνες
Οι εικόνες μπορούν να βελτιστοποιηθούν καλύτερα για τον ιστό (ίδια ποιότητα αλλά λιγότερα KB) και νομίζω ότι μπορούμε να αποθηκεύσουμε τουλάχιστον το 5% κάθε εικόνας.
Στην πρώτη σελίδα, οι μικρογραφίες έχουν μέγεθος 166 x 166 εικονοστοιχεία, αλλά οι φωτογραφίες που έχουν φορτωθεί είναι μεγαλύτερες, 300 x 300 εικονοστοιχεία.
Οι εικόνες θα πρέπει να φορτωθούν σε 166x166px.
Το WordPress δημιουργεί πάρα πολλές μικρογραφίες:
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
Ο ιστότοπος χρειάζεται μόνο:
- 166×166 – μικρογραφίες πρώτης σελίδας
- 50×50 – μικρογραφίες για πλαϊνή γραμμή
- 134×77 – μικρογραφίες για σχετικές αναρτήσεις
- 290×166 – μικρογραφία για το αρχείο κατηγορίας
Οι υπόλοιπες διαστάσεις είναι άχρηστες και καταλαμβάνουν χώρο στον διακομιστή. Μπορούμε να τα διαγράψουμε και να εξαλείψουμε τον περιττό κώδικα από το θέμα που λέει στο WordPress να κάνει αυτούς τους αντίχειρες.
Υλοποιήσαμε το Lazy Load έτσι ώστε να φορτώνονται μόνο οι εικόνες στο επάνω μέρος της σελίδας (πάνω από το πάσο), κάτι που δίνει σημαντική βελτίωση στην αντιληπτή ταχύτητα.
Μετά τη βελτιστοποίηση
Μετά την αφαίρεση περιττού κώδικα από αρχεία JS, συνδυασμένων αρχείων CSS, σωστής διαμόρφωσης και υλοποίησης της προσωρινής μνήμης σελίδων και της κρυφής μνήμης βάσης δεδομένων, ο ιστότοπος κάνει τώρα 48 αιτήματα και έχει 634,5K.
Ταχύτητα φόρτωσης πρώτης σελίδας: 1,47 δευτερόλεπτα.
Πετύχαμε βελτίωση απόδοσης περίπου 60%.
Μπορούμε να βελτιστοποιήσουμε περαιτέρω, αλλά αυτό θα σήμαινε την κατάργηση ορισμένων στοιχείων που παρέχουν συγκεκριμένες λειτουργίες που επιθυμεί ο ιδιοκτήτης, επομένως σταματήσαμε εδώ.
Αφήστε μια