hourglass

Serveur dédié : optimiser toutes les images GIF avec GIFsicle

Après avoir vu comment optimiser les fichiers JPG et PNG sur le serveur, voici comment optimiser les fichiers GIF.

hourglass

Comme dans le tutoriel précédent, nous allons optimiser toutes nos images d’un seul coup, de manière à charger nos pages plus rapidement et à consommer moins de bande passante.

Pour optimiser les fichiers GIF, j’ai choisi GIFsicle.

L’installation et la compression de vos répertoires d’images prend à peine quelques minutes.

Installation de GIFsicle

On installe le paquet :

apt-get install gifsicleCode language: JavaScript (javascript)

et on RTFM :

man gifsicle

Optimisation des PNG

Pour optimiser les fichiers GIF, il suffit de lancer :

gifsicle --batch -O3 *.gifCode language: CSS (css)

L’argument --batch permet de gérer plusieurs fichiers et -O3 permet la meilleure optimisation possible, en essayant plusieurs combinaisons de compression pour trouver le ratio le plus intéressant.

Lire la suite

MySQL : convertir les tables MyISAM au format InnoDB photo

MySQL : convertir les tables MyISAM au format InnoDB

MySQL : MyISAM et InnoDB

A ses débuts, MySQL utilisait le moteur de stockage MyISAM.

C’est la raison pour laquelle on retrouve beaucoup d’exemples de création de tables sur Internet avec l’instruction engine=MyISAM (ce qui, au passage, peut faire planter pas mal de créations de bases/tables).

Aujourd’hui, le moteur de stockage par défaut de MySQL est InnoDB.

MyISAM n’est plus activement développé, à l’inverse d’InnoDB. Il est donc recommandé de convertir les tables MyISAM au format InnoDB, afin de bénéficier des dernières optimisations de performance du nouveau moteur.

innodb-myisam-mysql

Le moteur InnoDB

InnoDB est un moteur de stockage inclus d’origine dans toutes les distributions fournies par MySQL AB. Son principal avantage par rapport aux autres moteurs de stockage de MySQL est qu’il permet des transactions ACID (Atomiques, Cohérentes, Isolées et Durables), ainsi que la gestion des clés étrangères (avec vérification de la cohérence).

Toutes les bases de données sont stockées au même endroit. Par défaut dans le fichier ibdata1 qui, sous les systèmes de type unix, se trouve généralement dans /var/lib/mysql. Il est également possible d’utiliser plusieurs fichiers ou même d’utiliser directement une ou plusieurs partitions sur le disque en mode RAW.

Ce moteur de base de données utilise aussi deux fichiers de logs, d’habitude ib_logfile0 et ib_logfile1. Les fichiers de définitions de table .frm sont également dans un dossier au nom de la base comme pour MyISAM.

Depuis sa version 5.5, MySQL utilise InnoDB comme moteur par défaut.

Comment connaitre le format actuel de vos tables ?

Pour faire un petit état des lieux du format actuel des tables de votre base de données, il suffit de vous identifier sur le serveur SQL et de lancer cette requête :

SHOW TABLE STATUS FROM `database`;Code language: JavaScript (javascript)

Il vous suffit de remplacer database par le nom de votre base de données et de regarder la valeur de la colonne Engine.

Convertir les tables MyISAM au format InnoDB

Pour convertir des tables MyISAM au format InnoDB, il suffit de lancer une requête SQL va grandement nous simplifier la vie:

SELECT CONCAT('ALTER TABLE ',table_schema,'.',table_name,' ENGINE=InnoDB;')
FROM information_schema.tables
WHERE 1=1
    AND engine = 'MyISAM'
    AND table_schema NOT IN ('information_schema', 'mysql', 'performance_schema');Code language: JavaScript (javascript)

Le résultat de cette requête est une liste bien formatée de requêtes à lancer pour que toutes nos tables soient converties au format InnoDB.

Voici le résultat de cette requête sur le serveur :

+-----------------------------------------------------------+
| CONCAT('ALTER TABLE ',table_schema,'.',table_name,' ENGINE=InnoDB;')   |
+-----------------------------------------------------------+
| ALTER TABLE blog.blog_wc_comments_subscription ENGINE=InnoDB;
| ALTER TABLE blog.blog_wc_phrases ENGINE=InnoDB;
| ALTER TABLE blog.blog_wc_users_voted ENGINE=InnoDB;
+-----------------------------------------------------------+Code language: JavaScript (javascript)

Toutes les tables des bases de données qui sont au format MyISAM au format InnoDB sont listées, à l’exception des tables utilisées dans la gestion de MySQL (‘information_schema’, ‘mysql’, ‘performance_schema’) qui doivent rester en MyISAM.

Etape de Conversion

Il vous suffit ensuite de lancer cette liste de requêtes ALTER TABLE sous MySQL, Adminer ou PHPMyAdmin pour convertir vos tables. Lancez la liste de commandes que vous venez de trouver :

ALTER TABLE blog.blog_wc_comments_subscription ENGINE=InnoDB;
ALTER TABLE blog.blog_wc_phrases ENGINE=InnoDB;
ALTER TABLE blog.blog_wc_users_voted ENGINE=InnoDB;

Et voilà, vos tables MyISAM sont maintenant devenues des tables InnoDB.

Lire la suite

PHP : résoudre l'erreur

Serveur dédié : mise à jour vers PHP 5.6

php-logo

Je viens de mettre à jour la version de PHP sur le serveur, histoire de tourner sur une version plus récente et bénéficiant des dernières nouveautés.

En moins de 3 minutes, je suis passé de PHP 5.4.39 à PHP 5.6.7 sur ma Debian, tout en douceur.

Voici la marche à suivre.

Ajout des dépôts Dotdeb

Si vous ne l’avez déjà fait, ajoutez les dépôts Dotdeb de Guillaume Plessis:

nano /etc/apt/sources.listCode language: PHP (php)

et ajoutez-y:

# Dotdeb default
deb http://packages.dotdeb.org stable all
deb-src http://packages.dotdeb.org stable all
# PHP 5.6 on Debian 7 (without Zend thread safety)
deb http://packages.dotdeb.org wheezy-php56 all
deb-src http://packages.dotdeb.org wheezy-php56 allCode language: PHP (php)

Mise à jour de PHP

On met à jour nos dépôts :

apt-get updateCode language: JavaScript (javascript)

et on met à jour notre version de PHP-FPM avec:

apt-get install php5-fpm php5-ssh2 php-pear php5 php5-devCode language: JavaScript (javascript)

Résultat :

The following packages will be REMOVED:
  libssh2-php
The following NEW packages will be installed:
  libvpx1 php5-ssh2
The following packages will be upgraded:
  php5-cli php5-common php5-curl php5-fpm php5-gd php5-mcrypt php5-mysqlnd php-pear php5 php5-devCode language: PHP (php)

Cela met à jour les paquets PHP qui dépendent de la nouvelle version.

Bientôt PHP7!

Au passage, l’installation demande quoi faire avec les fichiers de configuration : j’ai choisi de garder les miens, pour ne pas avoir à tout reconfigurer.

Je pense que je partirai sur une configuration de base lorsque l’on passera à PHP7, qui devrait enfin faire décoller les performances et dont la sortie est prévue le 15 novembre 2015.

Il ne reste plus qu’à redémarrer Apache et PHP :

service apache2 restart && service php5-fpm restart

Et voilà! Une mise à jour toute en douceur et sans accrocs.

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare photo

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare

Allez, je continue ma petite série sur la gestion de l’intégration oEmbed sous WordPress.

WordPress gère nativement plusieurs services : copiez-collez l’adresse d’une vidéo YouTube dans un article et hop, vous obtenez une vidéo entièrement intégrée, avec un code plutôt propre mais pas entièrement valide.

oembed-all-service

Je vous propose donc de valider le code généré par WordPress lorsqu’il vient de sites tiers comme YouTube, DailyMotion, Vimeo ou SlideShare.

Valider le code oEmbed de YouTube

Il suffit de lancer les quatre requêtes SQL suivantes :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");Code language: JavaScript (javascript)

Valider le code oEmbed de Dailymotion

Pour le code de Dailymotion, ces deux requêtes suffisent :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');Code language: JavaScript (javascript)

Valider le code oEmbed de Vimeo

Quatre requêtes pour Vimeo :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');Code language: JavaScript (javascript)

Valider le code oEmbed de SlideShare

Et deux requêtes pour SlideShare :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');Code language: JavaScript (javascript)

Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.

WordPress : remplacer le vieux code Dailymotion de vos articles par une URL oEmbed photo 1

WordPress : mettre à jour le code Dailymotion

Cet article est le pendant de l’article pour remplacer le vieux code YouTube de vos articles WordPress par une URL oEmbed mais pour Dailymotion.

Voici donc les manipulations à effectuer pour transformer les vieux codes d’intégration avec les URL oEmbed de WordPress.

Nous utilisons toujours le plugin Search Regex pour WordPress avec la case regex activée et le signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer les liens swf/video de Dailymotion

J’appelle ces liens “swf/video” parce qu’on retrouve cela dans l’URL de l’intégration Flash. Il vaut mieux lancer cette substitution en premier.

On recherche :

#<object data="http://www.dailymotion.com/swf/video/(.*)" width="300" height="150">(.*)</object>#Code language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$2Code language: JavaScript (javascript)

Remplacer les liens swf de Dailymotion

On s’occupe maintenant des liens qui contiennent juste le terme “swf”.

On recherche :

#<object data="http://www.dailymotion.com/swf/(.*)" width="300" height="150">(.*)</object>#Code language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$2Code language: JavaScript (javascript)

Voilà, vous venez de nettoyer les anciens codes d’intégration Flash pour les remplacer par des URI oEmbed natives. Propre.

WordPress : remplacer le vieux code YouTube de vos articles par une URL oEmbed photo

WordPress : mettre à jour le code Youtube

Le code des plateformes – vidéos ou autre – évolue et il n’est pas rare de tomber sur de vieux articles qui embarquent un vieux code embed pour afficher des vidéos.

Si votre site a quelques années, il y a plusieurs méthodes d’intégration – plus ou moins optimisées – dont certaines ne s’afficheront pas (celles utilisant le plugin Flash par exemple) sur une tablette ou un smartphone.

youtube

Sur SkyMinds, je me suis dit que ce serait sympa d’avoir un système unifié : toutes les vidéos YouTube seront automatiquement insérées par WordPress en utilisant la méthode native, à savoir oEmbed.

Pour ce faire, j’utilise le plugin Search Regex qui permet d’intervenir facilement sur la base de données pour effectuer des changements en masse, tout en proposant la visualisation des changements avant que ces derniers ne soient appliqués.

Toutes les manipulations sont à effectuer avec Search Regex, en activant la case regex. Je me sers du signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer le vieux code d’intégration flash de YouTube

Avec Search Regex, on cherche :

<object [^>]*><param name="movie" value="https:\/\/www\.youtube\.com\/v\/([^"&?]+)">.*?<\/object>Code language: HTML, XML (xml)

Et on remplace par :

https://www.youtube.com/watch?v=$1Code language: JavaScript (javascript)

Lire la suite

Mise à jour du site du Centre de Kriya Yoga France : v4.0 photo

Mise à jour du site du Centre de Kriya Yoga France : v4.0

Il y a quelques mois de cela, le site du Centre de Kriya Yoga France a eu droit à un léger rafraichissement de son style : un peu plus de lisibilité, moins de fonds colorés, un peu plus de finesse dans les traits.

C’était juste un petit coup de plumeau mais comme j’ai oublié de vous en parler, voici une petite capture d’écran :

Mais cette semaine, j’ai retroussé mes manches et suis totalement passé à l’offensive :

  • redéfinition des couleurs
  • création du logo et des favicons
  • création de la boutique totalement intégrée à WordPress
  • mode responsive/adaptive pour smartphones et tablettes
  • conversion des pages de contenus en articles et classement des articles par catégories, en silos
  • modification des permaliens pour n’utiliser que le nom des articles
  • intégration des réseaux sociaux avec les comptes dédiés au CKYF
  • et de multiples essais en trial and error !

Note pour plus tard : si, lors de la prévisualisation d’un thème WordPress, rien ne s’affiche ou si la personnalisation (customizer) ne répond pas, c’est qu’un plugin met la zone au niveau du javascript. Dans mon cas, c’était pdf-js.

Without further ado, je suis assez content de vous présenter la version 4.0 :

Pas mal de changements mais je pense que cela en vaut vraiment le coup. Le site devenait vieillissant et n’était plus adapté aux smartphones et tablettes, et l’ancienne boutique (Cubecart) était une horreur à gérer.

Tout est beaucoup plus simple maintenant, avec de jolis graphiques pour les commandes, la gestion du stock… bref, c’est bien mieux pour moi à gérer et plus simple pour le CKYF.

Qu’en pensez-vous ?

Serveur dédié : passer WordPress en HTTPS (TLS/SSL) photo

Serveur dédié : passer WordPress en HTTPS (TLS/SSL)

Vous avez sauté le pas et avez validé votre nom de domaine avec un certificat TLS/SSL. Très bien ! Voyons comment passer WordPress sur la version sécurisée de votre site.

Il existe des plugins WordPress entièrement dédiés à SSL pour rediriger vers les pages sécurisées mais on peut très bien faire sans, avec un peu d’huile de coude.

Le tutoriel est pour Debian et WordPress tourne sous Apache chez moi. Cela prend moins d’une heure pour configurer l’essentiel mais il est probable que vous ayez des petites corrections (thèmes, plugins) pour que tout soit servi en https.

Le but est de tout (oui, absolument tout!) servir via la connexion sécurisée.

Étape 1 : configurer Apache

On édite notre fichier de configuration :

nano /etc/apache2/sites-available/www.skyminds.net

et voici ce que garde pour VirtualHost *:80 :

ServerName www.skyminds.net
ServerAlias skyminds.net
DocumentRoot /home/skyminds/public_html/
Redirect 301 / https://www.skyminds.net/Code language: JavaScript (javascript)

La directive ServerName est nécessaire. Ensuite, une simple redirection renvoie toutes les requêtes du port 80 vers le port 443, sécurisé. Même pas besoin de mod_rewrite!

Lire la suite

WordPress : héberger les images sur un sous-domaine photo 1

WordPress : héberger les images sur un sous-domaine

Cela fait des années que je parle d’héberger les images du site sur un sous-domaine mais j’ai toujours remis cela à plus tard.

Je pensais que la configuration me prendrait un temps infini mais au final cela ne m’aura pris qu’un peu de réflexion et quelques minutes pour tout finaliser.

Le plus long aura été d’écrire ce tutoriel!

Aujourd’hui, c’est chose faite : les images des articles du site sont donc placées sur un sous-domaine pour des raisons de performances.

subdomains

Voici donc un petit tutoriel qui détaille toutes les étapes. Cela prend environ 20 minutes.

Principe de fonctionnement

Les fichiers du site sont présentement servis par Apache. Le domaine est skyminds.net et nous allons créer un sous-domaine, qui est en fait un répertoire au niveau de l’arborescence du site, qui contiendra toutes les images de nos articles.

Par défaut, WordPress place tous les fichiers uploadés via l’interface d’administration dans /wp-content/uploads.

Nous allons donc créer un sous-domaine (static.skyminds.net) qui pointera vers le répertoire /wp-content/uploads.

L’intérêt est que nous n’avons pas à copier ou à déplacer de fichiers. Cela permet aussi de revenir à une installation plus classique à tout moment, sans intervention majeure.

Une fois ce VirtualHost créé, il ne reste plus qu’à modifier les options de WordPress pour les futurs articles et changer les anciennes URI des images dans les anciens articles. P

our finir, nous redirigerons les anciennes URI vers les nouvelles via .htaccess.

Etape 1 : on crée le sous-domaine sur le serveur Apache

Commençons par créer un nouveau VirtualHost pour notre sous-domaine:

nano /etc/apache2/sites-available/static.skyminds.netCode language: JavaScript (javascript)

et ajoutons-y ceci :

ServerAdmin webmaster@localhost
DocumentRoot /home/skyminds/public_html/wp-content/uploads
ServerName static.skyminds.net
ErrorLog /var/log/apache2/www-error.log

        
          AllowOverride None
          RequestHeader unset Cookie
          Header unset Set-Cookie
          Options FollowSymLinks
          Order allow,deny
          Allow from allCode language: JavaScript (javascript)

Plusieurs choses sont importantes à noter dans ce fichier de configuration Apache:

  • DocumentRoot pointe vers le répertoire /home/skyminds/public_html/wp-content/uploads
  • on retire tous les cookies servis par static.skyminds.net

Pas de cookies, pas de soucis et un site qui gagne en rapidité !

Lire la suite

PHP : résoudre l'erreur

OVH : activez PHP-FPM sur votre hébergement

OVH est en pleine implémentation du module PHP-FPM sur ses offres, (et ici dans leur guide), ce qui permettrait selon la team OVH “d’accélérer les temps de réponses de PHP et d’obtenir des performances jusque 7 fois plus rapides dans nos labos par rapport au moteur actuel”.

Activation de PHP-FPM

Pour activer ce mode sur votre offre, il suffit de créer un fichier .ovhconfig à la racine de l’arborescence FTP, dans le dossier parent du répertoire /www.

Si vous souhaitez activez PHP 7, voici ce que doit contenir votre .ovhconfig:

app.engine=php
app.engine.version=7.0
http.firewall=none
environment=production

Si vous souhaitez activez PHP 5.6, voici ce que doit contenir votre .ovhconfig:

app.engine=php
app.engine.version=5.6
http.firewall=none
environment=production

Lire la suite

hourglass

Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim

Je classe volontairement cet article dans la série Serveur dédié, étant donné que nous allons utiliser la ligne de commande exclusivement. Si vous souhaitez faire la même chose sur votre machine personnelle, il vous suffit d’utiliser Trimage (qui en plus possède une GUI).

hourglass

Si vous possédez un site, blog ou une galerie d’images, il peut être très intéressant d’optimiser toutes vos images d’un seul coup et ce, de manière lossless : chargement plus rapide des pages et moindre consommation de bande passante.

Sous Linux, il existe plusieurs programmes pour le faire. Personnellement, j’ai choisi OptiPNG (pour optimiser les PNG) et JpegOptim (pour optimiser les JPG).

L’installation et la compression de vos répertoires d’images prend à peine quelques minutes.

Installation d’OptiPNG et JpegOptim

On installe nos deux paquets :

apt-get install jpegoptim optipngCode language: JavaScript (javascript)

et on RTFM :

man jpegoptim

et

man optipng

Optimisation des JPG

On navigue dans notre répertoire images et on fait une estimation des gains. Avant de commencer, vérifiez que vous avez la dernière version de jpegoptim et installez manuellement la dernière version des dépôts Sid.

Commençons par les JPG :

jpegoptim -n -t *.jpgCode language: CSS (css)

-n permet de simuler l’optimisation.
-t permet de calculer l’espace gagné

Résultat :

Average compression (2730 files): 0.95% (452k)Code language: CSS (css)

Cela peut sembler peu mais je compresse toutes mes images avant de les mettre sur le web. Visiblement, quelques unes sont passées au travers du filet !

Lire la suite

PHP : résoudre l'erreur

PHP : résoudre l’erreur “Creating default object from empty value”

php-logo

Suite à la mise à jour de PHP, mon fichier d’erreurs du site a commencé à afficher le message suivant :

PHP Warning: Creating default object from empty value in /wp-content/themes/skyminds/functions.php on line 1213

La ligne en question correspond à :

$posts[0]->comment_status = 'closed';Code language: PHP (php)

Le problème réside dans le fait que $posts n’est pas explicitement défini et comme les versions récentes de PHP tournent maintenant avec le mode E-STRICT par défaut, on obtient une erreur. Il existe deux solutions – soit mettre :

$posts = new stdClass();Code language: PHP (php)

s’il sagit d’un objet, soit mettre :

$posts = array();Code language: PHP (php)

s’il s’agit d’une associative array, juste avant la ligne de code incriminée. Dans mon cas, l’array() est la bonne solution.