Jump to content

Vitesse du site et google speed

Lyn&Or Bijoux
 Share

Recommended Posts

Lyn&Or Bijoux Explorer

Lyn&Or Bijoux

Posted
Posted

Bonjour, 

Je viens de voir que ma note google speed est fortement descendue (42), alors que mon site ma parait toujours rapide.

image.thumb.png.f23a9fe5089eb447e4641be9f661650c.png

D'autant plus que je ne comprend pas les améliorations à apporter ni comment faire...

De mon côté, le site me parait rapide, même si je le teste en navigation privée pour éviter les caches de mon navigateur. Alors je ne comprends pas cette note...et en plus, internet n'est pas super rapide chez moi...

Est-ce- quelqu'un peut tester mon site et me dire l'impression que ça donne svp?

Merci d'avance et bonne journéeimage.thumb.png.5f3f3ca55cfe677a705d9c4b90e7953c.png

Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
Posted

Simple et pas simple. Il faut vraiment optimiser la version mobile, car c'est sur cette version que googel référence les sites.

As-tu vraiment besoin de ces choses : 

…cache/bottom-af944a455.js?20210712(lyn-et-or-bijoux.com)

…min/livechat-v2.js(d1gwclp1pmzk26.cloudfront.net)
	
…config/152…?v=2.9.43&r=stable(connect.facebook.net)
	
…widget3.0/widget3.0.11.min.js(s3.eu-central-1.amazonaws.com)
	
…dist/alma-widgets.umd.js?20210712(cdn.jsdelivr.net)

Aussi, donner une dimension à toutes tes images, c'est important.

Il te faut aussi un module de cache et optimiser tes images. Car c'est les images qui prennent le plus de temps à charger.

 

Link to comment
Share on other sites
Danny Collaborator

Danny

Posted
Posted (edited)
On 7/11/2021 at 3:47 PM, Lyn&Or Bijoux said:

Bonjour, 

Je viens de voir que ma note google speed est fortement descendue (42), alors que mon site ma parait toujours rapide.

image.thumb.png.f23a9fe5089eb447e4641be9f661650c.png

D'autant plus que je ne comprend pas les améliorations à apporter ni comment faire...

De mon côté, le site me parait rapide, même si je le teste en navigation privée pour éviter les caches de mon navigateur. Alors je ne comprends pas cette note...et en plus, internet n'est pas super rapide chez moi...

Est-ce- quelqu'un peut tester mon site et me dire l'impression que ça donne svp?

Merci d'avance et bonne journéeimage.thumb.png.5f3f3ca55cfe677a705d9c4b90e7953c.png

Bonsoir, 

Un site lent utilise généralement :

- images trop lourdes

- trop de sliders ou d'animations

- un theme trop complexe ou mal écrit

- certains modules qui posent des problèmes

- un dbase  mal optimisée

- trop de modules activés

- un php.ini avec des valeurs trop basses

- trop de plugins/modules qui gèrent la cache 

- trop de connexions externes avec des modules tels que fb/chat/whatsapp/analytics etc...

 

Ma proposition est :

- vérifiez la taille des images, utilisez une meilleure compression et évitez les fichiers .png

- désactiver les modules qui ne sont pas utilisés, aussi bien sur desktop que sur mobile. Un module utilisé sur desktop n'est pas toujour necessaire sur mobile.

- en même temps utiliser le moins de modules possible

- supprimer certains sliders s'ils sont présents en abondance

- dans phpmyadmin effectuer une optimisation automatique des tables

- vérifier que le site n'a pas de redirection (domaine/prestashop est différent de domaine/prestashop/votresite/, la deuxième option a quand même un délai de chargement si je recherche domaine/prestashop et je suis redirigé vers/votresite/)

- Si possible, désactivez plusieurs modules de chat/whatsapps, choisissez l'un ou l'autre.

 

Les valeurs qui peuvent être augmentées à l'aide de cpanel concernant php.ini sont:

memory_limit = set 1024M,

opcache.memory_consumption = set 128M,

xcache.size = set 128M,

max_input_vars = set 1400,

output_buffering = set 4096,

realpath_cache_size = set 4096K,

realpath_cache_ttl = set 120 (pour un système qui modifie peu les fichiers de la boutique, la valeur peut aussi être augmentée)

Si vous avez déjà ces valeurs (ou supérieures) dans php.ini, ne les modifiez pas.

 

J'espère que ça aide, désolé pour le français, j'utilise le traducteur google. 😅

Danny

Edited by Danny (see edit history)
Link to comment
Share on other sites
jmauclair Enthusiast

jmauclair

Posted
Posted

Bonjour,

 

Le meilleur pour améliorer son résultat au speed test est aussi de passer sur un VPS plutôt qu'un hébergeur mutualisé, avec IONOS nous étions à environ 10 sec de chargement, après avoir migré sur un VPS, nous sommes passé à moins de 4 secondes avec un TTFB d'environ 1s contre environ 4 sec chez IONOS.

Link to comment
Share on other sites
Danny Collaborator

Danny

Posted
Posted
1 hour ago, Lyn&Or Bijoux said:

Merci Danny pour tous ces conseils. 

Ils sont déjà tous appliqués sur mon site. J'ai seulement augmenté la memory_limit

Bonne journée

Marilyne

Si vous vous souciez de la réactivité: 😅

- supprimer le contenu du blog de la page d'accueil.

- Pourquoi utilisez-vous « tableau » dans la page d'accueil ? Les supprimer, ne fait que ralentir la mise en page.

Je vois que les images sont .webp. C'est une bonne chose, mais comme prestashop ne supporte pas encore ce type d'image, vous avez besoin d'un module ou d'un script. Par conséquent, vous risquez de perdre tout le bénéfice du webp si à chaque fois un module ou un script qui convertit doit intervenir. Dans de nombreux cas, une bonne compression et un bon choix de type d'image (.jpg, .gif agissant sur le nombre de couleurs et b/n) permettent d'obtenir des résultats similaires à webp mais sans l'utilisation de modules externes.

🙂

Danny

Link to comment
Share on other sites
Alexandre Carette Collaborator

Alexandre Carette

Posted
Posted (edited)

Salut,

Google avec son outils lighthouse te donne des opportunités afin d'améliorer les performances, ton pb number 1 est de réduire les javascript non utilisés.

En gros tu utilises sur ta page du code javascript qui ne sert a rien sur cette page (url) et cela est bloquant pour l'affichage du reste de ta page.

Comment regler ce pb ? deja il faut savoir ce qui n'est pas utile comme code js, pour ce faire google te recommande d'utiliser l'outils "coverage" dans l'inspecteur d'élément de google chrome ex voir piece jointe en rouge c'est ce qui n'est pas utiliser en bleu ce qui l est... donc il va falloir refactoriser le code afin d'appeller uniquement ce qui est utile sur cette url. C'est la meme chose pour les css. Pour ma part j' ai viré le framework jQuery sur les pages qui ne demande pas d'ajax et qui doivent etre SEO friendly, ce qui reduit considérablement la taille du JS.

cdt

 

Capture d’écran 2021-07-16 à 12.05.34.png

Edited by Alexandre Carette (see edit history)
Link to comment
Share on other sites
Lyn&Or Bijoux Explorer

Lyn&Or Bijoux

Posted
  • Author
Posted

Super, merci pour ces nouveaux conseils. La page d'accueil se charge plus vite après avoir changé le tableau par du bootstrap. Mais la note google ne change pas pour mobile, toujours 38 (ce module de texte n'est de toute façon pas activé pour les mobile :) )

 

Link to comment
Share on other sites
Alexandre Carette Collaborator

Alexandre Carette

Posted
Posted (edited)

Oui en effet pour chaque device c'est different, pour auditer en mobile il faut passer l'inspecteur chrome en mobile et faire la meme chose, sachant que comme tu as un affichage different sur mobile et bien faut faire un js et un css dédié a ce device.... c'est assez long a faire mais pas impossible,

 

cdt

Capture d’écran 2021-07-16 à 12.24.23 1.png

Edited by Alexandre Carette (see edit history)
Link to comment
Share on other sites
Danny Collaborator

Danny

Posted
Posted
28 minutes ago, Lyn&Or Bijoux said:

Super, merci pour ces nouveaux conseils. La page d'accueil se charge plus vite après avoir changé le tableau par du bootstrap. Mais la note google ne change pas pour mobile, toujours 38 (ce module de texte n'est de toute façon pas activé pour les mobile :) )

 

- désactiver les modules qui ne sont pas utilisés, aussi bien sur desktop que sur mobile. Un module utilisé sur desktop n'est pas toujour necessaire sur mobile.  🙄

Danny

Link to comment
Share on other sites
Lyn&Or Bijoux Explorer

Lyn&Or Bijoux

Posted
  • Author
Posted
1 hour ago, Alexandre Carette said:

Salut,

Google avec son outils lighthouse te donne des opportunités afin d'améliorer les performances, ton pb number 1 est de réduire les javascript non utilisés.

En gros tu utilises sur ta page du code javascript qui ne sert a rien sur cette page (url) et cela est bloquant pour l'affichage du reste de ta page.

Comment regler ce pb ? deja il faut savoir ce qui n'est pas utile comme code js, pour ce faire google te recommande d'utiliser l'outils "coverage" dans l'inspecteur d'élément de google chrome ex voir piece jointe en rouge c'est ce qui n'est pas utiliser en bleu ce qui l est... donc il va falloir refactoriser le code afin d'appeller uniquement ce qui est utile sur cette url. C'est la meme chose pour les css. Pour ma part j' ai viré le framework jQuery sur les pages qui ne demande pas d'ajax et qui doivent etre SEO friendly, ce qui reduit considérablement la taille du JS.

cdt

 

Capture d’écran 2021-07-16 à 12.05.34.png

Si je comprends bien, je fait cette manip sur google chrome, et je vire ce qui est en rouge dans les fichiers concernés? 

Peux tu aussi développer le "j'ai viré le framework jquery..." , stp?

Link to comment
Share on other sites
Alexandre Carette Collaborator

Alexandre Carette

Posted
Posted (edited)
37 minutes ago, Lyn&Or Bijoux said:

Si je comprends bien, je fait cette manip sur google chrome, et je vire ce qui est en rouge dans les fichiers concernés? 

C'est à peu près ca sauf qu'après il faut que les fonctionnalités de ton site marche ;)

37 minutes ago, Lyn&Or Bijoux said:

Peux tu aussi développer le "j'ai viré le framework jquery..." , stp?

De base Prestashop installe sur toutes les pages une vieille version de jQuery (comportant des failles par ailleurs), depuis l'arrivée de Bootstrap v5 plus besoin d'utiliser Jquery pour certaines fonctionnalités (genre un simple slider, un carroussel etc...)...

-> https://getbootstrap.com/docs/5.0/getting-started/introduction/

Quand on fait de l'optimisation on essaye de réduire au maximum le poids et le nombre des fichiers appelés afin que le site soit le plus léger possible...

Le plus simple étant de partir dans la création d'un theme from scratch (a partir de rien) et via webpack d'installer uniquement ce qui est indispensable perso j'ai meme viré la font par default, ne pas utiliser des pack d'icônes faire plutôt du svg, hacker image manager pour faire du webp (sachant que GD donne la possibilité de faire ce genre de compression), le plus important est sans nul doute de faire pour les images du lazy loading et du responsive image etc...

  bon je ne vous cache pas que c'est un sacré boulot de faire fonctionner prestashop 1.7 sans jQuery 🤣

cdt

Edited by Alexandre Carette (see edit history)
Link to comment
Share on other sites
jmauclair Enthusiast

jmauclair

Posted
Posted
On 7/16/2021 at 2:45 PM, Alexandre Carette said:

Bon courage, je te conseil de faire tes tests sur une version de pré-production, bien sur

ah j'oublié voici un override du front controller, ca pourra etre utile a qqn

 

Capture d’écran 2021-07-16 à 15.01.11.png

Merci pour le partage !

 

Peux tu le copier et le formater à l'aide des balises de code ?

image.png.dd24bb8bfc29ea7b8d98b86f9b8e1c62.png

 

Link to comment
Share on other sites
Alexandre Carette Collaborator

Alexandre Carette

Posted
Posted (edited)

voici,  attention dans le webpack de mon theme je n installe pas jquery, j appelle la derniere version que pour certaine page (ex: order), cdt 

    public function setMedia()
    {
        parent::setMedia();
        $page = $this->context->controller->php_self;
        //$this->unregisterJavascript('corejs');
        $this->unregisterJavascript('jquery-ui');
        $this->unregisterJavascript('jquery-fancybox');
        $this->unregisterStylesheet('jquery-ui');
        $this->registerJavascript('baba_starter-classic', '/assets/js/app.js' , ['position' => 'bottom', 'priority' => 1]);
       
        // COVERAGE //
        if ($page == "index") {
            //$this->registerJavascript('baba_starter-list', '/assets/js/list.js', ['position' => 'bottom', 'priority' => 99]);

           
            if ($this->context->isMobile() == true) {
                
                $this->unregisterStylesheet('theme-main');
                $this->registerStylesheet('mobile-index', '/assets/css/mobile-index.css', ['media' => 'all', 'priority' => 50]);

            } else {
                $this->unregisterStylesheet('theme-main');
                $this->unregisterStylesheet('mobile-index');
                $this->registerStylesheet('desktop-index', '/assets/css/desktop-index.css', ['media' => 'all', 'priority' => 50]);
            }
            
        } else {
            $this->registerStylesheet('theme-main', '/assets/css/theme.css', ['media' => 'all', 'priority' => 50]);
        }

        //$this->registerJavascript('baba_starter-lazysizes', '/assets/js/lazysizes.min.js', ['position' => 'bottom', 'priority' => 3]);
      
      if ($page == "order") {
        $this->registerJavascript('baba_starter-jquery', '/assets/js/jquery-3.6.0.min.js', ['position' => 'bottom', 'priority' => 1]);
        $this->registerJavascript('baba_starter-classic', '/assets/js/theme-classic.js', ['position' => 'bottom', 'priority' => 2]);
        $this->registerJavascript('baba_starter-classic-jqueryUi', '/assets/js/jquery-ui.min.js' , ['position' => 'bottom', 'priority' => 3]);

        //$this->registerJavascript('baba_starter-jquery', '/assets/js/jquery-3.6.0.min.js', ['position' => 'bottom', 'priority' => 1]);
        //$this->registerJavascript('baba_starter-jquery-ui', '/assets/js/jquery-ui.min.js', ['position' => 'bottom', 'priority' => 2]);
         //$this->registerJavascript('baba_starter-bootjs', '/assets/js/bootstrap.4.5.3.min.js', ['position' => 'bottom', 'priority' => 3]);
        }



    // Execute Hook FrontController SetMedia
        Hook::exec('actionFrontControllerSetMedia', []);

        return true;

    }

 

Edited by Alexandre Carette (see edit history)
  • Like 1
Link to comment
Share on other sites
jmauclair Enthusiast

jmauclair

Posted
Posted
Just now, Alexandre Carette said:

voici, cdt 

    public function setMedia()
    {
        parent::setMedia();
        $page = $this->context->controller->php_self;
        //$this->unregisterJavascript('corejs');
        $this->unregisterJavascript('jquery-ui');
        $this->unregisterJavascript('jquery-fancybox');
        $this->unregisterStylesheet('jquery-ui');
        $this->registerJavascript('baba_starter-classic', '/assets/js/app.js' , ['position' => 'bottom', 'priority' => 1]);
       
        // COVERAGE //
        if ($page == "index") {
            //$this->registerJavascript('baba_starter-list', '/assets/js/list.js', ['position' => 'bottom', 'priority' => 99]);

           
            if ($this->context->isMobile() == true) {
                
                $this->unregisterStylesheet('theme-main');
                $this->registerStylesheet('mobile-index', '/assets/css/mobile-index.css', ['media' => 'all', 'priority' => 50]);

            } else {
                $this->unregisterStylesheet('theme-main');
                $this->unregisterStylesheet('mobile-index');
                $this->registerStylesheet('desktop-index', '/assets/css/desktop-index.css', ['media' => 'all', 'priority' => 50]);
            }
            
        } else {
            $this->registerStylesheet('theme-main', '/assets/css/theme.css', ['media' => 'all', 'priority' => 50]);
        }

        //$this->registerJavascript('baba_starter-lazysizes', '/assets/js/lazysizes.min.js', ['position' => 'bottom', 'priority' => 3]);
      
      if ($page == "order") {
        $this->registerJavascript('baba_starter-jquery', '/assets/js/jquery-3.6.0.min.js', ['position' => 'bottom', 'priority' => 1]);
        $this->registerJavascript('baba_starter-classic', '/assets/js/theme-classic.js', ['position' => 'bottom', 'priority' => 2]);
        $this->registerJavascript('baba_starter-classic-jqueryUi', '/assets/js/jquery-ui.min.js' , ['position' => 'bottom', 'priority' => 3]);

        //$this->registerJavascript('baba_starter-jquery', '/assets/js/jquery-3.6.0.min.js', ['position' => 'bottom', 'priority' => 1]);
        //$this->registerJavascript('baba_starter-jquery-ui', '/assets/js/jquery-ui.min.js', ['position' => 'bottom', 'priority' => 2]);
         //$this->registerJavascript('baba_starter-bootjs', '/assets/js/bootstrap.4.5.3.min.js', ['position' => 'bottom', 'priority' => 3]);
        }



    // Execute Hook FrontController SetMedia
        Hook::exec('actionFrontControllerSetMedia', []);

        return true;

    }

 

Merci !

 

Par ailleurs, comme j'ai pu le dire précédemment, nous avons pu augmenter nos scores en speed test en passant sur un VPS, les hébergements mutualisés offrent des performances très instables, à l'inverse d'un VPS.

 

Nous sommes actuellement hébergé chez digital Ocean, et grâce à ce lien de parrainnage vous pouvez bénéficiez de 100$ offerts durant 2 mois pour tester leurs services : https://m.do.co/c/dfe3c2ed92ad

 

Ils ont une documentation très complète pour le déploiement d'un serveur web, à savoir, vous aurez aussi la possibilité de host votre serveur de mail et de créer autant d'adresses emails que vous le souhaitez, de même pour les sous noms de domaines.

 

Voici la documentation pour déployer un serveur WEB sur son VPS:

 

https://www.digitalocean.com/community/tutorials/comment-installer-la-pile-linux-apache-mysql-php-lamp-sur-un-serveur-ubuntu-18-04-fr

Link to comment
Share on other sites
  • 2 years later...
Manu-41 Mentor

Manu-41

Posted
Posted
41 minutes ago, adel9999 said:

bsr les amis j'ai le même problème sur mon sitweb www.technopro-online.com , j'ai besoin de votre aide pour améliorer la vitesse , sachant que je suis sur un serveur dédié OVH

Merci d'avance

Il faut augmenter la durée du cache , faire du lazyloading, dimensionner correctement tes images, tester avec des images adaptatives. Après tout dépend aussi comment est configuré ton serveur. La version de ps, php, nombre de produits. 

Link to comment
Share on other sites
adel9999 Newbie

adel9999

Posted
Posted
23 minutes ago, Manu-41 said:

Il faut augmenter la durée du cache , faire du lazyloading, dimensionner correctement tes images, tester avec des images adaptatives. Après tout dépend aussi comment est configuré ton serveur. La version de ps, php, nombre de produits. 

merci manu pour ta réponse , j'ai besoin d'aide la version de php est 7.4 , prestashop version 1.7.78 , vraiment j'ai besoin de votre aide pour améliorer la vitesse du siteweb J'ai 2 modules sur mon presta ,  Presta - Page Cache Ultimate v7.7.1 - par JPresta.com , et Google PageSpeed Module v4.1.1 - par Keshva Thakur

Link to comment
Share on other sites
Manu-41 Mentor

Manu-41

Posted
Posted

Je ne suis pas pro, mais ça fait plus de 10 ans que j utilise przstashop de la 1.5 a la 1.7, ce que j ai appris c est d avoir un thème déjà optimisé, et avec le moins de modules possibles. Car quand vous rajoutez un module, ça rajoute pleins de js et css. Certain module mal conçu vous ajouter des problèmes.  Vous voulez de la vitesse par rapport à google insight, il faut impérativement optimiser la version mobile. Sur mon dernier site j arrive à 75, 100, 100 et 100 sur un serveur mutualise. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...