Reducing Page Size and Increasing Load Speed
The first criteria to look at when optimizing your website is the overall page load speed. Load speed is the time it
takes to fully display the content on a specific page.
How fast should a page load?
Best-in-class webpages should become interactive within 5.3 seconds. That’s how long people are willing to wait before they start clicking the
back button and finding a different site that loads faster. Does your website take longer to load? If you’re not sure,
head on over to Website Grader to find out. It’s listed in the resources section. But today, websites have grown in
complexity
So when diagnosing your website load speed, there are a few other metrics to look at, including “first contentful
paint” and “time to interactive”. First contentful paint (FCP) is the time it takes in seconds for text or images to be
shown to users. Time to interactive (TTI) is when the page responds to user interactions, such as clicking, within
50ms. FCP and TTI metrics are growing in popularity. Being able to see content on a website and interact with it is
closer to how users feel about site speed than the actual page load speed of a web site. But improving load speed
can help you improve FCP and TTI metrics as well.
There are many ways to improve your page load speed, including minification and compression. To understand
minification and compression, we’re going to talk about HTML, CSS, and JavaScript. This will not only help you
understand how to reduce your page load speed and improve user experience on your website, but it’ll also help
you sound knowledgeable in front of your web development team.
A natural place to start when looking to increase your webpage’s load speed is to reduce the size of what’s
actually being loaded. This is where minification comes in. Minification is the process of reducing resource size by
removing unnecessary comments and spacing in the source code. These characters include whitespaces, line
breaks, and comments which are useful for us humans but unnecessary for machines.
Don’t worry, minification is not a permanent change to the code. In general, minification creates a new minified
version of your source code. This means you can always continue editing your source code. You can always
unminify to work on it and reminify your code to make it smaller again. We minify the files of a website containing
HTML, CSS, and JavaScript code to reduce the file size so your web browser can read them faster.
To understand minification, you first need to know a handful of things about HTML, CSS, and JavaScript. They are
components of every website that define the structure, style, and behavior of a webpage. Each of these
components work together to create a webpage. HTML provides the basic structure of sites, which is enhanced
and modified by CSS and JavaScript. CSS is used to edit the presentation, formatting, and layout of a page.
JavaScript is used to control the behavior of different elements.HTML, CSS, and JavaScript can all be minified.
Don’t worry, unless you are a technical marketer and have built your website yourself, minification is usually a job
for your web developer.
This might lead you to question what exactly is happening when you minify files. To start, developers create these
files with convenience in mind. They make the code easier for people to read by including whitespace, comments,
and long variable names. But this also creates larger files to transfer across the internet and more for the web
browser to read. That’s where minification comes in. It essentially removes these extra elements, making it harder
for humans to read, but easier (and faster) for web browsers to read.
Here’s what’s happening when you minify HTML, CSS, and JavaScript. HTML minification removes all unnecessary
characters from the HTML. CSS minification removes all the unnecessary characters and comments from your
stylesheet, the file that contains font and layout rules.
JavaScript minification removes all unnecessary characters and comments from the JavaScript.
Wondering what tools you can use for minification? To minify HTML, try out the PageSpeed Insights Chrome
extension. For CSS, try CSS Compressor. For JavaScript, you could use JS Compress.
The second key way to improve page load speed is compression. Have you ever tried to send a file over email that
was too big and you had to compress it into a ZIP file to make it small enough to send? Well, that’s compression at
work. When a user arrives on your website, a request is made to your server, which is the computer program that
stores, processes, and delivers web pages. This happens for every single file. The larger these files are, the longer it takes to load.
What exactly is compression?
Compression replaces repetitive pieces of code with markers directing to the first
instance of that code. Compression’s purpose is to reduce the file size during transfer from the server to the
browser. Once the file arrives, the browser has to decompress it, like when you download a zipped folder onto
your computer and can’t just open it. You have to unzip it first. The same thing happens when the browser receives
compressed files, but it’s automatically handled by the browser. Minification removes whitespace, comments, and
non-required semicolons. Compression removes all strings that are repeated.
Let’s take a look at an example on an original CSS file. The strings are easy to read. A developer did this on
purpose. The original CSS file makes the most sense to the people who actually have to write and edit this code.
But this also makes the file size large. Once this file is minified, the file size shrinks, but it is also a whole lot harder
to read. All of the white space and extra symbols that break up the code have been removed. Now if you take our
original CSS file and compress it, let’s see how it looks. These characters are placemarks for where the duplicate
code used to be. But what if you compress a minified file? This generates the smallest file size of the bunch.
How do you get started with compression? There are a couple solutions out there for compression: gzip and
Brotli. Gzip and Brotli are both open source and free to use. Enabling compression can get pretty technical and it
will depend on the server that you’re using. If you’re using the HubSpot CMS Hub, your files will be compressed
automatically. But you can enable compression on other servers. For those of you who are self- hosting your
website, this is where you’re going to want to work with your web expert.
Compression is enabled by adding code to a file called .htaccess on the web server. .htaccess files can be used to
alter the configuration of your server to enable or disable additional functionality and features, including
compression. To learn what code needs to be added to your .htaccess file, check out the guide available in the
resources. This walks you through what code needs to be added for a variety of servers.
Minification and compression are two solutions to reduce your page size. They perform their best when they work
together. By removing extraneous code and marking duplicate strings, your web page will have smaller file sizes
which means a faster load speed.
