Cela fait depuis quelques temps que je pense écrire un article sur Yootheme Pro. Personnellement je l'utilise maintenant sur presque tous mes projets  et, quoique qu'il y ait beaucoup de choses que j'adore, il y a quelques élément que je verrai bien changer.

Pour ceux qui ne connaisse pas ce framework, Yootheme est un créateur de Templates, de nouveaux Templates sont disponibles régulièrement. Il existe maintenant environ une douzaine de templates, tous les mois ou deux un nouveau design est ajouté. Mais le plus important tient au fait que le framework vous permet de créer vos propres designs, beaucoup d'éléments de design sont  disponibles, ainsi vous n'avez pas besoin d'extensions tel que des sliders, block-layouts videos etc. Personnellement j'aime les designs épurés qu'ils fournissent, mais c'est ici une histoire de goûts. Tout est construit avec un builder visuel,  un écran divisé en deux, il est ainsi très faciles pour des utilisateurs expérimentés ou des débutants de maintenir le contenu.

De nouvelles  fonctionnalités sont ajoutées régulièrement au framework, même si il y ait déjà un backlog conséquent d'éléments à adresser. La résolution de ces éléments est attendue avec impatience par beaucoup (moi compris). Mais il y a aussi beaucoup de très bonnes choses qui arrivent. Les dernière versions focussent principalement sur l'amélioration des performances.  Beaucoup  de points que je décris dans la partie performance de mon blog (https://joomlaseo.com/performance) sont maintenant inclus et plus. Il est temps de passer en revue ces nouveautés.

Performance de Yootheme Pro

Quand vous accédez aux Advanced settings de Yootheme Pro, vous découvrez immédiatement quelques paramétrages de performance : 

• Lazy-loading réduit la bandwith, car les images ne sont chargées que lorsque quelles apparaissent dans la fenêtre de votre navigateur

• Next-gen images permet d'appliquer le format WebP  aux images pour les navigateurs qui le supportent. Ces images se téléchargent alors très très rapidement. Pour les autres navigateurs les images se téléchargent comme l'accoutumé . 

Ces paramétrages peuvent être utilisées si ils vous conviennent, dans le cas contraire désactivez les. 

Les polices de caractères de Google enregistrées localement

Une nouvelle fonctionnalité formidable a été ajoutée, les polices de caractère de Google sont maintenant converties et stockées en police locale au lieu d' être téléchargées depuis le serveur de Google. Souvent les polices Google ralentissent la vitesse de sites, c'est maintenant un problème résolu. C'est  une fonctionnalité que je n'ai pas vue dans les framework d'autres templates, préalablement j'étais obliger de faire une configuration moi même en utilisant des procédures compliquées. J'ai constaté immédiatement un gain de performance après la mise à jour de la version 1.12 vers la version 1.23 (notez que que vous devez ouvrir et fermer la section Style pour activer cette nouvelle option) : 

Avant la mise à jour :

Après la mise à jour :

Srcset-served images 

Un autre point sur lequel Yootheme  maximise la performance est celui des images. Il vous encourage à télécharger vos images en grande résolution pour laisser le framework se charger du dur labeur de l'optimisation de vos images. Cette image est ensuite copiée en différentes tailles qui sont adaptées à  l'appareil détecter par le navigateur. Ces versions copiées sont située dans le répertoire /template/cache/. Ce qui permet de s'assurer que les ordinateurs de bureau reçoivent la version de grande résolution alors que les smartphones reçoivent une version plus petite pour une performance optimale. Les images optimisées sont comprimées sans perte de netteté et sont beaucoup plus légère que les originales uploadés (à moins que vous n'utilisiez déjà la compression d'images en utilisant d'autres techniques). La fonctionnalité Srcset est particulièrement utile pour les images de décoration et les larges images en background. Cette fonctionnalité réduit de façon drastique le poids des images pour les smartphones. J'ai testé l'un de mes sites et la version smartphone est considérablement plus légère que celle pour les ordinateurs de bureau :  

Analyse de GTmetrix.com pour un ordinateur de bureau :

Et le même site, en mode Google Android sous smartphone : 

Images & SEO 

D'un point de vue SEO (référencement naturel), j'ai quelques remarques : habituellement vous avez une image située dans un répertoire du type  /images/image-xxx.jpg qui est aussi celui qui est indexé par Google. Maintenant l'image est seulement disponible depuis /template/cache/image-xxx-34tjtjtj5tj.jpg. Franchement j'aurai aimé voire que la source de l'image soit celle indexée, particulièrement si j' ai fait moi-même l'optimisation de cet image. Cela ne veut pas dire que ces images ne se font pas indexées, mais elles sont indexées dans le répertoire cache, avec une chaine aléatoire ajoutée. Si le cache de Yootheme est effacé, il semble que la même chaine aléatoire soit recrée de ce que j'ai pu constater, ce qui une bonne chose, car autrement l'URL renvoyerait une erreur.

Dans la plus part des cas je ne serait  pas plus inquiet que cela, mais c'est une chose à garder à l'esprit. J'ai des sites qui contiennent des images qui génèrent beaucoup de trafique, dans ce type de cas je veux garder le control  total sur le fait que je puisse ajouter des images dans un texte ou des champs HTML au lieu du champ image du Page-Builder.  C'est la seule façon de contourner les optimisations d'image de Yootheme Pro.

Page d'erreur 404

D'un point de vue SEO, il y a une astuce pour vous permettre de customiser votre page d'erreur 404. il existe par défaut une page 404, mais elle est quasiment  vide de contenu et manque d'élément de navigation, pied de page etc... Cependant en utilisant la fonctionnalité de child-themes, paramétrer une page 404 devient très simple : 

• Premièrement créez un article qui contiendra le texte que vous souhaitez présenter à vos internautes. Dans l'onglet publication de l'article  pour le champ Robots sélectionnez  Noindex, No follow ou Noindex, Follow puis sauvegarder votre article.
• Notez l'ID de l'article (dans la dernière colonne qui visualise la liste des articles). Dans notre exemple disons que l'ID est 999
• Dans le répertoire  /templates/ créez  un nouveau répertoire nommé yootheme_mytheme. La dernière chaîne peut être customisée.
• Rendez -vous dans le template setting, puis Settings, puis sur Advanced. Pour le Child Theme, sélectionnez le child theme pour lequel  vous venez de créer des fichiers. Dans mon exemple il sera appeler MyTheme
•  Puis, dans le répertoire /templates/, créez un fichier vide nommez le error.php
• Editez le fichier error.php et ajouter le code suivant :

<?php
 defined('_JEXEC') or die;
 if (($this->error->getCode()) == '404') {
 header("HTTP/1.0 404 Not Found");
 echo file_get_contents(JURI::root().'index.php?option=com_content&view=article&id=999');
?>

Remplacer 999 par l'ID de votre article. Vous avez maintenant une belle page 404 customisée.

En bref

Je pense que Yootheme pro est un framework léger & flexible,  vous pouvez pratiquement vous débarrasser de toutes les extensions d'optimisation que vous utilisiez pour speeder vos pages. Si la roadmap est exécutée rapidement et leur support plus réactif,  je pourrai commencer à les aimer...

Cet article est une traduction libre du tutoriel de Simon Kloostra : Yootheme Pro review regarding performance & SEO