Tag: optimisation | Page 3

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

30 September 202407 octobre 2014 by Matt Biscay · Lecture: 9 minutes

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!

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

30 March 202219 juin 2014 by Matt Biscay · Lecture: 4 minutes

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.

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é !

OVH : activez PHP-FPM sur votre hébergement

28 December 202318 octobre 2013 by Matt Biscay · Lecture: 3 minutes

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

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

7 April 202217 juin 2013 by Matt Biscay · Lecture: 3 minutes

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).

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

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 !

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

5 April 202228 mai 2013 by Matt Biscay · Lecture: 1 minute

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.

WordPress : des images qui ont perdu leur chemin

28 December 202327 avril 2013 by Matt Biscay · Lecture: 2 minutes

Problème : chemin erroné pour certaines images

En allant faire un tour sur Google Search Console, je me suis aperçu qu’il y a avait des erreurs sur la page Si je pouvais (vraiment) choisir ma voiture… et effectivement, les images ne s’affichaient pas!

Après vérification, il se trouve que le chemin des images était totalement inexistant : c’était un mélange d’URL publique et de chemin privé, donc aucun moyen que les images d’affichent comme il faut avec le chemin privé. Et bien sûr, on ne peut pas éditer le chemin des fichiers depuis WordPress.

Solution : MySQL

En faisant une petite requête sur la table postmeta, je me suis aperçu que ce n’était pas le seul article touché. J’ai donc purement et simplement supprimé le chemin privé dans la table, via une requête SQL :

Query:

UPDATE wp_postmeta SET meta_value = replace(meta_value, '/home/public_html/images/', '') WHERE meta_key='_wp_attached_file';Code language: JavaScript (javascript)

Résultat : 173 rows affected.

Ah oui quand même, 173 enregistrements affectés, cela fait quand même quelques dizaines d’articles sur lesquels les images ne s’affichaient pas. Je n’ai aucune explication à ce phénomène, d’autant que certains de ces articles ont plusieurs années. Sûrement une mauvaise configuration de ma part à un moment donné, je suppose.

Enfin, tout cela pour dire que garder un oeil sur GWT, cela peut être utile pour débugger aussi.

Performance du site : PageSpeed à 99%

8 April 202224 janvier 2013 by Matt Biscay · Lecture: 1 minute

Ah, ce moment magique durant lequel tu constates que ta note PageSpeed monte à 99%, via GTmetrix :

C’est beau, sachant qu’au niveau CSS, c’est la barre WordPress du haut qui génère l’overhead.

Prochaine étape : mettre les fichiers statiques sur un sous-domaine cookieless.

PHP : solution pour l'erreur "preg_match(): Compilation failed: invalid range in character class" photo

PHP : résoudre l’erreur “function eregi() is deprecated”

8 April 202218 décembre 2012 by Matt Biscay · Lecture: 2 minutes

Il vous est peut-être déjà arrivé de tomber sur ce message d’avertissement :

Function eregi() is deprecated.

En fait, “deprecated” signifie que les versions récentes de PHP considèrent cette fonction comme obsolète, c’est un peu comme si la fonction ereg() n’existait plus.

Par conséquent, mieux vaut dorénavant utiliser la fonction preg_match qui a pris sa place.

La fonction ereg() ou eregi() est donc remplacée par la fonction preg_match() depuis PHP 5.3 :

$is_image = eregi( "jpg|gif",$file_type );Code language: PHP (php)

devient donc :

$is_image = preg_match( “~jpg|gif~i”,$file_type );Code language: PHP (php)

Voici la liste des fonctions devenues obsolètes sous PHP 5.3 :

call_user_method() (use call_user_func() instead)
call_user_method_array() (use call_user_func_array() instead)
define_syslog_variables()
dl()
ereg() (use preg_match() instead)
ereg_replace() (use preg_replace() instead)
eregi() (use preg_match() with the ‘i’ modifier instead)
eregi_replace() (use preg_replace() with the ‘i’ modifier instead)
set_magic_quotes_runtime() and its alias, magic_quotes_runtime()
session_register() (use the $_SESSION superglobal instead)
session_unregister() (use the $_SESSION superglobal instead)
session_is_registered() (use the $_SESSION superglobal instead)
set_socket_blocking() (use stream_set_blocking() instead)
split() (use preg_split() instead)
spliti() (use preg_split() with the ‘i’ modifier instead)
sql_regcase()
mysql_db_query() (use mysql_select_db() and mysql_query() instead)
mysql_escape_string() (use mysql_real_escape_string() instead)
Passing locale category names as strings is now deprecated. Use the LC_* family of constants instead.
The is_dst parameter to mktime(). Use the new timezone handling functions instead.Code language: JavaScript (javascript)

HTML5 : corriger l'erreur "The frameborder attribute on the iframe element is obsolete. Use CSS instead." photo

WordPress : valider le code oEmbed Youtube en HTML5

26 September 202428 novembre 2012 by Matt Biscay · Lecture: 2 minutes

Le problème : le code des vidéos n’est pas valide en HTML5

Maintenant que nous avons mis à jour le code des oEmbed Youtube, nous allons rendre le code de l’iframe valide. Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

<iframe src="https://www.youtube.com/embed/Gvh2Zo7UL6E" width="660" height="371" frameborder="0" allowfullscreen="allowfullscreen"></iframe>Code language: HTML, XML (xml)

Résultat:

Or le petit problème, c’est que tout cela n’est pas vraiment valide au niveau W3C et je commence à me lasser de voir ces erreurs de validation sur toutes les pages du site avec des vidéos :

Erreur 1 : Attribute allowfullscreen not allowed on element iframe at this point.
Erreur 2 : The frameborder attribute on the iframe element is obsolete. Use CSS instead.Code language: JavaScript (javascript)

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

Voici donc la solution que j’ai mise en place sur le site : je filtre le code oEmbed de WordPress de manière à retirer le tag allowfullscreen qui n’a rien à faire là et à supprimer l’attribut frameborder, que je remplace par un style="border: none".

Éditez le fichier functions.php de votre thème et ajoutez-y cette fonction:

<?php
/*
|-----------------------------------------------------------------------
| Sky oEmbed Filter by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| The sky_oembed_filter() function attempts to validate WordPress 
| video oEmbeds for HTML5.
| $return is the normal HTML that the oEmbed process would return. 
| $data is the data received from the oEmbed call, in an object format. 
| $url is the original URL being queried for oEmbed info. 
|
*/
add_filter('oembed_dataparse', 'sky_oembed_filter', 90, 3 );
function sky_oembed_filter( $return, $data, $url ) {
 	$return = str_replace('frameborder="0" allowfullscreen', 'style="border: none"', $return);
	return $return;
}Code language: HTML, XML (xml)

Notez que WordPress cache les résultats oEmbed dans la table postmeta donc après avoir installé ce code et si vous voulez vérifier que cela fonctionne, éditez un article pour que le postmeta se mette à jour.

Voilà, vos pages avec vidéos YouTube devraient maintenant être valides.

Mon laptop passe au SSD

10 March 202426 novembre 2012 by Matt Biscay · Lecture: 1 minute

Cette semaine, j’ai changé le disque dur de mon portable vieillissant (2005, souvenir de l’année de stage IUFM!) pour un disque dur SSD de 120GB.

J’avais lu que cela décuplait les performances et je dois dire que, même si j’étais sceptique avant l’installation, les résultats sont là : mon laptop démarre Linux Mint et est directement utilisable (bureau chargé) en moins de 30 secondes. Nickel.

Le temps de lancement des applications est divisé par 5 ou 6 je dirais. Particulièrement visible avec GIMP par exemple. Cet ordinateur retrouve ses performances d’antan!

C’est plus silencieux, plus rapide… pour l’instant je n’y trouve que des avantages. En fait, je suis tellement satisfait que je pense que le desktop va lui aussi bénéficier de cette petite cure de jouvence un de ces quatre.

Et je pense que ce jour-là, je laisserai tomber Ubuntu, probablement pour Mint.

HTML5 : résoudre l’erreur “keyword publisher is not registered” (validateur W3C)

8 April 202216 novembre 2012 by Matt Biscay · Lecture: 1 minute

Sur votre site ou blog, vous avez peut-être ajouté le widget ou bouton +1 de Google+, le réseau social de Google. Or le petit problème, c’est que le code fourni empêche la bonne validation du document.

Voici le code fourni par Google :

<a title="Google+" href="https://plus.google.com/114535411372700844744" rel="publisher nofollow">Google+</a>Code language: HTML, XML (xml)

et voici l’erreur renvoyée par le validateur W3C :

Keyword publisher is not registered

HTML5 étant toujours en cours de réalisation, les valeurs de la balise rel sont assez restreintes et on ne peut pas mettre tout ce que l’on veut sans déclencher l’erreur.

La solution est toute simple : il faut ajouter la valeur du rel en argument dans le lien, comme ceci :

<a title="Google+" href="https://plus.google.com/114535411372700844744?rel=publisher" rel="nofollow">Google+</a>Code language: HTML, XML (xml)

Et voilà, plus d’erreur lors de la validation.

WordPress : nettoyage de la base de données

16 November 201506 novembre 2012 by Matt Biscay · Lecture: 2 minutes

wordpress_icon_blue Avec le temps, les mises à jour successives et l’installation de différents plugins, la base de données de WordPress a tendance à prendre du poids, ce qui nuit aux performances. Voici donc comment lui faire bénéficier d’un petit régime.

N’oubliez pas de faire une sauvegarde de votre base de données avant de lancer ces requêtes. Backup now.

Nettoyage de `wp_postmeta`

Avant optimisation, ma table wp-postmeta faisait 12 403 enregistrements.

DELETE FROM wp_postmeta WHERE meta_key = '_edit_lock';
DELETE FROM wp_postmeta WHERE meta_key = '_edit_last';
DELETE FROM wp_postmeta WHERE meta_key = '_wp_old_slug';

Maintenant : 12 240.

Nettoyage de `wp_commentmeta`

On supprime tout ce qu’Akismet nous a mis dans la table wp_commentmeta :

DELETE FROM wp_commentmeta WHERE meta_key LIKE '%akismet%';

et on supprime toutes les entrées qui n’ont aucune relation avec wp_comments :

DELETE FROM wp_commentmeta WHERE comment_id NOT IN (SELECT comment_id FROM wp_comments);

Nettoyage de `wp_options`

Passage de 880 enregistrements à 476. WordPress crée ces entrées automatiquement et les purge occasionnellement, autant l’aider un peu.

DELETE FROM wp_options WHERE option_name LIKE '_site_transient_browser_%';
DELETE FROM wp_options WHERE option_name LIKE '_site_transient_timeout_browser_%';
DELETE FROM wp_options WHERE option_name LIKE '_transient_%';

← Précédent Suivant →

Étape 1 : configurer Apache

Principe de fonctionnement

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

Activation de PHP-FPM

Installation d’OptiPNG et JpegOptim

Optimisation des JPG

Problème : chemin erroné pour certaines images

Solution : MySQL

Le problème : le code des vidéos n’est pas valide en HTML5

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

Nettoyage de wp_postmeta

Nettoyage de wp_commentmeta

Nettoyage de wp_options

Nettoyage de `wp_postmeta`

Nettoyage de `wp_commentmeta`

Nettoyage de `wp_options`