Performances et Optimisations

[Creastyle]

J'ouvre ce post pour partager nos expériences en terme de performance et optimisation d'Opencart.

Personnellement voici ce que j'ai fait ainsi que mes résultats :
1) Module Super Page Cache
2) Cache inclus dans le thème mais désactivation de Minify CSS et Minify JS malheureusement j'utilise un module de personnalisation de produit qui ne supporte pas que j'active ces deux fonctions.
3) Optimisation du Htaccess avec un ajout du code suivant

Code: Tout sélectionner

# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/pdf "access plus 1 week"
ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
ExpiresDefault "access plus 1 week"
</IfModule>
## EXPIRES CACHING ##

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

Header unset ETag
FileETag None

j'ai aussi fait la chasse aux polices d'écriture genre google font et je les ais remplacé par des polices déjà installées .

Voici mon résultat sur GTMETRIX, c'est très loin de ce que j'aimerais atteindre pour le moment :

Page Speed Grade: (95%) YSlow Grade: (79%)
Page load time: 4.53s
Total page size: 909KB
Total number of requests: 70

[LeorLindel]

Tu aurais pu réduire les lignes de ton .htaccess de la sorte

Code: Tout sélectionner

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php


Tu devrais utiliser aussi Dareboost qui est très complet pour déceler les erreurs.

[Creastyle]

C'est vrai je le fais de suite

[titi88]

Pour ma part, un des intervenants dans le cadre de la "refonte" de mon activité a (commencé) ou va voir cela. Le chargé de projet rentrant de congés demain de ses vacances de printemps, je fais le point à ce sujet aussi (et entres autres). Bref, il semble qu'il y ai de quoi faire de ce côté.
Je ferai aussi un retour une fois toutes les modifs faites en ce sens.

[LeorLindel]

Je vois que tu as souscrit un abonnement à Trusted Shops et à ce cas une réduction de l'optimisation est du à leur script.

Depuis plusieurs mois je suis en pourparler avec eux de sorte qu'ils sortent un module pour Opencart, je leur ai même signalé comment le concevoir et leur ai même offert mon aide. Ils m'ont répondu que leur programmeur allait s'en charger. Cela fait désormais plusieurs mois que cela en est au même point.
Un module est existant sur PrestaTruc et franchement, il n'y a vraiment de bien sorcier à le concevoir.

Peu d'éléments entrent en ligne de compte, il faut comme zones dans ce module :
- une zone de texte à entrer pour les langues de la boutique et en fonction du contrat souscrit avec eux, pour y entrer la clé (code) par langue souscrite,
- une zone de position en pixels en vue de placer le badge dans la hauteur de la page.
- et une zone d'activation du module.

Comme je disais, c'est un module assez simple.

Çà c'est la petite histoire relatant mes premiers contacts avec eux.

Maintenant pour le coté optimisation, cela devient bien plus copieux.

Ce fameux badge qui s'affiche sur ta boutique et qui comprend les avis des clients, nécessite de nombreux scripts et autres élément dont nous ne pouvons pas intervenir pour l'optimisation puisqu'il s'agit de script externes.

A l'heure actuelle, le taux d'optimisation de la boutique de mon client n'est pas à son quota maximum et la seule cause qui l'en empêche est du à Trusted Shops.
Je leur ai donc fait la liste des éléments qui empêchaient cette optimisation (et chaque élément de cette liste ne nécessite pas beaucoup d'effort de modification voire même très peu).
Cette liste leur a été envoyée en date du 2/04/2015, et je n'ai vu aucun changement sur ces modifications.

Pourtant si ils les effectuaient, cela ferait gagner beaucoup de points en optimisation.

Voici la liste que je leur ai fait parvenir :

Rapport d'optimisation de Dareboost
A - Vous devriez arrêter de compresser (gzip/deflate) vos images PNG
Certaines de vos images utilisent la compression gzip :
https://widgets.trustedshops.com/images/star_full.png
https://widgets.trustedshops.com/images ... ressed.png
widgets.trustedshops.com/images/e-trust[...]s_grey60_87-36.png
Les images au format png ne supportent pas la compression gzip.
Il est donc inutile d'effectuer des opérations de compression au niveau de votre serveur, et de
décompression au niveau client pour ce type de fichiers.
B - N'utilisez pas les expressions CSS
Les expressions CSS sont dépréciées et vous ne devez pas les utiliser car elles sont très
grourmandes en termes de ressources. En savoir plus.
Cette page contient 1 expression CSS :
1 expression dans le fichier https://widgets.trustedshops.com/css/style.css :
expression(eval(document.body.scrollBottom)
C - Le format GIF n'est pas le plus adapté pour 1 de vos images
Le choix d'un format adapté pour une image permet de réduire son poids.
Le format GIF
Le format d'images GIF est destiné aux images animées. Si vous n'utilisez pas d'animation, les
formats PNG ou JPEG seront plus adaptés, et moins lourds une fois optimisés.
Il semble que les formats PNG ou JPEG soient plus adaptés pour les images suivantes :
widgets.trustedshops.com/reviews/wid[...]1BFA26AA7047.gif (11ko)
D - Évitez l'utilisation de filtres AlphaImageLoader
Les ressources suivantes contiennent des filtres alpha :
https://widgets.trustedshops.com/css/style.css
Ce filtre propriétaire (destiné à IE < 7) permet de résoudre les problèmes liés à la semitransparence
des images PNG.
Il empêche l'affichage et bloque le navigateur tant que l'image n'est pas téléchargée et traitée.
Son utilisation n'est donc pas recommandée.
E - 7 requêtes provenant de partis tiers n'adoptent pas une politique de cache assez
longue
En permettant la conservation de vos ressources statiques plusieurs jours en cache, vous
diminuez la charge de votre serveur.
L'entête expires
Certaines de vos ressources utilisent l'en-tête HTTP Expires pour disposer d'une politique de
cache efficace, ce qui correspond à une bonne pratique. Cependant, vous devriez envisager
d'améliorer sa configuration pour profiter au mieux des mécanismes de cache. L'en-tête HTTP
Expires se présente sous la forme suivante :
Expires: Thu, 25 Dec 2014 20:00:00 GMT
Lorsque vous mettez en production une nouvelle version de votre site, pensez bien à
renommer les ressources statiques ayant été modifiées. En effet, si vous ne changez pas leur
nom, vos utilisateurs garderont les ressources stockées en cache, correspondant à l'ancienne
version. Ils risquent alors de se retrouver dans une version instable de votre page. Ce principe,
appelé versioning, est par exemple appliqué sur DareBoost.com. Nous intégrons une version
aux noms de nos fichiers :
dareboost.min.20140101.js
Voir les recommandations de Yahoo! sur le sujet.
Quelle configuration adopter ?
Nous vous conseillons de paramétrer l'en-tête Expires afin que la date mentionnée soit
comprise entre 2 jours et 1 an.
Cette page contient 7 ressources n'ayant pas une date d'expiration assez lointaine :
Note : vous ne pouvez pas modifier directement ces fichiers, car ils proviennent de partis tiers.
Vous devriez cependant considérer toute alternative possible à ces fichiers pour rester en
accord avec la bonne pratique.
https://www.google-analytics.com/analytics.js
widgets.trustedshops.com/js/X6D40782F9E[...]3F01BFA26AA7047.js
https://widgets.trustedshops.com/css/style.css
https://widgets.trustedshops.com/css/responsive.css
https://widgets.trustedshops.com/images ... ressed.png
widgets.trustedshops.com/reviews/widget[...]F01BFA26AA7047.gif
widgets.trustedshops.com/images/e-trust[...]s_grey60_87-36.png
F - Optimisez vos images sans perte de qualité
En choisissant un format approprié pour vos images et en les compressant, vous pouvez
libérer de nombreux octets de données.
Ressources provenant de partis tiers
Note : vous ne pouvez pas modifier directement ces fichiers, car ils proviennent de partis tiers.
Vous devriez cependant considérer toute alternative possible à ces fichiers pour rester en
accord avec la bonne pratique.
La compression sans perte de widgets.trustedsho[...].gif pourrait libérer 2.6 Ko (réduction
de 24%).
La compression sans perte de widgets.trustedsho[...].png pourrait libérer 1.1 Ko (réduction
de 41%).
Les images peuvent comporter des données inutiles à leur utilisation sur le web, ce qui peut
augmenter considérablement leur poids.
Des outils existent pour supprimer automatiquement ces données, sans perte de qualité, et
ainsi réduire le poids de vos images.
C'est le cas de jpegtran (format JPEG) ou OptiPNG (format PNG), recommandés par Google.
Rapport d'optimisation de PageSpeed Insights
A - Optimiser les images
En choisissant un format approprié pour vos images et en les compressant, vous pouvez
libérer de nombreux octets de données.
Optimisez les images suivantes.
• La compression sans perte de
https://widgets.trustedshops.com/…ts/X6D40782F9EE919EF83F01BFA26AA7047.gif
pourrait libérer 3 Ko (réduction de 27 %).
• La compression sans perte de
https://widgets.trustedshops.com/images ... opleft.png pourrait libérer 1,8 Ko
(réduction de 47 %).
• La compression sans perte de
https://widgets.trustedshops.com/images/box_two.gif pourrait libérer 1,2 Ko (réduction
de 78 %).
• La compression sans perte de
https://widgets.trustedshops.com/images/box_one.gif pourrait libérer 1,1 Ko (réduction
de 80 %).
• La compression sans perte de
https://widgets.trustedshops.com/images ... _87-36.png pourrait
libérer 771 o (réduction de 27 %).

Dès qu'ils auront mis les mains dans le moteur (si jamais ils les mettent) tu verras que ton taux d'optimisation s'en verra boosté.

[Creastyle]

Oui tu as parfaitement raison mais je pense que côté réactivité ils ont quelques wagons de retard, j'ai vus la time line sur gtmetrix c'est affreux ...

Je pense qu'en attendant je vais me contenter d'une simple image cliquable avec un lien vers ma page trusted shop que je changerais chaque semaine en fonction des avis ..

[Creastyle]

Hello la team
voici ma nouvelle performance:



j'aimerais optimiser : Use cookie-free domains mais je ne sais pas comment faire quelqu'un a une idée ?

[LeorLindel]

j'aimerais optimiser : Use cookie-free domains mais je ne sais pas comment faire quelqu'un a une idée ?

Voila ce que dit la doc de GTmetrix.

[Creastyle]

Oui mais quelque chose m'échappe, j'ai créé un sous domaine dans lequel j'ai placé mes images et le dossier catalogue ce domaine est donc sans www.

Par contre les images que m'indique GTMETRIX sont des images gérés par le dossier image d'origine, je ne peux pas placer ces images depuis un domaine static tu utilise le même theme que moi le menu banners ne permet pas l'ajout d'image depuis une url

[LeorLindel]

As-tu modifié tes fichiers config.php pour signaler le sous-domaine où se trouvent les images ?
http://forum.opencart.com/viewtopic.php?f=138&t=40573
http://forum.opencart.com/viewtopic.php?f=19&t=93551

[Creastyle]

oui tout à fait et celui de l'admin aussi