- [Instructor] The last step
in the performance optimization process
centers around optimizing the delivery of assets
from your server to the visitor.
That's what we'll cover in this chapter
starting with compression.
Even after all the optimization
and minification we've done so far,
we can still compress the assets
we're serving to the visitor even more
using Gzip and Brotli compression.
This can be done automatically, manually or both.
It all depends on the services you're using
and how much effort you're willing to put into compression.
There are two main compression types we use here
and they have slightly different properties.
Gzip is a tried and true standard for web compression.
It's widely supported, effective, and can be automated
on the server and done on the fly.
In fact, most web hosts and CDNs actually Gzip your content
automatically because it saves them money.
So that performance usually comes
without you having to do anything.
Brotli is a newer entry into the compression space
and it does a significantly better job at compression.
The downside is Brotli compression takes a lot longer
and it's more resource intensive.
And when I say a lot longer, I mean a lot longer than Gzip.
For this reason, most servers and CDNs
do not allow you to do automatic Brotli compression.
So if you want to use Brotli,
you have to compress your files
before they are provided to the servers.
You have to do that compression manually,
upload the compressed files and then set the server
to recognize these compressed files.
Compressing your assets manually using Brotli or Gzip
can be automated in your tool chain
or build process using dedicated tools
for your preferred compression algorithm.
And it's pretty straight forward.
And it's just slots into the tool chain
along everything else you're doing.
If you want to control how your server handles compression,
and there's a good chance you do,
the team at HTML5 Boilerplate has created
baseline configuration files
you can use to put together a compression scheme
to fit your needs.
Here there are examples from many different server types
including Apache, Google App Engine,
Internet Information Services, Lightpd, Ngix, and Node.js.
Let me show you an example from Ngix.
These are the settings for automatic compression for Gzip.
That means when you upload files into the server,
the Ngix system will automatically start compressing
all of these files down
so that the server serves up compressed falls automatically.
You activate this by enabling Gzip compression,
you set Gzip to on.
Then you can set the compression level and other settings.
And finally, you can provide a list
of the Gzip types you want to compress.
So these are all the file types you want the server
to automatically compress.
If your host does not already do this,
and it's something you need to check before you do anything,
but if it doesn't do this, I recommend turning on Gzip
for most of your file types, because it will reduce the size
of the files that are sent and it'll improve performance.
You may also want to consider setting up Brotli compression,
but here, like I said,
you have to do the compression yourself
and upload the compressed files to the server.
The way you do that in Ngix
is by setting Brotli static to on.
You can actually also set Gzip static to on if you want to.
Already compress your files before you send them up.
But generally speaking, we only do this with Brotli.
Once you activate Brotli compression on the server,
you can upload Brotli compressed files to the server
and it'll automatically pass them on to the browser for you.
Now, this is important,
before you dive into any custom server configuration,
check out the documentation for your host
and your CDN to make sure you're not doing work
they're already doing automatically.
If in doubt, contact your providers directly
and ask about their compression schemes.
Chances are they're already using heavy compression
on your assets and you can just optimize your build process
to fit into their compression scheme
instead of setting up everything yourself.