swarmcity / SwarmCityDapp

Swarm City dApp FrontEnd
MIT License
28 stars 10 forks source link

Web App Perfomance Checkup #756

Closed bkawk closed 5 years ago

bkawk commented 6 years ago

Location

https://www.swarmdev.city/

Expected behavior

To pass lighthouse with a score of over 90 and to full fill all requirements of a web app as Google defines it.

Actual behavior

Reports of possible sluggish loading, increasing load times over time especially with an empty cache or on mobile.

Steps to reproduce the problem

Produce a lighthouse report analyse the results and then make a plan to improve the results

Operating system / hardware

MacOS / All

Time estimate

3 Hours

bkawk commented 6 years ago

screen shot 2018-06-12 at 11 25 35

The above report gives a 9 out of 100 for performance and makes suggestions as to where to start the hunt for improvements.

screen shot 2018-06-12 at 11 29 02

Above we can see the load time is about 40 seconds on desktop compared to sub 1 second that is recommended, also note the service worker is loading every page on the initial request not just the home page. Note the app has lost allot of the web app features or they are not working as they should by default from Polymer.

from the above Im now going to investigate why the app is loading resources it doesn't initially need

bkawk commented 6 years ago

The pages that are being wrongly pre loaded are all listed in fragments as they should be https://github.com/swarmcity/SwarmCitySite/blob/master/polymer.json so I now need to look for an importHref that forces them to load from the home page

bkawk commented 6 years ago

To attempt to resolve the performance issue I propose we check to see when and how often https://github.com/swarmcity/faffys_animated_pages/blob/master/faffys-animated-pages.html#L158 gets called on an initial page load and try to understand why the service worker is being reported as not present when it clearly is and is working.

Making a test case the polymer starter kit and Faffy's animated pages should allow a comparison to be drawn to pinpoint then fix the issue