Automate performance testing with lighthouse CI

Slide 1

Slide 1 text

Automate performance testing With Lighthouse CI

Slide 2

Slide 2 text

Hassan H Hassan Hafez F r o n t e n d E n g i n e e r @ b u l k w h i z @ H a s s a n h a f e z z

Slide 3

Slide 3 text

hy speed matt Why speed matters?

Slide 4

Slide 4 text

Money Talks Money Talks

Slide 5

Slide 5 text

Interesting Fac • A one-second delay in mobile load times can impact conversion rate by up to 20% Interesting Facts • 53% of people abandon a mobile site if takes more than 3 seconds to load. References https://bit.ly/2PM9BMd https://bit.ly/35JYngH https://www.thinkwithgoogle.com/feature/testmysite/ • To see how can speed potentially affect your revenue see Impact Calculator tool.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ow to measur How to measure Speed?

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Different performance tools Chrome UX Report PageSpeed Insights WebPageTest Lighthouse

Slide 10

Slide 10 text

Lighthouse Lighthouse

Slide 11

Slide 11 text

1- From Chrome DevTools

Slide 12

Slide 12 text

2- From the command line Install Lighthouse module: npm install -g lighthouse Run an audit lighthouse

Slide 13

Slide 13 text

3- As a node module add the dependency:- yarn add —-dev lighthouse

Slide 14

Slide 14 text

4- From web UI web.dev/measure.

Slide 15

Slide 15 text

Let’s try it out Let’s try it out ☕

Slide 16

Slide 16 text

It's not enough to make a one time effort you have to change your lifestyle. Performance is a lot like getting fit A study found that 40% websites get regressed in performance after 6 months of the initial optimization. References https://www.youtube.com/watch?v=YJGCZCaIZkQ

Slide 17

Slide 17 text

y regressio Why regression happens

Slide 18

Slide 18 text

w to preven How to prevent regression?

Slide 19

Slide 19 text

o much manual w Too much manual work

Slide 20

Slide 20 text

My automation w Get a Lighthouse report alongside every PR. My automation wishlist Have quick pass/fail status with each PR right away in Github. Test against my own rules/ thresholds. Be able to track performance metrics and Lighthouse scores over time. Compare between versions to find improvements and regressions.

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

ighthouse C Lighthouse CI

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Let’s set it up Let’s set it up

Slide 25

Slide 25 text

Add LHCI into your CI script

Slide 26

Slide 26 text

Get a Lighthouse report alongside every PR.

Slide 27

Slide 27 text

LHCI Configuration

Slide 28

Slide 28 text

Test against my own rules/ thresholds.

Slide 29

Slide 29 text

GitHub Checks 1- install the app to the target repo. 2- add the token to your build environment as LHCI_GITHUB_APP_TOKEN

Slide 30

Slide 30 text

Have quick pass/fail status with each PR right away in Github.

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Lighthouse Ci Lighthouse CI server track performance over time. Compare between versions easily

Slide 33

Slide 33 text

Setting up LHCI server on Heroku 1- Create account and install Heroku CLI and login 2- Setting up your repo with LHCI node server

Slide 34

Slide 34 text

Cont setting up LHCI server on Heroku 3- Set up Heroku project and run it

Slide 35

Slide 35 text

Voila, you now have LHCI server app

Slide 36

Slide 36 text

Connect the server to your repo Add your token to CI with the environment variable LHCI_TOKEN

Slide 37

Slide 37 text

Add URL In the config

Slide 38

Slide 38 text

Demo Demo

Slide 39

Slide 39 text

Sum up Sum up Get a Lighthouse report alongside every PR and prevent regressions Have quick pass/fail status with each PR right away in Github. Test against my own rules/ thresholds. Track performance metrics and Lighthouse scores over time. Compare between versions to find improvements and regressions.

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text