Discussion :

[DevilYann]

Bonjour à tous

Sur le site de mon client, on a remarqué que le site rame pas mal sur tablettes et smartphones. Je leur ai dit que c'était "normal", vu qu'il y avait un fichier css de 20Ko en plus à charger, et qui correspond au responsive design mis en place. Mais je sais bien que ce n'est pas 20Ko de plus qui change quoi que se soit.
Je soupçonne fortement que ce soit les différents scripts des divers réseaux sociaux (linked in, facebook, twitter et google +) qui font ramer le chargement. Donc je voudrai ne pas les charger vu que surtout je ne les affiche pas en mode réduit.

Quelles directives faut il mettre pour ne pas charger différents éléments en fonction de la résolution d'écran ou bien de la plateforme de lecture du site ?

Merci d'avance

[Muchos]

Bonjour,

Il me semble que la détection de user-agent (en-têtes HTTP, Javascript, etc.) rate souvent.

En HTML, il existe l'attribut HIDDEN qui, normalement, permet de ne pas charger un élément (contrairement à un NONE en CSS).

je sais bien que ce n'est pas 20Ko de plus qui change quoi que se soit.

C'est quand même beaucoup :/

[Spartacusply]

Je recommande également l'utilisation de l'user-agent pour détecter la plateforme côté serveur (l'user agent en PHP peut se trouver dans la variable globale $_SERVER['HTTP_USER_AGENT'])

[DevilYann]

Merci à vous 2

J'ai trouvé cette fonction sur le net :

Code :

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

1
2
3
4
5
function isMobileBrowser()
{
 return strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'android');
}

Le seul "soucis" que je vois est l'éventuelle compatibilité pour le futur, qui dit que ce sera tjs effectif dans quelques mois ou quelques années ?

[Spartacusply]

C'est sûr il est possible que ça change avec le temps (rarement quand même...). Fais toi une fonction très facilement adaptable. Voici par exemple celle que j'utilise (qui détecte déjà beaucoup de terminaux mobiles, pas uniquement apple et android) :

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
/**
 * Indique si l'internaute courant est sur une plateforme mobile ou non
 * @return boolean 
 */
function isMobileBrowser() {
    $mobileBrowser = array(
        'Android',
        'AvantGo',
        'BlackBerry',
        'DoCoMo',
        'Fennec',
        'iPod',
        'iPhone',
        'iPad',
        'J2ME',
        'MIDP',
        'NetFront',
        'Nokia',
        'Opera Mini',
        'Opera Mobi',
        'PalmOS',
        'PalmSource',
        'portalmmm',
        'Plucker',
        'ReqwirelessWeb',
        'SonyEricsson',
        'Symbian',
        'UP\\.Browser',
        'webOS',
        'Windows CE',
        'Windows Phone OS',
        'Xiino'
    );
 
    if (!isset($_SERVER['HTTP_USER_AGENT'])) {
        return false;
    }
    $userAgent = $_SERVER['HTTP_USER_AGENT'];
 
    $pattern = '/' . implode('|', $mobileBrowser) . '/i';
    return (bool) preg_match($pattern, $userAgent);
}

[tdutrion]

Bonjour,

Le mieux serait d'utiliser un "service" pour faire cela, par exemple utiliser une librairie (https://github.com/serbanghita/Mobile-Detect/) mais en ayant dans ton code une interface definissant les méthodes de cette librairie que tu utilises réellement (par exemple isMobile et isTablet uniquement).

D'un point de vue évolution, cette solution a plusieurs intérêts. Grâce à l'interface, tu pourras changer de librairie à ta guise, en faisant simplement une classe pour mapper ta nouvelle librairie avec ton interface. Côté nouveau mobiles / tablettes, il suffit de mettre à jour la librairie regulierement, et pour ce faire je recommande une installation via composer puis composer update de temps à autres.

Dans tous les cas, ce n'est honnetement pas la meilleure solution, et il existe des solutions pour avoir des images responsives notamment (grâce à srcset et à Modernizr notamment), et ainsi de suite sans detecter le navigateur. Je recommanderais ce genre de solutions. Par ailleurs, les lags sur mobile viennent généralement du javascript, donc il faut peut être voir quelle est la quantité de js dans la page, leur optimisation, le nombre de listeners...

[Spartacusply]

Par ailleurs, les lags sur mobile viennent généralement du javascript, donc il faut peut être voir quelle est la quantité de js dans la page, leur optimisation, le nombre de listeners...

Le meilleur moyen de ne pas encombrer le navigateur web sur mobile avec des fichiers js qui ne le concerne pas (parce que la visualisation sur mobile à des fonctionnalités en moins par rapport à la version desktop par exemple) reste de le ne pas les afficher dans le code html rendu tout simplement. Plus on coupe haut dans la suite logique rendu de la page web, meilleures sont les performances.