MyVera – Optimiser son lancement

Quelques astuces pour rendre plus rapide le lancement de MyVera.

Depuis l’ajout de fonctionnalités comme la possibilité de mettre des Custom Controls dans les vues (sliders verticaux, circulaires…) ou de l’effet jour/nuit, le temps de chargement de MyVera sur mon iPad avait presque doublé. J’ai donc cherché à le rendre plus rapide. La durée d’ouverture de mon interface avec deux vues en Retina, effet jour/nuit, sans Custom Control est retombée à 7 secondes ce qui me convient.

Je vais donc vous indiquer ce que j’ai fait. (Je continue également mes tests et je veux bien vos astuces si vous en avez car l’optimisation fait partie des choses difficiles à évaluer surtout lorsqu’il s’agit de voir si l’on a gagné quelques fractions de secondes…)

Les vues sans Custom Control

Afin de permettre l’ajout de sliders dans les vues, j’ai modifié le mode de gestion de celles-ci: Lors de l’ouverture de MyVera, les vues sont créées. Pour chacune de ces vues, la liste des modules est examinée pour voir s’il faut insérer un objet (un slider vertical ou autre).
Cette procédure ralentie de manière visible MyVera. L’ancien mode de gestion consistait à l’utilisation d’un « template » pour afficher les modules (en simplifiant, je pourrais dire que cet affichage utilise tout simplement des effets css), ce qui est plus rapide.

Si, dans une vue, vous n’utilisez pas de Custom Control, désactivez cette possibilité. Celle-ci sera alors gérée suivant l’ancien mode.  (Pensez à réactiver les Custom Control si par la suite vous en utilisez…)

Cette option Sans Cust. Cont. est disponible de la partie configuration de chacune des vues:
vuesanscust

La gestion du cache

Le html5 a introduit un nouveau type de cache. Celui-ci a, au départ, pour but de permettre une navigation offline du site. Cependant, en gardant en cache certains fichiers, il donne la possibilité d’accélérer le chargement des applications web.

Je vais ici vous donner l’exemple de mon cache. Il sera probablement utile que vous fassiez vos propres tests en fonction de votre configuration. Il faut savoir que cette optimisation peu donner des résultats différents suivant le navigateur utilisé et qu’un trop gros cache peut avoir l’effet inverse. Par exemple, il semble que Chrome soit limité à 5 Mo alors que Safari sous iOS7 pourrait aller jusqu’à 60 Mo.

Le fichier cache.appcache de MyVera indique les règles de gestion de ce cache.
Le contenu de ce fichier texte doit par défaut ressembler à cela:

CACHE MANIFEST
# 7cba189921b076e43af4f3312edf4215ec3521ef
index.html
FALLBACK:
NETWORK:
*

Une modification de ce fichier ne suffit pas à forcer la mise à jour du cache. En général, une modification du code après le # le permet.
Le fait qu’il y ait écrit index.html indique que ce fichier doit être mis en cache.

Il faut savoir que MyVera gère directement la mise en cache de certains fichiers (app.js, app.json et resources/css/app.css). Il ne faut donc pas ajouter ces fichiers dans le cache.

Mon fichier de cache modifié est le suivant:

CACHE MANIFEST
# 7cba189921b076e43af4f3312edf4215ec3521ef
index.html
resources/images/d230_1@2x.jpg
resources/images/d231_1@2x.png
resources/images/d232_1@2x.png
resources/images/d233_1@2x.png
resources/images/d234_1@2x.png
resources/images/d235_1@2x.png
resources/images/d236_1@2x.png
resources/images/d237_1@2x.png
resources/images/d238_1@2x.png
resources/images/d239_1@2x.png
resources/images/d250_1@2x.png
resources/images/d251_1@2x.png
resources/images/d252_1@2x.png
resources/images/d255_1@2x.png
resources/images/d256_1@2x.png
resources/images/d260_1@2x.jpg
resources/images/d261_1@2x.png
resources/images/d262_1@2x.png
resources/images/d263_1@2x.png
resources/images/d270_1@2x.png
resources/images/d271_1@2x.png
resources/images/d272_1@2x.png
resources/images/d273_1@2x.png
resources/images/d275_1@2x.png
resources/config/img/vue0013854897222x.jpg
resources/config/img/vue0113854897762x.jpg
resources/locales/lang.json

FALLBACK:
NETWORK:
*

Une petite explication:
Comme je l’ai indiqué, sur mon iPad en mode Retina, l’effet jour/nuit ralentissait l’ouverture de MyVera. Cet effet implique le chargement de plusieurs images (fond pour le jour, effets d’éclairage). J’ai mis ces images dans le cache. Ce sont les images de modules One State avec des icônes personnalisées en Retina pour les numéros compris entre 230 et 275, soit par exemple pour le 230: resources/images/d230_1@2x.jpg.

J’ai également mis dans ce cache les images de fond de mes deux vues (par exemple: resources/config/img/vue0113854897762x.jpg)

Vous pouvez enfin faire d’autres tests. J’ai par exemple mis le fichier qui contient le texte dans la langue désirée resources/locales/lang.json. Cependant, le temps gagné en mettant ce fichier en cache ne m’a pas paru vraiment mesurable…

Un navigateur dédié

Une autre manière de faire est d’utiliser un navigateur qui ne vous sert que pour MyVera et ouvre cette application directement en plein écran.

Dans la vidéo ci-dessous, vous pouvez voir le résultat avec icab mobile (et un changement de nom et d’icône de ce navigateur). Lorsque l’application est toujours en mémoire, la durée d’ouverture se réduit au temps de mise à jour de l’état des modules.

 

Je suis intéressé par le résultat de vos tests: Ces paramètres sont-ils efficaces sur vos appareils ? Avez-vous trouvé d’autres réglages ? N’hésitez pas à me donner vos avis…

2 réflexions sur “MyVera – Optimiser son lancement

  1. salut SBdomo,

    j’ai un soucis sur mon W8.1 pro en mode tactile, quand je vais sur myvera, ça reste bloqué sur les 3 petits carrés d’initialisation.
    Quand je vide le cache, ça marche.
    Que pus-je faire pour que le cache se vide au démarrage, ou bien ne se remplisse pas si c’est du ie11?

    merci d’avance
    Mulb

    • Je n’ai pas de tablette sous win 8.1 mais sur le forum Toute la domotique, certains utilisateurs ont confirmé que la dernière béta est compatible.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s