Dans la troisième partie de cette série, j'ai décrit comment optimiser les performances de votre site en optimisant les fichiers multimédias statiques. Ce mois-ci, un mois plus tard que prévu en raison d'une urgence familiale mineure, je parlerai de la mise en place des touches finales qui rendront votre site plus soigné et professionnel. Ils ont principalement à voir avec la façon dont votre site interagit avec les moteurs de recherche et les réseaux sociaux, mais il y a aussi un peu de performance à trouver là-dedans.
Gymnastique de construction de site
Si vous avez mis en œuvre toutes les recommandations jusqu'à présent, vous avez parcouru environ 90 % du chemin vers un site performant, bien classé et facile à entretenir.
Nous n'allons pas parler de techniques qui sont soit obsolètes (comme combiner et minifier CSS et JavaScript — sérieusement, ne faites pas ça !) ou fastidieuses pour la plupart des gens (comme essayer de supprimer les espaces et les retours à la ligne de votre sortie HTML ou création d'une application Web progressive). Les premiers sont inutiles, les seconds ont un public cible différent de celui des personnes qui suivent ces séries.
Au lieu de cela, nous allons parler de certaines choses que vous pouvez faire pour améliorer les performances de votre site et éliminer certains points de friction avec vos utilisateurs. Ce n'est généralement pas aussi simple que "installer ceci, cliquer dessus, bam, wham" mais cela en vaut la peine. Si vous le faites plusieurs fois, cela deviendra une seconde nature et vos clients seront impressionnés par les performances des sites que vous proposez.
Cartes OpenGraph et Twitter
Si vous avez déjà saisi une URL dans un réseau social tel que Facebook (et ses autres propriétés Web telles qu'Instagram, Messenger et WhatsApp), Twitter ou LInkedIn ou même une application de messagerie comme Apple Messages, Slack, etc., vous avez peut-être vu quelque chose d'intéressant événement. Vous obtenez une sorte de carte avec une image et une courte description du contenu de la page. Vous pouvez même obtenir des liens vers l'auteur ou l'éditeur du contenu sur ce réseau social. Comment fonctionne cette magie ? La réponse, mon ami, ne souffle pas dans le vent, ce sont les balises méta dans le code source HTML de la page. À savoir, les OpenGraph et Twitter Card .
Il y a deux façons de procéder : utilisez une extension tierce ; ou modifiez votre modèle et effectuez des remplacements de modèle.
La première méthode est sans doute beaucoup plus simple. Il existe plusieurs extensions pour Joomla pour vous aider. Un outil simple mais puissant à utiliser est Social Magick qui génère des images de carte de titre en utilisant une combinaison d'une image d'arrière-plan / superposition / masque, l'image du contenu complet de l'article et le titre - ou une combinaison de ceux-ci. Divulgation complète : ce plugin appartient à la société de ma femme et j'en suis le développeur principal. Un autre plugin que j'ai utilisé est Phoca Open Graph qui vous permet de configurer vos balises OpenGraph et Twitter Card pour votre contenu. Ce plugin utilisera l'image du contenu complet de votre article comme image de la carte. Les deux plugins rempliront les autres métadonnées OpenGraph à partir des informations de votre article.
Si vous développez votre propre modèle ou simplement vos propres remplacements de modèle, vous pouvez utiliser un code personnalisé complet. Cela vous donne un contrôle absolu mais est, bien sûr, beaucoup plus impliqué.
Le premier changement consiste évidemment à changer l'élément HTML racine de votre modèle pour inclure l'espace de noms pour OpenGraph, par exemple :
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" prefix="og: http://ogp.me/ns#">
Le lecteur avisé remarquera peut-être que nous utilisons un préfixe au lieu d'un espace de noms XML. Il s'agit de la méthode recommandée qui fonctionne sur les navigateurs les plus récents, c'est-à-dire Internet Explorer 10 et versions ultérieures.
Ensuite, vous devez créer des modèles de remplacement pour l'affichage de vos catégories et articles, qui incluent les balises OpenGraph et Twitter Card nécessaires. Par exemple, un remplacement de modèle d'article (templates/MY_TEMPLATE/html/com_content/article/default.php) pourrait ressembler à :
$imagesRegistry = new \Joomla\Registry\Registry($this->item->images ?? '{}');
$imageIntro = $imagesRegistry->get('image_intro', null);
$imageFull = \Joomla\CMS\HTML\HTMLHelper::cleanImageURL($imagesRegistry->get('image_fulltext', $imageIntro))->url ;
$canonicalURL = Route::_(ContentHelperRoute::getArticleRoute($this->item->id), true, Route::TLS_IGNORE, true);
$doc = $this->document ;
$ doc-> setMetaData ('et : type', 'blog');
$doc->setMetaData('og:title', $this->item->title);
$doc->setMetaData('og:description', $doc->getDescription());
$doc->setMetaData('og:site_name', $app->get('sitename'));
$doc->setMetaData('og:url', $canonicalURL);
$ doc-> setMetaData ('et : image', $ imageFull);
$doc->setMetaData('twitter:card', 'summary_large_image');
$doc->setMetaData('twitter:site', '@your_twitter_handle');
$doc->setMetaData('twitter:creator', '@your_twitter_handle');
$doc->setMetaData('twitter:description', $doc->getDescription());
$doc->setMetaData('twitter:title', $this->item->title);
Un remplacement de modèle de blog de catégorie nécessiterait également un code similaire au suivant :
$canonicalURL = Route::_(ContentHelperRoute::getCategoryRoute($category->id), true, Route::TLS_IGNORE, true);
$doc->setMetaData('og:type', 'blog');
$doc->setMetaData('og:title', $this->params->get('page_title', $category->title));
$doc->setMetaData('og:description', $doc->getDescription());
$doc->setMetaData('og:site_name', $app->get('sitename'));
$doc->setMetaData('og:url', $canonicalURL);
$doc->setMetaData('og:image', \Joomla\CMS\HTML\HTMLHelper::cleanImageURL($category->params->get('image'))->url);
$doc->setMetaData('twitter:card', 'summary_large_image');
$doc->setMetaData('twitter:site', '@your_twitter_handle');
$doc->setMetaData('twitter:creator', '@your_twitter_handle');
L'utilisation de remplacements de modèle fonctionne évidemment mieux si vous avez déjà l'intention de créer votre propre modèle, créant ainsi de toute façon de grandes quantités de remplacements de modèle. En cas de doute, optez pour la troisième méthode de plugins.
Prélecture DNS et préchargement des ressources externes
Quelque temps plus tôt dans la série, j'ai dit que les navigateurs ne savent pas par magie quels fichiers ils doivent demander lorsqu'ils chargent la page, ils commencent à charger les fichiers lorsqu'ils découvrent qu'ils en ont besoin ou vous les avez poussés vers le navigateur avec HTTP/2 Push . J'ai un peu menti. Vous pouvez donner quelques conseils au navigateur pour qu'il commence à préparer les choses pendant qu'il télécharge encore les premiers octets de votre contenu HTML à l'aide des DNS prefetch et preload link. Mais je pense que je m'avance.
Prélecture DNS
Lorsque j'ai décrit comment un navigateur récupère les fichiers CSS, JavaScript et image nécessaires pour rendre la page, j'ai utilisé un modèle simpliste où le navigateur envoie une requête à "votre serveur". L'hypothèse tacite était que "votre serveur" fait référence au même serveur et nom de domaine que celui à partir duquel il charge le contenu HTML. Sur la plupart des sites Joomla, c'est effectivement le cas. Cependant, votre site peut utiliser un CDN externe pour héberger certains fichiers multimédias, inclure des CSS de Google Fonts ou une ressource similaire, charger JavaScript à partir d'un service externe, etc. Ce sont toutes des ressources hébergées sur un nom de domaine différent de celui hébergeant votre site et délivrant son contenu HTML. Votre navigateur ne peut pas se connecter comme par magie à ces noms de domaine externes ; les noms de domaine doivent d'abord être résolus en une adresse IP au moyen d'une requête DNS.
Les requêtes DNS peuvent être lentes, en particulier sur les connexions à latence élevée telles que le satellite, le cellulaire ou tout simplement le WiFi partagé de mauvaise qualité – lorsque la pandémie est terminée et que nous pouvons recommencer à travailler depuis les cafés, les hôtels et les connexions WiFi des aéroports. Cela ajoute un délai au chargement de cette ressource qui peut varier de gênant (grands changements de mise en page) à carrément problématique (une inclusion JavaScript non différée et non asynchrone provoque le blocage du chargement de la page).
En utilisant la prélecture DNS, vous pouvez prévenir le navigateur, en lui disant essentiellement qu'il devra résoudre ces noms de domaine au cours du rendu de la page. Le navigateur peut effectuer les requêtes DNS pendant qu'il se tourne les pouces en attendant qu'un fichier JavaScript ou CSS bloquant se charge enfin, ce qui permet à l'utilisateur de gagner du temps dans les dernières parties du rendu de la page.
Une autre bonne raison de fournir l'indice de prélecture DNS est lorsque vous savez qu'une interaction de l'utilisateur entraînera le chargement d'une ressource à partir d'un site externe. Par exemple, si vous savez que cliquer sur un bouton J'aime entraînera une connexion au nom de domaine d'un réseau social, il est logique de dire au navigateur de résoudre le nom de domaine à l'avance pour que ce bouton apparaisse plus réactif à l'interaction de l'utilisateur.
La meilleure façon de le faire est dans le fichier index.php de votre modèle ou vos remplacements de modèle.
Par exemple, supposons que votre site charge une image de cdn.example.com chaque fois que l'utilisateur clique sur un bouton de la page. Faire en sorte que le navigateur résolve le DNS avant l'interaction de l'utilisateur permettra de gagner un temps précieux.
Si vous faites cela dans le fichier index.php de votre template, vous devez faire ceci :
$this->getPreloadManager()->dnsPrefetch('https://cdn.example.com');
Notez que ce code doit être utilisé au début du fichier index.php de votre modèle, avant de récupérer ou de sortir l'en-tête du document. L'objet gestionnaire de préchargement du document applique uniquement les modifications à l'en-tête du document.
À l'intérieur d'un remplacement de modèle, vous devez plutôt faire :
$this->getDocument()->getPreloadManager()->dnsPrefetch('https://cdn.example.com');
Pré-connexion
Faire en sorte que le navigateur effectue la requête DNS à l'avance est une bonne chose. Cependant, si vous savez que le navigateur devra certainement se connecter au site externe pour extraire les ressources utilisées pour rendre la page - telles que CSS, JavaScript, des images ou des fichiers de police - il est encore plus logique de dire au navigateur d'ouvrir une connexion HTTP au serveur externe et gardez-la à portée de main. Cela va plus loin que la prélecture DNS. Il effectue la résolution DNS, la poignée de main TCP (ouvre la connexion au serveur) et la négociation TLS (préparez-vous à utiliser HTTPS). Il laisse une connexion à ce serveur ouverte et prête à être utilisée.
Cela fonctionne de la même manière que le préchargement DNS, mais vous utiliserez à la place la méthode preconnect() du gestionnaire de préchargement.
Supposons que vous souhaitiez utiliser Google Fonts. Cela signifie que vous chargez le CSS depuis fonts.googleapis.com qui, à son tour, charge les fichiers de police depuis fonts.gstatic.com. Ainsi, dans la page index.php de votre modèle, vous devez faire :
$this->getPreloadManager()->preconnect('https://fonts.googleapis.com', []);
$this->getPreloadManager()->preconnect('https://fonts.gstatic.com', []);
De même avec la préconnexion, si vous faites cela depuis un remplacement de modèle, vous devez remplacer $this par $this->getDocument() car le contexte d'exécution est différent.
Préchargement des ressources
Dans certains cas, le ou les fichiers à charger ne sont pas immédiatement évidents pour le navigateur en analysant simplement le code HTML de votre page. Certaines ressources peuvent être référencées à partir d'un fichier CSS ou JavaScript. Lorsque cela se produit, le navigateur est, comme, "oh super, laissez-moi ajouter encore un autre fichier à ma liste de tâches de téléchargement". Cela peut avoir un effet négatif sur les performances de votre site car ce fichier peut être important, par exemple un fichier de police ou une image qui entraînera un changement de mise en page, ou un fichier JSON ou JavaScript hébergé en externe qui ne deviendra apparent qu'il est nécessaire lorsque le navigateur a terminé l'analyse et exécuter un autre morceau de JavaScript. Ce dernier est très courant lors de l'inclusion de code JavaScript provenant de services tiers.
Encore une fois, vous pouvez avertir votre navigateur en lui disant qu'il devra éventuellement récupérer un certain fichier. En lui donnant l'indice très tôt dans la section HEAD du document HTML, le navigateur peut optimiser la récupération de ce fichier, c'est-à-dire commencer à le télécharger en arrière-plan pendant que son fil principal est occupé à attendre et à analyser tout CSS et JavaScript bloquant sur la page.
Tout comme la prélecture DNS, le préchargement des ressources fonctionne en utilisant l'objet pre;pad manager de Joomla.
Par exemple, si je souhaite précharger un fichier de police à partir de la page index.php du modèle :
$this->preloadManager->preload('https://cdn.example.com/my_font.woff2', ['as' => 'font', 'crossorigin' => 'anonymous']);
Il est important de noter quelques éléments.
- Contrairement à la prélecture DNS, vous donnez une URL complète à un fichier.
- Les
asattribut est obligatoire et indique au navigateur l'intention d'utilisation de ce fichier, par exemple la police, l'image, la vidéo, etc. - L' crossorigin est essentiellement obligatoire pour les navigateurs modernes et leur indique comment gérer l'authentification des requêtes. Le définir sur anonyme n'envoie pas de cookies, d'authentification HTTP ou de certificats SSL côté client et est toujours autorisé. Le définir sur use-credentials transmet les cookies, l'authentification HTTP ou les certificats SSL côté client, mais est soumis à la politique de ressources d'origine croisée du site, ce qui peut effectivement empêcher la requête de passer, annulant ainsi vos efforts pour indiquer le navigateur.
- Toutes les ressources préchargées doivent être utilisées avec une "courte période de temps" qui, dans la plupart des navigateurs, est comprise entre 5 et 10 secondes. Si la ressource n'est pas utilisée dans ce délai, elle est expulsée du cache mémoire, ce qui signifie que le navigateur ne l'utilisera pas, et le navigateur imprime un message de colère dans la console - et vous êtes pénalisé dans les mesures de performance de votre page !
Permuter les polices
Il s'agit d'une fonctionnalité importante lorsque vous utilisez des polices personnalisées. Par défaut, le navigateur essaiera de deviner s'il doit afficher du texte alors que votre police personnalisée n'a pas encore été chargée et analysée. Si votre font-face CSS n'inclut pas de police système de secours, le comportement par défaut est "bloquer", ce qui signifie que votre navigateur n'affichera aucun texte avant de récupérer la police personnalisée que vous avez spécifiée.
Vous avez déjà visité un site qui affichait tout le texte pour toujours et vous étiez frustré de regarder une page principalement blanche avec quelques éléments d'image ici et là jusqu'à ce que pouf ! tout le texte était soudainement là? Ouais, c'est pourquoi.
Heureusement, vous pouvez dire au navigateur de faire quelque chose de différent en utilisant l' font-display attribut CSS Le régler sur swap signifie que le navigateur sera impatient et reviendra à la police par défaut en attendant le téléchargement de la police personnalisée. Lorsque la police personnalisée est téléchargée, même après plusieurs minutes, elle restitue la page avec la nouvelle police. Si vous le définissez sur repli, le navigateur sera également impatient, mais si la police personnalisée ne se charge pas en quelques secondes, elle restera fidèle à la police système de repli et ignorera complètement la police personnalisée.
Si vous utilisez Google Fonts, il suffit de remplacer /css ? avec /css2 ? dans l'URL et en ajoutant &display=swap. Par exemple, le chargement de Noto Sans devient :
<link href="https://fonts.googleapis.com/ css2 ?family=Open+Sans &display=swap " rel="stylesheet">
La meilleure chose à faire est de configurer de bonnes polices de secours et de définir l'affichage de la police sur swap. Pour les polices d'icônes, vous devez utiliser blockdonc ce qui rend est un espace vide pendant le chargement de la police de l'icône.
En parlant de polices de remplacement, vous devez inclure les polices système par défaut en tant que solutions de remplacement. Par exemple, les polices sans empattement peuvent avoir une valeur de repli de
BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif
qui couvre les appareils Apple plus récents et plus anciens, Windows 7 à 11, Android et les systèmes hérités, préférant l'interface utilisateur par défaut sans police serif sur chaque plate-forme. L'idée est que l'utilisateur verra une police familière au lieu de la police de secours sans empattement par défaut généralement plus laide. Sur les appareils Apple, par exemple, la police système San Francisco est utilisée par défaut au lieu de la police Helvetica.
Site icons (favicons)
À l'époque où les dinosaures parcouraient la terre et où 800x600 pixels étaient considérés comme "haute résolution" - c'était vers 2001 - il y avait des favicons de 16x16 pixels de 256 couleurs, destinés à l'origine à présenter un logo de site dans les de sites favoris Avance rapide de deux décennies et ces icônes ne sont plus de 16 pixels carrés, 256 couleurs ou limitées aux signets.
Les favicons sont bien sûr toujours utilisés pour les signets et dans les onglets du site, tout comme ils le faisaient il y a 20 ans. Ils servent également à afficher des icônes sur les lanceurs d'applications / écrans d'accueil des smartphones et tablettes lorsque vous créez un raccourci vers le site. De plus, ils sont utilisés par des services tiers pour créer un logo pour votre site. Si vous ne connaissiez pas cette utilisation, consultez ce CodePen tiers .
Pour compliquer les choses, il existe plusieurs tailles nécessitées par différentes générations de smartphones, tablettes, navigateurs et systèmes d'exploitation. Vous pouvez trouver une excellente référence pour tout cela sur https://github.com/audreyfeldroy/favicon-cheat-sheet
Si nous devions proposer une liste restreinte prenant en charge tous les appareils, navigateurs et systèmes d'exploitation de 2013 à 2022 inclus, nous proposerions ce qui suit :
- Un fichier ICO contenant 16x16, 24x24, 32x32, 48x48 et 64x64 pixels.
- Sept fichiers PNG avec les tailles 32x32, 128x128, 152x152, 167x167, 180x180, 192x192 et 196x196 pixels.
- Un PNG de 144x144 pixels et une couleur d'arrière-plan pour les vignettes du site Windows Modern UI qui sont obsolètes mais pas encore supprimées (et très utilisées dans Windows 7 que les gens encore pour une raison quelconque).
Les ajouter à Joomla nécessite de modifier le fichier index.php du modèle et de le mettre avant de sortir le HEAD du document HTML. En supposant que vos fichiers sont stockés dans images/logos/favicon nous avons le code suivant :
$doc = \Joomla\CMS\Factory::getApplication()->getDocument();
$ baseUrl = \ Joomla \ CMS \ Uri \ Uri :: base ();
// Bon vieux favicon carré 16px
$doc->addFavicon($baseUrl . 'images/logos/favicon/favicon-16.ico');
// Repli par défaut : 152 x 152 pixels
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-152.png', 'apple-touch-icon-precomposed', 'rel');
// Windows Modern UI tile
$doc->setMetaData('msapplication-TileColor', '#d43431');
$doc->setMetaData('msapplication-TileImage', $baseUrl . 'images/logos/favicon/favicon-144.png');
// All other sizes
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-196.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "196x196"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-192.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "192x192"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-180.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "180x180"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-167.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "167x167"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-152.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "152x152"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-128.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "128x128"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-32.png', 'icon', 'rel', ['sizes' => "32x32"]);
Le problème évident est que vous devez vous rappeler de faire tous ces changements qui peuvent être peu pratiques. Vous pouvez automatiser quelque peu cela en téléchargeant seulement deux fichiers dans votre dossier images/logos/favicon :
- favicon.ico que vous devez toujours générer vous-même mais que vous pouvez vous en tirer en n'incluant que l'ancienne icône 16x16px
- favicon.png un PNG transparent de 512x512 pixels avec la version haute qualité de votre logo
Vous pouvez ensuite utiliser ce code sensiblement plus compliqué pour générer automatiquement toutes les tailles nécessaires :
$doc = \Joomla\CMS\Factory::getApplication()->getDocument();
/**
* Générer des favicons.
*
* Vous devez télécharger deux fichiers dans le dossier $basePath, par défaut images/logos/favicon :
* - favicon.ico qui comprend des images 16x16, 24x24, 32x32, 48x48 et 64x64 pixels.
* - favicon.png un PNG transparent de 512x512 pixels
*
* @param string $basePath Chemin avec vos favicons par rapport à la racine de votre site
* @param int[] $favIconSizes Liste des tailles à générer par exemple [32, 57, 152], voir https://github.com/audreyr/favicon-cheat-sheet
* @param string|null $tileColor Couleur hexadécimale HTML pour l'icône de mosaïque IE Modern UI, null pour ne pas la générer
* @param int $defaultSize Taille du favicon de secours lorsque le navigateur ne demande pas de dimension spécifique
*/
$faviconGenerator = function (string $basePath, array $favIconSizes, ?string $tileColor, int $defaultSize = 152) use ($doc) {
$assureSize = function (int $size) use ($basePath) {
$filePath = JPATH_SITE . '/' . $basePath . '/favicon-' . $taille . '.png';
si (!file_exists($filePath))
{
essayer
{
(nouveau \Joomla\CMS\Image\Image(dirname($filePath) . '/favicon.jpg'))
->redimensionner($taille, $taille)
->toFile($filePath, IMAGETYPE_PNG, ['quality' => 9]);
}
capture (\Exception $e)
{
}
}
return basename($filePath);
};
$baseUrl = \Joomla\CMS\Uri\Uri::base(false) . $basePath . '/';
// Fallback .ICO file
$doc->addFavicon($baseUrl . 'favicon.ico?' . $doc->getMediaVersion());
// Default favicon
$doc->addHeadLink($baseUrl . $ensureSize($defaultSize) . '?' . $doc->getMediaVersion(), 'apple-touch-icon-precomposed', 'rel');
// Icône de vignette de l'interface utilisateur moderne d'Internet Explorer (anciennement Metro), Edge classique
si (!is_null($tileColor))
{
$doc->setMetaData('msapplication-TileColor', $tileColor);
$doc->setMetaData('msapplication-TileImage', $baseUrl . $ensureSize(144) . '?' . $doc->getMediaVersion());
}
// Tous les autres favicons
foreach ($favIconSizes as $size)
{
$doc->addHeadLink($baseUrl . $ensureSize($size) . '?' . $doc->getMediaVersion(), 'apple-touch-icon-precomposed', 'rel', ['sizes' => "{ $taille}x{$taille}"]);
}
};
$faviconGenerator('images/logos/favicon', [
// Référence de taille des favicons : https://github.com/audreyr/favicon-cheat-sheet
32, // Repli par défaut pour la plupart des navigateurs de bureau.
// 57, // Obsolète : écran d'accueil iOS standard (iPod Touch, iPhone première génération vers 3G), ancien Android
// 72, // Obsolète : iPad de première et de deuxième génération
// 76, // Obsolète : icône de l'écran d'accueil de l'iPad
// 96, // Obsolète : icône GoogleTV
// 114, // Obsolète : icône tactile de la rétine de l'iPhone avec iOS <= 6
// 120, // Obsolète : icône tactile de la rétine de l'iPhone avec iOS >= 7
128, // icône Chrome Web Store et petite icône d'écran Windows 8 Star
// 144, // Obsolète : vignette IE10 Metro pour site épinglé, iPad Retina avec iOS <=> 6
152, // iPad Retina avec iOS >= 7
167, // iPad Retina avec iOS >= 10 (en pratique, iOS utilisera toujours 152×152)
180, // Rétine iPhone
192, // Recommandation de manifeste d'application Web pour les développeurs Google
// 195, // Obsolète : icône Opera Speed Dial (ne fonctionne pas dans Opera 15 et versions ultérieures)
196, // Icône de l'écran d'accueil de Chrome pour Android
// 228, // Obsolète : icône Opera Coast
], '#d43431');
Ce code peut ne pas donner les meilleurs résultats dans toutes les circonstances. Les logos réduits peuvent apparaître un peu flous. Dans la mesure du possible, générez vous-même les PNG à partir d'une source vectorielle et réglez manuellement la taille des fichiers PNG avec ImageOptim ou un outil similaire.
Avis sur les analyses et les cookies
Puisque vous naviguez sur le Web comme nous tous, vous devez déjà être profondément frustré par les bannières de cookies qui jonchent tous les recoins du Web. Dans la plupart des cas, les seuls cookies applicables qui ne sont pas obligatoires sont ceux utilisés par les services d'analyse tels que Google Analytics. Si votre site doit afficher une bannière de cookies simplement parce que vous utilisez des analyses, réfléchissez : avez-vous vraiment besoin des fonctionnalités fournies par Google Analytics ou des services similaires ?
Dans la plupart des cas, vous n'avez pas besoin de ces fonctionnalités avancées. Si tout ce dont vous avez besoin, ce sont des analyses de base sur le nombre de personnes qui ont visité votre site, qu'elles proviennent d'une recherche organique ou d'un lien de parrainage et de quel pays elles viennent, vous n'aurez peut-être pas à chercher plus loin que votre panneau de contrôle d'hébergement qui propose très probablement déjà AWstats ou une solution similaire. Ceux-ci fonctionnent en analysant les journaux d'accès au serveur Web et ne nécessitent aucun cookie, donc pas de bannières de cookies sur votre site.
Une autre solution consiste à utiliser un service d'analyse auto-hébergé tel que Matomo (anciennement appelé Piwik). Il offre la plupart des fonctionnalités que vous obtiendriez avec Google Analytics, mais comme il s'agit d'une solution propriétaire conforme au RGPD et au CCPA, vous n'avez même pas besoin d'afficher une bannière de cookie. Il peut même importer des données de Google Analytics afin que vous ayez la continuité de vos données si cela est important pour votre cas d'utilisation commerciale.
En supprimant le besoin d'une bannière de cookies, vous rendez votre site plus facile à naviguer et beaucoup moins frustrant pour vos utilisateurs. Sachant que vous pouvez le faire sans sacrifier les données dont vous avez besoin pour prendre des décisions commerciales et sans forcer vos utilisateurs à partager leurs données avec un tiers qui gagne de l'argent en vendant des publicités personnalisées (Google est avant tout un réseau publicitaire, si vous ne l'aviez pas déjà remarqué) est stimulant.
Oh, oui, ne pas avoir à utiliser de bannières de cookies ? Cela améliore également les performances de rendu de votre page !
Dark Mode
Il est fort probable que le design de votre site n'existe qu'en une seule palette de couleurs et il y a de fortes chances qu'il s'agisse d'un thème "clair", c'est-à-dire un arrière-plan clair avec du texte sombre. Cela a été le cas pour la plupart des sites Web au cours des deux dernières décennies et correspond à ce que la plupart des systèmes d'exploitation n'offraient qu'en option.
Pour certains utilisateurs, ce jeu de couleurs est inaccessible et l'utilisation de couleurs d'écran inversées n'est tout simplement pas une très bonne solution. toutes les couleurs sont inversées, y compris les illustrations et les images, pour une expérience choquante. Proposer également une palette de couleurs sombres pour votre site le rendra plus accessible. Cela rendra également votre site plus attrayant pour les personnes qui préfèrent simplement les combinaisons de couleurs sombres aux couleurs claires - un bon point à considérer si le public cible de votre site est les geeks et les joueurs.
Si votre modèle utilise Bootstrap 5, vous pouvez ajouter la prise en charge automatique du mode sombre avec mon plugin DarkMagic .
Dans mon blog onw, j'ai écrit plus sur ce qu'est le mode sombre, pourquoi et comment l'utiliser et j'ai fait une présentation sur le sujet du mode sombre . Je vais simplement créer un lien vers ces ressources au lieu de me répéter dans ce qui est déjà un très long article.
AMP
Lorsque j'ai commencé à travailler sur cette série d'articles, j'avais l'intention de recommander AMP (Accelerated Mobile Pages) pour votre site. Je n'en suis plus si sûr.
Si vous ne le saviez pas déjà, AMP est à peu près un sous-ensemble de HTML avec quelques bizarreries qui accélèrent le chargement sur les appareils mobiles - ou, du moins, semblent le faire. C'est beaucoup plus restrictif qu'un site responsive classique. L'attrait de la norme AMP est que Google donne la priorité au contenu AMP dans les carrousels de résultats de recherche lorsqu'un utilisateur effectue une recherche à l'aide de l'application Google sur un smartphone.
L'inconvénient est que AMP est très spécifique à Google et n'est pas pris en charge en dehors de l'écosystème Google. De plus, les personnes cliquant sur les résultats de recherche pointant vers les pages AMP de votre site verront google.com dans la barre d'adresse de leur navigateur au lieu de votre site. J'ai l'impression que ce sont des inconvénients majeurs qui vous isolent de votre public.
Le fait qu'un membre du comité consultatif AMP ait récemment démissionné parce qu'il estimait que Google avait pratiquement détourné l'ensemble du projet AMP pour son propre profit et que le procureur général du Texas avait intenté une action en justice antitrust contre Google, ce qui mettrait fin au traitement préférentiel d'AMP. dans le carrousel de recherche me font me demander s'il y a un intérêt à introduire AMP sur votre site. D'après mon expérience, l'intégration est tout sauf simple si vous souhaitez créer votre propre modèle personnalisé pour vos pages AMP.
Enfin, d'après les analyses que j'avais recueillies sur mon propre site, AMP n'apporte pas vraiment autant de trafic qu'il est censé le faire. La plupart de mon trafic provient de liens directs provenant d'autres endroits, d'une recherche organique menant à mon modèle réactif habituel et aux médias sociaux. L'AMP était à peine un point dans le radar des sources de trafic.
Ainsi, au lieu de vous expliquer comment intégrer AMP sur votre site, je vous dirai que vous ne devriez probablement pas le faire. Cependant, si vous êtes déterminé à l'implémenter, il existe des solutions pour Joomla . J'ai utilisé wbAMP mais je dois vous avertir que la création d'un modèle personnalisé est assez compliquée. Entre l'écriture du premier brouillon de cette série et aujourd'hui, j'ai fini par supprimer AMP de mon site.
