[RÉGLÉ] Temps de chargement des polices Google Font

[Tortue Genial 69]

Hello,

En faisant quelques vérifications, je me rends compte que le temps de chargement des Google Font sur le template Helix Ultimate est assez long.
En tout cas pour ce site.

Voir ici : https://prnt.sc/19on1pn

Du coup je me demande si, malgré le fait que les polices soient proposées par défaut, cela ne vaudrait pas le coup de les installer et les charger en local depuis le site?
Avez-vous des idées, suggestions ou conseils à ce sujet ?

Merci
Laurent

[daneel]

Bonjour,

Effectivement, cela fait partie des préconisations que j'ai donné lors du joomladay virtuel.

Tu peux t'aider du diaporama disponible en téléchargement sur joomladay.fr si tu veux plus de précisions



Yann

[Tortue Genial 69]

hello Yann,

ok merci du retour

en effet j'avais pas encore eu le temps de revoir ta présentation en replay, j'y vais de ce pas

[Tortue Genial 69]

Re Yann,

J'ai lu ta présentation, nickel ça centralise pas mal de choses.
2 ou questions en passant :

• Quelle différence tu fais entre "Ajouter et configurer Cloudflare" et "Ajouter un CDN" ? N'est ce pas identique?
• Pour le type de CDN, des recommandations ou préférences d'après ton retour d'expérience (Cloud Front , etc...) ?
• Quid du coût d'après tes retours ?
• Si on prend un site hébergé en France, avec des utilisateurs et client Français uniquement, est-ce que avoir un CDN avec des points de présence hors du territoire est pertinent? pour de l'international c'est clair que oui, mais si j'héberge un site sur Paris et que la majorité de mes clients sont de Nice par exemple, est-ce que cela fait sens de servir les données via des relais hors de France?
• As-tu testé CDN combiné avec LiteSpeed chez Planet Hoster sur l'offre The World ? si oui ton avis?

Merci
Laurent

[daneel]

Hello

Non ce n'est pas identique car il y a deux types de CDN.

1. Ceux qui sont intermédiaires entre le navigateur et le site.

Le changement se fait avec les dns, ce qui est le cas effectivement de Cloudflare.

Mais cloudflare ne fait pas uniquement que du CDN, il y a aussi de nombreuses autres fonctionnalités d'optimisation, de sécurité et plus encore...
On peut définir des règles assez poussées et gérer le certificat ssl (y compris la sécurisation du navigateur au serveur d'origine).
Par exemple, il gère très bien les attaques Ddos ( déni de service ) et ce n'est pas pour rien que le tiers des sites dans le monde fonctionne avec cloudflare.

Pour la france, il y a plusieurs serveurs donc des points d'accès différents (l'ip est différente selon que l'on soit à nice ou paris) et par experience, on peut voir une diminution du nombre de requêtes du serveur (à peu près 5% en moyenne selon mes calculs), ce qui n'est pas négligeable.

2. Ensuite il y a les CDN qui sont en sous-domaine du site par exemple cdn.votresite.com

A la différence, c'est le contenu spécifique comme les images mais pas l'intégralité de la page html. Tout simplement, on utilise une extension joomla (ex. l'extension CDN de RegularLabs) pour gérer dynamiquement les medias qui seront répliqués sur les serveurs du CDN.

On associe le cdn en sous-domaine pour conserver le référencement des fichiers avec le domaine car au niveau du seo, les sous-domaine font partie du domaine principal.

Certains CDN sont inclus avec des prestations d'optimisation d'images. C'est à dire que tu insere normalement une image originale dans ton article et le service se charge automatiquement de créer les différentes vignettes qui seront stockés uniquement sur leur serveur, l'url de l'image sera changé dynamiquement en front par un groupe de vignettes de différentes tailles en srcset pour obtenir des images responsives donc optimisées selon la résolution du support (desktop, tablette, mobile). L'inconvénient étant de lier toutes les images à ces services saas car le jour où tu décide de ne plus utiliser ce type de service ou si celui-ci est abandonné, on perd les vignettes et le référencement des images.

On utilise également des CDN avec les serveurs de cloudfront d'amazon notamment le téléchargement de fichiers comme c'est le cas souvent avec des auteurs d'extensions ou de concepteurs de templates (ce qui évite de surcharger l'hebergement du site). Il existe également des CDN spécifiques pour le streaming de vos videos (par exmeple Akamai)

Et des librairies comme jquery ou certains fichiers js peuvent être mis librement en CDN depuis github initié par le projet jsDelivr ( https://www.jsdelivr.com/ )



3. Un choix personnel.

Cela n'engage que moi mais utiliser un CDN comme cloudflare me permet d'avoir des solutions beaucoup plus fonctionnelles et réactives sans dépenser un centime (l'offre de base étant gratuite). Cela me permet par exemple de réguler une augmentation de charge. Autrement il faudrait que je monte une stratégie de scalabilité, ce qui est tout à fait possible mais le coût serait différent. J'ai aussi la possibilité de réagir face à une attaque, les solutions de sécurité que j'ai sur mon serveur pourrait être largement suffisant mais l'utilisation de clouflare, c'est un choix que j'assume volontiers depuis des années (en fait depuis la création de cloudflare !).

Parfois les medias peuvent représenter une place énorme notamment dans la sauvegarde des sites surtout si les images existent en plusieurs formats et convertis en webp et la version jpeg est conservée pour des questions de compatibilité. Sur certains sites, j'ai choisis de les conserver indépendamment du site avec le CDN en sous-domaine donc de faire une économie de place lors d'une sauvegarde d'akeeba. En dehors d'un site correctement géré, il n'est pas rare aujourd'hui que celui-ci peut dépasser plusieurs gigas de données et donner des sueurs froides aux webmasters complétement dépassés.

De plus, si on propose des produits en téléchargement (par exemple vente de pdf ou de fichier audio), je préfère les mettre sur des serveurs sécurisés qui donneront une meilleure réactivité mais sans lien direct visible pour le visiteur (le site cache l'url qui est généré dynamiquement).

4. Pour Litespeed, cela à un sens de le combiner à cloudflare comme je l'ai expliqué précedemment mais ce n'est pas forcément nécessaire.

Si vous avez déjà des propositions de votre hebergeur comme un cdn ou des éléments de sécurité qui vont au delà des propositions d'hebergement, il faut forcément examiner au cas par cas.

De mon avis, l'offre "illimité" de PH à l'avantage de ne pas se soucier ce que représente la quantité de données à stocker mais il faut être moins exigeant sur le reste. Dans le cas de PH, je crois que c'est un bon compromis espace disque, performance, sécurité donc on part avec eux sur une meilleure solution que certains mutualisés mais toutefois avec des limites qui ne sont pas toujours explicites. Apparemment, il est possible d'utiliser cloudflare avec PH mais c'est déconseillé.

Je me garderai bien de les juger car je ne connais pas leur support. L'offre avec litespeed est une alternative à ceux qui recherchent plus de puissance mais attention aux limites de leur offre. Comme cela reste du mutualisé, il y a forcément un partage des ressources qui peut parfois devenir difficle à gérer malgré une offre supérieure.

5. Dans mon cas, je ne travaille qu'avec des serveurs équipés de disques dur SSD NVMe extremement rapides, limités physiquement en nombre de Go mais la performance est déjà assuré à la base. Les ressources CPU sont alloués et calculés selon les besoins. Evidemment, cdn, cloudflare et litespeed sont présents mais en renfort. Le sacrifice que je fait volontairement, c'est donc sur l'espace disque disponible.

J'ai par principe de ne pas faire de stockage inutile, malgré tout j'ai une stratégie de 30 jours de rétention sur des serveurs spécifiques (protégé mais moins rapide). Aussi, j'invite mes clients à mieux gérer l'archivage des données, y compris des e-mails et dans le respect de la réglementation européenne (RGPD).

6. En conclusion, il faut toujours se poser la question de ce que l'on a besoin réellement. Si votre hébergeur vous annonce que votre site consomme trop de ressources alors il faut évaluer ce que vous pouvez optimiser et si votre hébergement est finalement bien adapté à vos prérequis (joomla, extension et medias). Le cdn n'est qu'un moyen de plus dans l'optimisation que vous pouvez apporter à votre site tout comme télécharger les fontes sur le serveur.

[Tortue Genial 69]

Merci de ton retour très détaillé Yann

Concernant planet hoster et cloudflare, pour quelles raisons ce serait déconseillé.

Car j'ai contacté leur support pour avoir plus d'infos et voici leur retour :

Pour votre question avec cloudflare, l’offre the world va supporter cloudflare. Certains clients vont l’utiliser.

Par contre, il n’est pas possible de faire un whitelist d’ip sur nos infrastructures The World. Normalement, lorsqu’un bot tente
d’attaquer le serveur ou un login wordpress, nous allons bloquer l’ip après quelques tentatives. En utilisant cloudflare, ce sera
l’ip cloudflare qui sera bloqué. Cela peut causer des soucis avec des visiteurs légitimes qui vont recevoir un message ip bloqué.

Si vous passez par cloudflare, nous vous invitons à mettre la règle suivante en place (même si vous avez un joomla) :
https://support.cloudflare.com/hc/en...like-WordPress

Est-ce pour cette raison?

Pour https://www.jsdelivr.com/ ca semble très intéressant, quid de l'intégration avec Joomla ?

[Tortue Genial 69]

woluweb toi qui utilise aussi planet hoster, tu utilises cloudflare avec The World ?
Ou juste leur offre lite speed sans cloudflare ?

[daneel]

Est-ce pour cette raison?

oui en partie.

Ce n'est pas pour critiquer ou favoriser un hébergeur mais il y a juste une cohérence entre tes besoins et l'offre qui doit être adaptée.
Ce qui est important à mon avis, c'est de savoir évaluer justement si la sécurité est suffisante, si la performance est au rendez-vous, l'impact sur le référencement... et si le support donne satisfaction. En bref, ce que l'on attend d'un hébergeur !

Si leur configuration ne permet pas d'utiliser pleinement un service comme cloudflare, le tout c'est de savoir si tu en as réellement besoin, si l'hebergeur ne propose pas d'alternative comme leur propre cdn anycast.

Pour ce qui est de la performance, tu as pu voir que les "core web vitals" marquent la mesure pour tous (Yannick en a fait le sujet de sa présentation).
Et tous les anciens sites de tests comme GTMetrix se sont adaptés.

Donc vérifie, analyse régulièrement, tu pourras reprendre directement les recommandations sur la performance en les adaptant dans Joomla ou en piochant dans ma présentation.

Pour https://www.jsdelivr.com/ ca semble très intéressant, quid de l'intégration avec Joomla ?

jsDelivr est un CDN gratuit pour les fichiers open source. Etroitement intégrés à Github, cela permet de fournir automatiquement un service CDN fiable à presque tous les projets open source. En résumé, plutôt que de charger localement certaines librairies comme jquery, tu peux remplacer par une version du cdn. C'est valable pour jquery mais également pour tout autres fichiers de projet open source.

oui cela fonctionne et même avec d'autres cdn sur les fichiers statiques (images, fontes...) comme https://statically.io/

statically a diverses fonctionnalités que j'adore... :

Par exemple, quand je n'ai pas d'images pour certains articles, je choisis de générer le titre avec statically automatiquement :

https://cdn.statically.io/og/theme=d...niale%2069.jpg

Pour les images responsives, en laissant la liberté aux auteurs de publier leurs images même sans qu'elle soit retaillé
le plugin que je développe remplace l'url et génère les différentes vignettes simplement en indiquant la taille sans qu'elle soit stocké sur le site.

exemple :

[B]https://www.joomla.fr/images/news/imgs/0/BlogPost-Pics-3928-fr.png[/B]

devient

[B]https://cdn.statically.io/img/joomla.fr/h=250/images/news/imgs/0/BlogPost-Pics-3928-fr.png[/B]

en décomposant, cela donne https://cdn.statically.io/img/ suivi du domaine d'origine puis la taille et enfin le chemin relatif vers l'image.

Concrètement une fois l'url récupéré du cdn (voir le site de statically), dans joomla, tu peux utiliser une extension comme rereplacer ou ajouter quelques lignes de code pour effectuer l'insertion ou le remplacement des fichiers.

Perso, j'utilise des librairies pour divers projets soit dans le template, soit dans un plugin... Et dans les options que je développe, on retrouve donc la possibilité de prendre la version locale ou celle du cdn selon l'hebergement du site web (je fais souvent de l'accompagnement pour des agences ou client ayant déjà leur prestataire).

Mais là on déborde un peu de ta question initiale qui concerne uniquement les google fonts ! Cela ne me gène pas mais pour que ce soit plus lisible,
n'hésite pas à ouvrir d'autres discussions si tu veux des questions complétementaires sur les CDN et autres sujets d'optimisation.

[Tortue Genial 69]

ok merci beaucoup de ton retour j'ai bien pris note et je vais tester ça en effet