1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
metamask-extension/development
Mark Stacey 0f8a9a5d49
Serve CSS as an external file (#6894)
The CSS is now served as an external file instead of being injected.
This was done to improve performance. Ideally we would come to a middle
ground between this and the former behaviour by injecting only the CSS
that was required for the initial page load, then lazily loading the
rest. However that change would be more complex. The hope was that
making all CSS external would at least be a slight improvement.

Performance metrics were collected before and after this change to
determine whether this change actually helped. The metrics collected
were the timing events provided by Chrome DevTools:

* DOM Content Loaded (DCL) [1]
* Load (L) [2]
* First Paint (FP) [3]
* First Contentful Paint (FCP) [3]
* First Meaningful Paint (FMP) [3]

Here are the results (units in milliseconds):

Injected CSS:

| Run | DCL | L | FP | FCP | FMP |
| :--- | ---: | ---: | ---: | ---: | ---: |
| 1 | 1569.45 | 1570.97 | 1700.36 | 1700.36 | 1700.36 |
| 2 | 1517.37 | 1518.84 | 1630.98 | 1630.98 | 1630.98 |
| 3 | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 |
| 4 | 1522.15 | 1523.72 | 1629.3 | 1629.3 | 1629.3 |
| **Min** | 1517.37 | 1518.84 | 1629.3 | 1629.3 | 1629.3 |
| **Max** | 1603.71 | 1605.31 | 1712.56 | 1712.56 | 1712.56 |
| **Mean** | 1553.17 | 1554.71 | 1668.3 | 1668.3 | 1668.3 |
| **Std. dev.** | 33.41 | 33.43 | 38.16 | 38.16 | 38.16 |

External CSS:

| Run | DCL | L | FP | FCP | FMP |
| :--- | ---: | ---: | ---: | ---: | ---: |
| 1 | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 |
| 2 | 1537.55 | 1538.99 | 199.38 | 1633.5 | 1633.5 |
| 3 | 1571.28 | 1572.74 | 268.65 | 1677.03 | 1677.03 |
| 4 | 1510.98 | 1512.33 | 206.72 | 1607.03 | 1607.03 |
| **Min** | 1510.98 | 1512.33 | 199.38 | 1607.03 | 1607.03 |
| **Max** | 1595.4 | 1598.91 | 284.97 | 1712.86 | 1712.86 |
| **Mean** | 1553.8025 | 1555.7425 | 239.93 | 1657.605 | 1657.605 |
| **Std. dev.** | 29.5375 | 30.0825 | 36.88 | 37.34 | 37.34 |

Unfortunately, using an external CSS file made no discernible improvement
to the overall page load time. DCM and L were practically identical, and
FCP and FMP were marginally better (well within error margins).

However, the first paint time was _dramatically_ improved. This change
seems worthwhile for the first paint time improvement alone. It also
allows us to delete some code and remove a dependency.

The old `css.js` module included two third-party CSS files as well, so
those have been imported into the main Sass file. This was easier than
bundling them in the gulpfile.

The resulting CSS bundle needs to be served from the root because we're
using a few `@include` rules that make this assumption. We could move
this under `/css/` if desired, but we'd need to update each of these
`@include` rules.

Relates to #6646

[1]: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
[2]: https://developer.mozilla.org/en-US/docs/Web/Events/load
[3]: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
2019-07-23 14:10:13 -03:00
..
states Lint .json files (#6852) 2019-07-15 11:03:22 -03:00
.jsdoc.json Remove unused AppVeyor configuration (#6840) 2019-07-12 12:42:36 -03:00
announcer.js eslint --fix . 2018-07-02 18:49:33 -04:00
auto-changelog.sh Improve auto changelog script (#6753) 2019-07-11 11:08:23 -03:00
backGroundConnectionModifiers.js Check for unused function arguments (#6583) 2019-05-08 15:51:33 -04:00
genStates.js Speed up genStates script by using built-in require fn 2018-11-20 14:04:50 -03:30
index.html development - fix ui dev 2017-09-29 11:50:24 -07:00
metamaskbot-build-announce.js Remove broken image walkthrough from metamaskbot comment 2019-03-29 12:39:43 -02:30
mock-dev.js Serve CSS as an external file (#6894) 2019-07-23 14:10:13 -03:00
README.md add READMEs to folders, re #3427 2018-03-14 15:33:22 +02:00
require-react-devtools.js Add React and Redux DevTools (#6793) 2019-07-11 12:27:06 -02:30
rollback.sh Add rollback script, move auto-changelog script (#6252) 2019-03-20 09:48:50 -02:30
run-ganache Replace deprecated shell-parallel with concurrently (#6807) 2019-07-09 14:09:31 -02:30
run-version-bump.js eslint --fix . 2018-07-02 18:49:33 -04:00
selector.js eslint --fix . 2018-07-02 18:49:33 -04:00
sentry-publish.js CI - Allow sourcemap uploads to sentry for empty version (#5403) 2018-10-10 10:24:25 -04:00
sourcemap-validator.js development - enhancement for sourcemap validator tool (#6277) 2019-03-11 09:55:43 -07:00
test.html tests - integration - get flat and mascara tests closer to compatible 2017-09-13 20:25:27 -07:00
verify-locale-strings.js development tools - fix i18n verify tool 2018-11-04 22:18:30 -05:00
version-bump.js Version 5.0.3 (#5785) 2018-11-20 08:34:14 -10:00

Development

Several files which are needed for developing on(!) MetaMask.

Usually each files contains information about its scope / usage.