►
From YouTube: Lightning Talk: Optimize UX and Performance Through Grafana, Prometheus and Lighth... Miki Lombardi
Description
Lightning Talk: Optimize UX and Performance Through Grafana, Prometheus and Lighthouse - Miki Lombardi, Growens
At MailUp we always develop to improve. Lighthouse is a tool that allows us to analyze our page and returns important metrics that allow us to operate to optimize performance and UX. We have created a tool that, thanks to Docker containers, allows us to quickly analyze our platform and view the data in the Grafana Dashboard. In this talk we will analyze our use case!
A
A
So
what
we
want
to
achieve
is
improve
the
performance,
improve
the
user
experience
and
improve
also
the
user
interface.
So
this
was
the
issue
because
the
platform
has
a
lot
of
components,
features
pages
and
also
a
lot
of
tests,
end-to-end
units
and
also
regression.
So
we
wanted
to
monitor
everything.
A
It
is
used
the
power
of
lighthouse,
that
is,
our
open
source
software
made
possible
with
the
google
team
to
collect
some
metrics
about
the
the
speed,
the
the
the
performance
of
a
page
of
an
application
and
try
to
find
out
with
an
architecture
with
docker
final
committees.
Puppeteer.
There
is
a
headless
browser
how
to
find
those
metrics
and
try
to
improve
it.
A
So,
let's
try.
Let's
try
to
dig
into
a
little
bit
lighthouse
with
the
page.
Speed
is
an
algorithm
made
by
google
from
the
web
dev
standards
and
it's
open
source
you
can
find
out
on
github.
Also
we
are
using
puppeteer.
That
is
a
headless
browser
that
you
can
can
control
with
javascript
via
a
interface
api,
a
low-level
api
interface
and
also
you
can
find
it
on
github,
then
grafana
for
monitoring
and,
of
course,
prometheus.
A
I
jump
a
little
step
behind
and
try
to
let
you
know
how
lighthouse
is
working,
it's
basically
a
pipeline
for
collecting
metrics
from
visiting
your
page.
Basically,
so
the
script
is
visiting
our
pages,
collecting
those
metrics
and
give
it
back
to
our
promoter
server
and
then
on
grafana
to
collecting
those
metrics.
These
are
the
metrics
that
we
wanted
to
collect
performance,
accessibility,
best
practice
and
they
were
the
last
two
never
mind,
but
they
they
were
there.
So
why
not
and
as
a
final
result,
we
wanted
to
have
a
timeline
to
check.
A
Also,
if
the
features
that
we
are
making
in
the
in
the
time
they
were
improving
our
performance,
they
were
improving
how
user
experience
they
were
improving
the
user
experience
for
for
our
platform
as
I'm
a
programmer,
and
I
cannot
speak
very
well,
it's
better.
If
I
just
let
you
see
what
we
achieve
so
it's
basically
a
grafana
dashboard
with
all
the
metrics
that
we
wanted
to
have
some
some
metrics.
A
They
were
performance,
so
metrics
are
talking
about
the
page
speed,
so
how
our
page
is
loading
if
everything
is
above
the
folder
loaded
correctly
and
correctly,
also
through
an
amount
of
time
that
the
user
will
not
fall
asleep
waiting
for
our
website
to
just
finish
loading.
So
our
solution
is
basically
this
little
scammer.
A
A
We
want
to
improve
our
product
development
process,
so
we
needed
a
fast
way
and
an
automation
to
achieve
those
improving
and
performance
issues,
and
this
was
our
best
choice
as
a
solution
that
we
had.
Also,
we
wanted
to
add
metrics
to
our
deploy.
We
are
fast.
Deploy
every
day
is
about
three
four
or
five
deploys,
probably
in
every
kind
of
environment
in
every
kind
of
team.
A
Also,
we
wanted
to
improve
our
user
experience
user
interface
as
we
are
moving
our
architecture
from
a
monolithic
way
to
a
microphone
and
way,
and
also
to
have
a
better
control
on
all
the
front-end
development
and,
of
course,
be
more
efficient
on
releasing.
So
this
is
our
personal
experience.
Company
experience.
I
hope
that
I
have
you
inspired
to
automate
those
changes
through
prometheus,
especially
and
graffana,
with
the
support
grafana
and
to
be
also
portable
in
local
and
cloud
environment
with
docker
and
everything
else.
So
thank
you.