►
From YouTube: PnP Virtual Conference - 09/2020 - Ways to optimize SharePoint Framework highly custom Intranet
Description
This session will share the development techniques that Velin's teams used to optimize for better performance SharePoint Framework highly customized Intranet homepage used than more than 40 000 users on daily basis.
Speaker: Velin Georgiev (Pramerica) | @VelinGeorgiev
Supporting materials:
• Intelligent Intranet - https://resources.techcommunity.microsoft.com/intelligent-intranet/
• Getting started with SharePoint Framework - https://aka.ms/spfx
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
What
I
do
in
my
business
is
that
I'm
consultant
between
the
business
and
the
development
teams,
where
I
identify
requirements,
and
I
try
to
translate
those
requirements
from
the
business
to
the
development
team,
so
everyone
can
understand
each
other,
I'm
a
microsoft
mvp,
I'm
part
of
the
pmp
core
team
and
also
certified
azure
solutions.
Architect.
A
A
The
nowadays
customers
or
users
expect
fast
page
load
and
because
they're
using
public
websites
like
amazon,
like
google,
like
the
sites
of
microsoft,
they're
used
to
see
a
fast
load
times
and
if
the
page
loads
slower
it's
less
likely
to
be
attractive
for
those
users
and
they're
the
same
users
in
the
corporate
world.
The
same
employees
are
used
to
that
approach
and,
according
to
google
47
of
the
customers
expect
your
page
to
be
fast
enough.
A
Now
this
is
a
real
customer
case
that
I've
been
working
for
the
past
few
months
and
the
page
the
internet
page,
is
being
hit
between
two
and
two
and
a
half
millions
per
month.
That
means
that
it's
between
mid
size
and
big
size
organization
and
it's
a
sharepoint
page
and
before
we
started
optimizing,
the
page
was
loading
in
these
time
frames.
It
was
loading
on
average,
seven
around
70
seconds
and
we've
put
a
threshold.
We
said
that
we
need
six
seconds.
A
Everything
above
six
seconds
is
not
normal
for
us,
because
it's
too
slow-
and
this
is
the
breaking
point
here
after
our
pocs-
you
can
see
that
the
page
vault
in
4.5
seconds
and
afterwards,
we've
got
a
good
success
with
the
following
pocs,
where
at
times
the
page
were
4.3
seconds,
you
might
say
it's
still
slow.
Why?
For
a
second-
and
this
is
a
good
question-
it
could
be
four
seconds
because
of
various
reasons,
especially
in
inside
corporate
organizations,
and
many
of
those
reasons
might
not
be
the
developers
or
the
custom
application
itself.
A
It
could
be
the
corporate
proxy
intercepting
and
slowing
down
the
network.
It
could
be
too
many
policies
slowing
down
the
the
hardware.
It
could
be
the
hardware
itself
because
the
developers
are
used
to
work
with
modern
hardware,
modern
machines,
but
the
average
accountant
might
be
using
a
machine
that
is
10
years
old
and
it
might
not
keep
up
in
the
processing
of
too
much
javascript,
for
example,
could
be
a
poor
vpn
or
someone
working
from
a
remote
connection.
A
We
recently
we
had
a
case
where
a
lady
was
working
from
a
rural
place
where
the
download
speed
was
30k
per
second
and
she
was
complaining
because
the
site
is
low,
but
this
affects
the
the
analytics.
This
affects
the
metrics.
So
that's.
Why
and
of
course,
because
of
all
these
reasons,
the
corporate
employees
will
have
a
total
total
some
tolerance
and
they
would
not
expect
below
two
seconds
probably
now.
Another
good
reason
is
your
custom
application.
A
Your
custom
application
might
have
might
be
having
a
blocking
code
that
is
slowing
down
the
page,
but
you
might
not
know
it
and
it
might
be
done
by
a
junior
developer
or
someone
else,
and
we
have
to
investigate
and
we
can
actually
investigate
there.
We
cannot
solve
the
corporate
proxy
as
a
developers,
but
we
can
solve.
A
We
can
do
some
optimizations
on
the
customer
applications
themselves
a
little
bit
about
the
home
page.
It
is
a
communication
site,
it
is
using
a
modern
page,
but
it
has
34
custom
features,
so
the
whole
page
is
built
around
custom
web
parts
and
app
customizers
that
isn't
a
single
out-of-the-box
web
part
and
it's
pulling
data
from
azure.
It's
pulling
data
from
internal
systems;
this
is
how
it
looks.
It
has
customizer
on
top.
That
is
a
navigation,
but
it
has
much
more
functionality
that
you're
seeing
here
and
we'll
talk
about
that
later.
A
It
has
a
curl
cell
looking
web
part.
That
is
showing
news,
and
then
it
has
another
one
that
is
showing
users
business
unit
news.
That
means
a
personalized
content
and
there
is
another
one:
that's
showing
user
subscriptions
that
it
means
even
more
personalized
content
when
the
user
has
saved
something
in
their
user
profiles
or
in
cosmos
db,
and
we
have
to
serve
it
from
here
and
then
they're
the
company
events,
and
then
there
is
the
footer.
A
So
nothing
really
fancy
here,
but
all
these
different
web
parts
are
highly
customized
and
you
have
you
might
have
pinning
in
the
front,
which
is
additional
logic.
You
have
rules
for
localization.
That
means
if
the
user
is
in
a
different
location,
a
different
type
of
news
has
to
be
pulled
and
rules
for
a
user
belongs
to
a
business
unit
on
different
segment.
Different
rules
supply.
A
A
A
So
this
is
the
top
ten
timeline
where
we
can
control
and
we
can
select
different
timelines.
You
can
see
that
the
whole
page
loaded
in
4.6
seconds
or
something
like
that
and
here
is
the
network.
So
the
network
is
really
important
and
then
we'll
have
a
look
at
the
main
main
javascript
thread.
These
are
the
two
things
I
usually
look
at
and
I
don't
look
at
the
rest
of
these
tracks
here.
A
So
we'll
keep
it
simple
and
we'll
try
to
explain
the
network
first
and
as
on
the
network,
you
can
see
that
this
is
the
server
and
the
server
responded
in
that
time
and
then
it's
starting
to
download
different
things,
and
there
is
a
lot
of
happening
in
a
sharepoint
page.
I
would
just
select
the
whole
team
line
timeline
and
we
can
see
that
there
is
a
lot
happening.
A
There
is
a
lot
of
things
here
happening
and
we
have
a
pages
assembly
that
is
taking
sp
pages
assembly
that
is
taking
a
fair
amount
of
time
loading,
but
we
also
have
our
hello
world
web
part
that
is
taking
even
more
and
the
criteria
here
is.
These
are
loading
in
parallel
and
if
your
web
part
is
loading
more
than
the
pages
assembly
and
the
pages
assembly
is
a
fairly
big
file,
then
you
have
an
issue.
This
is
my
criteria.
A
This
web
part
is
loading
in
700
milliseconds,
which
is
not
acceptable
because
it's
blocking
for
from
that
time.
Here
to
that
time,
here
it's
blocking
that
is
like
300
milliseconds,
it's
blocking
and
your
browser
is
not
doing
anything,
and
this
is
scary
and
we
have
to
take
a
look
at
the
web
part
and
see
why
it's
so
big
and
why
it's
loading
so
slow.
A
A
I've
added
some
useful
links
here,
but
I
use
the
pnp
spfx
generator,
because
when
I
create
a
new
web
part,
the
bundle
analyzer
is
coming
with
with
the
options
there
and
I
don't
have
to
do
anything
done
just
to
start
using
it,
and
I
have
one
web
part
over
here
and
then
I'll
try
to
investigate.
What's
going
on.
A
A
A
Now,
because
I'm
using
the
command
line,
I
have
typed
just
explorer
dot
to
take
me
to
the
solution
folder
and
here
under
temp.
We
have
stats
because
the
stats
are
being
generated.
So
if
I
click
on
that
html
file,
I
will
see
all
the
dependencies
are
inside
my
gs
web
part,
and
you
can
see
that
the
file
is
3.82.
A
Megabytes,
which
is
even
a
gzip
size,
will
be
one
megabyte
which
is
not
quite
acceptable
because
it
will
take
long
time,
especially
if
you're
on
on
mobile
or
remote
space,
and
I'm
sure
we
can
get
rid
of
some
of
those
modules
here
because,
as
you
can
see,
we've
bundled
the
whole
fluid
ui
and
the
whole
material
ui.
And
perhaps
we
don't
need
the
full
libraries.
A
If
I
go
to
my
code,
I'll
have
a
I'll
have
to
take
a
look
and
see
what
I'm
actually
using.
My
code
is
using
my
button
from
one
button
from
material
and
one
button
from
fluent.
So
perhaps
I
don't
need
all
these
libraries.
I
need
just
the
buttons
that
are
here
from
the
libraries
and
probably
I'm
using
the
wrong
import
mechanism.
A
Both
of
these
should
work,
and
these
will
include
the
whole
library
which
will
add
additional
load
on
your
page
and
imagine
if
you're
using
multiple
libraries,
then
that
file
will
grow
enormously
big,
so
I'll
comment
out
those
and
I'll
leave
just
the
top
one
to
show
you
how
we
will
reduce
the
bundle
and
I'll
comment
out
this
button.
As.
A
A
Now
I
will
rebuild-
or
I
don't
even
have
to
rebuild-
I
will
just
analyze
the
solution
again
and
we'll
see
if
that
has
reduced
the
size
of
it.
It's
three
megabytes
a
nearly
four
megabytes,
a
reload,
and
now
we
have
360
kilobytes,
which
is
a
huge
saving
and
I'm,
including
only
just
button
related
stuff.
Here,
I'm
not
seeing
any
more
lists
in
the
full
library.
Another
way
to
improve
performance
and
experience
is
by
caching
some
stuff
on
the
browser
and
there
are
different
ways
to
cache
on
the
browser.
A
A
A
So
it's
a
basic
fetch
query
here
that
is
saying,
get
user
profile
and
I've
collapsed.
Those
because
we
don't
need
to
look
at
those
at
the
moment
and
it's
just
doing
a
query
against
the
user
profile
service
and
it's
getting
the
user
profile
display
name
here
and
it's
displaying
it
within
the
web
part,
but
there
is
no
catching
at
all
at
the
moment.
It's
just
a
plain
web
request.
Every
time
when
you
open
the
page,
the
way
to
do
it
with
cache
is
adding
a
little
bit
more
code.
A
So
here
we
have
get
user
profile,
which
is
just
a
rest
call,
and
here
I've
changed
it,
where
we've
renamed,
that
function
from
user
profile
to
user
profile
server,
and
it's
pretty
much
the
same
with
one
difference
and
our
current
user
profile
now
is
slightly
different.
It
says
session
storage,
get
item
display
name.
That
means
that
if
the
item
is
within
the
storage,
the
browser
storage,
we
will
use
it
instead
of
going
to
the
server,
but
if
it's
not
there,
if
it's
null
we'll
still
execute
the
server
call.
A
And
finally,
when
we
get
the
data
here,
we
will
store
it
into
the
local
storage.
So,
as
you
can
see,
it's
a
simple
few
lines
here
and
down
there
and
the
way
we
get
items
from
the
station
store
is
just
get
item.
The
key-
and
here
it's
just
set
item
the
key
and
the
value
and
the
value
has
to
be
streamed.
A
The
next
way
to
improve
your
app
is
to
move
some
logic
from
the
client
to
the
server,
and
this
is
maybe
where
the
biggest
improvement
will
come.
If
you
have
really
really
customized
pages-
and
let
me
show
you
what
I
mean,
this
is
what
we
had.
We
had
aid
web
requests
for
the
navigation
three
for
that
webpart
four,
four,
two:
four
in
general,
we
had
23
web
requests,
and
these
web
requests
have
to
come
back
and
pre-process
the
data.
A
That
means
that
you're
merging
data
on
the
client
and
you
might
have
a
big
data
sets
that
have
to
be
merged.
Then
the
client
will
have
to
do
all
that
on
the
cpu
of
the
user,
and
sometimes
it's
really
really
slow,
especially
with
hardware.
That's
that
that's
not
prepared
for
that.
Now
we
reduced
20
requests
from
23
by
moving
them
to
a
web
job.
A
A
A
We
do
the
data
merge
there,
and
then
we
move
the
the
data.
That's
been
organized
in
a
way,
so
we
can
quickly
render
it
to
sharepoint
again
into
a
document
library.
It
could
be
a
sharepoint
cdn,
but
the
cnn
cache
is
one
hour,
so
people
will
experience
delays.
A
That
data
is
49
kb
and
it's
loaded
really
really
quickly
on
the
page
and
it's
organized
in
a
way
that
the
time
for
rendering
it's
fast.
That
means
it's
organized
in
a
dictionaries
where
we,
where
you,
where
you
don't
waste
time
in
4-h,
loops,
to
find
out
the
data,
and
you
just
render
it
so
it's
another
way
to
aggregate
the
data
through
a
web
job,
and
this
is
where
we
gained
most,
because
it
was
highly
customized
simply
and
in
a
cases
where
you
can't
use
anything
other
than
sharepoint.
A
We
still
have
to
minimize
the
work
there
by
minimizing
the
queries
we
execute
also
try
to
reduce
as
much
as
we
can
the
expensive
methods
within
our
business
logic
that's
executed
on
the
client
one
way
to
have
a
look
at
your
expensive
methods
in
javascript
is
I'll.
Go
back
to
that
page
again,
I'll
open
the
developer
tools
here,
just
to
show
you
how
you
can
easily
find
functions
that
are
really
expensive
and
they
might
impact
the
performance
and
down
below.
We
have
a
summary
bar,
but
also
we
have
bottom
ups.
A
A
Okay,
the
more
of
your
web
parts
you
are
seeing
here
on
top
the
better.
The
situation
is
so
bear
in
mind
if
you
see
on
top
more
of
hp
pages
assembly
now
that
means
you're
in
a
good
situation.
If
you
see
more
of
your
web
parts
here
very
bad
and
let's
let's
go
into
that
and
and
see
why
I'll,
just
jump
to
my
code
and
I'll
go
to
component
will
mount
here
and
I'll
show
you.
What
I
did
where
is
it
here
and
in
a
component
will
mount.
A
A
A
Three
years
ago,
when
I
started
with
working
with
that
team,
is
we've
created,
simple
manifest
and
then
lately
we
started
using
pull
requests
where
we
were
demanding
on
those
pull
requests
to
be
more
off
and
small,
and
then
we've
elected
some
seniors
to
review
the
pull
requests
and
they
had
to
review
them
closely
and
help
the
other
users
to
provide
a
better,
better
code
base.
A
So
they
try
to
reduce
the
amount
of
code
and
the
amount
of
unnecessary
functions
and
actions
that
are
being
there
just
to
meet
the
unit
test
coverage,
which
proved
to
be
a
really
good
move.
And
then
we
started
using
a
devops
pipeline
where
we
were
checking
for
failures,
and
this
basically
will
fail
tests.
A
And
then
we
somehow
managed
to
work
with
vendors,
where
the
vendors
were
supposed
to
bring
their
code
to
our
source
code
repositories,
where
we
could
check
them
and
they
had
to
follow
the
same
process
as
follow
the
manifest,
create
pull
requests,
etc,
etc.
A
very
very
good
example
of
that
way
of
working
is
the
office
365
cli.
A
A
Everyone
should
follow
that
and
then
the
pull
request
itself
contains
just
the
fair
amount
of
code
that
supposed
to
be
here
for
every
command
and
it
passes
check
on
a
automated
pipeline.
And
if
you
don't,
if
you
don't
pass
that
check,
no
one
will
bother
reviewing
that.
So
it's
it's
like
another
quality
gate
and
down
below.
There
is
a
detailed
review
of
what
we
are
supposed
to
do,
and
it's
really
really
nice
explained
by
whoever
is
doing
the
review
and
then
the
developer
will
have
to
do
those
necessary
fixes.
A
So
in
general,
this
is
improving
the
quality
and
we
saw
that
with
the
office
deceiver
cli.
I
also
saw
that
on
my
current
role,
where
I'm
working
with
with
different
teams
in
the
corporation,
so
it
is
of
a
great
benefit.
Don't
underestimate
that
and
don't
let
vendors
deliver
code
after
six
months
and
you
have
no
idea
what
is
in
in
that
package.
A
These
are
some
interesting
things
that
we
did
over
the
years
and
first
one
is.
We
were
using
a
rgs
in
in
that
scenario,
with
the
internet
home
page,
we
removed
the
adobe
gs
and
we
started
using
the
out
of
the
box
features
of
the
sharepoint
framework
that
has
built-in
mechanism
to
connect
to
third-party
apis
and
that
improved
as
well
the
page
load
times,
because
we
didn't
have
to
load
that
as
an
external
dependency
anymore.
A
A
If
your
organization
is
using
it
just
do
it
if
you're
using
long
or
short
polling
mechanisms
in
your
javascript
to
poll
api
that
could
also
destroy
the
page
performance.
Please
avoid
those
and
I've
wrote
a
blog
post,
maybe
two
years
ago,
and
it's
still
relevant.
You
can
visit
it
if
you'd
like
with
that.