Imprimer la Page | Fermez la fenêtre

optimisation du site

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Discussion générale openElement
Description du Forum: Discussion générale sur le logiciel
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23692
Date: 20 Avr 2024 à 12:12
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: optimisation du site
Posté par: Funboy
Sujet: optimisation du site
Posté le: 05 Oct 2019 à 15:25
Bonjour,

J'ai créé un site vitrine à partir du template 100% responsive black.
Tout s'est bien passé. j'ai fouillé dans les forums pour améliorer le référencement et là, je cherche à optimiser le pagespeed insight.
Google suggère de convertir les images en jp2 (entre autres) afin qu'elles soient plus légères et donc chargées plus rapidement...
J'ai donc commencé à convertir certaines images mais en essayant les les intervertir avec les jpeg originales, je me suis aperçu qu'OE ne prend pas en compte ce type de format pour les images...
Auriez vous une solution afin de diminiuer le poids de mes images sans perdre pour autant en qualité (certaines font jusqu'à 3 Mo...) en sachant qu'il s'agit majoritairement de jpg?
En vous remerciant par avance pour votre disponibilité et vos lumières.



Réponses:
Posté par: Hobby001
Posté le: 05 Oct 2019 à 15:28
Voici un site qui explique assez bien la façon et les raisons de le faire.   https://kinsta.com/fr/blog/optimiser-les-images-pour-le-web/" rel="nofollow - https://kinsta.com/fr/blog/optimiser-les-images-pour-le-web/


Personnellement j'utilise https://www.getpaint.net/download.html" rel="nofollow - paint.net




-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 05 Oct 2019 à 15:34
Vous pourriez aussi utiliser l'utilitaire d'optimisation des images fourni avec OE

http://zupimages.net/viewer.php?id=19/40/mhh8.jpg" rel="nofollow">


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Funboy
Posté le: 05 Oct 2019 à 15:43
Merci beaucoup pour ces infos, je regarde ça et reviens vous dire!


Posté par: jjb1
Posté le: 06 Oct 2019 à 12:04
Message posté par Hobby001 Hobby001 a écrit:

Vous pourriez aussi utiliser l'utilitaire d'optimisation des images fourni avec OE
Oui, mon site en est plein (hormis les albums) et cela marche très bien.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9)


Posté par: Funboy
Posté le: 06 Oct 2019 à 15:29
Re bonjour!

Alors, je suis passé via l'optimiseur intégré à OE pour redimensionner toutes les images du site. J'ai clairement gagné en poids de l'image sans perdre en qualité! Merci.
En revanche, lorsque je soumets le site pour analyse à Google Pagespeed Insight, les résultats sont identiques à ceux avant optimisation des images... Est ce normal?


Posté par: Hobby001
Posté le: 06 Oct 2019 à 17:27
Votre site s'affiche en 2.7 secondes où est le soucis?

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 06 Oct 2019 à 17:28
Avez vous refait une mise en ligne complète?

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Funboy
Posté le: 07 Oct 2019 à 13:01
Bonjour,

Oui, j'ai fait une remise en ligne complète.
Effectivement, le site se charge bien.
Ce que je ne comprends pas, c'est pourquoi google pagespeed insight ne note aucune différence malgré l'allègement du poids des images...


Posté par: brolysan
Posté le: 07 Oct 2019 à 14:28
parce que pagesheed est quand même un outil développé par Google et POUR Google surtout.

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Hobby001
Posté le: 07 Oct 2019 à 14:41
Pour réduire vos images, je vous suggère une autre solution: le logiciel gratuit gimp  https://www.gimp.org/" rel="nofollow - https://www.gimp.org/

Ouvrez votre image puis faites un export en format jpeg et à l'aide du curseur réduisez la qualité de moitié.  

Je l'ai utilisé pour faire passer une image de 1.661 Mb en une image de 298k valable




-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 07 Oct 2019 à 14:55
Je viens de faire un test avec l'une de vos images food-1532380_1920.jpg

je l'ai réduite à 10% et le résultat est toujours aussi valable pour le WEB:   https://denislafrance.net/images_partagees/food-1532380_1920%20c%20.jpg" rel="nofollow - https://denislafrance.net/images_partagees/food-1532380_1920%20c%20.jpg

 


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 07 Oct 2019 à 14:56
Message posté par Hobby001 Hobby001 a écrit:

Je viens de faire un test avec l'une de vos images food-1532380_1920.jpg

je l'ai réduite à 10% et le résultat est toujours aussi valable pour le WEB:   https://denislafrance.net/images_partagees/food-1532380_1920%20c%20.jpg" rel="nofollow - https://denislafrance.net/images_partagees/food-1532380_1920%20c%20.jpg

 

P.S.  Sa taille est passée de 656 kb à 167kb.

Voilà


-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Hobby001
Posté le: 07 Oct 2019 à 15:02
En regardant les résultats de Google PageSpeed insights, voici mes constats.

Ok leur critique de la taille des images est valable

Par contre il ne faudrait pas utiliser de CSS ni de JS ni de jQuery Wink

Alors je leur ai donné  https://denislafrance.net/images_partagees/food-1532380_1920%20c%20.jpg" rel="nofollow - https://denislafrance.net/images_partagees/food-1532380_1920%20c%20.jpg  à évaluer et là je pète un score de 99%.  Normal, pas de HTML ni CSS ni JS ni jQuery 





-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: brolysan
Posté le: 07 Oct 2019 à 15:15
Laissez tomber, vous gagnerez du temps... ;)

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Funboy
Posté le: 07 Oct 2019 à 15:17
Merci pour ces précieuses informations.
Etant donné que je suis parti du modèle Sensblack, et étant novice, tous les CSS, JS et jQuery sont d'origine sur le modèle, je ne suis pas assez compétent pour toucher à cela, d'autant plus que j'ai bien trop peur de perturber le code régissant le côté responsive...
Donc, même en réduisant le poids de mes images, google pagespeed insight continuerait de me donner un score moyen?


Posté par: brolysan
Posté le: 07 Oct 2019 à 15:19
Pour informations, pour dépasser 80%, il ne faut quasi aucun code JS et CSS. Donc effectivement, c'est bien dommage.

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: brolysan
Posté le: 07 Oct 2019 à 15:20
je viens même de tester la propre page google.fr, donc, hormis 1 visuel et un fond blanc, rien de folie. Le score est sans appel, on obtient 95%.

-------------
https://sensode.com" rel="nofollow - Sensode
https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie


Posté par: Funboy
Posté le: 07 Oct 2019 à 15:26
D'accord merci.
Je suppose qu'utiliser une application afin de réduire (encore!) le poids de mes images ne changera donc pas grand chose.
Je vais donc les laisser ainsi et essayer de suivre vos conseils dans le sujet "avis site créé" tout en essayant de ne pas perturber le responsive.
Merci beaucoup!


Posté par: Funboy
Posté le: 07 Oct 2019 à 15:27
et si je comprends bien, un score de 100% équivaut à une page vierge...
Je comprends mieux pourquoi il est si difficile de faire monter le score! ;)


Posté par: Hobby001
Posté le: 07 Oct 2019 à 15:46
Google PageSpeed insights est bâti sur une utopie.

Une page vide avec le minimum de code et votre image réduite par mes soins:  http://denislafrance.net/minimum.html" rel="nofollow - https://denislafrance.net/minimum.html donne un score de 100%.

Le code: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Page presque minimale</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
<img src="images_partagees/food-1532380_1920 c .jpg" alt="Image réduite" height="1279" width="1920">
  </body>
</html>

Par la suite tout ce que vous mettrez dans votre site augmentera la charge et diminuera la performance.

Pour un site responsive basé sur un modèle d'OE il y a toutes sortes d'actions forcées par les fonctionnalités offertes et le support nécessaire ce qui diminue la performance aux yeux de Google.  N'oubliez pas qu'au lieu d'avoir plusieurs pages vous en avez une très longue comprenant plusieurs écrans installés l'un à la suite de l'autre et que vous voyagez entre ces derniers.  Chaque écran doit être responsive donc s'adapter à l'oeil de l'équipement de visualisation.  

Don un site vide sans fonctionnalités ni support obtiens le maximum, tout ce que vous y ajoutez coûte quelque chose.

Bref Google vous donne un indicateur et vous devrez y faire des choix.



-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE


Posté par: Funboy
Posté le: 08 Oct 2019 à 15:01
Oui merci, c'est bien ce que j'avais compris!
Mon choix et d'ores et déjà fait!
Le modèle Sensblack est formidablement bien fait et, malgré mon manque de compétence dans le domaine du web design, j'ai malgré tout réussi à l'adapter à mes besoins.
Au diable donc les indications fournies par google!
Et encore un grand merci à vous tous qui faites partager votre savoir et compétences au grand public!



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net