Attention la compression augmentera le niveau d’utilisation du processeur, mais dans beaucoup de cas ceci n’est pas un problème surtout mis en parallèle avec le gain de vitesse que cela va vous apporter.

Je parlerai dans cet article du mod_delfate, qui est le successeur du mod_gzip (Apache1).

Installation / sur serveur dédié

Activer le mode deflate sur votre serveur
Activez le mode deflate sur votre serveur en éxécutant les commandes suivantes.Vous aurez besoin de vous loger en tant que root pour executer ces commandes.

a2enmod deflate
service apache2 restart

Rendez vous dans votre fichier de configuration de votre site
Vous pouvez aussi ajouter ces infos dans le .htaccess si vous avez activé l’overwrite.

nano /etc/apache2/sites-available/antoinebrossault.com

Ajoutez les directives de compression
Directives avant tout d’abord activer la compression Gzip. Refuser la compression des images. Ne pas compresser les fichiers déjà compressé. Ne pas compresser les PDF. Et donner quelques exclusions aux anciens navigateurs

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|ico|png)$ \ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ \no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
 
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

N’oubliez pas de redémarrer apache

service apache2 restart

Tester / la compression

Maintenant que vous avez mis en place le système de compression sur votre serveur il est important de tester la performance de celle-ci. Pour ce faire il existe tout un tas d’outils pour se faire une idée du bien de performances. Vous pouvez essayer le site DNS Queries .

Qu’est ce qu’une LightBox ? / Pourquoi l’utiliser ?

Une Lighbox est souvent un petit plug-in JavaScript Qui permet lors du clic ou d’un autre événement de faire flotter l’élément au-dessus de tout le site. Les LightBox sont très souvent utilisées pour présenter des Photos et des vidéos.

Cela donne une meilleure immersion dans le contenu c’est c’est une technique particulièrement intéressante lors de l’affichage d’images. Avec une Lightbox ou pouvez aussi créer des Pop-in et/ou modal box pour informer vos utilisateurs.

Installer dans WordPress / sans plugins

Nous allons voir ensemble comment il est possible d’installer ce système sans avoir recours à un plug-in. Premièrement vous allez avoir besoin de Jquery normalement celui ci est chargé sur la plupart des sites, mais vérifiez quand même que celui-ci est bien chargée sur vos pages.

Vous vous allez aussi avoir besoin du plug-in Magnific pop up que vous pouvez télécharger sur Github. Vous pouvez aussi charger ce plug-in sur un CDN comme Cloudflare.

Avec Jquery nous allons ajouter une classe Lightbox À tous les liens don l’ancre est une image et don les liens sont bien des images.

/**
*
*  Ajoute une lightbox à toutes les images
*  qui ont pour lien une image
*
*/

// On sélectionne nos images
var $linkImg = $('.entry-content a img').parent();

$linkImg.each(function(){

  var parts = $(this).attr('href').split('.');
  last_part = parts[parts.length - 1];
  last_part = last_part.toLowerCase();

  var formatsImg = ["tif", "tiff","gif","jpeg",  "jpg",  "jif",  "jfif", "jp2",  "jpx",  "j2k",  "j2c", "fpx", "pcd", "png", "pdf"];

  // On vérifie bien si le lien à comme attribut href une image en checkant l'extension 
  if(formatsImg.indexOf(last_part) !== -1){

    $(this).addClass('lightbox');

  }

});


$('.lightbox').magnificPopup({
  type: 'image'
});