In this session, you will learn how to track down performance and accessibility issues before they get deployed to the server. Watch the session recording on our Youtube channel: https://www.youtube.com/c/drupalcampkyiv

1. Nikita Pohrebniak,
Software
Development
Manager
Performance
monitoring with
Google Lighthouse

2. SPEAKER
2
Software Development Manager
ImageX
nikitap@imagexmedia.com
Nikita Pohrebniak

3. Houston, we have a problem!
Or not every PR is being
reviewed by Kevin Mitnick.
1

4. 4
THE PROBLEM(S)

5. 5
THE PROBLEM(S)

6. 6
THE PROBLEM(S)

7. 7
● Lack of Centralized tool to monitor performance.
● Needs to have ability to check the Accessibility issues.
THE PROBLEM(S)

8. Enter Lighthouse.
2

9. 9
ENTER LIGHTHOUSE

10. 10
ENTER LIGHTHOUSE

11. 11
ENTER LIGHTHOUSE

12. 12
ENTER LIGHTHOUSE

13. 13
ENTER LIGHTHOUSE

14. 14
ENTER LIGHTHOUSE

15. 15
ENTER LIGHTHOUSE

16. 16
LIGHTHOUSE CLI
Installation:
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
Run it:
lighthouse https://airhorner.com/

17. 17
LIGHTHOUSE CLI https://github.com/GoogleChrome/lighthouse#cli-options

18. 18
LIGHTHOUSE CLI OPTIONS

19. Need some automation?
Meet LHCI.
3

20. 20
LIGHTHOUSE CI

21. 21
LIGHTHOUSE CI

22. 22
LIGHTHOUSE CI
~ lhci autorun

23. 23
LHCI SERVER DASHBOARD

24. 24
LHCI SERVER DASHBOARD

25. When you’re not satisfied
with the old wheel, go crazy.
Invent the new wheel.
4

26. 26
INVENTING THE WHEEL

27. 27
INVENTING THE WHEEL

28. 28
INVENTING THE WHEEL

29. 29
INVENTING THE WHEEL

30. Q&A.
5

31. USEFUL LINKS
31
● Official Lighthouse Documentation: https://web.dev/learn/
● Lighthouse repo: https://github.com/GoogleChrome/lighthouse
● Lighthouse CI: https://github.com/GoogleChrome/lighthouse-ci
● Lighthouse CI Server Heroku recipe:
https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/recipe
s/heroku-server/README.md