Accélérer la vitesse d’affichage d’un site WordPress : astuces N°2!

Nous avions vu comment alléger le chargement des pages dans un premier numéro : aujourd’hui nous allons utiliser des fonctions et plugins qui permettent en quelques clics d’aller encore plus loin dans ce challenge!

Le plugin Debug Objects

Cet outil permet de revaloriser les fonctions utiles en mettant en veilleuse celles qu’on n’utilise pas. On peut observer l’impact du travail effectué dans le but d’accélérer l’affichage des pages. Il suffit de l’installer via l’onglet Extension de l’administration WordPress et d’affiner les réglages selon vos souhaits. Toutefois, pour ceux qui craignent les conflits avec d’autres outils, il est possible en ajoutant un peu de code dans le fichier wp-config.php d’obtenir un résultat similaire au plugin, et de ne pas utiliser ce dernier :

if ( isset($_GET['debug']) && $_GET['debug'] == 'debug') define('WP_DEBUG', true);

La méthode des Transient

De quoi parle-t-on? Il s’agit là d’une fonction qui permet de conserver des données en cache : ainsi lors de prochains passages, la lecture sera moins copieuse et l’affichage plus rapide. Nous allons donc inclure ce genre de code :

function masuperfonction() {
    $count=get_transient (‘nomdutransient‘);
    if ( false === $count){
    
      $counti = ‘ce-que-vous-voulez-mettre-en-cache‘;
      set_transient ($count, $counti, 86400);}
    echo get_transient ($count);}

En bleu sont les codes à adapter selon vos objectifs. Vous pouvez ainsi choisir de mettre en Transient la description de votre thème qui apparaît systématiquement sur toutes vos pages : l’avantage est bel et bien d’éviter la lecture des codes redondants. Mais vous pouvez aller au-delà et choisir d’affilier au Transient ce qui vous semble judicieux!

Modifier vos images

Lorsqu’on indique le format de l’image sous ce type de code, on alourdit l’affichage de la page :
<img width= »150px » height= »150px » alt= »votre image »
src= »nomdudossier/mon-image.jpg »/>
Il est préférable de jongler avec le CSS pour ne pas être confronté à ce problème. On préférera donc y noter :
.mon-image{ background-image : url(‘nomdudossier/votre-image.jpg’) no-repeat; width: 150px; height: 150px; }.
Le problème est le même pour toute apparence finalement. Ce deuxième exemple peut être adapté à la feuille de style aussi:
<p style= »text-align: left; color: black; font-weight: bold; size: 12px; »>BlaBla</p>
On peut supprimer ces détails du fichier php ou du texte pour le lier au CSS de la sorte :
.paragraphe-noir{ text-align: center; color: #000000; font-weight: bold; size: 12px;}.

Le problème ensuite est de faire le tri dans cette de feuille de style : car certes, vous y ajoutez des données pour optimiser la vitesse d’affichage de votre site, mais vous pouvez aussi en supprimer des éléments inutiles, pour ainsi maximiser encore cette optimisation! Un travail de longue haleine donc…

Catégorie: Création de sites web
10 avril 2012
O2switch Hébergement web