18041 sujets

Questions générales et questions de débutants

Ordre des liens et des scripts dans le head

Bonjour,

Est-ce que ce head vous semble cohérent ? J'entends par cohérence l'ordre des liens et des scripts, n'ai-je rien omis, comme par exemple "type="text/javascript" concernant le fichier jquery-2.1.4.min.js... peut-être n'est-ce pas utile (JE NE SAIS PAS !)
Merci pour vos commentaires

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Site de Seb-</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=.1">
		<!--  en 1er : les feuilles de styles -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/jquery.fancybox.css">
        <link rel="stylesheet" href="css/animate.min.css">
		<link rel="stylesheet" href="css/pgwslider.css">
		<link rel="stylesheet" href="css/pgwslider.min.css">
		<!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
	    <!-- <link rel="stylesheet" href="css/navbar-fixed-top.css" /> -->
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
        <!--  en 2ème : le javascript -->
		<script src="js/jquery-2.1.4.min.js"></script>
        <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> -->
		<!-- enfin : les plugins jquery -->
		<script type="text/javascript" src="js/jquery.fancybox.js"></script>
        <script type="text/javascript" src="js/picturefill.js"></script>
		<script type="text/javascript" src="pgwSlider/pgwslider.js"></script>
		<script type="text/javascript" src="pgwSlider/pgwslider.min.js"></script>
		
		<script type="text/javascript">
		$(document).ready(function(){...
}  
		</script>
	</head>
Réponse courte : incohérent et affreux. Smiley lol

Bon c'est affreux parce que tu ne prends pas la peine d'indenter ton code ce qui le rend difficile à lire. Donc premier conseil, du code indenté, lisible. Un bon IDE te permettra de gérer ça facilement (regarde les IDE de JetBrains, à l'heure actuelle ce sont les références pour le developpement Web). Si tu aères aussi ton tu pourra te passer des commentaires qui sont pour le moins inutiles.

Regarde, c'est déjà bien plus lisible comme ça, non ?


<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Site de Seb-</title>

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=.1">

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/jquery.fancybox.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/pgwslider.min.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">

  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/jquery.fancybox.js"></script>
  <script src="js/picturefill.js"></script>
  <script src="pgwSlider/pgwslider.min.js"></script>

  <script>
  $(document).ready(function(){
  
  }  
  </script>
</head>


type="text/javascript" et type="text/css" ne sont plus obligatoires en HTML5, donc tu peux les virer sans soucis.

Après, pour des raisons de performances, il est préférable d'avoir le moins de ressources externes à charger, donc il vaut mieux concaténer ses fichiers CSS et JS pour en servir le moins possible. L'idéal étant de n'avoir qu'un seul fichier CSS et un seul fichier JS.

Tu gagneras beaucoup en taille en minifiant ton code avec un outil comme clojure compiler ou uglify js.

Tu peux aussi minifier les CSS, ça ne mange pas de pain même si le gain est moins interessant que pour le JavaScript.

Tout cela peut s'automatiser facilement depuis ton IDE et/ou via des outils comme Grunt, Gulp, Yeoman, Broccoli, etc, etc (ça pousse comme des champignons ces outils).

Enfin tu as inclus 2 fois les CSS et le JS pour pgwSlider.
Modifié par lamext (01 May 2015 - 14:20)
salut,
il faut éviter de charger tes scripts JS dans l'entête, ces derniers ne se faisant pas de manière asynchrone, ils bloquent le chargement du reste de la page et tu perds donc en performance.
Il existe un nouvel attribut qu'est async mais le mieux reste de les charger en fin de page.
Sujet clos
Aller à