Categorie : wordpress

Faire des boutons de partage sans plugin wordpress

Quelle galère ces boutons de partage… Personnellement ils ont toujours été une source de problème car moches ou bien fortement consommateur de ressources sur le blog notamment à cause des plugins qui font des appels dans tous les sens.

Bref depuis que twitter ne permet plus d’afficher le total des partages (même si en cherchant il y a une solution avec newsharecounts) l’affichage des totaux n’est plus si important. Je suis donc parti sur une solution sans plugin et très simple mais sans que cela soit moche non plus! Voici le moyen pour avoir ces boutons de partage sur votre blog!

Continuer la lecture


Supprimer tous les articles d’une catégorie sur un blog WordPress

Parfois on a besoin de faire un peu le ménage et ainsi supprimer tous les articles d’une catégorie qui ne correspondraient plus à la ligne éditoriale du blog. Si vous avez une dizaine d’articles vous pouvez toujours les supprimer à la main dans l’interface de gestion du blog mais en revanche si vous avez plus de 500 articles la chose se complexifie !

Après quelques tests et recherches le plus simple est donc de les supprimer directement dans la base de données Mysql du blog grâce à cette requête Mysql :

DELETE a,b,c,d
FROM wp_posts a
LEFT JOIN wp_term_relationships b ON ( a.ID = b.object_id )
LEFT JOIN wp_postmeta c ON ( a.ID = c.post_id )
LEFT JOIN wp_term_taxonomy d ON ( d.term_taxonomy_id = b.term_taxonomy_id )
LEFT JOIN wp_terms e ON ( e.term_id = d.term_id )
WHERE e.term_id =XXXX

XXXX est donc le numéro de la catégorie à supprimer! Si vous n’êtes pas certain faite cette requêtes mysql pour vérifier que ce sont les bons articles à supprimer :

SELECT *
FROM wp_posts a
LEFT JOIN wp_term_relationships b ON ( a.ID = b.object_id )
LEFT JOIN wp_postmeta c ON ( a.ID = c.post_id )
LEFT JOIN wp_term_taxonomy d ON ( d.term_taxonomy_id = b.term_taxonomy_id )
LEFT JOIN wp_terms e ON ( e.term_id = d.term_id )
WHERE e.term_id =XXXX

7 conseils pour optimiser le temps de chargement d’un site

On le sait tous l’optimisation d’un site est essentielle pour vos visiteurs qui prendront plus de plaisir à vous lire et à naviguer sur vos pages mais aussi pour le référencement car les robots iront plus vite et vous aurez une meilleure note sur le temps de chargement de vos pages. Il faut l’avouer l’optimisation d’un site est pénible, rasante mais vaut vraiment le coup! Voici quelques recommandations que je peux vous faire après avoir bien étudié le sujet.

Ne garder que l’essentiel

Le gain le plus facile est sans aucun doute enlever tout ce qui n’est pas nécessaire, et oui c’est le truc le plus con mais c’est certainement là que vous aurez le plus de chose à gagner! Il faut donc regarder vos pages et vous demander si vous utilisez bien tout ce que vous envoyez à votre visiteur. En regardant vous allez voir que le javascript et la feuille de votre formulaire de contact est chargé sur toutes les pages de votre site et pas uniquement sur votre page contact comme cela doit être (c’est un cas ultra classique pour les sites sous WordPress notamment).

Il y donc deux choses à faire :

  • virer les choses que vous n’utilisez pas
  • charger les scripts et feuilles de style uniquement sur les bonnes pages

Pour ceux sous wordpress vous pouvez utiliser des bouts de code comme cela pour optimiser le chargement des js et css de certains plugins qui ne sont pas utilisés partout sur le site, la solution est donc de ne les charger que sur les bonnes pages et donc les dé-enregistrer sur les autres :

Optimiser les images

Ah l’optimisation des images tout un roman… Premièrement il faut servir des images adaptées à la taille des écrans de vos visiteurs ainsi vous n’enverrez pas une image en 1980×800 à un utilisateur sur mobile. Ceci est globalement un peu complexe mais peut se gérer assez facilement avec le bon plugin. Personnellement sur Blogdecodesign.fr j’utilise le plugin « PB Responsive Images » et je suis très content du résultat même si forcément cela augmente un peu le besoin en espace disque sur le serveur.

Ensuite il faut compresser les images, encore une fois soit vous utilisez des images déjà compressées ou alors vous les recompressez sur le serveur mais c’est un peu plus complexe que de le faire initialement. Pour les compresser sur un mac j’utilise ImageOptim c’est pratique et efficace aussi bien avec des jpg que des png.

Pour les grosses images qui se situent sous la ligne de flottaison vous pouvez aussi différer l’affichage de l’image avec un code javascript defer comme celui-ci :

Chasser les requêtes mysql lentes

Vous ne le savez peut être pas mais sur votre site/blog vous avez certainement des requêtes sur vos bases de données, certaines requêtes peuvent être parfois lentes voir très lentes il faut donc les optimiser afin de réduire le temps de requête au maximum et ainsi gagner de précieuses secondes.
Pour trouver ses requêtes lentes cela n’est pas évident sauf si vous utilisez des plugins ou des scripts spécialisés dont c’est la fonction principale. Pour wordpress j’utilise l’excellent « Query Monitor » qui va vous afficher en live le temps consommé par chaque requête, c’est bien pratique pour savoir quoi optimiser en premier. Sur l’un de mes sites cela m’a permis de passer de 180 requêtes par pages à 70. Certes cela n’est pas le plugin qui va réduire le nombre de requêtes mais cela va vous permettre de réfléchir à la structure de vos requêtes, j’ai ainsi mutualisé beaucoup de requêtes identiques. En terme de gain en temps je suis passé de 2,5 secondes de requêtes MYSQL à 0,65 secondes vous voyez bien que l’optimisation était nécessaire!

Réduire votre feuille de style

La feuille de style est aussi un très bon angle pour optimiser votre site. Si vous regardez avec l’inspecteur de Google Chrome (clic droit « inspection de l’élément ») vous regardez dans l’onglet « audit » et vous allez constater que la page n’utilise que 15% des éléments de votre feuille de style, c’est logique mais cela vous coute en temps de chargement. Il faut donc partir à la chasse aux balises css que vous n’utilisez pas, pour moi j’ai pu réduire par deux le poids de ma feuille de style qui au fil des années s’était alourdie…

Pour les spécialistes vous pouvez aussi regarder du côté de Grunt Uncss pour optimiser efficacement votre feuille de style!

Vous devez aussi compresser votre feuille de style avec des outils en ligne qui font très bien le boulot comme cssminifier, cela permet de gagner facilement 25% de la taille du fichier.

Choisir des polices (font) légères

Certaines polices de caractères comme celles proposées par Google sont plus ou moins lourdes, il faut donc en choisir une légère et surtout ne pas sélectionner toutes les variations proposées…

Tip : Si vous voulez que votre site ne clignote pas au chargement de la page (flash of unstyled content (FOUC)), il faut mettre la feuille de style de google font au-dessus de la feuille de style de votre site.

Utiliser un système de cache

Si votre site peut être rendu momentanément statique il faut absolument envisager un système de cache, sur WordPress c’est facile de le faire avec un plugin spécifique. Aujourd’hui les plugins sont vraiment efficace et vous proposent même de minifier à la volée vos javascripts et vos différentes feuilles de style.

Utiliser un CDN

A le fameux CDN, tout le monde en parle mais pas beaucoup l’utilise et pourtant c’est un moyen de servir très rapidement vos fichiers statiques comme les images, les fichiers javascripts, et les feuilles de style. Pour ma part je pense utiliser prochainement Amazon Cloudfront en lien avec les fichiers que j’ai mis sur Amazon S3.

D’ailleurs à défaut de CDN vous pouvez déjà commencer avec un stockage des fichiers images sur Amazon S3, le temps de latence n’est pas celui d’un CDN mais cela certainement mieux que celui de votre serveur et cela lui donnera un peu d’air pour faire d’autres choses ! Sur l’un de mes sites j’ai hébergé 3 gigas d’images afin d’être plus efficace sur le chargement de celles-ci. Non pas que mon serveur ne soit pas à la hauteur mais il n’arrive pas à avoir la régularité d’Amazon S3.

Les outils en ligne pour tester

Afin de voir les impacts des différentes optimisations vous pouvez utiliser ces deux sites ils sont parfait et très pertinents :

Google Pagespeed Insights
Webpagetest

Voilà en ce qui concerne mon expérience personnelle sur le sujet de l’optimisation d’un site avec comme résultat un temps de chargement divisé pratiquement par deux, si vous avez des remarques ou d’autres amélioration n’hésitez pas à laisser un commentaire.


La check list essentielle pour la mise en place d’un site sous wordpress

Lorsque l’on monte un site tournant sous wordpress il a beaucoup de choses à faire et à mettre en place. Souvent on oublie des points essentiels et cela peut être pénalisant pour le référencement (SEO) ou bien pour le bon fonctionnement du site. Voici une belle checklist qui a le mérite d’être exhaustive et très bien faite, une liste à mettre dans vos favoris pour vérifier premièrement si vous n’avez rien oublié ou alors à utiliser pour mémoire lors de la mise en place de votre prochain site sous wordpress.


Optimiser facilement la version mobile de son blog

Aujourd’hui avoir une version mobile de son site internet est crucial, Google y attache d’ailleurs maintenant beaucoup d’importance, alors si vous n’avez pas encore de version mobile ou responsive vous savez sur quoi travailler dans les prochains jours. Le soucis avec les sites avec des versions responsive c’est le poids des images et donc a fortiori le poids total de la page et donc le temps de chargement des pages.

Avoir une version responsive est essentielle mais avoir une solution optimisée pour proposer des images adaptées à cette version est aussi très important. Le problème avec WordPress c’est que l’outil n’est pas forcément conçu pour répondre à cette problématique. En effet, lors de l’édition d’un article vous allez choisir des images et donc des tailles et formats adaptés à la taille de votre article pour un affichage sur un ordinateur de bureau. L’inconvénient c’est que votre version responsive « servira » des images trop grandes même si dans les faits elles seront redimensionnées automatiquement, l’utilisateur n’y verra que du feu mais il attendra que tout se charge… Et cela peut être long.

Sur Blog Deco Design j’avais un gros soucis sur la version mobile car ce blog présente beaucoup d’images par article et cela faisait au final quelques Mb d’images à télécharger. Je me suis dit qu’il devait bien y avoir une solution pour « servir » des tailles d’images adaptées au format utilisé par le visiteur (desktop, tablette ou smartphone), après quelques recherches j’ai trouvé un plugin pour wordpress qui est basé sur SLIR (Smart Lencioni Image Resizer). Cette technologie permet de créer des formats d’images correspondant à vos paramètres de media query, le tout à la volée et optimisée. Il suffit de renseigner vos paramètres media query dans les réglages du plugin :

Donc au final vous proposez à vos visiteurs des medias au bonne taille et optimisés en compression. L’usage du plugin « PB Responsive Images » est très simple et ne demande pas de compétences spécifiques pour la mise en place sur votre blog wordpress. De plus son usage est réversible, ce qui fait que si vous décidez de ne plus l’utiliser vous n’aurez pas à tout changer, et çà c’est bien pratique.

Pour télécharger PB Responsive Images c’est ici.

Notez que pour les blogs où les images sont hébergées sur un CDN (un sous domaine par exemple) je n’ai pas réussi à faire fonctionner le plugin.


Exclure une catégorie de l’option publicize de jetpack pour wordpress

Jetpack est une belle extension pour WordPress qui vous permet de gagner du temps et de l’énergie. Celle-ci permet de publier automatiquement vos articles sur vos réseaux sociaux préférés comme Twitter, Facebook ou encore Google+ ou bien d’intégrer une galerie d’image avec un effet sympathique, ajouter le module de statistique de wordpress, ou encore d’intégrer votre profil google+. Bref c’est un peu le couteau suisse de wordpress proposé par Automattic la société derrière wordpress.com.

Malheureusement, certaines options ont des dommages collatéraux comme l’option Publicize qui va publier tous vos articles sur les réseaux sociaux que vous avez connectés à votre blog. Donc si jamais il y a une catégorie que vous ne souhaitez pas publier vous ne pourrez pas configurer le plugin pour l’exclure. Heureusement, les développeurs d’Automattic ont proposé un bout de code qui va vous permettre de modifier le mode de fonctionnement de l’option Publicize. Ainsi il faut ouvrir le fichier functions.php de votre thème et d’y ajouter à la fin ces quelques lignes de code :

add_filter( 'wpas_submit_post?', 'vipx_wpas_submit_post', 10, 4 );
function vipx_wpas_submit_post( $ret, $post_id, $name, $connection ) {
 
    $categories = get_the_terms( $post_id, 'category' );
        if ( is_array( $categories ) )
            $categories = wp_list_pluck( $categories, 'slug' );
 
        if ( ! in_array( 'le-nom-de-votre-categorie-a-exclure', $categories ) )
            $ret = false;
 
    return $ret;
}

Et voilà comme cela je vais arrêter de vous embêter avec mon flux du refurb d’Apple!


Désactiver les mises à jour automatiques de WordPress

Depuis la version 3.7 de WordPress, les mises à jours se font maintenant automatiquement si la configuration de votre hébergement le permet. Cette solution de mise à jour automatique est pratique pour 99% des blogs qui souhaitent ainsi ne plus s’embêter avec les mises à jours. En revanche certains sites utilisant wordpress préféreront peut être ne pas faire ces mises à jour automatiquement pour par exemple vérifier que tout va bien fonctionner avant d’utiliser la dernière version de wordpress. Voici comment gérer au mieux cette option de mise à jour.

Sachez que par défaut, cette mise à jour automatique ne se fera que pour les mises à jour de sécurité, c’est à dire que si vous avez la version 3.7 de wordpress, le système se mettra à jour automatiquement dès qu’une mise à jour mineure sera disponible (3.7.1 par exemple). Si vous souhaitez aussi utiliser cette option de mise à jour automatique pour les versions importantes comme pour un passage de la version 3.7 à 3.8 par exemple il faudra éditer votre fichier wp-config.php situé à la racine de votre blog et ajouter cette ligne de code :

define( 'WP_AUTO_UPDATE_CORE', true );

Si en revanche vous souhaitez désactiver toutes les mises à jour il suffit d’ajouter cette ligne toujours dans le fichier wp-config.php :

define( 'WP_AUTO_UPDATE_CORE', false );

La commande par défaut est donc la suivante :

define( 'WP_AUTO_UPDATE_CORE', 'minor' );

Voilà comme cela vous savez maintenant comment gérer cette nouvelle option de mise à jour automatique de wordpress!


Connaitre le pourcentage de visiteurs utilisant un bloqueur de publicité

La publicité sur internet est l’un des business model le plus simple et le plus couramment utilisé par les éditeurs pour monétiser leurs contenus. Certains visiteurs utilisent parfois des solutions pour bloquer la publicité, la solution la plus connue étant Adblock qui est proposée comme une extension pour les navigateurs comme firefox ou google chrome.

Aujourd’hui l’objectif n’est pas de lancer le débat si oui ou non ce type de solution pour bloquer la publicité est acceptable ou non mais de vous proposer un outil pour connaitre la proportion de visiteurs de votre site utilisant ce type d’outil. Pour ceux qui ont un site sous wordpress, c’est assez simple il faut installer l’extension « BlockAlyzer – Adblock counter » qui va compter les visiteurs avec un bloqueur de publicité et vous proposer une comparaison avec des sites dans la même thématique.

Pour ma part j’utilise cette extension depuis quelques mois et 2803.fr est dans la norme en ce qui concerne les sites high tech avec 25% de visiteurs ayant un bloqueur de publicité. Ceci ne veut pas dire que vous perdez 25% de revenu car ces 25% de visiteurs n’auraient de toute façon pas cliqués sur des publicités… Mais cela vous permettra peut être de travailler sur des business models différents que ceux de la publicité classique.

Pour installer l’extension wordpress c’est ici.