►
From YouTube: Application Performance Session 2021-03-01
Description
Talking about workflow measurement and combining workflows into 1 Vue App for better performance
B
A
A
And
here
we
go
so
the
nice
thing
is
that
you
just
need
to
create
like
a
new
javascript
site,
speed
file
in
the
in
this
specific
directory,
which
is
the
measure
underscore
script,
and
as
soon
as
you
have
that
you
can
then
simply
type
gdk
measure.
Workflow
measure
dash
workflow
intensively
the
name
of
the
file
and
that's
everything
that
you
need
to
do.
A
What
I
have
added
is
a
couple
of
mouse
utilities
at
the
moment
to
better
simulate
mouse
movement
and
also,
basically,
the
lag
of
mouse
movement
so
that
it's
not
just
clicking
so
that
we
can
measure
more
accurately
the
the
roll
over
and
the
mouse
over
and
hover
stuff,
and
I'm
using
that
part
for
basically
simulating
all
the
clicks
through
the
different
parts
of
the
application.
So
we.
C
A
The
rainbow
browser-
and
I
would
love
to
run
through
with
you
all
of
this,
so
what
we
have
here
is
the
classic
exposure
of
site
speed.
So
we
have
the
selenium
overall
driver
and
the
web
driver,
then
I'm
just
having
like
a
funky
easy
encapsulator
for
accessing
easier
one
of
the
mouse
utils,
because
you
need
to
hand
over
the
driver
and
the
web
driver
in
different
paths
and
and
the
commands
baseline.
A
So
what
I'm
doing
here
is
that
I'm
just
wrapping
this
up
so
that
I
don't
need
to
write
all
the
commands
every
time
you
can
do
in
here.
A
meter
set
title
and
set
description.
So
this
helps
you
on
setting
simply
if
you,
if
you
would
rather
run
multiple
of
them
to
know
what
this
side
street
site
speed
script
is
actually
doing,
and
this
is
basically
adding
it
to
the
report
at
the
top
and
you
can
see
in
the
report.
A
Okay,
what
what
is
the
purpose
of
this
thing
and
then
I'm
going
ahead
and
I'm
basically
pre-loading
gitlab,
simply
the
base
file
so
that
I'm
running
like
a
hot
cache.
I
disable
the
performance
bar.
This
might
be
also
nicer
to
wrap
in
reality
to
another
util.
So
let
me
basically
wrap
all
those
three
lines
here.
A
Then
we
run
a
command
to
set
the
body
to
nothing
in
the
background
color
to
white.
This,
basically,
is
is
helping
the
video
to
start
easier
because
otherwise
side
speed,
sometimes
things
that
you
are
also
trying
to
measure
the
previous
thing,
and
this
is
doing
like
a
funky
switch.
So
this
is
like
an
official
thing
that
sidespeed
recommends
to
do.
Then
we
navigate
to
the
explore
page.
So
this
is
in
reality
the
the
starting
step
of
this
whole
script.
We
wait
until
it's
ready.
A
We
wait
another
3000
milliseconds,
because
otherwise
it's
trying
still
to
register
some
of
the
javascript
stuff
and
we
inject
the
fake
mouse
cursor
and
now
here
comes
the
most
technically
hectic
part.
Is
you
can't
simply
activate
again
in
selenium
to
show
the
mouse
cursor
or
something
like
that?
What
you
need
to
do
is
I
can
show
you
the
mouse
utils.
You
need
to
inject
a
base64
png
of
a
mouse
cursor
that
you're
done
then
basically
moving
around
based
on
the
actual
mouse
position.
A
That
is
being
assimilated
in
seven.
I
was
not
able
to
find
any
better
way
of
doing
that.
So
that's,
I
think,
the
most
funky
part
of
it
and
then
we
are
starting
the
actual
measure.
So
that
is
what
we
tell
site
speed
to
start
measuring
and
we
do
then
this
click
simulation,
which
is
in
reality,
doing
simply
wait
a
couple
of
milliseconds
mouse
over
the
link
that
we
are
trying
to
click
wait
like
300
milliseconds,
which
is
the
average
that
the
user
needs
to
click
on
something.
A
Then
we
click
it
and
then
basically,
the
next
page
is
loading
and
those
are
the
the
main
steps
here
which
is
going
into
a
directory
going
into
another
directory
clicking
on
one
file
going
back
and
then
going
to
another
file.
So
this
is
a
classic
workflow
that
we
currently
see
with
users
and
at
the
last
thing
we
are
waiting
until
the
page
is
complete
and
we
stop
the
measurement
and
that's
basically
then
creating
a
full
report
in
site
speed,
which
is,
I
can.
A
A
A
A
A
We,
what
I
want
to
see
is
that
we
get
for
all
the
three
areas
in
depth.
The
five
most
common
use
case,
workflows
that
users
are
doing
so
that
we
know
okay,
a
workflow,
a
user
is
doing
he's
going
into
a
repo
he's
going
free
directories
deep
clicking
on
a
file
editing
that
file
in
the
web,
id
okay,
perfect,
and
let's
map
this
into
a
measurement
and
measure
that,
at
least
on
the
gdk
level,
on
production,
it's
a
little
bit
more
complex
because
you
have
changing
data,
but
it
also
shouldn't
be
too
hard.
A
A
One
of
the
biggest
steps
that
I
could
foresee
right
now
is
that
we
need
to
discuss
also
if
the
backend
is
really
take
all
the
this
rendering
on
the
server
and
just
rather
do
it
on
monaco,
because
setting
monaco
in
read
only
we
have
everything
here.
This
is
a
huge
load
on
the
servers
and
it's
so
much
faster.
I
can
load.
A
A
This
is
basically
how
fast
it
is
now
with
monaco
just
opening
a
file,
because
what
we
do
is
that
we
already
start
as
soon
as
you
just
mouse
over
to
click
on
something
we
already
start
pre-loading
the
raw
file.
In
the
background,
and
as
soon
as
you
hit
the
file,
we
already
have
pre-loaded
it.
So
that's,
basically
the
instant,
and
if
you
go
to
team
yarmouth,
then
you
have
team
yammer
with
30
000
lines
and
basically
you
can
go
ahead.
A
B
A
B
A
Classic
pc,
the
idea
is
to
make
now
those
final
measurements
for
all
those
steps
between
the
current
solution
and
this
new
proposal.
That's
exactly
what
is
possible
in
the
plc
and
basically
squeeze
out
of
that
and
epic,
with
the
different
implementation
steps
for
getting
there,
which
starts
with
taking
that
this
pre-loading
directive
utility
to
keep
that
ui.
A
Getting
a
graphql
endpoint
to
just
give
us
the
information
of
a
file
and
not
this
whole
pre-rendered,
blog
and
so
on,
and
so
on,
and
and
hopefully
get
them
enough
enough
focus
behind
it.
Ux
is
totally
important
and
to
really
focus
on
this
in
the
prioritization
to
have
a
much
much
much
much
faster
experience
than
now.
C
Okay,
I'll
repeat,
I'm
completely
shocked.
This
is
mind-blowing.
I
I
I
have
some
questions,
but
it's
just
you
know
it's
more
more
to
the
point
of
nate
picking
like,
but
maybe
maybe
you
have.
Obviously
you
you've
thought
about
this,
but
when
you
hover
over
a
file,
we
start
preloading
things.
How
do
we
deal
with
the
double
fetching
if,
for
example,
if
I
hover
over
a
file,
but
the
file
hasn't
been
fetched
before
I
land
on
the
on
the
file
page.
A
A
B
C
B
A
And
it's
doing
this,
it's
doing
the
same
call
on
this
view
then
on
the
outside,
but
if
you
call
it
on
the
hover,
it's
already
in
the
cache,
because
now
we
have
one
state
for
everything
right.
We
could
even
go
so
far
and
that's
step
number
14.
Is
you
hit
gitlab.com
the
domain?
We
know
flight
in
this
case
is
one
of
your
most
used
project.
Okay,
let's
go
ahead,
let's
preload
the
tree,
let's
preload
stuff
around
this,
and
then
you
have
like
a
how.
A
A
C
C
So
far,
I
think
to
to
say
that
this
project
is
or
like
this
project
has
been
updated
by
you
recently
like
we
have
the
information
about
recently
updated
projects,
no
matter
whether
by
you
or
any
other
developer.
But
we
don't
have
this
information
concern
on
the
user.
Like
most
recent
projects
for
the
user,
we
don't.
B
C
I
mean
it's
crazy,
no
seriously,
it's
like
it's
it's
mind-blowing
and
I'm
I'm
I'm
really
interested
in
this.
Actually
in
line
editing
I've.
I
I
think
about
like
half
a
year
ago,
I
I've
I
had
this
poc
for
inline
editing
of
the
snippets
and
but
it
just
you
know
it's
permanently
now
a
pipeline
and
we
never
have
time
to
get
back
to
it.
C
A
Like
that,
that
is,
that
is
something
we
definitely
need
to
do.
On
top
of
it,
you
pre-render
this
stuff
and
also
images.
This
is
now
100
focused
on
just
showing
a
file.
So
simply
in
the
sense
of
okay,
we
take
a
transfer
file
and
show
it.
How
fast
can
this
be?
Because
the
huge
difference
here
is
not
only
that
we
are
doing
this
mouse
over
preloading?
A
A
We
really
literally,
I'm
not
sure
why
it's
not
showing
here,
but
normally
it
even
shows
me
the
kilobytes
of
that
one
attribute,
and
the
problem
here
is
that
the
timing
of
the
whole
thing
this
takes
1.24
seconds
for
literally
five
lines.
So
what
I
do
now
is
I
open
this
whole
thing
in
the
new
tab
and
I
will
try
to
do
some
magic,
and
this
is
the
raw
file
and
the
raw
file
is
not
an
exception.
A
C
Lines
they're
going
for
raw
files.
This
is
this
is
actually
super
cool.
This
I
was
thinking
about
this
idea
at
some
point,
but
I
rejected
this
because
our
viewers
actually
provide
some
more
abstractions
comparing
to
to
rendering
monaco
in
just
the
re
read
only
mode
because,
for
example,
you
cannot
at
the
moment.
This
is
exactly
what
I'm
going
to
implement
this
milestone
right
now.
C
A
The
target
is
really
to
get.
I
just
started
before
this
call
all
the
measurements
for
the
bigger
files
and
the
editing,
and
this
will
make
a
huge
difference
because
we're
not
doing
anything
we're
just
sending
one
line
set
edit
in
the
end
of
story.
We
would
need
to
load
an
additional
view
component
at
the
bottom
to
do
all
the
commit
funkiness.
A
C
We
have
this
problem
in
snippets
and
we
have
this
still
have
this
problem
with
web
id,
where
we
cannot
load
the
content
of
a
file
before
we
get
a
metadata
about
the
file.
That
would
tell
us
whether
we
can
show
the
content
at
all.
The
reason
is
we
as
we
as
we
saw,
we
have
the
the
files
that
should
not
be
shown
as
code
like
markdown.
C
A
C
A
Yeah,
so
we
could
raise
this
and
definitely
that's
one
of
the
items
on
the
issue
on
the
epic
would
be.
One
of
the
issues
is
really
get
into
graveyard
in
points
to
get
block
info
to
get
that
parsed.
What
type
of
editor
should
we
show,
in
which
case
have
them
nicely
on
on
webpack
loading?
Only
when
we
have
certain
types
of
files
make
this
a
little
bit
better
around
the
loading.
This
is
really
just
to
show.
A
The
vision
of
going
from
one
implementation
to
another
can
lead
us
to
way
way
way
much
faster
workflows.
This
is,
as
you
said,
this
is
not.
This
is,
I
would
say,
thought
through,
but
not
completely
implemented.
There
are
a
lot
of
things
that
we
need
to
consider
on
the
way,
but
it's
way
less
than
I
would
have
expected
so.
A
Yeah,
it's
is
nothing,
this
is
yeah,
and
this
is
even
without
optimizations.
At
the
moment.
I
believe
strongly
that
we
could
basically
create
a
virtual
monaco
editor
that
already
gets
something
maybe
and
starts
rendering
why
we
do
stuff
etc.
So
this
is
all
which
I
will
leave
with
you
and
basically
help
to
get
us
going
from
product
and
you
excite
into
the
direction.
That's
my
next
picture.
A
A
Cool
and,
as
I
said,
step
14
might
be
a
pwa
where
we
preload
him
before
preloading,
but
the
other
big
step
that
I'm
foreseeing
for
death,
and
I
just
had,
for
example,
my
one
with
donald-
is
to
get
the
same
model
of
combining
workflows
into
one
view:
application
I'm
still
not
talking
about
vue.js
for
everything.
Just
one
view
thing.
No,
no,
no!
No,
don't
get
me
wrong
with
it.
A
It's
just
about
getting
stuff
of
a
workflow
and
that's
why
I
think
it's
very
important
to
get
the
data
team
together
with
the
ux
team
into
one
place,
multiple
things
that
you
do
in
combination,
so
issue
list
plus
issue,
detail,
plus
issue
board.
Maybe
one
view
app.
This
experience,
preloading
snappy
loading,
who
is
stopping
us
off
simply
pre-loading,
all
your
assigned,
much
requests
with
the
latest
content
of
the
merge
request.
That
has
just
changed
the
last
three
days
as
soon
as
you
hit
the
domain,
because
it's
the
next
big
step.
A
B
Yeah
I
mean
from
assigned
to
mars
or
from
the
to-do
list,
like
it's
always
painful
in
the
to-do
list,
if
you're
clicking
something
and
then
it
loads,
and
then
you
scroll
to
a
thing
and
then
it
still
loads.
The
comments
of
the
merch
request
right
and
it's
like
hey.
If
we
could
all
start
all
that,
and
then
you
click
on
something
that
would
be
amazing.
You
just
jump
right
where
you
want
to
be
right.
C
A
Thank
you.
Thank
you,
yeah.
It's
this
classic
idea
that
you
have
already
for
some
time
in
your
head,
but
you
had
never
have
time.
Then
you
simply
say:
okay,
I
need
to
sit
down
and
that's
really
the
target
this
is.
I
present
I
will
put
also
the
mr
there's
already
an
outfit
of
all
the
changes.
This
is
really
just
of
a
I.
I
need
to
find
a
better
name
for
it,
but
I
use
this
in
the
past
of
simply
showing
where
we
can
get
to
even
if
it's
not
fully
implemented.
A
Yet
this
is
not
going
to
production.
This
is
just
to
show
others
what
we
can
do
if
we
are
going
down
this
path
and
fill
all
the
holes
that
are
still
missing,
but
I
really
hope
that
this
gets
the
same
excitement
on
other
ends
and
yeah,
so
cool
I'm
not
able
to
find
the
gender
at
the
same
time.
So
is
there
any
more
in
any
other
topics?
Otherwise,
I'm
happy
to
close.
C
Today's
meeting
and
give
you
back
just
just
one
thing:
tim
I'll:
if
you're,
if
you're
interested
I'll,
I
would
like
to
to
send
you
this
merge
request
or
like
it's
the
issue
actually,
but
in
context,
editing
of
snippets,
so
that
we
could
figure
out
like
shared
ideas,
of
how
the
how
this
works
for
files
and
for
snippets
and
why
not
for,
for
anything
else,
perfect,
yep,
cool
I'll
I'll.
Do
it
on
the
research
performance,
okay,.