[TRAFFIC NOISE]
[MUSIC PLAYING]
ADDY: So the web is getting fat.
Accidental slowness is a problem that a lot of us face.
You, in the general slowness, most people in the performance
side of the things.
MATT: That's fair.
I deserved that.
ADDY: Performance is important.
MATT: Yeah.
ADDY: Like, it's very easy to go and ship
a site that contains a ton of images
and not realize just how slow that is, especially on mobile,
where people have got, like, limited network connections
and limited bandwidth.
MATT: And this is where the picture elements also-- they're
kind of coming in to help with all of this
but it still-- there are still images
that have to be downloaded.
ADDY: Even then, people should probably
have a good image optimization workflow inside their
build pipeline.
Just something simple to make sure
that you're trimming down the fat of what you're
shipping down to your users.
MATT: Well, because you never really notice a difference
anyway.
It's just literally free time that you were just
saving a user.
ADDY: No.
MATT: Yeah.
So what do you use to optimize all your images?
ADDY: So I usually use-- in my build process--
I'm usually using something like Imagemin, which is a tool that
can figure out-- like, it's got some opinionated choices
about how to optimize images like PNGs and JPEGs and GIFs.
I think it's using, like, OptiPNG and JPEGmini,
and Gifsicle.
MATT: Yeah.
ADDY: But if all of that sounds totally
crazy to you, another really nice desktop tool
is ImageOptim.
MATT: Yep.
ADDY: So ImageOptim is cool, because it just
means that you just take a directory of images,
drop it in, it'll do some magic, and you can just
re-upload them.
You're done.
MATT: So I mostly use Grunt Imagemin.
I use all of that, and it works absolutely great.
I've seen ImageOptim.
That's great whenever I'm doing prototypes.
Just drop it in there.
The one thing that I've ended up doing
is using ImageMagick to auto-generate images
of different sizes.
ADDY:Right.
MATT: They've actually got a strip metadata
command in there, and it literally
does a lot of what some of the tools do,
so it's just at least stripping out
some of the additional stuff that's not needed.
ADDY: When you're talking about stripping stuff out,
you talk about, like, SVG, I guess,
where you've got a ton of metadata
that tools usually include.
MATT: Yes.
It's just like, oh, this is made by Inkscape or Sketch.
It's just like, the person doesn't
care that's viewing it--
ADDY: Yeah.
MATT: --so get rid of it.
The obvious other tool is WebPagetest.
ADDY: So WebPagetest is kind of awesome.
Really, really helps with, like, making sure
that you're hitting decent speed index scores.
Quick tip there-- if you're trying to, like,
do any sort of benchmarking WebPagetest,
and you just do a single-- a single run multiple times
over-- you might find that there's
a bit of a difference in scores.
So WebPagetest has this advanced option
where you could run the same test multiple times over,
then just average out the stuff.
I use that.
Find it pretty reliable.
Maybe you would too?
MATT: Yeah, I tend to find that WebPagetest
is almost like PageSpeed Insights, but just on speeds.
It's just you've got so many more options,
so much more details.
And, depending on where you are in terms
of trying to trim performance, WebPagetest
is great for highlighting simple things,
like, hey, you know what, you should be enabling compression
with just GZIP, and it's just, like, that is a one-line change
in a hasty access file.
WebPagetest is literally like, yo, you're not even
getting your first file down to here
or your first render isn't until, like, three seconds in.
ADDY: The video filmstrip in WebPagetest is amazing.
MATT: Yeah.
ADDY: Really, really useful for, saying, OK,
how many seconds is it going to take
before my user can actually even interact with my page?
MATT: Yeah.
ADDY: Good for [? perceived ?] performance,
good for just being able to see what
your users are going to see.
MATT: One last thing I'm going to say about WebPagetest
they've just added in is the cost of your site.
And it literally just says this is the number megabytes.
This is what it equates to.
Someone in that country downloading your site.
Like for me, it's $0.22 from "Venoowata," Vanuatu--
I don't know-- somewhere.
And it's just, like-- it's interesting,
because if you've got a massive, huge site with tons of images,
people in other countries may not actually
be able to afford viewing your site.
Anyway, I ran your site through PageSpeed Insights.
ADDY: Oh, no.
MATT: And someone was doing a little cheeky, small bit
of cheating, really, aren't you?
ADDY: I wouldn't call it cheating.
I would say I'm giving people a fast path to see--
MATT: A fast path.
ADDY: --to seeing my home page.
MATT: So you've added in a site, which is basically
very limited in functionality to increase your PageSpeed score,
haven't you?
ADDY: Someone called it a landing page or a hero page.
MATT: Because when you actually run it, addyosmani.com,
what happens is, you've actually got a redirect--
you should never have a redirect for any website--
ADDY: No, no, you shouldn't.
MATT: --if you can avoid it.
And your one goes, addyosmani.com,
that jumps to www.addyosmani.com/blog
ADDY: I like-- I like to see--
MATT: That then goes to www.addyosmanni.com/blog/,
so there's a slash on the end, that's important.
And then it's gone addyosmani.com/blog/,
so you've managed to go from your home page to three
different versions of your blog URL.
ADDY: I like to think of my site as a learning
ground for anti-practices.
[MUSIC PLAYING]