Optimisation d'un site joomla 4.1 avec Helix Ultimate et SPPB

[herve]

Bonjour
J'ai passé pas mal d'heures à essayer d'optimiser un site pour qu'il s'approche des 90.
J'oscille entre 68 et 72 pour l'indice des performances
Plus en détail:

1. First Contentful Paint :3.6 s
2. Time to Interactive : 5.0 s
3. Speed Index: 5.2 s
4. Largest Contentful Paint :4.3 s

C'est un site de quelques pages chez Planete Hoster fait avec joomla 4.1.2, Helix Ultimate 2.0.7 et SPPB pro 3.8.6. Je pense que les résultats proviennent essentiellement de ces 2 extensions.
J'ai essayé plein de paramétrage différent (un par un) des extensions de cache, gzip de joomla, htaccess en applicaquant principalement les recommandations reçues sur ce forum, GG et sur l'article suivant:
Les recommandations du magazine https://magazine.joomla.org/all-issu...basic-settings étant :

• Combinaison de fichiers, minification de fichiers, GZipping de fichiers et déplacement du chargement JS/CSS vers le bas du document HTML. Ne faites rien de tout cela. N'utilisez aucun plugin qui ne le fasse pas
• ne pas compresser vos fichiers statiques (JavaScript et CSS) à la volée. Réduire les fichiers JavaScript et CSS à l'aide de code PHP est complètement contre-productif.
• Déplacer les fichiers JavaScript de l'en-tête vers le bas de la page peut poser problème.

Comme cela vient du développeur reconnu de akeeba j'ai tendance à ne pas remettre en question ... néanmoins je ne vois pas comment sans autre paramétrage que je ne puisse pas améliorer réellement le score sans pourtant bien sûr et pinailler pour aller au dessus de 90 qui probablement nécessiterait de changer de thème ou se passer d'extension !!

Les conseils de GG:
Des ressources bloquent la première visualisation (first paint) de votre page. Envisagez de diffuser des feuilles JS/CSS essentielles en ligne et de différer la diffusion de toutes les feuilles JS/de style non essentielles.
Joomla
Divers plug-ins Joomla peuvent vous aider à aligner des éléments critiques ou à différer le chargement des ressources moins importantes.
==> c'est là ou je me demande l'amélioration par configuration d'Helix ou ajout de nouvelles extensions?

Réduire le temps de réponse initial du serveur
Le temps de réponse du serveur pour le document principal doit rester court, car toutes les autres requêtes en dépendent.
==> bon là c'est mal barré, je viens de passé des jours à faire ce site que je ne vais pas remettre en question, d'autres paramètres du cahier des charges devant être pris en compte

J'ai demandé des conseils à PH qui me renvoit vers ... moi ou ce forum

Comme il y a des dizaines de combinaisons possibles, j'aimerai savoir ce que vous recommanderiez pour améliorer le score de performance (>80 ?) dans les paramètres suivants

=== ACTUELLEMENT

PH
Par default mod_deflate, mod_expires, Mod_redirect sont actif.
PHP: 7.4 ou 8.0 n'améliore pas vraiment !
Acteullement hébergement Cpanel mais je ne sais pas si c'est mieux ou ce qu'il faudrait changer avec NOC ?

Joomla
Compression GZIP= Oui (mais je n'ai pas constaté d'amélioration majeur à l'activation, est-ce parce que le module est activé chez PH ?)
Cache: désactivé: j'ajoutterai à la fin peut-être plutôt le plugin de page cache car si très peu mis à jour (1fois/mois) sinon sur d'autres sites avec la même configuration mais avec mise à jour régulière, ce sera remplacé par le cache conservateur!

Helix Ultimate et SPPB
Aucun paramétrage actif

Htaccess
J'ai enlevé dans le htaccess initial car comportement étrange !!

## These directives are only enabled if the Apache mod_headers module is enabled.
## This section will check if a .gz file exists and if so will stream it
## directly or fallback to gzip any asset on the fly
## If your site starts to look strange after enabling this, and you see
## ERR_CONTENT_DECODING_FAILED in your browser console network tab,
## then your server is already gzipping css and js files and you don't need this
## block enabled in your .htaccess
<IfModule mod_headers.c>
# Serve gzip compressed CSS files if they exist
# and the client accepts gzip.
RewriteCond "%{HTTP:Accept-encoding}" "gzip"
RewriteCond "%{REQUEST_FILENAME}\.gz" -s
RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]

# Serve gzip compressed JS files if they exist
# and the client accepts gzip.
RewriteCond "%{HTTP:Accept-encoding}" "gzip"
RewriteCond "%{REQUEST_FILENAME}\.gz" -s
RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]

# Serve correct content types, and prevent mod_deflate double gzip.
RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]

<FilesMatch "(\.js\.gz|\.css\.gz)$">
# Serve correct encoding type.
Header append Content-Encoding gzip

# Force proxies to cache gzipped &
# non-gzipped css/js files separately.
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>

A la fin du htaccess, j'ai rajoutté selon la recommandation de l'article

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript image/svg+xml
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_keep_workfiles No
mod_gzip_can_negotiate Yes
mod_gzip_add_header_count Yes
mod_gzip_send_vary Yes
mod_gzip_min_http 1000
mod_gzip_minimum_file_size 300
mod_gzip_maximum_file_size 512000
mod_gzip_maximum_inmem_size 60000
mod_gzip_handle_methods GET
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|xml|rb|py|svg|scgz)$
mod_gzip_item_include mime ^text/plain$
mod_gzip_item_include mime ^text/xml$
mod_gzip_item_include mime ^text/css$
mod_gzip_item_include mime ^application/xml$
mod_gzip_item_include mime ^application/xhtml+xml$
mod_gzip_item_include mime ^application/rss+xml$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^image/svg+xml$
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include handler ^server-status$
mod_gzip_item_include handler ^server-info$
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^image/.*
</IfModule>


<IfModule mod_expires.c>
# Enable expiration control
ExpiresActive On

# CSS and JS expiration:
ExpiresByType text/css "now plus 1 year"
ExpiresByType application/javascript "now plus 1 year"
ExpiresByType application/x-javascript "now plus 1 year"

# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 year"
ExpiresByType image/gif "now plus 1 year"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType image/webp "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
ExpiresByType application/smil "now plus 1 month"

# Font files expiration: 1 week after request
ExpiresByType application/vnd.ms-fontobject "now plus 1 week"
ExpiresByType application/x-font-ttf "now plus 1 week"
ExpiresByType application/x-font-opentype "now plus 1 week"
ExpiresByType application/x-font-woff "now plus 1 week"
ExpiresByType font/woff2 "now plus 1 week"
ExpiresByType image/svg+xml "now plus 1 week"

# Audio files expiration: 1 month after request
ExpiresByType audio/ogg "now plus 1 month"
ExpiresByType application/ogg "now plus 1 month"
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/mp3 "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"

# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"
</IfModule>

<IfModule mod_headers.c>
Header always set Strict-Transport-Security "max-age=31536000" env=HTTPS
</IfModule>

[woluweb]

Assigne une page du site au template Cassiopeia (p ex un article normal, pas SPPB) et vois le score.

Perso avec Cassiopeia (ou même avec Yootheme que je viens de tester sur un nv site) je suis à 100% ou proche.

Je suspecte le template JoomShaper ET SPPB d'être des usines à gaz qui ralentissent.
Mais là tu auras un point de comparaison : même site, même serveur mais Cassiopeia.

[Helloo]

...C'est un site de quelques pages...

Bonjour,

Je me demande toujours s’il est vraiment nécessaire d’installer des « usine à gaz » juste pour quelques pages.

Je vous souhaite de bonnes pâques

[herve]

Bonjour
Oups déjà des réponses alors que j'allais précisé ma demande.
Merci pour vos remarques rapides (pour infos je suis passé pour l'indice de perf ~80 sans Helix mais avec SPPB). J'envisage l'utilisation de Cassiopeia sur une site à plus fort traffic mais pas sur celui-là. Je ne doute pas une seule seconde que le score serait bien meilleur et je suis aussi persuadé que Helix + SPPB rajoutte beaucoup de script !Par contre je ne vois pas de corrélation entre le nombre de page à réaliser et le thème à choisir, il y a toujours d'autres besoins. J'espère que vous comprendrez qu'en l'état je ne vais pas y passer énormément de temps pour différentes raisons.
J'envisage plus tard améliorer et optimiser un peu: fontes en local, dimensions d'images mais pas maintenant.

Je souhaite juste avoir des remarques ou conseils sur les points de ma configuration actuelle qui pourrait être améliorer avec un ratio efficience/temps important ;-)
Notamment paramètrage d'Helix, joomla ou htaccess

[woluweb]

teste qd même une page sans Helix et sans SPPB, juste pour le test.
Pcq si même là tu n'as que 80% alors c'est qu'il y a peut-être qqch au niveau du serveur (une lenteur ou que sais-je).
Si tu as 100% ou presque, alors on sait que tout est bon
- pour le serveur
- pour le htaccess
- pour la configuration générale (gzip, ...)

Sinon, donne un lien vers ton site si tu peux.
Pcq là on n'a aucune idée de ce qui te coûte des % de performance. Si ça se trouve c'est les images pas optimisées... ou c'est les scripts SPPB... ou que sais-je

PS : autre chose : on te voit au JoomlaDay à Bruxelles ?

[herve]

Bonjour
Bien vu de tester le site avec le thème Cassiopeia sur une seule page sans SPPB sans cache ... J'obtiens indice de perf= 93
J'en tire la conclusion que sur certains sites, je passerai plutôt par Cassiopeia. J'ai vu que tu as écris un bon article sur le magazine et il y en a d'autres
As tu testé des extensions comme https://kickstartcassiopeia.com/ qui facilite le démarrage. J'imagine que tu préfères faire à la main. Néanmoins pour d'autres comme moi, cela peut-être un bon point de démarrage.
Bonne journée
ps: j'avai prévu de venir l'année dernière (j'avai proposé une intervention sur l'avenir de joomla) et cette année sur le site sur lequel je travaille actuellement avec un template Helix mais je crois que je ne vais pas y arriver dans les délais (et en plus problème de sous). J'espère bien l'année prochaine avec l'idée en attendant de peut-être lancer un groupe en local pour faire des interventions (JDLL par exempel). Je vais faire une annonce dans autre cat.

[woluweb]

En tout cas, même sans faire de présentation, être présent et échanger c'est déjà cool pour toi et pour tout le monde,

En tout cas, pour Cassiopeia, j'ai déjà rassemblé un max d'infos et d'astuces sur

https://slides.woluweb.be/cassiopeia/cassiopeia.html

si tu penses à d'autres choses, fais-moi signe !

Marc