The King is dead! RIP 2006-2012

Ένα μεγάλο ευχαριστώ σε όλη την παρέα
Περισσότερα στο lexx.gr

Κάνε το Wordpress Blog σου να φορτώνει πιο γρήρορα

04 Mar 2008 by lexx

Πριν λίγες μέρες συνειδητοποίησα ότι το webz σέρνεται και πως έπρεπε απεγνωσμένα να βρω τρόπους για να μειώσω το loading time. Αυτό για μένα ήταν εύκολο, αρκούσε απλά να ψάξω. Μετά από αρκετό διαβασματάκι και πειραματισμούς θα σας παρουσιάσω τι έκανα στο wordpress μου για να γίνει 10 φορές γρηγορότερο. Και δεν υπερβάλω καθόλου. Η λογική είναι παρόμοια και για άλλες πλατφόρμες, όπως είναι λογικό, αλλά θα επικεντρωθώ στο wordpress.

1. Κατεβάστε τώρα το Firebug

screennet-timeline.gifΥποθέτω ότι έχετε firefox(αλλιώς δεν σας συμπαθώ) και σε δεύτερη φάση αν θέλετε αποτελέσματα σας προτρέπω να κατεβάσετε το Firebug έτσι ώστε να μπορέσετε να καταλάβετε πως και τι φορτώνει η σελίδα σας. Όπως θα δείτε και στο screenshot, αυτό το firefox addon δείχνει πόσα HTTP Requests υπάρχουν, ποια είναι αυτά και πόση ώρα κάνει το καθένα.

2. Μειώστε τα HTTP Requests

(Hollywood Trailer Voice)Για κάθε Javascript και CSS αρχείο. Για κάθε εικόνα και flash το site σας επιβαρύνεται με ένα HTTP Request για το καθένα. Το κάθε request στοιχίζει το λιγότερο 0.2 ms. Οπότε αν έχετε για παράδειγμα 20 requests, το site σας αυτομάτως θα κάνει 2 δευτερόλεπτα το λιγότερο για να φορτώσει. Προσπαθείστε λοιπόν αν έχετε πολλά διαφορετικά css αρχεία να τα χωρέσετε σε 1 και γενικότερα όσα λιγότερα scripts τρέχουν τόσο το καλύτερο. Οπότε ζυγίστε τι σας συμφέρει όταν βάζετε ένα script. Είναι τόσο απαραίτητο για να κάνω x πιο αργή τη σελίδα μου;

3. Μειώστε τα Queries που γίνονται στην Database

Παρακάτω βρίσκεται ένα τυπικό Wordpress Header

<title><?php bloginfo(’name’); ?><?php bloginfo(’description’); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’); ?>” />
<meta name="generator" content="WordPress <?php bloginfo(’version’); ?>” />
<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo(’rss2_url’); ?>” />
<script type="text/javascript" src="<?php bloginfo(’template_url’); ?>/mootools.js”></script>

Τα υπογραμμισμένα είναι Queries που γίνονται στην database χωρίς ουσιαστικό λόγο. Αλλάζοντας τα παραπάνω σε κανονικό κείμενο θα γλιτώσετε 7 queries και πιστέψετε με, δεν είναι λίγο. Ειδικά το Wordpress version στο generator πολλοί προτείνουν να το σβήσετε τελείως για να μην μπορεί κάποιος κακόβουλος να ξέρει την version σας. Ειδικά αν δεν έχετε αναβαθμίσει.

Αλλάζουμε λοιπόν τον κώδικα σε

<title>Webz - Web news and Reviews</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8” />
<meta name="generator" content="WordPress” />
<link rel="stylesheet" href="http://www.webz.gr/wp-content/themes/webzstyle/files/style.css” type=”text/css” media=”screen” />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/Webzone” />
<script type="text/javascript" src=""http://www.webz.gr/wp-content/js//mootools.js”></script>

4. Συμπίεση (Compression) - Whitespace και Αποθήκευση εικόνων

Η Συμπίεση μειώνει δραματικά το μέγεθος αρχείων όπως πχ του CSS αφαιρώντας όλα τα μη απαραίτητα κενά. Υπάρχουν και αρκετά plugin που κάνουν αυτή τη δουλειά όπως το CSS Compress.

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

Επίσης δεν ξέρω αν έχετε δει την επιλογή στο Photoshop που λέει "Save image for Web". Πιστέψετε με ότι η Adobe δεν έχει βάλει αυτή την επιλογή για πλάκα. ;)

5. Caching Pages

Μπορείτε να ανοίξετε το config αρχείο του WP και να προσθέσετε την παρακάτω φράση

// Enable WP Object Cache: define(ENABLE_CACHE, true);

Αυτό θα ενεργοποιήσει την built-in caching λειτουργία του Wordpress.

To Caching στην ουσία αποθηκεύει τη σελίδα σε static μορφή και έτσι δεν κάνει πολλά πάρε δώσε με την βάση δεδομένων. Δεν το προτείνω σε μικρά site γιατί δεν θα κάνει μεγάλη διαφορά. Υπάρχουν πολλά plugin. Όμως για να τα χρησιμοποιήσει κάποιος θα πρέπει να είναι προσεχτικός. Σηκώνει ξεχωριστό post το caching.

6. Τα Τυπικά, τα Αυτονόητα και τα Προχωρημένα

Τα τυπικά είναι

  • Να έχετε πάντα την πιο νέα έκδοση
  • Να χρησιμοποιείτε plugin που είναι απαραίτητα και όλα τα άλλα delete
  • Πολλά plugin έχουν πολλές extra επιλογές οι οποίες επιβαρύνουν με queries στην βάση και js αρχεία.
  • Γενικά ότι είναι περιττό δεν υπάρχει λόγος να υπάρχει.

Αυτονόητα δεν ξέρω αν είναι τόσο αυτονόητα. Όμως κώδικες για στατιστικά όπως αυτός του Google Analytics ή όποιον χρησιμοποιείτε είναι καλό να βρίσκεται στο footer έτσι ώστε να μην καθυστερεί το κεντρικό περιεχόμενο της σελίδας.

Τα Προχωρημένα έχουν να κάνουν με ρυθμίσεις του server και της βάσης δεδομένων. Όμως είναι ένας τομέας που δεν έχω μελετήσει ακόμα. Επίσης σπάνια σε shared server υπάρχει η δυνατότητα να επέμβει κάποιος σε αυτές τις περιοχές.

Μετά τις αλλαγές που έκανα η κεντρική σελίδα του Webz φορτώνει σε 1.5s περίπου από 12s+ που φόρτωνε πριν. Όλες οι απορίες και οι παρατηρήσεις είναι ευπρόσδεκτες.