Borislav Hadzhiev
Last updated: Mar 30, 2021
Check out my new book
The goal is to not make your users download unnecessary content, as it slows down your website, worsens conversions and SEO.
Notice that the bootstrap
file you download from their site is named
bootstrap.min.css
that's because the file is minified. Here are some of the
things minification does for us:
Before minification:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- This is just a comment...... --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <title>React App</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body> </html>
After minification:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="%PUBLIC_URL%/manifest.json"><link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><title>React App</title></head><body> <noscript> You need to enable JavaScript to run this app. </noscript><div id="root"></div></body></html>
The minified version is on one line, the comments have been removed, it has
become unreadable. However, the browser doesn't have problem reading html
,
js
or css
assets that are minified, in fact it is more efficient to remove
the white space and reduce the file size.
The easiest way to minify our assets is to use a module bundler like webpack.
To gzip content means using an algorithm to find all the repetitive strings
and replace them with pointers to the first instance. We can identify if content
is served with a gzip encoding if we open our devtools and check the
content-encoding
response header in the network tab.
GZIP is used for compression and decompression - The browsers have a
request header accept-encoding
: gzip, deflate, br
. By sending this header
they indicate that they accept gzipped files. Then your web server (apache,
nginx), or CDN (cloudfront) gzip the requested resource and send it to the
browser. Lastly the browser has to unzip the file and render it.
GZIP performs best on text-based assets: css, js, html. All modern browsers support GZIP compression and will automatically request it for all HTTP requests.
.png
extension usually are the most
kb..webp
is usually smaller than jpg
or
png
images. webp
images support transparency, just like png
images, but
load faster.Usually you want to use .webp
images for your website, unless you need supreme
quality and are ok with having your users download larger images. Note that IE11
and older IE versions (6-10) don't support .webp
images -
browser support
.webp
Nowadays there is a very convenient attribute for lazy loading images -
loading="lazy"
makes images on your web page that are not visible be lazy
loaded when the user scrolls into them.
<image src="/my-img.webp" alt="white-cat" loading="lazy" />
As of December 2020 support is at about 75%, but if the browser does not support
the loading
attribute on images, it would just load all your images and
everything else would just work.
Instead of downloading many KB of render blocking fonts, use the system font of the particular operating system your visitor uses. This way the browser doesn't have to download any font files.
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; }
The breakdown of the above snippet is:
-apple-system
and BlinkMacSystemFont
are used for apple devicesSegoe UI
for windows devicesRoboto
for Android devicesOxygen-Sans
, Ubuntu
, Cantarell
for linux systemsHelvetica Neue
and sans-serif
are used as fallback, in case some of the
previous fonts fail to load