jeena/home-assistant.github.io
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Site updated at 2018-01-25 17:33:45 UTC

Browse source
This commit is contained in:
Travis CI 2018-01-25 17:33:45 +00:00
parent 2a429df2b2
commit 94552b64db
144 changed files with 304 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

4
blog/2016/08/07/optimizing-the-home-assistant-mobile-web-app/index.html
View file

@ -91,11 +91,11 @@
<p>Do less and be lazy. It sounds so obvious and it took a while before it started to dawn on me. I think most of the code I write is pretty fast, but I don’t often stop to take a harder look at how and when it runs in practice. When do we need the result, can it be postponed?</p>
<p>And thus started my journey to take a critical look at how the Home Assistant app was working and how to make things faster. Below is the list of the different things that I did to make it fast.</p>
<p>I hope this list can be useful to other people, as a guide for optimizing their own apps or for avoiding pitfalls when building a new one.</p>
<p>The first thing to do is to measure. The Home Assistant front end is a mobile web app, so we shouldn’t measure this on a machine with 8 cores and gigabytes of ram but instead measure on devices you expect a mobile web app to run: phones. Below are two timelines recorded with Home Assistant 0.18.2 (pre-optimizations) and Google Chrome 53. <strong>On my Mac the app starts in 1400 miliseconds and on my Nexus 5x in ~6500 miliseconds (~4.5 times slower!).</strong></p>
<p>The first thing to do is to measure. The Home Assistant front end is a mobile web app, so we shouldn’t measure this on a machine with 8 cores and gigabytes of ram but instead measure on devices you expect a mobile web app to run: phones. Below are two timelines recorded with Home Assistant 0.18.2 (pre-optimizations) and Google Chrome 53. <strong>On my Mac the app starts in 1400 milliseconds and on my Nexus 5x in ~6500 milliseconds (~4.5 times slower!).</strong></p>
<p class="img">
<img src="/images/blog/2016-08-optimizing-web-app/performance-timeline-0.18.2.png" alt="Timeline of loading the front end in Home Assistant 0.18.2" />
</p>
<p>Although the app takes 6500 milliseconds to load on my phone, it would perform well afterwards. Still, that initial load is unacceptable. You expect to open an app on your phone and be able to use it, quickly. After I applied all the changes described below, I managed to reduce startup time to 900 miliseconds (-35%) on my Mac and 2400 miliseconds (-63%) on my Nexus 5x. <a href="https://home-assistant.io/demo">Check out the demo here.</a></p>
<p>Although the app takes 6500 milliseconds to load on my phone, it would perform well afterwards. Still, that initial load is unacceptable. You expect to open an app on your phone and be able to use it, quickly. After I applied all the changes described below, I managed to reduce startup time to 900 milliseconds (-35%) on my Mac and 2400 milliseconds (-63%) on my Nexus 5x. <a href="https://home-assistant.io/demo">Check out the demo here.</a></p>
<p class="img">
<img src="/images/blog/2016-08-optimizing-web-app/performance-diagram.png" alt="diagram showing old and new loading times next to one another" />
<img src="/images/blog/2016-08-optimizing-web-app/performance-timeline-0.26.png" alt="Timeline of loading the front end in Home Assistant 0.26" />