blog alpha design joomla

Le blog d' Alpha Design Joomla et autres ...

Yootheme Pro : Revue de ses Performances et du SEO

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.

yootheme page builder 

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 : 

paramétrage 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 :

Avant la mise à jour

Après 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 :

gtmetrix ordinateur de bureau

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

gtmetrix pour 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 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');
exit;}

?>

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

Commentaires (0)

Il n'y a pas encore de commentaire

Ajoutez votre commentaire

Pièces jointes (0 / 3)
Share Your Location

Ils nous ont fait confiance

Universités & organismes de recherche

L' INSERM - unité U999, Université Paris Sud - Centre Chirurgical Marie Lannelongue

The Center for Groundwater Studies - Australie

L 'ENSAE : École Nationale de la statistique et de l'administration

La Maison des Sciences de l'Homme Paris Nord , UMS de l'université Paris 8, de l'université Paris 13 et du CNRS

L' Institut Supérieur de Développement - ISD Flaubert

Monpellier RIO imaging (MRI), plate - Forme Technologique (PFT), labellisée IBiSA.

CNRS - INEE  Le Laboratoire d'Excellence Dispositif de Recherche Interdisciplinaire sur les Interactions Hommes-Milieux (LabEx DRIIHM)

Organismes publics

Ministère de la défense : État Major de la 3ème Brigade Mécanisée

La mairie de la ville de Marly le Roi

La mairie de la ville de Breuillet

La mairie de la ville de Thuir

L' Agence Locale de l'Energie de la métropole marseillaise

L' Institut de Formation en Masso-kinésithérapie de Montpellier - Centre Hospitalier Universitaire de Bellevue

Le Centre de Gestion de la fonction Publique Territoriale des Alpes de Haute Provence

La Capitelle - couveuse d'entreprises du Gard

Le Centre Social Intercommunal de Saint Quentin de la Poterie

Le collège & lycée Saint Charles

Le lycée Philippe Lamour

Le centre François Baclesse: Centre de Lutte Contre le Cancer (CLCC)

L' Etablissement Régional de Formations des Professions Paramédicale du Groupement d'Intérêt Public des Etablissement de Santé d'Avignon et du pays de Vaucluse

Entreprises

Astrium une filiale EADS No 1 européen et No 3 mondial de l'industrie spatiale

Messer France

Photonlines

Shânti Gestion

App-Line

Vincent et Mireille

Axiom Information

Galerie Art City

Le Château de Boisson

LM Control

Vagabonde International

Photonlines Energy

la Pisciculture la Croisière

FHSolution

NaturEditions

Etudions à l'étranger

E.P.A.

Microeconomix

Alatak

Jade Black Design

Une bague une destinée

Schmulb

Espace revêtements

Partenaire de réussite

Stylitek

Fun-Kart

The Crew Coach

Sanitval

Ateliers d'écriture de Virginie Lou

cam4you

SDB+

Armelle Bongrain - architecte d'intérieur

ECIM

Riveria Expat Consultants

Florence Thorez - Diététicienne Nutritionniste

Le Séchoir

Le Moulin de Bouydou

L' Espace de Formation Clinique et Psychanalytique

Cours de musique à Montpellier

Leads Planet

Agerix

Etudions à l'étranger

Biopreserv

Aloes RED

InfoTour

EverNew

Synalabs

Bureau d'Etudes Arlaud

Stage de musique été

Fermetures Neuvillaises

Linguapolis

Weblligence

ASD Protect

Véronique Crépaux

Françoise Léon

Inovtolerie

BlueSafe

Viasocial

Repco Marine

King Jouet

Dr Abbas

ER3M

Cryo'net

Vectoring Talents

Desir d'écrire

Dr Girardin

Installation yperreault

Viaortho

Viadentiste

Alice Sweet Home

Cannes property services

La méthode Silva

Les outils du mieux être

Pinceaux et Camaïeux

Viacoach

ASH Conciergerie

MC Coaching Pro

Argos communication 

Cpsforma

Hervé Graille - Architecte 

Adrien Baguet - Architecte

ONG / Associations

UNESCO: International Music Council

L' Association de Recherche en Soins Infirmiers

L' Union Internationale Contre la Tuberculose et les maladies respiratoires

Le Centre National des Risques Industriels

L' Institut International des Hautes Études en Psychanalyse

SurdiFrance : Association nationale de malentendants

La fondation Internationale de l'Hôpital Albert ScMhweitzer à Lambaréné

La Maison des Professions Libérales Ile de France

Le Conseil National de l' Enseignement Agricole Privé

La ligue Dauphiné Savoie de tennis

Le Conseil Permanent Régional des Associations d’Environnement

Le Syndicat des Podologues d'Île de France

La compagnie aux grands pieds

L'Espace de l'Ouest Lyonnais

Les Courants d'Airs

Nîmes Volley Ball

Le Club photo de Saint-Laurent-du-Var 

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour notamment réaliser des statistiques de visites