Recherche d'aide pour débugger mon site

Bonjour,

J’ai hérité de la gestion du site de mon association, et je bloque sur le bug qui fait planté le site sous safari entre autre.

Quelqu’un saurait-il m’aiguiller vers un forum idoine ou m’aider dans ma démarche?

Merci

Édit @Arius : Lien supprimé.

Il y a des erreurs de balisage qui font que l’interprétation de la page part en vrille. Il serait bien d’avoir une page clean avant de parler du support des navigateurs.
Dans l’immédiat, j’ai l’impression que le carrousel pose souci : ça ne s’affiche pas sous Safari (et j’ai l’impression que c’est à ce niveau que ça mouline sur la page), tandis que Firefox a l’air de prendre toutes les ressources (j’entends le CPU tourner autant que sous Safari, et allumer la ventilation, même si la page a l’air d’être chargée.)

Merci pour ton message, ça m’a beaucoup aidé. J’ai corrigé toutes les erreurs possibles à mon niveau. Ca donne quoi maintenant?

Attention, le validateur dit toujours que :

• Il reste deux balises non autorisées par ton doctype…
  • <FONT color=red>…</FONT> → à remplacer par <span class="rouge">…</span> et faire la déclaration dans ta feuille de styles. Mieux, <a href="index.php#horaires" class="alert-link"><b><span class="rouge">…</span></b></a> pourrait devrait devenir <a href="index.php#horaires" class="alert-link"><b>…</b></a> et au lieu d’une classe "rouge" on spécifie la couleur dans la déclaration .alert-link > b {color: red;}
  • <FONT COLOR=teal>…</FONT> → à remplacer par <span class="teal">…</span> et faire la déclaration dans ta feuille de styles. Mieux, tout le <a><strong><FONT COLOR=teal>…</FONT></strong></a> devrait devenir juste <strong class="teal">…</strong>
  • <br><CENTER><p>…</CENTER><br><br> → devrait juste devenir <div class="text-center">…</div> ; et comme ça contient le point précédent, on devrait pouvoir grouper les deux
• Ton iframe a des attributs non valides qu’il faudrait mettre dans la CSS de #numFrame
  • scrolling="no" → overflow: hidden;
  • frameborder="0" → border: 0;
  • allowtransparency="true" → opacity: 0.1;

Déjà, la page ne fait plus mouliner mon Firefox. Dans Safari, il y a un petit temps de chargement (je vois la barre s’arrêter vers le milieu et un peu moins longtemps vers les trois-quarts) ; par contre plus de blocage (qui se faisait vers le milieu.)
Après avoir corrigé le balisage (et il faudrait s’assurer que les CSS et les scripts valident aussi), il faudra voir au niveau de l’outil Dev de ton navigateur où est-ce que la page consomme le plus de temps.

OK, c’est tout clean maintenant. Par contre je ne sais pas comment corriger le balisage ni valider le css ni les script…. Je suis un gros noob, mais j’apprends vite.

Salut,

Pour le balisage (<FONT>…</FONT> et <CENTER>…</CENTER> ainsi que les attributs du <iframe>`), c’est ce que tu as fait. Et la page d’accueil ne plante plus avec Safari.

Pour les styles, ta page d’index indique

	<!-- MY CSS -->
	<link rel="stylesheet" href="css/style.css">

	<!-- BOOTSTRAP -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

	<!-- FONT AWESOME ON -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
	<!-- Leaflet for OpenStreetMap Le CSS AVANT le JS -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css">

Y a que sur le premier (MY CSS) que t’as la main, et peux déjà corriger les 6 alertes et 3 erreurs dessus