Skip to content

Latest commit

聽

History

History
91 lines (59 loc) 路 3.86 KB

emotion-site-optimization.md

File metadata and controls

91 lines (59 loc) 路 3.86 KB
Raw

Experiment: how much faster you can make emotion website.

Let's set expectations upfront. I do not suggest to switch to one technology over another. I use real-life measurement metrics and minimal example. The purpose is to show that you can get a lot of performance improvement, with a small investment of your time, it is not hard at all. You do not need Ph.D. to do this.

Setup:

  • All measurements were done using webpagetest with following settings: "From: Dulles, VA - Moto G4 - Chrome - 3G".
  • Most measurements were done against firebase, but still, there is variation in Time To the First Byte from 1.3s to 1.7s. This is because of network fluctuations, it is out of experiment scope. Apply correlation accordingly.
  • Code for experiments are stored in stereobooster/emotion#react-snap
  • Each step is stored in the separate tag. To test it, do the following:
git clone https://github.com/stereobooster/emotion.git
cd emotion
git checkout round-N
yarn install
yarn build:site

Round 0

git checkout round-0

emotion-0-filmstrip.png

Load Time First Byte Start Render Speed Index First Interactive (beta) Time Requests Bytes In Time Requests Bytes In Cost
59.639s 1.350s 9.525s 9676 14.866s 59.639s 6 9,084 KB 61.694s 8 9,113 KB $$$$$

emotion-0-waterfall.png

emotion-0-waterfall-full.png

Round 1

git checkout round-1

Add react-snap. No configurations!

emotion-1-filmstrip.png

Load Time First Byte Start Render Speed Index First Interactive (beta) Time Requests Bytes In Time Requests Bytes In Cost
49.870s 1.473s 4.072s 4384 15.375s 49.870s 6 9,144 KB 51.388s 8 9,174 KB $$$$$

emotion-1-waterfall.png

Round 2

git checkout round-2

Use "inlineCss": true.

emotion-2-filmstrip.png

Load Time First Byte Start Render Speed Index First Interactive (beta) Time Requests Bytes In Time Requests Bytes In Cost
53.369s 1.331s 1.777s 2208 14.237s 53.369s 6 9,210 KB 54.875s 8 9,242 KB $$$$$

emotion-2-waterfall.png

Round 3

git checkout round-3

Use Link headers.

emotion-3-filmstrip.png

Load Time First Byte Start Render Speed Index First Interactive (beta) Time Requests Bytes In Time Requests Bytes In Cost
54.145s 1.472s 1.886s 2603 13.238s 54.145s 6 9,020 KB 56.609s 10 9,918 KB $$$$$

emotion-3-waterfall.png

Next steps

  • replace gif with mp4
  • postpone download of gif until needed (play button)
  • optimize font loading strategy
  • optimize image and/or use a smaller size