Booster un site sous wordpress

Diminuer le temps de réponse de son site devrait être la préoccupation de tout webmaster, afin d’améliorer au maximum l’expérience utilisateur mais aussi pour être mieux référencé sur Google. Nous allons voir dans cet article comment optimiser WordPress pour obtenir un temps de réponse minimal.

 

logo-v-rgb

 

Il existe une kyrielle de plugins WordPress qui permettent de réduire le temps de réponse de WordPress. Un des plus connus est w3 Total Cache car il possède énormément de fonctionnalités.

Mais après l’avoir installé, je me suis rendu compte que WordPress consommait quasi 100% de tous les coeurs de mon serveur pour afficher une page. C’est un problème qui est assez fréquent avec ce plugin. C’est pourquoi j’ai cherché des solutions alternatives.

htop

 

Coté WordPress

WP Super Cache

 

WP Super Cache est développé par Donncha O Caoimh, auteur de la branche Wp MU.

Le plugin va générer des pages HTML statiques à partir des pages du sites. Les pages sont mises à jour régulièrement (réglable). Ce procédé permet de servir des pages sans avoir à la générer.

La seconde fonctionnalité intéressante du plugin est le pré-chargement des pages pour forcer la mise en cache. Il est possible par exemple de pré-générer ou mettre à jour les caches toutes les 30 minutes. Cette fonctionnalité est très intéressante car même le premier visiteur profitera du cache, contrairement à la plupart des plugins de cache ou c’est le premier visiteur qui va le générer.

WP Minify

1307682788_Archive

Wp Minify est un plugin qui permet la compression et la concaténation des fichiers JS et CSS. Selon la qualité de vos fichiers (en terme de code) il n’est peut être pas possible de les compresser. Dans ce cas la il faut aller dans option avancé et désactiver la minification.

La concaténation des assets, même non minifiés, permet de diminuer le nombre de requêtes et donc le temps de réponse.

WP Optimize

 

Wp Optimize est un plugin qui permet de nettoyer et optimiser la base de données de wordpress. Il va aussi défragmenter les tables. Il suffit de le lancer de temps en temps.

 

jQuery lazy load plugin

 

jQuery lazy load plugin est un plugin qui pemet de charger les images des pages à la demande. le plugin est basé sur le plugin JQuery Lazy Load.

Ceci permet de diminuer grandement le temps de chargement initial d’une page. Et c’est quand l’utilisateur affichera l’image qu’elle sera chargée.

Sur une page d’accueil où il y a une dizaine d’articles (ou plus) cela peut faire gagner énormément de connexion HTTP.

Conseils de bon sens

 

  • Eviter d’installer trop de plugins
  • Eviter d’utiliser des JS et CSS externe (hors CDN)
  • Eviter les images trop lourdes, au possible faites des Sprites

Côté Serveur

 

Si on veux que le site soit aussi performant que possible, il va falloir, si possible, aller configurer un peu le serveur. Pour cette partie vous allez avoir besoin des accès root sur le serveur.

 

XCache

 

XCache est un accélérateur de code PHP. Il va mettre en cache le code PHP compilé afin de ne pas avoir à le re-compiler une prochaine fois.  Contrairement à PHP APC, XCache est stable et entièrement compatible avec PHP 5.4+.

 

Voici un tutoriel qui date un peu, mais qui est toujours d’actualité, qui explique comment faire l’installation de XCache sur un serveur debian : Installer XCache sur Debian.

Configurer Apache

Apache est très configurable, le tutoriel optimiser la configuration d’Apache est assez complet à ce sujet.

MySQL

Pour une installation basique de wordpress le SGBD est MySQL.

Il existe des scripts comme MySQLTuner qui peuvent aider à configurer correctement le serveur MySQL.

Installer un Firewall

Un firewall, par exemple Shorewall permet de faire le tri dans les demandes et de ne pas envoyer à Apache les requêtes de type DDOS.
Contrairement au mod_evasive la requête va être ignorée au niveau de la carte réseau. On va donc limiter au maximum son impact sur le serveur en termes de ressources utilisées.

Résultat

Voici le résultat de Yslow sur la page d’accueil du blog une fois toutes les optimisations mises en place.

Capture d’écran 2013-09-09 à 21.20.53

Et voici le temps de chargement de la vue réseau de Firebug pour le premier et le second chargement de la page d’accueil:
Premier chargement

Capture d’écran 2013-09-09 à 21.25.13

Second chargement

Capture d’écran 2013-09-09 à 21.25.28

Installation et configuration de shorewall sous debian

Le tuto fonctionne aussi sous Ubuntu 12.04

gareth-davies-logo3

Le pare-feu « Shoreline Firewall », plus communément appelé « Shorewall« , est un outil qui permet de configurer plus facilement Netfilter (IpTable).

Shorewall est un outil qui permet de configurer Netfilter, son travail est fini.

L’avantage de Shorewall est qu’il est très flexible, une fois que l’on a compris la syntaxe.

Si vous avez d’autres firewalls il faut les désinstaller avant de commencer (ex: firestarter)

Installation de shorewall
apt-get install shorewall shorewall-doc
# on va dans le HOME
cd ~
# Copie de la doc one-interface
cp -r /usr/share/doc/shorewall/examples/one-interface ~
#on va dans la doc one-interface
cd one-interface/
# on met en place les configs de base
cp interfaces policy zones rules /etc/shorewall/
# retour au home
cd ~
# suppression de la doc du home
rm -r one-interface/

Maintenant que les fichiers de configuration de base sont placés aux bons endroits nous allons pouvoir commencer à configurer Shorewall selon nos besoins.

Par défaut les connexions entrantes sont refusées mais les connexions sortantes sont autorisées. Selon vos besoins vous pouvez changer la politique en éditant le fichier /etc/shorewall/policy.
Dans la suite de l’article on partira du principe que la politique utilisée est la politique par défaut.
Mise en place des règles du firewall

Ouvrir le fichier qui contient les règles:

 nano /etc/shorewall/rules

On a deux zones le « net » et le « $FW » (firewall).

Trois actions:

  • ACCEPT = accepter
  • REJECT = refuser
  • DROP = ignorer (préferez-le à reject)

Voici un exemple de fichier de configuration:

#ACTION         SOURCE          DEST            PROTO   DEST    SOURCE          ORIGINAL        RATE            USER/  $
#                                                       PORT    PORT(S)         DEST            LIMIT           GROUP
#SECTION ALL
#SECTION ESTABLISHED
#SECTION RELATED
SECTION NEW
# Drop Ping from the "bad" net zone.. and prevent your log from being flooded..
Ping(DROP)    net               $FW
# Open 123 for ntpd service on startup
ACCEPT   fw             net               udp   123
# Allow standard services in and out of the box
ACCEPT   fw             net               udp    53     # DNS
ACCEPT   fw             net               tcp    53     # DNS
ACCEPT   net            fw                tcp    22     # SSH
ACCEPT   net            fw                tcp    80     # HTTP
ACCEPT   net            fw                tcp    443    # HTTPS
ACCEPT   net            fw                tcp    21     # FTP
Avant de continuer pensez à vérifier que vous avez bien ajouté une règle pour autoriser votre connexion SSH. Par défaut c’est le port 22 mais il a pu être changé. Vérifiez que Port est bien à 22 dans : etc/ssh/sshd_config. Si ce n’est pas le cas il faudra modifier la règle correspondant au SSH

Maintenant que nous avons correctement configuré la bête reste à lui dire qu’elle peut être lancée.

 nano /etc/default/shorewall

Mettre la variable startup à 1 au lieu de 0.

Lancement de Shorewall

Allez il est temps de le lancer:

shorewall start

La sortie devrait plus ou moins ressembler à ça :

Compiling...
Processing /etc/shorewall/params ...
Processing /etc/shorewall/shorewall.conf...
Compiling /etc/shorewall/zones...
Compiling /etc/shorewall/interfaces...
Determining Hosts in Zones...
Locating Action Files...
Compiling /usr/share/shorewall/action.Drop for chain Drop...
Compiling /usr/share/shorewall/action.Broadcast for chain Broadcast...
Compiling /usr/share/shorewall/action.Invalid for chain Invalid...
Compiling /usr/share/shorewall/action.NotSyn for chain NotSyn...
Compiling /usr/share/shorewall/action.Reject for chain Reject...
Compiling /etc/shorewall/policy...
Adding Anti-smurf Rules
Adding rules for DHCP
Compiling TCP Flags filtering...
Compiling Kernel Route Filtering...
Compiling Martian Logging...
Compiling Accept Source Routing...
Compiling MAC Filtration -- Phase 1...
Compiling /etc/shorewall/rules...
Compiling MAC Filtration -- Phase 2...
Applying Policies...
Generating Rule Matrix...
Creating iptables-restore input...
Shorewall configuration compiled to /var/lib/shorewall/.start
Starting Shorewall....
Initializing...
Setting up Route Filtering...
Setting up Martian Logging...
Setting up Accept Source Routing...
Setting up Traffic Control...
Preparing iptables-restore input...
Running /sbin/iptables-restore...
done.

Si ce n’est pas le cas et qu’une erreur apparait c’est que vous avez un problème de configuration.

Des menus déroulants avec Chosen

Chosen est un plugin jquery qui permet de réaliser des inputs de type select travaillés, et avec un champs de recherche dans les propositions.

Voici un exemple de champs select généré avec l’aide de chosen :

Le plugin permet une recherche rapide des options par l’utilisateur dans une liste très grande, comme ici avec la liste de tout les pays. En plus ce ça son design modern est très soigné.

Mais il s’agit ici d’un champs ou l’utilisateur ne peut faire qu’un seul choix. Le plugin permet aussi de gérer les selects à choix multiple:

Encore une fois on a la possibilité de faire une recherche textuelle mais en plus on voit s’afficher la liste des options choisies dans un champs dédié. Il est possible à tout moment d’en supprimer un précédement choisi.

Pour la mise en place il va falloir inclure le ficher CSS et le fichier JS.
Après il vous suffira d’ajouter une classe « chosen » sur votre champs select :

<select name="blabla" id="blabla" class="chosen">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<!-- l'appel au plugin -->
<script>
$(function(){
   $(".chosen").chosen();
}
</script>

Et voila vous avez maintenant des champs select de compet’.

Site officiel ou Télécharger

Réaliser des formulaires très rapidement avec Zebra_form

Zebra_form est une librairie PHP qui permet à partir d’un code très simple de générer un formulaire avec verification dynamique.

La librairie permet mettre des contraintes sur les champs afin d’automatiser la vérification des données, mais aussi de générer des jetons de formulaires ou encore de gérer l’upload de fichiers.

Voici un exemple très simple qui permet de générer un formulaire de connexion :

<?php
// include the Zebra_Form class
require 'path/to/Zebra_Form.php';
$form = new Zebra_Form('form');
$form->add('label', 'label_email', 'email', 'Email');
$obj = & $form->add('text', 'email', '', array('autocomplete' => 'off'));
// set rules
$obj->set_rule(array(
    // error messages will be sent to a variable called "error", usable in custom templates
    'required'  =>  array('error', 'Email is required!'),
    'email'     =>  array('error', 'Email address seems to be invalid!'),
));
// "password"
$form->add('label', 'label_password', 'password', 'Password');
$obj = & $form->add('password', 'password', '', array('autocomplete' => 'off'));
$obj->set_rule(array(
    'required'  => array('error', 'Password is required!'),
    'length'    => array(6, 10, 'error', 'The password must have between 6 and 10 characters'),
));
// "remember me"
$form->add('checkbox', 'remember_me', 'yes');
$form->add('label', 'label_remember_me_yes', 'remember_me_yes', 'Remember me');
// "submit"
$form->add('submit', 'btnsubmit', 'Submit');
// validate the form
if ($form->validate()) {
    // C'est ici qu'il faut faire le traitement
}
// auto generate output, labels above form elements
$form->render();
?>

Voici le rendu pour avec le fichier CSS par défaut de Zimbra form :

Vous pouvez trouver la documentation compléte ici :

Vous pouvez tester cet exemple sur la page de démo : Démo Zebra_form

Vous pourrez trouver à cette adresse d’autres librairies du même créateur.

Mettre en place des masques dans des champs input

Jquery Mask Plugin est, comme son nom l’indique, un plugin jquery qui permet de mettre en place des masques sur des champs input. Le but étant de forcer, ou d’aider, l’utilisateur à saisir des informations sous le bon format.

Le cas le plus courant est un champs date, si on n’utilise pas un datepicker, on ne peut pas être sur du format utilisé par l’utilisateur.

Une fois le plugin inclus dans vote page html vous pouvez mettre en place très simplement le plugin :

$(function(){
      $('.date').mask('00/00/0000');
      $('.time').mask('00:00:00');
      $('.date_time').mask('00/00/0000 00:00:00');
      $('.cep').mask('00000-000');
      $('.phone').mask('0000-0000');
      $('.phone_with_ddd').mask('(00) 0000-0000');
      $('.phone_us').mask('(000) 000-0000');
      $('.mixed').mask('AAA 000-S0S');
      $('.cpf').mask('999.999.999-99', {reverse: true});
      $('.money').mask('000.000.000.000.000,00', {reverse: true});
});

Voici la légende des symbole pour les masques :

SymboleSignification
0,1,3,4,5,6,7,8 ou 9 Un chiffre
A Un chiffre ou une lettre
S Une lettre

Site officiel ou Télécharger

Des boites de dialogues avec Avgrund Modal

Avgrund Modal est plugin JQuery qui permet de réaliser des boites de dialogues très modernes, avec un superbe effet à l’affichage.

Voici comment mettre en place le plugin pour afficher une modal box.

<a href="#" id="show" >Afficher la popup</a>
<script>
$(function() {
		$('#show').avgrund({
			height: 200,
			holderClass: 'custom',
			showClose: true,
			showCloseText: 'Close',
			enableStackAnimation: true,
			template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", somewhere on the screen or use special button. Enjoy!</p>' +
			'<div>' +
			'<a href="http://github.com/voronianski/jquery.avgrund.js" target="_blank" class="github">Avgrund on Github</a>' +
			'<a href="http://twitter.com/voronianski" target="_blank" class="twitter">Twitter</a>' +
			'<a href="http://dribbble.com/voronianski" target="_blank" class="dribble">Dribbble</a>' +
			'</div>'
		});
	});
</script>

Et le résultat obtenu une fois que le lien à été cliqué :

Ce qu’il faut remarquer sur cette capture c’est les bandes noires sur le bord de la page. Lors du clic la page html à été rétrécie, comme si on l’avait reculée pour mettre au premier plan la boite de dialogue.

Le plugin est compatible sur tous les navigateurs correct, pour IE il y a une version dégradée qui a été mise en place pour avoir un rendu similaire.

Site officiel ou Télécharger

Bootstrap 2.1

La mise à jour du framework CSS de twitter, dont on a déjà parlé dans l’article .
Au programme quelques nouveautés :

  • La gestion des images
  • La possibilité de colorées les lignes des tableaux avec les classes error, info et success
  • Le changement de la couleur par défaut des nav-bar

    Il est possible de la mettre en noire en ajoutant la classe .navbar-inverse
  • De nouveaux glyphes

On notera aussi une amélioration du responsive design et quelques plugins javascript qui permettent de réaliser votre interface en quelques minutes avec un résultat très soigné.

Télécharger sur github

Créer des tooltips avec Powertip

Powertip est un plugin JQuery qui permet de faire des tooltips. La dernière mise à jour date du 8 août 2012, autant dire que le créateur continu de l’améliorer.

L’avantage de ce plugin par rapport à d’autre est la notion de « smart placement » (placement intélligent) qui permet de placer les tooltips de manière à ce que les tooltips ne dépassent pas de la page.

Voici ce qui peut arriver sans le smart placement :

Et la correction que ce système fait :

Pour mettre ce système en place il suffit de définir l’ordre des préférences des positions pour la tooltip

$.fn.powerTip.smartPlacementLists = {
	n: ['n', 'ne', 'nw', 's'],
	e: ['e', 'ne', 'se', 'w', 'nw', 'sw', 'n', 's', 'e'],
	s: ['s', 'se', 'sw', 'n'],
	w: ['w', 'nw', 'sw', 'e', 'ne', 'se', 'n', 's', 'w'],
	nw: ['nw', 'w', 'sw', 'n', 's', 'se', 'nw'],
	ne: ['ne', 'e', 'se', 'n', 's', 'sw', 'ne'],
	sw: ['sw', 'w', 'nw', 's', 'n', 'ne', 'sw'],
	se: ['se', 'e', 'ne', 's', 'n', 'nw', 'se']
};

C’est la configuration qui est proposée sur le site officiel du plugin.

Et voici un exemple d’utilisation du plugin :

<a class="powertip" href="monsuperlien" title="Le contenu de ma tooltip">Un lien</a>
<script>
$(function(){
    $('.powertip').powerTip({
	placement: 'n',
	smartPlacement: true
    });
});
</script>

Pour des besoins plus compliqué vous pouvez ajouter des traitements sur différents events :

Nom de l’eventDescription
powerTipPreRender Avant que le contenu de la tooltip soit mis en place
powerTipRender Après que le contenu de la tooltip soit mis en place mais avant sont affichage
powerTipOpen Une fois que la tooltip est affichée (après l’effet fade)
powerTipClose A la fermeture de la tooltip
$('.tips').on({
	powerTipPreRender: function() {
		console.log('powerTipRender', this);
		// generate some dynamic content
		$(this).data('data-powertip' , '<h3 class="title">Default title</h3><p>Default content</p>');
	},
	powerTipRender: function() {
		console.log('powerTipRender', this);
		// change some content dynamically
		$('#powerTip').find('.title').text('This is a dynamic title.').
	},
	powerTipOpen: function() {
		console.log('powerTipOpen', this);
		// animate something when the tooltip opens
		$('#powerTip').find('.title').animate({ opacity: .1 }, 1000).animate({ opacity: 1 }, 1000);
	},
	powerTipClose: function() {
		console.log('powerTipClose', this);
		// cleanup the animation
		$('#powerTip').find('.title').stop(true, true);
	}
});

Et enfin un petit exemple :

Site officiel ou Télécharger

Gérer les raccourcis clavier avec JWERTY

outils

JWERTY est une librairie javascript qui permet de gérer simplement les combinaisons de touches et d’y attribuer des traitements.

Bien que JWERTY n’utilise pas JQuery, il a été conçu de manière à être compatible avec.

Une fois la librairie incluse, l’utilisation est très simple :

jwerty.key('ctrl+alt+z', function () {
alert("Ma belle fonction");
});

Ceci est l »utilisation la plus basique de la librairie mais il est aussi possible de définir des events et de les utiliser comme bon nous semble.

$('#myinput').bind('keydown',  .event('ctrl+alt+z', function () { [...] }));

Vous pourrez ensuite utiliser la fonction jwerty.is pour retrouver vos petits.

function (event) {
    if ( jwerty.is('ctrl+alt+z', event) ) {
        [...]
    }
}

Site officiel