Reporter le chargement d'un fichier JavaScript

**cedrus** · 25/03/2015, 15h39

Bonjour, je cherche à optimiser la vitesse d'affichage de mon site en reportant le lancement des .js mais j'y arrive pas. Je regarde ce que PageSpeed Insights me dit pour corriger les erreurs qui ralentissent le site.

Les lancements des .js sont regroupés dans un fichier global_fonctions.php qui gère à peu près toutes les fonctions du site et qui est placé au démarrage en première ligne du head de toutes les pages du site comme cela

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
// *** INCLUE LES FONCTION ET LA BDD *** //
include('_config/include/global_fonctions.php');
?>

Car ces .js doivent être lancé pour toutes les pages du site.

Voici la partie du code qui gère les .js à l'intérieur de global_fonctions.php fait pas les anciens webmasters

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//VAR VALABLES SUR TOUT LE SITE
    //encodage
    $GLO_CHARSET = "UTF-8";
    //robot
    $GLO_ROBOT = "all"; //all ou none
    //css
    $GLO_CSS[0] = $CONF_URL_SERV.'_css/defaut/global.css';
    //javascripts
    $GLO_JS[0] = $CONF_URL_JS."js_swfobject.js";
    $GLO_JS[1] = $CONF_URL_JS."jquery/jquery-1.42-min.js";
    $GLO_JS[2] = $CONF_URL_JS."jquery/jquery-easing-1.3.js";
    $GLO_JS[3] = $CONF_URL_JS."jquery/user-interface/js/jquery-ui-1.8.5.custom.min.js";
    $GLO_JS[4] = $CONF_URL_JS."js_global.js"; 
    //animations
    $GLO_FLASH = '';
    //FIN VAR VALABLES SUR TOUT LE SITE
    function ecrire_entete(){
        global $GLO_CHARSET;
        global $GLO_ROBOT;
        global $GLO_TITLE;
        global $GLO_DESCRIPTION;
        global $GLO_KEYWORDS;
        global $GLO_JS;
        global $GLO_CSS;
        global $GLO_FLASH;
        global $CONF_URL_SERV;
        global $CONF_URL_JS;
        $return = '
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
        <head>
            <title>'.$GLO_TITLE.'</title>
            <meta name="robots" content="'.$GLO_ROBOT.'" />
            <meta http-equiv="Content-Type" content="text/html; charset='.$GLO_CHARSET.'" />
            <meta name="Description" content="'.strip_tags($GLO_DESCRIPTION).'" />
            <meta name="Keywords" content="'.$GLO_KEYWORDS.'" />
            ';
 
            if (!empty($GLO_CSS[0])){
                $i=0;
                while (!empty($GLO_CSS[$i])){
                    $return .= '<link rel="stylesheet" media="screen" type="text/css" title="Design" href="'.$GLO_CSS[$i].'" />
                    ';
                    $i++;
                }
            }
            if (!empty($GLO_JS[0])){
                $i=0;
                while (!empty($GLO_JS[$i])){
                    $return .= '<script type="text/javascript" src="'.$GLO_JS[$i].'"></script>
                    ';
                    $i++;
                }
            }

J'ai tenté d'utiliser le code suivant dans le head ou juste avant la fin de la balise </body> de la page d'accueil par exemple pour voir si ça marche. Et les .js sont toujours malgré tout lancé au chargement de la page comme me dit toujours PageSpeed Insights.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "http://www.monsite.com/_config/js/js_swfobject.js";
    document.body.appendChild(element);
}
if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

Donc je comprends pas (je suis débutant) comment intégrer ou/et modifier ce script directement dans le fichier global_fonctions.php pour qu'il soit pris en compte tout le temps pour toutes les pages.

Merci d'avance pour votre aide

**sekaijin** · 25/03/2015, 20h12

comme souvent
1 seul fichier minimisé et statique

A+JYT

**cedrus** · 25/03/2015, 22h18

oui j avais vu pour regrouper les ;js et les minifier. Mais ça ne résout pas le problème car le .js se lance toujours avant la ligne de flottaison et ça me fait baisser la rapidité d'affichage du site.

**sekaijin** · 28/03/2015, 14h16

Non !

il suffit de ne jamais mettre de code qui s'exécute au chargement mais uniquement sur des événements comme onload, onclick etc

ainsi la page se charge et s'affiche le js se charge en parallèle et ne s'exécute qu'après.

A+JYT

**ABCIWEB** · 28/03/2015, 15h24

Salut,

Tu peux mettre ton code javascript en bas de page comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="fr>">
<head>
<meta charset="UTF-8" />
<title>titre</title>
<meta name = "Description" content = "description site" />
<link href = "librairie/commun.css" rel = "stylesheet"  type = "text/css" />
</head>
<body>
<div id = "global">
	<div>...</div>
</div>
<script src = "scripts/commun.js" type = "text/javascript"></script>
</body>
</html>

Ainsi google sera content...

Reporter le chargement d'un fichier JavaScript

JavaScript

Discussions similaires

Partager

Partager