►
From YouTube: Make the Web Faster! - PHINUG 2021.04
Description
This session is run by the Philippine .NET Users Group (https://meetup.com/phinug) that hosts meetups in Manila, Philippines.
Meetup link: https://www.meetup.com/phinug/events/277174468/
For our next session our talk is going to be about:
Make the Web Faster!
This session demonstrates practical techniques that drop a web page's size from almost 3MB to 143K, and load time from 6 seconds to less than a second, while looking the same! Review tools that validate and describe performance best practices. Explore how to defer resource requests, load resources asynchronously, and prefetch critical resources. Many other performance improvements will be discussed, which can reduce response time while also boosting the scalability and reliability of your site. Learn the techniques that can have the largest impact on web performance with the least amount of work.
==============
About our speaker:
Robert Boedigheimer
Robert Boedigheimer works for Schwan's Home Delivery providing business solutions with web technologies. He is a Microsoft MVP, a Progress Ninja (Fiddler), an ASPInsider, a Pluralsight author, and a 3rd degree black belt in Tae Kwon Do. Robert regularly speaks at national and international events.
Follow him on Twitter at @boedie
Read his blog at: weblogs.asp.net/boedie
A
And
thank
you
for
being
here.
My
name
is
john
nimhab.
I'm
the
community
lead
for
the
philippine.net
users,
group
and
yeah
tonight
we're
good.
We
have
a
very
special
guest
for
and
and
he's
from,
the
us
and
he's
wicked
waking
up
very
early
for
for
us
to
be,
as
we
with
us
here
to
talk
about
web
development,
something
with
that
that
a
lot
of
us
have
been
dealing
with
with,
but
before
that.
A
I
just
want
to
first
take
this
opportunity
to
thank
to
thank
the.net
foundation,
which
has
been
hosting
our
talk.
Our
streams
for
for
for
the
past
few
months,
they've
been
very
supportive
and
very
helpful,
and
I'd
want
to
just
take
this
time
also
to
to
share
that
you
could
actually
join
their
meetup
group.
It's
a
meetup.com.net
virtual
users
group
yeah.
It's
it's!
A
It's
a
great
opportunity
to
to
see
the
different
virtual
events
that
are
happening
all
over
the
world,
not
just
in
the
not
just
in
the
philippines,
but
but
even
even
the
user
groups
in
in
in
the
us,
in
europe
and
in
asia
in
other
other
asian
countries.
Yeah
feel
I
mean
whenever,
whenever
you're
available,
you're
free
you're
free
to
join
those
and-
and
you
know,
make
time
for
them
whether
you're
a
morning
person
or
a
night
owl,
so
so
yeah.
A
We
have
them
as
a
guest
here
and
yeah
so
for
for
tonight
we
do
have
robert
body
jimer
and
he
he's
a
microsoft,
mvp,
a
pluralsight
author
and
an
asp
insider
and
progress
ninja
for
fiddler
and
he's
been
yeah
developing
in
the
web
for
for
for
25
years.
That
draws
me
a
bit
because
yeah
it's
been,
I
mean
when
I,
when
I
went
into
software
development
as
a
as
a
junior
developer
and
joined
the
industry.
A
The
web
was
only
a
few
years
old,
so
it
kind
of
hurts,
but
an
issue
even
back
then,
and
an
issue
still
relevant
now
is
how
to
make
how
to
make
our
web
applications
performance
and
how
to
make
our
our
our
web
faster
and
to
talk
to
us
more
about
the
web
robbers
so
yeah
without
further
ado.
I'd
like
to
introduce
robert
here.
Thank
you,
hello,
hello,
good
evening,
well,
good
morning
to
you
all
right.
B
B
All
right,
let's
get
started,
so
we're
going
to
talk
about
how
to
make
the
web
faster,
and
we
went
through
some
of
my
background.
So
I
won't
spend
a
lot
of
time
on
this,
but
I
do
have
my
twitter,
my
email
and
my
blog
there
and
I
do
have
the
slides
and
the
during
the
talk
I'm
going
to
show
a
web
page
before
and
after
the
changes.
So
I
do
have
access
to
that
code.
B
C
B
That's
the
problem
I'll
talk
about
how
you
can
tell,
but
typically
that's
not
where
the
issues
are.
So
when
we
talk
about
performance,
we're
going
to
focus
on
really
three
things:
we
want
to
make
fewer
http
requests.
So
I
put
that
in
italics,
because
http
2
changes
that
a
bit
which
we'll
talk
about,
but
obviously
we
don't
want
to
request
things.
We
don't
need.
We
want
to
send
as
little
as
possible
and
we
want
to
send
it
as
infrequently
as
possible.
B
I
want
to
talk
briefly
about
fiddler,
so
fiddler
is
a
tracing
tool
that
was
built
specifically
for
http
and
https
was
created
by
eric
lawrence.
It
was
acquired
by
telerack
and
now
progress.
I
have
a
link
there
where
you
can
see
how
to
use
it,
I'm
going
to
use
it
throughout
the
talk.
So
I
just
wanted
you
to
be
familiar.
I
think
most
web
developers
I
run
into
today
have
used
it,
but
if
you
haven't,
I
just
wanted
you
to
know
where
you
could
find
it
also
they've
created
fiddler
everywhere.
B
B
B
That's
pretty
typical
and
if
I
look
at
fiddler
there's
a
lot
of
different
things,
we'll
look
at
in
here
later
as
we
go
through
the
talk,
but
the
first
thing
I
like
to
start
at
is
looking
at
the
statistics,
so
I
can
see
that
there
were
12
requests
made
and
it's
about
three
meg.
So
that's
not
that
atypical
most
websites
or
pages
today
are
about
75
requests.
B
So
if
I
look
back
at
what
I
had
before,
you
can
see
that
my
entire
set
page
now
is
about
as
small
as
some
of
single
images
were
before.
So
I
didn't
use
every
technique.
I
could
have
used
for
this
sample
page,
but
I
used
a
lot
of
them.
So
that's
kind
of
the
motivation
for
the
kind
of
difference
you
can
make.
So
we
went
again
from
three
meg
down
to
about
380
k.
So
that's
a
huge
improvement
and
again
we'll
show
fiddler
throughout
the
talk
here.
B
B
The
first
one
we
talk
about
is
first
byte,
so
one
if
it
does
turn
out
when
you
measure
that
your
first
byte
takes
two
seconds.
That
is
server
side
code
right.
Something
is
taking
a
long
time
for
the
browser
to
reach
the
server
and
get
back
the
first
byte
of
the
response.
So
if
that
is
large,
you
do
have
back-end
problems
but,
like
I
said,
that's
not
typical.
With
most
websites
I
like
to
use
speed
index
so
speed
index
is
a
measurement
of
how
long
it
takes
the
content
in
the
viewport
to
be
basically
complete.
B
There's
lots
of
other
ones
like
I
said,
people
keep
adding
new
metrics
all
the
time,
one
of
the
new
ones
that
the
chrome
team
pioneered
was
core
web
vitals.
So
they
said,
there's
really
three
components
of
web
pages
that
matter
today,
the
largest
contentful
paint.
So
when
you
see
most
of
the
page,
the
first
input
delay,
which
is
just
how
soon
after
the
page
displays,
can
the
person
actually
start
to
interact
with
it
in
cumulative
layout
shift?
B
I
also
use
fiddler
as
we'll
see
when
I
spot
check
a
website,
I'll
typically
open,
fiddler
and
I
know
a
lot
of
the
performance
techniques.
So
I
can
look
specifically
for
things
also
when
I
have
so
I
work
full-time
on
an
e-commerce
website.
There's
two
different
ways:
we
measure
that
one
we
use
what's
called
synthetic
monitoring,
so
I
have
a
service
that
we
pay
to
watch
various
web
pages
on
my
site
from
different
places
for
us
in
the
united
states.
B
So
every
hour
they
keep
hitting
the
same
pages
and
measure
from
the
same
places.
So
that's
nice,
because
if
I
make
a
change,
I've
got
a
consistent
set
of
clients.
If
I
turn
on
a
new
technique
tomorrow,
I
can
see,
did
it
get
faster
by
25?
That's
a
good
way
to
tell
it's
also
important
to
know
that
you
know
I
develop
on
a
fast
machine
and
I've
got
a
good
connection,
but
that
doesn't
mean
that's
what
my
customers
have
right.
B
A
B
Problem
and
see
what
was
slow,
but
I
can
also
roll
it
up
and
see
how
our
phones
performing
versus
desktop,
so
both
of
those
are
useful.
So,
let's
take
a
look
at
web
page
test,
so
I
pre-recorded
you
can
go
out
to
web
page
test
and
actually
punch
any
url.
So
I
hosted
these
same
pages
on
azure
and
I
went
out
and
ran
this
ahead
of
time.
It
usually
takes
maybe
a
minute
or
so
to
run
and
what
it
does.
B
B
So
you
can
see,
I
ran
and
got
the
web
page.
I
got
my
connection.
I
started
downloading
some.
You
can
see
some
css
took
a
while.
I
have
a
lot
of
images
that
are
taking
quite
a
few
seconds:
that's
one
and
a
half
seconds
to
seven.
So
on
this
connection,
it
took
about
six
seconds
to
get
some
of
these
images.
B
Also,
I
can
look
at
a
connection
view
I'm
using
http
1.1,
so
it
uses
six
connections
per
host
and
I
can
see
how
those
connections
were
used
in
each
one
of
those.
It
takes
a
little
time
to
start
up,
but
what
I
like
also
seeing
in
web
page
test,
if
I
go
back
here,
I
like
to
show
to
marketing
people
visual
things,
make
a
difference
to
people
right.
I
can
tell
them
it
takes
five
seconds.
They
also
record
videos.
B
So
if
I
show
what
the
experience
is
like,
the
customer
sees
that
slow
paint
and
the
shifting
so
again
it
took
about
five
seconds.
If
I
look
at
the
after
version
again,
we
can
see
some
scores.
I
ran
it
on
a
virtual
machine.
I've
got
some
security
work
I
could
do,
but
I'm
graded
as
a
across
the
board.
B
B
You
can
see
the
diagram
it's
doing
a
lot
more
stuff
in
parallel,
because
I
used
http
2.
It
only
needs
a
single
connection
and
so
there's
a
lot
of
good
things
there.
But
again,
if
I
show
the
video
this
is
the
compelling
part,
instead
of
being
six
seconds
and
kind
of
jumping
around
within
a
second,
I
see
the
whole
page
painted
and
I'm
ready
to
interact.
B
B
It
helps
to
know
if
performance
matters
for
your
website,
so
both
amazon
and
walmart
decided
they
were
going
to
do
an
a
b
test
and
they
intentionally
slowed
their
website
by
a
hundred
milliseconds.
So
a
tenth
of
a
second
slower
for
both
amazon
and
walmart
worked
out
to
be
one
percent
of
their
sales,
so
think
about
that
100
milliseconds
slower,
they
lost
one
percent
of
their
sales.
So
I
think
it's
important
to
get
that
metric
for
yourself.
I
would
love
to.
B
I
haven't
been
able
to
convince
people
this
to
let
me
intentionally
slow
our
website,
but
I
want
to
know
that
measurement,
because
every
time
a
designer
comes
and
says
we
should
use
a
new
font
on
the
website.
I
could
measure
how
much
time
that
font
will
add
to
the
average
customer
and
if
I
could
know
this
number,
I
could
say
the
new
fonts
200
milliseconds,
maybe
for
me
I'd
lose
two
percent
of
my
sales.
The
discussion
is
just
a
lot
easier
with
marketing
people.
B
When
I
can
say
here's
how
much
money
you're
trading
off
to
get
what
you
want
visually.
It's
also
important
to
compare
with
your
competitors.
So
if
you
come
out
here,
there's
a
rum
vendor
called
speed
curve
and
they
list
out
a
lot
of
very
popular
websites.
I
can
come
out
here
and
say
on
a
slow
device
on
retail
websites.
B
How
do
I
compare
so?
I
can
come
out
and
say:
how
do
I
compare
to
the
amazons
of
the
world?
You
know
they're
taking
about
eight
seconds
here
on
a
slow
connection,
just
because
it's
been
out
there
for
a
long
time
that
websites
should
be
in
two
seconds.
Well,
that
depends
on
your
connection
right.
So
it
helps
to
be
able
to
show
people
how
do
we
rate
compared
to
other
major
websites,
so
you
know
how
well
you're
doing
so.
B
B
And
we
all
use
different
frameworks
and
web
servers.
This
applies
to
everybody's
website,
so
I
won't
show
how
to
turn
it
on
I'm
in
asp.net
with
iis.
I'm
just
going
to
show
you
the
technique,
explain
why
it
matters.
You
can
go
figure
out
how
to
enable
that
on
your
own
particular
environment,
and
I
kind
of
rank
them
from
easy
and
important
first.
These
are
things
that
I
hate
to
say:
everybody
should
do
it,
but
turn
these
things
on
test
pretty
much
guarantee.
B
B
We
turn
this
on
probably
15
years
ago
for
our
website.
We
were
running
out
of
bandwidth,
we
were
in
rural
minnesota
and
we
were
using
up
a
lot
of
bandwidth
for
our
website,
so
we
turned
on
compression
to
save
bandwidth
and
the
day
we
turned
it
on.
We
cut
our
bandwidth
usage
in
half,
so
I'm
talking
about
perf
today,
but
we're
also
talking
about
money
right.
B
B
If
I
were
to
show
without
compression
it
was
about
160k,
so
things
like
css
javascript,
they
compress
really
well
so
just
turning
on
that
feature
I
went
from
you
know,
23
or
160k
down
to
23k
that's
a
huge
difference,
especially
on
slow
connections.
There
are
different
types
of
compression.
If
I
could
have
used
broadly,
I
would
have
gone
down
to
17k.
B
So
just
look
at
compression.
I
turn
it
on
for
static
files,
so
javascript
css.
I
also
turn
it
on
for
myself
for
dynamic
files,
so
I
use
asp.net.
You
come
to
my
website,
it's
different
for
every
customer.
It's
still
worth
compressing
for
me
because
that
speed
to
get
it
to
the
client
makes
a
big
difference.
So
this
is
a
good
thing
to
look
at
if
you're,
not
using
this
strongly
recommend
you
do
the
next
one
is
content
expiration.
So
the
idea
with
this
is,
I
want
to
leverage
the
browser's
cache.
B
You
got
all
of
my
javascript,
my
css
and
my
images,
and
what
I
want
to
do
is
if
you
come
back
today,
you
hit
my
asp.net
page.
Let's
say:
nothing's
changed.
I
already
have
all
of
these
images,
javascript
and
css
they're
already
sitting
on
your
machine.
I
would
love
to
use
everything,
that's
on
your
own
machine
and
not
come
back
to
my
server
for
that.
B
It'll
save
me
bandwidth,
it'll
save
me
load
and
it's
not
going
to
get
faster
than
sitting
on
your
own
machine
by
default.
If
you
don't
say
differently,
what
browsers
do
is
they
look
at
when
the
file
was
changed
and
they
decide?
I'm
not
sure
if
this
file
has
been
changed
or
not.
They'll
send
this
if
modified
sense.
B
So,
even
though
I
might
have
the
css
file
sitting
locally
and
I
could
show
to
you
immediately
if
I
don't
set
a
content
expiration,
the
browser
might
choose
to
go
back
to
the
server
and
say
I
don't
know
if
this
has
been
updated.
It'll
travel
all
the
way
to
my
server.
My
server
will
say:
hey
didn't
change
it
304,
that's
a
wasted
trip.
Sometimes
that
trip
to
check
is
just
as
expensive
as
the
actual
download.
B
B
And
if
we
come
back
in
here,
I'm
going
to
hit
ctrl
f5
to
force
that
to
download,
and
if
you
look
there's
a
caching
column
here
I
didn't
set
anything
so
I
left
it
up
to
the
browser
to
decide,
and
I
don't
like
to
do
that
right.
I
don't
want
the
browsers
deciding
when
they
come
back
and
ask
for
things.
If
we
go
back
to
the
after
version
I'll
hit
ctrl
f5
again,
you
can
see.
I
set
caching.
B
These
are
second,
so
I
specifically
said
I
don't
want
you
to
get
my
css
or
my
javascript,
and
this
turns
out
to
be
a
year,
and
I
don't
want
you
to
come
back
for
images
for
30
days.
So
what
does
that
mean?
If
you
came
and
got
it
my
css
within
a
year
ago,
don't
bother
to
come
and
get
it
again
so
the
way
I
do
this
for
real
in
production,
I
tack
on
hashes
or
version
numbers
is
what
I
use
on
my
production
website
and
I
get
the
best
of
both
worlds.
B
Every
time
I
do
a
build,
this
link
would
have
a
new
version
number
in
it.
So
if
I
did
have
to
change
my
css
when
I
built
it
again,
there'd
be
a
new
version
number
because
of
the
version
number
the
browser
would
say.
I
don't
have
that
version
in
my
cache
and
would
come
back
and
get
it
so
again.
I'm
saving
bandwidth
load.
All
of
that
look
into
content.
B
B
So,
if
you're
familiar
with
latency
it's
just
how
much
time
does
it
take
to
travel
to
the
server
and
get
an
answer,
and
when
you
read
that
article
for
most
websites,
so
we're
not
talking
streaming
netflix
here
that
bandwidth
will
make
a
difference
to
that
normal
websites.
It's
usually
the
latency
that
matters.
B
So
what
I
want
to
do
with
latency
is.
I
can't
make
the
speed
light
faster,
but
I
can
serve
content
it
from
a
server.
That's
closer
to
you
than
my
data
center,
so
the
idea
with
a
cdn
and
there's
lots
of
them.
They
have
a
global
network
of
servers
that
are
geographically
closer
to
the
customers
than
where
I'm
at
and
I
used
it.
We've
done
this
for
years
same
problem.
We
had
bandwidth
problems,
we
decided
to
use
a
cdn
pretty
much
to
offload
the
bandwidth.
B
So
I
put
all
my
images:
css
javascript
fonts,
the
fonts
I
put
in
italics
is
because
of
some
http
2
stuff,
which
I'll
show
you,
but
the
idea
is
instead
of
referencing
my
files.
So
here's
how
I
used
to
do
an
image
reference
from
my
website
when
I
get
a
cdn
they'll,
give
me
a
sub
domain
so
pretend
my
website
is
example.com.
B
B
Cdn.Example.Com
it'll
figure
out
the
closest
cdn
server,
so
I'm
sure
that
there's
a
cdn
server
in
the
philippines
for
this
particular
cdn
provider.
So
the
first
one
of
you
that
would
come
and
hit
my
website.
It
would
say:
oh
cdnexample.com,
it
gives
you
back
an
ip
address
for
that
server
in
the
philippines.
It's
going
to
look
for
my
flag,
that's
small!
It's
not
there!
Okay,
the
cdn
will
come
back
and
get
it
from
my
data
center
in
minnesota.
B
Pull
it
back.
It'll
then
cache
it
locally,
using
all
the
caching
rules.
We
talked
about
in
the
philippines,
so
now
the
everybody
else
who
visits
from
there
you're
going
to
pull
it
locally.
So,
instead
of
traveling,
you
know
across
the
ocean
to
hit
my
server
it's
getting
it
locally.
So
again,
saving
me
bandwidth,
saving
me
load,
but
the
most
important
thing
is:
I've
really
cut
the
latency
and
again
that's
really
easy
to
set
up
there's
so
many
vendors
that
do
it.
It's
really
cheap
and
all
you
have
to
do
is
change.
B
B
B
B
B
Just
so
you
know.
So
I
do
this
for
all
of
my
production
files.
When
you
get
to
the
browser
and
need
to
troubleshoot,
you
can
use
the
pretty
print
features
or
you
can.
I
use
source
maps
to
map
back.
So
as
a
developer,
I
can
still
go
into
developer
tools
and
see
the
actual
source,
but
I
don't
want
customers
that
don't
care
to
spend
the
extra
time
doing
that
download
in
the
http
1.1
days.
We
took
all
of
our
javascript
files
and
bundled
them
into
a
single
javascript
file.
So
we
talked
about
browsers.
B
Only
have
six
connections
in
the
http
1.1
world,
so
making
less
connections
by
bundling
them
together
was
a
huge
improvement.
So
just
by
doing
minification
and
bundling,
I
cut
my
homepage
time
in
half,
which
is
great,
took
me
five
six
hours
to
set
up
my
build
process
and
it
works
great.
So
I
highly
recommend
that
you
minify
your
css,
your
javascript.
B
B
Next
big
area
people
spend
a
lot
of
time
on
and
can
make
mistakes
is
using
images.
So,
as
we
said,
I've
been
doing
web
development
for
a
really
long
time
years
ago.
We
wanted
to
do
a
gradient
where
the
color
slowly
changes
from
red
to
white,
for
instance.
That
wasn't
something
that
you
could
do.
So
you
typically
would
make
an
image
that
had
that
gradient.
B
So
you
were
forced
to
use
an
image
to
do
things
like
gradients
or
even
fonts
years
ago
there
were
not
web
fonts,
and
so
people
had
a
certain
font
they
wanted
to
use.
Sometimes
they
would
put
that
font
in
a
text
image.
You
know
into
an
image
so
now
you're
downloading
an
image
just
to
get
the
font
you
want
now
that
we
have
web
fonts
and
gradients.
If
you
can
avoid
using
an
image,
it's
typically
a
lot
smaller
and
more
efficient
to
do
those
things
in
css3.
B
So
if
you
can
do
that,
the
next
thing
I
see
people
make
mistakes
on
is
using
the
proper
type
of
images.
So
if
you're
doing
logos
today
or
clipart,
that
sort
of
thing
you
really
want
to
use,
svg
svg
is
a
scalar
vector,
graphics
and
what
it
is
is
it's
mathematically
drawing
things
instead
of
using
bitmaps
and
so
they're
resolution
independent.
B
B
B
The
problem
is,
it
doesn't
have
good
support
now,
so
let's
go
out
and
look
if
you've
never
used.
Can
I
use
you
can
come
out
here
and
type
in
different
html
features
and
such
you
can
see.
Avif
has
some
support,
but
it
doesn't
it's
not
supported
by
edge
it's
not
supported
by
safari.
I
have
a
lot
of
mobile
users,
so
if
I
choose
to
use
avif
people
on
firefox
and
chrome
can
get
smaller
images,
but
then
I
need
a
fallback
using
something
like
picture.
B
So
that's
why
I
haven't
used
this
yet,
like
I
said,
I'm
really
excited
about
jpeg
excel.
Unfortunately,
no
browser
actually
supports
it.
Yet
so
just
keep
an
eye
on
these
formats
they're
coming,
but
for
now
I'm
recommending
jpeg
and
if
you're
not
sure-
and
sometimes
I
get
into
bit
debates
with
people,
and
they
say
why
don't
you
use
png
for
that?
Well,
if
you're
not
sure
test
it
right
I
mean
so.
I
took
I
went
to
sydney
and
they
have
this
cool.
B
B
B
The
only
thing
we
had
was
the
old
image
tag
right.
I
could
point
to
a
single
source,
so
what
people
would
do
is
they'd
get
the
best
image
they
had
for
the
desktop
because
they
don't
want
that
to
be
blurry
and
they
would
serve
that.
Well,
the
bad
news
is
you're
serving
a
huge
image
to
a
phone
which
might
be
on
a
really
bad
connection,
so
the
good
news
is
nowadays
there's
source
set
and
picture,
so
I
use
source
set
for
most
of
my
images.
B
I
create
various
width
versions
of
the
image
you
can
see.
I
just
I
use
the
width
right
in
the
name,
so
I
can
look
at
my
web
logs
and
see
what
people
are
downloading,
but
I
took
the
same
image
at
various
widths.
All
I
need
to
do
with
source
set.
Is
I
say
here
all
the
different
sizes
browser
you
make?
The
best
choice
browsers
can
look
at
connection
speed,
pixel
density,
how
big
it's
going
to
be
on
the
screen?
B
They
they
put
that
all
together
and
decide
the
best
image
and
honestly,
I
was
a
little
concerned
when
we
first
did
this
about
giving
up
control,
but
it's
worked
out
really
well,
for
us
browsers,
tend
to
make
good
choices
and
the
reason
that
matters.
If
you
look
the
128,
if
I
only
need
a
small
image
in
one
of
my
spots,
that's
only
2k.
B
B
B
So,
every
time
I
say
this,
my
designers
kind
of
freak
out
and
they
say
well,
we
don't
want
to
give
up
quality
right
and
I'm
not
saying
make
it
look
bad.
I'm
saying
jpeg
lets
me
play
with
that
trade-off
of
size
and
quality.
So
when
I
get
in
these
arguments,
I
create
a
web
page
like
this,
and
I
make
a
deal
with
people.
I
say
if
you
can
take
the
original
image.
If
you
can
find
the
original
image
and
you
think
it
really
makes
a
difference.
B
B
So
that's
you
know
a
third
the
size
and
look
at
this.
I
mean
even
side
by
side.
It's
hard
to
tell
the
difference
now.
Maybe
if
I'm
a
museum
site
selling
art,
I
would
tweak
a
little
differently,
but
here
I've
even
got
one.
That's
smaller
and
we'll
talk
about
how
we
do
this,
but
that's
a
huge
difference.
That's
I
made
the
biggest
difference
in
the
sizes
of
my
before
and
after
just
by
spending
a
minute
on
each
one
of
the
images
and
compressing
them.
So
I
use
paintshop
pro
photoshop.
Any
good
image.
B
Editing
tool
will
let
you
pull
up
the
jpegs
side
by
side
and
they
typically
have
a
slider.
You
just
play
with
the
slider
until
you
get
to
the
right
size
before
you
start
degrading
and
you
can
visually
compare
and
say
that's
a
good
trade-off
for
me.
Save
it
you're
going
to
be
a
lot
faster
and
better
off.
B
You
can
also
use
what's
called
progressive,
so
I'm
going
to
go
into
fiddler
I
can
make
fiddler
will
make
it
seem
like
I'm
on
a
modem.
So
this
goes
back
to
my
modem
days.
It's
just
going
to
slow
up
your
connection,
so
it'll
show
what
a
slow
connection
is
like,
and
I
want
you
to
see
the
experience.
Difference
here,
I've
got
this
same
jpeg.
On
the
left
hand
side
I
saved
it
as
a
progressive
jpeg.
B
B
It
brings
it
in
blurry
and
improves
the
quality
instead
of
painting
line
by
line.
So
it
turns
out
when
you
do
this
again
image,
editing
tools,
you
just
say
I
want
to
save
it
as
progressive
the
size
ends
up
being
about
the
same,
but
the
visual
impact
on
perceived
performance
of
using
progressive
jpegs
can
make
a
big
difference.
We're
just
now
coming
back
and
switching
our
photos
on
our
website
to
use
progressive
because
as
people
are
on
modems
or
on
mobile
devices,
with
slower
connections,
it
gives
a
perceived
difference
for
performance
which
is
cool.
B
I'm
going
to
go
change
this
back,
so
we're
not
super
slow
for
the
rest
of
the
talk
next
thing
to
know
is
metadata,
so
I'm
going
to
show
you
another.
This
is
an
extension
you
can
download
for
fiddler
called
show
image.
Bloat,
I'm
going
to
pull
up,
I'm
going
to
hit
control
f5
and
if
you
notice,
on
the
left
hand,
side
there's
some
bricks.
B
This
is
telling
me
that
15
percent
of
this
size
was
due
to
metadata.
So
if
you're
familiar
on
your
phone,
you
take
a
picture
and
it
embeds
the
camera
information.
So
if
I
go
in
and
look
at
the
first
one,
if
I
go
into
details
you
can
see,
I
took
this
on
a
canon,
powershot
g1,
here's,
my
shutter
speed,
customers,
don't
care
right!
B
This
is
all
information
that
gets
embedded
into
your
images
that
don't
matter
to
the
display,
so
I
use
a
tool
called
jpeg
tran
that
stripped
out
that
metadata.
So
if
we
look
and
I
go
to
see
what
that
looks
like
you-
can
see
that
that
camera,
information
and
stuff
is
all
gone
because
again
my
customers
don't
care.
They
want
to
have
a
15
percent,
smaller
file,
that's
going
to
download
faster
and
by
turning
that
on
in
fiddler.
I
can
quickly
inspect
my
website
and
see
places
where
I
still
have
metadata
in
my
images.
B
Another
thing
we
do
with
images
is
lazy
loading.
So,
on
our
website
we
had
a
category
page.
So
we
sell
food.
We
have,
maybe
you
know,
40
ice
cream
products.
The
problem
is,
we
would,
in
the
past,
we'd
show
like
15
at
a
time,
you'd
page
through
it
like
a
search
engine.
My
designer
came
and
said
I'd
love
it
to
be
all
on
one
page.
It.
C
B
Search
engine,
optimizations,
etc-
and
I
said
well
that's
great,
but
we've
got
all
these
images
down
on
the
page
that
people
may
never
see
but
they're
downloading
them
right.
It
makes
it
slow.
So
I
use
image
lazy
loading,
so
I
want
to
and
it
does
have
native
support.
So
recently
it
came
out
that
there
some
browsers
have
native
support.
Again
you
can
go
to.
Can
I
use
it's
not
rolled
out
enough
to
my
client
base,
so
I
can't
just
use
native.
B
I
would
have
to
do
native
with
a
polyfill,
so
I
still
use
this
javascript
plugin
and
I'll.
Show
you
how
to
use
this.
But
the
idea
is
I'm
going
to
go
back
to
my
web
page
here
and
I've
got
this
lazy
load.
So
these
are
images
that
I
are
below
the
fold.
They
call
it.
So
if
I
go
back
here
to
the
after
version,
these
are
images
that
are
down
here
right.
B
B
With
this
lazy
loading
so,
instead
of
using
source
set,
I
put
data
dash
source
set,
so
data
attributes
are
ignored
by
browsers
the
things
javascript
will
use
and
I
put
lazy
load
on
it.
That
javascript
plugin
says
hey.
This
image
is
about
to
come
into
view,
change
data
source
set
to
source,
set
the
browser
wakes
up
and
says:
oh,
I
got
to
do
my
source
set
stuff
cool
and
it
picks
the
right
image
and
it
downloads
it
then.
C
B
Sensitive
this
is,
but
even
on
a
slow
connection,
you
can
scroll
pretty
fast,
occasionally,
you'll
see
a
spot
where
an
image
then
comes
into
view,
but
that's
a
good
trade-off
right.
Life
is
trade-off,
so
is
performance,
see
if
this
works
for
you,
because
you
might
be
able
to
avoid
a
lot
of
upfront
image
downloading.
B
Next
thing
I
do
is
called
deferred
loading,
so
I'll
warn
you.
This
is
something
I
wrote
myself.
I
had
good
reason
to
do
this,
so
we
have
a
lot
of
vendors
that
we
need
to
include
their
javascript
on
our
web
pages
and
every
vendor
will
say
here's
my
javascript,
please
put
it
in
the
head
of
your
web
page,
because
I
need
to
make
sure
my
stuff
runs.
First.
Well,
that's
great,
but
if
that
vendor
is
slow,
they
can
actually
impact
my
entire
website.
B
B
I
created
my
own
data
dash
attribute.
I
just
call
it.
Data
dash
deferred
dash
source
set
and
again
for
javascript.
So
what
I'm
claiming
by
using
this
is
this
third-party
javascript
is
not
needed
for
my
page
to
paint,
so
I
want
to
make
sure
that
it
doesn't
impact
my
load.
So
by
adding
this,
what
I
did
is
I
wrote
some
code
that
says:
wait
until
the
onload
fires
for
the
browser
when
it
fires
run
this,
and
all
this
does
is.
B
It
goes
through
your
whole
document
finds
any
of
these
deferred
things
and
changes
them
to
be
what
they
should
be.
So
for
my
example.
Now
I'm
just
doing
images,
you
can
also
do
this
for
iframes
and
other
things,
but
for
the
demo
and
giving
you
code
so
again
what
happens
now?
I
do
my
normal
website.
If
things
are
slow,
that's
okay!
My
page
will
paint
when
the
onload
is
done,
then
all
of
these
third-party
javascripts
run.
So
even
if
they're
slow,
they're
not
going
to
impact
my
paint,
which
is
important.
B
Javascript
also
added
a
couple
features
to
do
loading
of
resources,
so
I'm
going
to
show
you
async
and
defer
and
why
these
might
make
sense.
So
here
I've
got
a
typical
web
page.
I've
got
some
content
and
I've
got
these
three
javascript
files,
I'm
going
to
go
into
fiddler
again
another
cool
thing
in
fiddler.
I
can
make
things
intentionally
be
slow,
so
I
want
to
simulate
that
these
three
javascript
files
are
slow,
like
maybe
I
pull
them
from
a
vendor
or
whatever
if
these
are
slow.
What
does
that
do
to
my
customer
experience?
B
B
B
But
if
I
put
this
on
here
and
say
async,
what
I'm
saying
is
please
download
these
in
the
background,
but
as
soon
as
you're
done,
downloading
them
run
them.
So,
let's
go
see
what
happens
if
I
hit
control
f5
the
big
win.
Is
I
see
content
right
away?
So
that's
the
important
part.
My
customers
saw
my
content.
They
think
the
page
is
done,
even
though
I'm
getting
these
javascript
files.
If
you
notice
now
they're
not
going
to
run
in
the
right
order,
okay,
2
finishes.
First,
then
3
then
1..
B
Maybe
that's
fine.
If
these
things
aren't
dependent
on
each
other.
That
works.
Great
and
vendors
will
typically
tell
you
this
put
this
in
the
head
and
put
async
on
you
great
sort
of
true.
I
could
paint
my
content,
but
if
alert
came
in
fast,
even
with
async,
it
might
still
run
before
my
other
stuff.
I
want
to
have
run
that's
why
if
I
can
truly
make
them
not
be
needed,
I
do
deferred
the
technique.
I
showed
you
before.
B
If
it
turns
out
that
I
need
to
be
able
to
get
these
javascript
and
not
impact
the
paint,
but
I
need
them
to
run
in
this
order.
You
can
use
defer
and
most
people
will
typically
use
defer
today.
So
if
I
go
back
and
hit
control,
f5
you'll
see
my
contents
there
right
away,
but
you're
going
to
see
it's
going
to
fire
the
javascript
in
the
correct
order,
1
two
and
three.
B
So
these
are
nice
additions
right.
Those
are
cool
things
that
you
couldn't
do
with
javascript
even
a
few
years
ago.
That
now
you
can
make
sure
some
of
your
javascript
does
not
impact
your
stuff
again,
look
at
deferred,
if
that
makes
sense
or
use
these
techniques.
If,
if
you
want
to
use
these
another
cool
thing
browsers
have
added,
is
resource
hints.
B
So
if
you
look,
I've
got
some
javascript
in
this
case,
I'm
pulling
jquery
off
a
microsoft
cdn,
and
what
I
want
to
do
is
I've
got
this
empty
up
top,
so
I
can
make
that
one
be
intentionally
slow
by
10
seconds.
What
would
happen
to
my
customers
again
is
if
they're
waiting
for
this,
it's
not
going
to
start
getting
this
javascript
file.
B
B
B
So
this
doesn't
work
for
my
site,
but
if
you
had
a
site
where
you
came
to
the
home
page
and
you're,
pretty
certain
they're
going
to
go
to
this
next
page,
you
can
put
the
pre-render
in
this
tells
browsers
finish
the
page
you're
on
first,
but
in
the
background,
go
get
this
other
page,
all
of
its
css
images,
javascript
and
pre-render
it.
So
if
you're
right
and
they
go
to
that
page
next-
it
it
could
paint
right
away.
B
Of
course,
the
trade-off
if
I'm
wrong,
I'm
having
the
person
download
a
bunch
on
their
phone
using
their
data
connection
for
a
page
they'll,
never
look
at
so
I
don't
use
this
yet
because
I
don't
have
that
defined
traffic
pattern.
But
if
you
do
take
a
look
at
that,
because
that
could
be
a
big
win
for
you.
B
B
So
today,
one
of
the
performance
techniques-
I've
got
all
of
my
css,
but
not
all
of
it
is
needed
to
paint
what's
in
the
viewport.
So
there
are
tools
now
that
will
say:
take
my
big
css
break
it
up
into
what's
needed,
just
to
paint
the
top
and
then
take
that
css
and
embed
it
directly
into
the
html
and
then
download
the
rest
of
the
css.
In
the
background,
so
I
just
wanted
you
to
know
that
there
are
techniques
like
that.
B
Another
thing
to
know:
urls
are
case
sensitive
if
you
didn't
know
that.
So
if
I
pull
up
this
page
now,
people
probably
aren't
going
to
do
this,
but
I'll
give
you
an
example
where
they
will.
I've
got
the
exact
same
image,
but
I'm
referencing
it
here
with
different
casing.
You'll
see
the
first
one
has
capital
f
capital
b,
this
one's
all
lower
case.
B
Modern
browsers
still
download
that
three
times
so
think
about
that
the
exact
same
image
you
had
to
download
three
times
now.
Most
developers
aren't
going
to
do
this
on
the
same
page,
but
if
I
were
using
a
company
logo-
and
I
don't
have
a
set
of
rules-
it's
very
possible
that
one
developer
might
do
capital,
l
and
the
other
one
do
all
lower.
So
everything
we
talked
about
with
caching
and
expirations,
you
came
to
my
first
page.
I
had
capital
l
logo,
you
downloaded
it's
sitting
right
in
your
browser,
cache
the
other
developer.
B
You
go
to
the
next
page.
They
use
lowercase
browser's
going
to
go,
ask
for
it
all
over
again,
so
we
just
made
the
rule
for
us
we're
doing
all
lower
case.
So
all
the
resources
we
pull
are
lowercase,
because
we
noticed
that
we
were
downloading
too
much
just
because
we
didn't
realize
that
the
case
mattered
I'll
skip
these
other
two
for
now
in
interest
of
time.
B
Let's
talk
about
http
2,
so
http
2
came
out
in
about
2015
and
really
I
focused
on
the
two
things
for
performance,
the
big
change
they
made.
I
said
in
http
1.1
days,
this
spec
said
you
could
have
two
connections
per
host.
So
if
you
came
to
my
website,
I
used
the
cdn,
but
I
had
you
know:
50
images,
javascript
css
files.
B
That's
how
we
got
to
six
in
the
http
2
world.
There's
just
one
connection.
So
when
you
saw
the
web
page
test
at
the
beginning,
it
creates
one
connection
and
it
downloads
everything
it
needs
over
that
one
connection,
so
that's
the
biggest
performance
difference.
So
I'll
show
you
I
kind
of
like
this
demo.
I
kind
of
hate
this
demo
I'll
explain
why.
B
B
The
reason
it
was
faster
is
because,
when
I
used
https,
I
could
use
http
2.
http
2
could
download
all
of
these
images
in
parallel,
rather
than
have
to
do
six
at
a
time.
So
that's
what
it's
a
good
example
of
http
2
and
having
one
connection
can
make
a
big
difference
for
you.
Why
I
don't
like
the
demo?
I
don't
have
360
green
check
marks
on
my
web
page
right,
not
terribly
realistic,
but
it
is
realistic
that
I'll
have
a
web
page
with
50
different
resources.
B
B
So
what
does
that
mean
for
performance?
I've
been
teaching
a
lot
of
performance
techniques
that
you
might
not
want
to
do
anymore
in
an
http
2
world.
So
the
first
one
I
talked
about
how
I
bundled
all
of
my
javascript
and
css
files.
I
literally
took
all
15
javascript
files
or
whatever
it
is
on
my
website.
B
I
minified
them
and
I
combined
them
into
a
single
javascript
file
when
I
used
http
1.1
and
I
versioned
it
and
said
it
for
a
year
that
was
great
because
in
http
1
that
made
it
faster
now
in
http
2.
Having
that
be
separate,
small
connections
doesn't
have
the
same
penalty.
It
used
to
have
there's
all
sorts
of
research
and
debates.
Should
I
just
not
bundle
at
all.
Should
I
do
smaller
bundles?
B
You
can
look
into
that
again
test
for
yourself
right
measure
before
try
it
measure
after
do
what
makes
sense
for
you,
but
bundling
just
for
the
sake
of
reducing
requests,
probably
isn't
worth
it
because
the
bad
thing
in
my
bundling,
I
had
15
javascript
files.
If
I
had
to
change
the
one
line
in
one
of
them,
I
had
to
invalidate
my
entire
bundle
and
you
had
to
redownload
the
whole
thing
plus
it
takes
a
while
to
parse
a
bigger
javascript
file.
So
look
into
not
doing
that
anymore.
B
Another
thing
people
did
to
cheat.
We
had
cdn.exam
and
in
the
past
that
would
give
us
six
downloads.
People
would
create
cdn1.example.com
and
cdn2.example.com,
because
each
one
of
them
would
get
six
connections.
So
now
I
have
18
connections
again
in
http
2.
That
was
a
technique
just
to
get
more
connections
in
http
2.
You
have
a
single
connection
and
you
don't
need
to
care.
That's
actually
going
to
make
things
harder
and
worse.
B
We
talked
about
inlining
people
also
would
take.
You
could
take
images
and
do
what's
called
data
uri,
where
the
image
gets
changed
to
base64
and
embedded
into
the
page.
Doing
that
stuff
probably
doesn't
make
sense
in
http
2
world.
The
only
inlining,
I
think,
still
makes
sense,
is
potentially
inlining
critical
css.
B
I
want
to
get
to
some
tools
quickly,
I'm
going
to
skip
the
page
speed
for
now
and
we'll
focus
on
lighthouse.
So,
if
you've
seen
this
before
I'm
going
to
go
to
my
let's
go
to
my
before
I
hit
f12
to
go
into
dev
tools,
there's
a
lighthouse
tab,
it's
cool
because
they
have
built-in
audit.
So
I
want
to
see
how
my
performance
is
on
mobile.
So
I'm
going
to
start
this
report.
B
So
in
the
background,
it's
not
it's
doing,
calculations
and
things
to
give
me
a
score.
So
you
can
see
I
scored
51
out
of
100.
What's
cool
about
it.
Is
it
tells
me
stuff,
I'm
doing
wrong.
So
here's
all
the
stuff
we've
talked
about
today.
If
you
forget
some
of
the
things
I
said
you
can
come
in
here
and
it
says:
hey
you've
got
images
that
are
too
big
and
it'll
show
me.
B
You
know
you
could
save
x
amount
by
tweaking
these
images.
It
also
says:
use
http
2.,
take
out
javascript,
you
don't
use
minify,
you
see
it
so
all
the
stuff
we
talked
about.
It's
scoring
me
and
telling
me
what
I
can
improve
and
if
I
go
on
this
calculator
I
can
see
all
of
those
different
metrics
and
which
ones
I
could
improve.
So
I'm
doing
really
about
as
well
as
I
can
on
this
one
total
blocking
time,
I'm
doing
okay,
but
I'm
doing
horrible
on
largest
contentful
paint.
B
B
So
hopefully
this
can
be.
It
was
a
hundred
the
other
day
done.
So
it
scores
me
at
98,
so
the
numbers
not
that
important
it'll
still
tell
me
some
things
I
can
do
and
I've
seen
people
that
have
intentionally
made
web
pages
that
score
100,
but
still
stank
for
performance.
You
know
they're
not
perfect,
but
these
are
good
tools
for
you
to
come
in.
I
like
to
use
these
measurements
before
and
after
and
I
report
this
to
people
in
my
company
that
hey
we
did
this
new
technique
and
look
at
web
page
tests.
B
I
still
could
strip
out
some
of
my
bootstrap
css
and
there's
ways
to
do
that,
and
then
it
shows
all
the
things
that
I'm
doing
well
properly:
sizing
images
minifying
using
http,
2
things
like
that,
some
good
resources.
So
I
am
a
pluralsight
author.
I
do
have
a
longer
course
on
web
performance,
where
I
actually
show
how
do
you
make
a
progressive
jpeg?
How
do
you
do
that?
Jpeg
optimization
in
paintshop
pro
I
have
another
one
on
images,
responsive
images.
I've
got
one
on.
How
do
you
you
know
you
have
a
problem
with
your
website.
B
B
Again,
that's
my
twitter!
That's
my
email.
My
blog
here
are
the
slides.
This
link
has
the
slides
and
it
has
the
code
before
and
after
so
you
can
see
the
techniques
that
I've
used,
the
raw
bootstrap.
You
saw
visually,
they
look
the
same,
but
you
have
access
to
the
actual
code
that
I
used
to
make
that
smaller.
A
All
right,
thank
you
so
much.
This
is
so
very
interesting
and-
and
I
went
ahead
and
and
looked
for
your
pluralsight
courses
and
okay
and
yeah,
and
I
I'm
displaying
it
in
the
in
the
feed
now
and
for
everybody
who
was
who
has
a
pluralsight
account.
It
would
be
great
to
to
visit
that
really
interesting
set
of
tools
we
do
have.
A
I
think
we
do
have
one
question
in
in
the
chat,
but
but
but
I'm
going
to
I'm
going
to
encourage
everybody's
to
still
here
we
have
a
lot
of
people
watching
right
now,
there's
about
43
people
in
the
stream.
So
that's
wow,
really,
that's
really
good,
and
I
I
hope,
they've
learned,
stuff
and
and
and
take
this.
I
want
to
encourage
them
to
take
this
opportunity
to
ask
questions
and
clarify
some
of
the
stuff
there.
A
B
So
fiddler
fiddler
will
watch
any
http
or
https
connection
the
trick
with
fiddler
versus
something
like
wireshark
is
it's
a
proxy,
and
so,
when
I
start
fiddler,
it
will
tell
windows
anybody
who
wants
to
use
a
proxy.
Please
route,
your
traffic.
So
if
I
go
into
here
and
look
at
the
connections,
it's
listening
on
port
8888
and
if
I
go
into
my
browser
as
soon
as
I
open
fiddler,
it
automatically
went
and
changed
edge.
In
my
case,
I
like
using
edge,
picked
up
that
it
had
a
new
proxy.
B
So
let
me
get
down
to
where
my
proxy
settings
right
here.
So
it
says
route
traffic
through
fiddler,
so
the
key
is
whatever
you
want
to
trace.
If
it
does
not
show
up
in
fiddler,
you
need
to
figure
out
how
to
proxy
it.
So
as
long
as
you
can
go
into
the
tool
and
set
the
proxy
setting,
you'll
just
go
manually,
set
it
to
127.0.0.1.
A
Cool
that
thank
you
for
that
question.
I
encourage
others
to
to
to
ask
their
own
questions.
I
have
some
of
my
my
my
own
questions
here.
I
really
found
it
found
it
interesting,
especially
in
the
in
the
image
in
the
image
part
of
this
thing,
so
I
used
to
use
a
lot
of
pngs
for
a
logo,
so
so,
of
course,
I've
been
doing
web
since
the
90s
right.
Yes,
as
a
kid
as
a
teenager,
that's
how
I
started
with
the
web
with
yeah.
A
A
B
To
use
pretty
substantial,
and
so
the
best
thing
I
would
say
is
take
one
of
yours:
that's
a
png.
Now
there
are
online
converters
that
will
make
it
into
an
svg.
There
are
svg
optimizers
and
then
compare
those
two
sizes
and
you
should
see
a
big
size
difference.
But
besides
just
that
size
difference
the
difference
of
now,
you
don't
have
to
have
multiple
versions
of
the
png
for
the
different
resolutions.
Yeah
yeah.
He
says
that's
really
to
me.
The
big
win.
C
C
B
B
C
B
A
Yeah,
I
I
guess
that's
yeah
a
few.
You
know
the
funny
thing
when
I
realized
it
is
because
when
I
was
using
pngs
back
in
the
back
back
in
the
day
when
I
was,
I
was
more
dev
than
now,
I'm
a
tech
lead.
So
I'm
more
in
the
management
side
of
things.
Back
in
the
day,
I
would
make
my
logos
in
a
tool
like
inkscape
or
blender
right.
It
would
be
svg
and
then
you
convert
it
into
png.
B
B
C
B
C
B
I
know
you're
not
using
minified,
but
I'll
come
and
target
these
right
away
because
I'll
say
you
know
a
typical
jpeg
today.
Shouldn't
have
to
be
that
big
and
that's
how
I'll
find
those
big
resources
and
as
far
as
the
blocking
stuff
goes,
if
it's
slow
I'm
going
to
go
into
something
like
the
web
page
test
and
look
at
the
waterfall.
C
B
Exactly
which
ones
are
taking
a
long
time
to
download-
and
you
can
see
you
know,
there's
a
lot
more
detail
if
you
go
into
browser
dev
tools,
I
honestly
don't
do
a
lot
of
this.
You
can
performance
profile
in
here
and
it
gets
really
gory.
I
mean
it's
a
it's
deep,
deep
stuff
that
the
browser
keeps
track
of
and
if
you
really
get
into
it,
you
can
see
exactly
where
this
javascript
blocked.
This
render,
I
mean
all
that
stuff
is
there.
B
I
tend
to
focus
more
on
the
download
times
and
stuff
like
that,
and
not
so
much
into
the
dev
tools,
gory
perf
stuff,
because
it
is
super
detailed
and
I
typically
can
make
huge
differences
by
doing
everything.
I've
talked
about
and
not
have
to
dig
into
that.
If
that
makes
sense,
but
it's
there
all
right.
B
C
B
Are
one
of
the
worst
things
if
you're
not
doing
them
right?
So
certainly
all
of
the
image
optimization
stuff
matters,
no
matter
what
using
minified
files
for
your
css
you're
going
to
have
to
pull
css
from
somewhere
using
http
2
to
pull
your
resources
so
most
of
these
using
compression
minification.
Most
of
these
apply
because
you're
going
to
pull
from
a
web
server
right
and
need
to
download
all
of
this
stuff,
no
matter
what
you're
doing
some
of
them
may
not
make
sense
for
a
certain
framework,
but
most
of
them
apply
to
everyone.
A
I
hope
so
feel
free
to
add
anything
about
your
question.
If
you,
if
you
have
any
more,
we
do
have
another
question
here
from
abram.
He
said:
is
he
ready
to
check
the
azure
cdn
that
supports
broadly?
Do
you
suggest
uploading
static
files
to
blog
blogs?
Oh
I
I
guess
he
means
blob
storage,
blob
storage,
using
this
compression.
B
B
So
if
you're
using
azure
as
a
cdn,
I
I
don't
typically
want.
If
I
want
to
flip
it
the
other
way,
I
don't
typically
store
an
image
in
a
system
that
I
need
to
call
at
run
time
to
get
the
bytes
out
of.
If
that's
where
you're
going
like.
I
don't
want
people
ask
this.
Why
don't
you
store
these
images?
You
know
I
want
those
in
a
cms
or
a
content
management
system.
I
don't
want
to
reach
into
another
system
to
pull
my
images
out
at
runtime.
B
B
Yeah,
that's
what
I
mean
within
the
cdn.
Who
knows
how
they're
storing
it
that
doesn't
really
matter
to
me.
I
do.
I
would
call
it
a
bake
off
right
whenever
we
look
at
cdns
I'll,
take
two
or
three
cdns
set.
Each
of
them
up
run
these
metrics
on
them
and
figure
out
who's
the
fastest.
You
know
I
want
to
run
real
tests
on
each
cdn.
B
A
Yeah
exactly
exactly
and
that
at
the
end
of
the
day,
that's
what
this
is
about.
I
I
am
aware
of
well,
you
know
in
bigger
and
bigger
enterprises,
as
as
you
have
a
site
that
is
being
used
by
more
clients,
the
you
would
see
the
difference
in
whatever
cloud
storage
that
you're,
using
whether
it's,
whether
it's
azure
or
aws,
the
bills
will
tell
you
well.
Are
you
doing
the
right
thing?
A
I
do
have
another
question
for
myself
and
and
this
this
was
around
that
http
2
in
the
https
https
issue
and
and
that
http
2
needs
https.
So
one
of
the
things
that
had
slowed
down
sites
in
the
past
was
http
redirects.
Basically,
you
have
a
url
that
didn't
say
what
protocol
to
make
or
somebody
make
makes
the
mistake
of
of
typing
in
http
and
and
you'll
have
to
go
through,
that
redirect
rule
and
go
to
https
and
and
etc.
So
so
this
is
that's
still
an
issue.
A
B
So
I'll
answer
that
in
a
couple
different
ways,
so
first
of
all
browsers
have
now
firefox.
Has
it
I'm
using
firefox
for
the
recording,
so
I
don't
want
to
go
in
there,
but
firefox
just
changed
where
it
will
try
https
by
default.
You
can
turn
that
on
and
chrome
is
now
announcing
that
as
well.
So
I
think
we're
at
the
tipping
point
for
https,
where
browsers
are
now
saying.
If
you
just
type
www.example.com,
I
bet
a
year
from
now,
every
browser
will
try
https
first,
which
is
great.
B
B
Browsers
are
going
to
make
that
better
for
us
automatically.
In
the
meantime,
there's
this
thing
called
strict
transport
security.
So
when
you
set
up
your
site
today
use
https,
you
will
do
what
you
said.
You
have
to
redirect
right.
If
somebody
comes
in
wrong
with
http,
you
need
to
get
them
to
https,
so
you
set
up
a
301,
redirect
that's
great
there's
another
feature
called
https
preloading.
B
So
there's
actually
a
website
I'll
go
a
little
off
here
and
pull
it
up.
If
I
can
find
it,
it's
called
hsts
preload.
If
your
site
uses
https
and
all
the
subdomains,
you
can
read
about
all
the
rules
here
about
what
you
have
to
do.
You
can
submit
your
site.
They
will
bake
into
browsers
that
your
site
should
only
use
https.
B
So,
no
matter
what
somebody
types
it
will
never
try
to
use.
Http,
that's
something!
That's
been
out
there
for
a
while
and
the
browsers
pull
from
this
list,
and
they
bake
them
basically
into
the
browser,
so
make
sure
you're
right,
but
then
you'll
never
have
that
connect
with
http
redirect
that'll
never
have
to
happen.
B
So
those
two
things
are
helping
us,
but
to
your
question,
http
2.
That
first
connection
is
still
the
same
speed
so
that
first
http
to
https
it
won't
help,
but
everything
else
you
do
after
that
will
be
faster
because
you
have
one
connection.
What
will
really
help
you
in
the
future
is
http.
3
is
coming
soon.
I
mean
it's
about
to
be
ratified.
B
It's
going
to
start
using.
What's
called
quick,
it's
going
to
throw
out
the
tcp
layer
where
there's
a
lot
of
connection
issues
they're
going
to
start
using,
what's
called
quick,
which
uses
tls,
1.3
and
1.3.
I
should
have
mentioned
this
in
the
talk.
Tls
1.3
has
one
round
trip
connection
so,
instead
of
two
connections
over
the
latency,
tls
1.3
only
needs
one,
and
if
people
who
visit
your
site
more
than
once,
it
doesn't
need
to
even
do
one.
It
does
zero
round
trip.
B
A
Oh
yeah,
I'm
I'm
curious
about
about
how
this
all
these
ass.
Everything
that
you've
shown
here
affects
transport
in
in
you
know:
newer
technologies
like
web
assembly
and
blazer
and
and
and
what
they
call
this.
I
I
forget
the
I
forget
the
technology,
the
blazer
uses
it
n
signal
r
uses
at
the
back,
and
it's.
C
A
B
In
other
words,
today
the
things
I
would
focus
on
beyond
http
2
support,
tls
1.3,
because
that'll
make
a
big
difference,
make
sure
you're
doing
keep
lives
compression.
Those
things
are
wins
across
all
of
those
things.
So,
regardless
of
what
it
is,
it's
it's
going
to
speed
up
all
the
things
we
just
talked
about
and
then
within
each
one
of
those
they
each
have
specific
things.
So
I
have
yet
to
do
a
lot
of
production,
blazer
work,
but
I'm
sure
there's
things
within
blazer
that
everything
that
we
talked
about
that
applies
everywhere.
B
B
C
B
To
get
your
dom
updates
if
you're
doing
that
over
tls
1.3
on
you
know
in
the
future,
http
3
with
quick
and
doing
compression
all
of
that's
just
going
to
be
better
right,
yep!
Absolutely!
And
if
you
do
the
client
side
and
you
host,
you
can
actually
post
all
of
the
assemblies
on
a
static
website
right
even
on
a
cdn.
In
that
case
you
don't
even
need
your
server,
so
the
cdn
comes
into
play
for
that,
so
yeah
lots
of
lots
of
opportunities
in
each
one
with
their
various
trade-offs.
B
I
don't
think
so.
Like
I
said,
the
pluralsight's
free
month
is
great.
Follow
me
on
twitter.
I
do
a
lot
of
talks,
a
lot
of
virtual
talks,
yet
on
pi
hole,
web
performance,
cryptography,
fiddler,
all
sorts
of
different
topics
and
feel
free
to
reach
out
to
me,
like
I
said
I,
if
you,
if
you
do,
have
questions
I'll
go
back
to
the
end
here.
A
Absolutely
thank
you
very
much
for
for
being
here
with
us
and,
and
I
also
want
to
acknowledge
of
right
now
yeah.
I
think
some
of
the
audience
that
we
have
actually
in
the
in
in
the
stream
were
are
not
from
the
philippines.
A
lot
of
them
were
foreign
names,
so
yeah.
So
so
so
thank
you
very
much
for
for
being
here
and
for
for
attending
our
talk
so
yeah
yeah.
Thank
you.
Thank
you.
Thank
you
very
much,
robert
really.
A
A
All
right,
thank
you
and,
and
and
yeah
keep
on
making
the
web
faster
yeah.
Thank
you
very
much
all
right.
Thank
you
very
much
all
right,
and
that
concludes
our
our
event
for
tonight.
Thank
you
very
much
for
everybody
who
has
been
here
this
is.
This
is
one
of
the
most
attended
streams
that
we've
had
we
at
the
peak
we
had
about
about
50
people
on.
So
thank
you
to
everyone
who
had
joined
us
via
both
youtube
and
and
facebook
live
and
yep.
A
Just
just
please
follow
us
on
our
social
media
channels,
phenol
for
twitter
and
meetup.com
on
on
meetup
and
before
I
go.
I
also
want
to
thank
again.
I
want
to
thank
the.net
foundation
for,
for,
for
hosting
this
stream.
They've
been
very
helpful
in
in
doing
this
and
yeah
hope
to
see
a
lot
of
you
in
our
next
events.