Transcript: Improving Website Performance

Video 1: The Importance of Website Performance

People love things that are fast. The delivery speed of your takeout order. How quickly your airplane gets
from point A to point B. And guess what? People love fast websites, too.

What is website performance? Website Performance is the speed at which web pages are downloaded and
displayed in a user’s web browser. Basically, website performance tells you how fast your website is.

Why is website speed so important? Website performance impacts your rankings in organic search, visibility
on Facebook, and the user experience

Website performance impacts rankings in organic search. There are many factors that search engines use to
rank organic results in the search engine results pages, also known as “SERPs. Factors include the URL, title
and header tags, inbound links, site architecture, and, you guessed it, website speed. And if you think about
it, that makes a lot of sense. Search engines like Google want to offer the best experience to their users. If a
website takes too long to load it will probably see a higher bounce rate.

And this is even more true on mobile. If Google can surface comparable webpages that have a faster load
time, they will – because they’re solving for their users and helping them find answers to their questions or
solve their problems faster.

Website performance impacts visibility on Facebook. Facebook has always taken the load speed of the
content that appears in the Facebook News Feed into consideration. For example, if you’re on a slow
connection, you’ll see more text and image content than videos. Facebook also takes your website’s
performance into consideration in their algorithm, particularly for mobile app users. If your post links to a slow
website, it may not be displayed to people using the Facebook app. This means that you’re missing out on
views, interactions, and traffic from Facebook. Optimizing your website’s performance could result in an
increase in referral traffic from Facebook.

Website performance impacts the user experience. And a poor user experience affects the website metrics
that you care about, like bounce rate and conversion rate. How quickly should a page load? Best-in-class
webpages should become interactive within 5.3 seconds. Any slower and visitors will abandon your site,
reducing conversions and sales. Just 5 seconds. That’s how long it takes to lose traffic because of slow load
times. Will people come back to a slow site? Will people come back to a slow site? 79% of shoppers who are
dissatisfied with site performance say they’re less likely to purchase from the same site again.

A slow website equals less traffic. This means that you could be losing new visitors and repeat customers all at
the same time. It can be easy to think of website performance as an afterthought of the development process
or as the final step in a project. The problem with this approach is that it solves for the creative process but
not for the end-user.

Website performance isn’t just a technical concern. Website performance affects the accessibility of your site,
the usability of your site, and your web design. Accessibility is the availability of a website and its contents to
all people. How does performance impact accessibility? Well, think about all the different ways people might
 Transcript: Improving Website Performance

be accessing your site. Some people might use text-to-speech or magnification functionality. Others might be
accessing your site from a slower internet speed. And many will be on a mobile device using cellular
networks. If your website has poor performance, it becomes less accessible to everyone in a variety of
circumstances.

What is usability? Usability is how efficiently and easily visitors can see or examine your website. How does
usability impact performance? This is a pretty easy one to understand. If your website or its elements take too
long to load, it is inherently less usable. Things like the navigation, menus, content, images, videos,
hyperlinks, forms – all those things impact a website’s usability. When you include these on your website, you
need these features to be optimized to perform their best to offer great usability.

What is website design? Website design is the process of planning, ideating, and organizing content for the
internet. How does website design impact performance? Website design isn’t just how a website looks – it’s
how it works, too. A poorly designed website can lead to performance issues later down the road. For
example, the overall layout of your website pages impacts a site’s hierarchy. And the fonts that you use
impacts how your website performs. Your page may look pretty, but if it doesn’t perform well it is not a good
design.

Think about the website performance metrics that matter to you. Performance impacts metrics marketers care
about, like traffic, conversion rates, and revenue.

Let's take a look at the impact of website performance for Carousell.com. Carousell.com is a marketplace for
buying and selling new and secondhand goods. What did improving website performance help
Carousell.com achieve? Carousell.com reduced their load time by 65% and saw a 63% increase in traffic.

A great website performance example is from the 2011 U.S. Presidential Elections. When former U.S.
President Barack Obama was campaigning for the United States presidential election in 2011, his campaign
staff reduced the page load speed of his campaign website from 5 seconds to 2 seconds. A 3-second
decrease in load speed helped the campaign raise an additional $34 million.

Test your page performance regularly. Make sure you measure, monitor, and refine your website over time.
And be careful about adding so many features to your website that you negatively impact performance. I’d
recommend setting benchmarks for the performance metrics that matter to you. This is called a performance
budget. That way, you know that any feature you add to your website must not exceed your performance
goals. Keeping performance top-of-mind when scoping out new projects will give you a head start because it
will help designers and developers create amazing experiences that perform well the first day.

Video 2: Increasing Load Speed and Reducing Page Size

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
 Transcript: Improving Website Performance

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.
 Transcript: Improving Website Performance

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.

Video 3: Optimizing Your Web Page Elements

Let’s dive into the specific elements on a webpage that impact page size. What is page size? Page size (page
weight) is the overall size of the block of stored memory that makes up a page. Reduce the overall size of the
 Transcript: Improving Website Performance

page, increase the load speed. Minification and compression reduce the overall size of your HTML, CSS, and
JavaScript files. But what about the elements that these files actually include?

Here are a few best practices for optimizing the elements on your web page to reduce the page size.
• Use Google Fonts instead of custom fonts.
• Use existing video hosting solutions.
• Compress your images.
• Make your images responsive.
• Use Google Fonts instead of custom fonts.

Fonts add weight to your webpage, and custom fonts add even more. If your website uses custom fonts and
the person who is visiting your website doesn’t have that font installed on their operating system, then they’ll
need to download the web font files along with the rest of the website.

Using Google Fonts decreases page size. Google Fonts is a collection of fonts that are hosted by Google and
accessible to all web browsers. Google has optimized these fonts to be delivered to web browsers in the
most optimal way. So if someone is using the latest version of a web browser, they receive the latest version
of that font that is optimized for their browser. This makes downloading Google Fonts fast. Plus, they’re free
to use and people might already have these fonts cached in their browser, meaning that it's ready to use —
no download required.

Are you self-hosting videos on your website?If you are, you might be adding unnecessary weight to your
website. Self-hosting a video essentially means that the video is stored on your own server. This means that
you are using your server’s bandwidth to display the video and increasing the overall size of your page by
doing so.

This problem is easy to fix. Use an existing hosting solution, like YouTube, Vimeo, or Amazon.
All of these solutions can significantly reduce the weight of your page. Instead of storing your video content
on your own server, you use their servers instead. To display the video on your webpage, you can embed the
video using the code provided by each platform. Plus, video hosting solutions do a lot of work on their end to
ensure a smooth user experience and optimal viewing quality.

YouTube, Vimeo, and Amazon each have something different to offer. YouTube is by far the most popular
solution for many people getting started with video. Plus it's free. But the videos do include ads and provide
additional recommendations at the end of the video. Vimeo is an ad-free solution that’ll cost you about the
price of two coffees every month. Vimeo optimizes videos hosted with them to serve smaller files to your
website visitors. This means faster load speeds. Amazon offers more customization but is also more technical.
Depending on the size of your business and your level of technical competency, Amazon can be a good
option.

The problem with unoptimized images is that too many or too large images can also bog down your page
weight. To optimize the size of your images, there are a few solutions, some more complex than others. At
the very minimum, you should be compressing the images that you place on your website. Image
compression groups parts of an image together to reduce its size without visibly decreasing quality.
 Transcript: Improving Website Performance

Here’s an example of a compressed image. Take a look at these two images. The one on the left is the
original, full-size image. The one on the right is the compressed version. Can you tell the difference? Probably
not. And just look at how much smaller the file size is. That means less time to load.

How can you compress images? A great tool to compress your images is TinyPNG.com. TinyPNG.com is free,
easy to use, and effective. Marketers, I recommend compressing every image you use on your blog posts,
landing pages, and everywhere else on your site.

If you have illustrations on your webpage, like a logo, for example, save them as an SVG file. An SVG file is a
graphic file that uses a two-dimensional vector graphic format designed specifically for the internet. These file
types contain an infinite amount of code behind them, which means that they can be sized to fit any screen
automatically. For any image, not just SVGs, the size of your images matter because they determine how
much space on the screen the image will take up.

So we know that for illustrations saved as an SVG, they can be resized automatically. But what about the rest
of your images? Responsive images are a must. Take out your phone and view your website from the mobile
browser. How do the images look? Are they sized correctly to the screen? Ideally, your page should never
serve images in dimensions that are larger than someone’s screen. You might need some help from your
developer for this one, but all it takes to make your images responsive is a few lines of code in your HTML or
CSS.

How can you create responsive images in CSS? Add a CSS rule that sets all images to fill the width of the
container the image is in. You can also set certain elements of the image to be fixed, like a max-width. This
means that your images will scale down but never scale up. Depending on the type of images you’re using,
this might be helpful.

Think about your web page elements. Who knew that seemingly simple things like text, videos, and images
could have such a big impact on your page speed? By using Google Fonts, a video host, and responsive
images, your on-page elements will be optimized to load their fastest.

Video 4: Reducing HTTP Requests and Maximizing Page Caching

Every element that appears on a webpage needs to come from somewhere. An HTTP request is an ask for
information from the browser, like Chrome or Firefox, to the server, the remote computer that fulfils that
request. The server then delivers everything that needs to be displayed. This includes text, images, styles,
scripts, and everything else that makes a web page a web page. Whereas reducing the file sizes of your
HTML, CSS, and JavaScript impacts your web page’s overall download size, reducing the number of HTTP
requests reduces the frequency at which these downloads need to happen. Less frequent downloads mean
your website can be displayed faster. If you want to create a high-performing page, aim to have 30 requests
max.
 Transcript: Improving Website Performance

We’ll cover four strategies you can use to reduce the number of HTTP requests.
• Combine text resources
• Combine image resources
• Move render-blocking JavaScript
• Reduce redirects

Web pages often have multiple script files. For example, you might be using multiple 3rd party JavaScript
libraries to perform specific functions, like an image slider, analytics tracking, or animations. The result is many
scripts slowing down your webpage. Every file that you eliminate is one less HTTP request required to load
your page.

So how do you combine multiple text files, like JavaScript, on a page? Use an open source bundler, like
Webpack or Parcel, to combine JavaScript files. Getting set up with a bundler gets technical. If your website is
being slowed down by having too many HTTP requests and you are using multiple text resources, chat with
your web developer to combine them.

You can also combine image resources. The same logic applies to your image resources. Think of all the
places across your website that share the same images. One thing that comes to mind are icons. You might
have specific social share icons that match your brand’s style. You could include each image as its own file.
But that increases the number of HTTP requests.

This is where image sprites come into play.

Image sprites are a group of small images that are included in one physical image instead of multiple. With
the help of CSS background positioning, your web developer can reposition this single image in a variety of
different ways to show only the icon you need. This can significantly decrease the number of image files that
are limiting your load speed. Plus, it enhances consistency and ensures that all of your icons match across
your entire website.

It’s common practice to put JavaScript blocks in your page header. JavaScript enables your website to
behave differently based on criteria that you identify. But the behavior of your website cannot change if it
doesn’t render in the first place. This means that the JavaScript in the header is essentially blocking the rest of
the page from loading as quickly as it could otherwise.

So how do you fix render-blocking JavaScript? Move your JavaScript files to the bottom of your page for all
non-essential functions. For critical functions, you can place your JavaScript directly in your HTML. Let’s say
that you want to greet users back to your website by using their name. This is considered a critical JavaScript
function because it completely changes the initial web page experience. To ensure that this JavaScript
renders when the page first loads, you can call out the JavaScript function specifically where it is needed.

Here’s how this would look. Put critical JavaScript functions directly where they are needed on the page. This
means that the JavaScript function “insert text” will load immediately. Other nonessential functions of your
JavaScript file will load after the web page renders.
 Transcript: Improving Website Performance

Redirects also require additional HTTP requests. A redirect is a way to send both people and search engines
to a different URL from the one they originally requested. How many redirects can you have? The best
practice is to limit the number of redirects on your web page to a maximum of one. Too many redirects will
slow down your page.

Redirects are okay, including 303 (Moved Permanently) and 302 (Moved Temporarily). In these situations,
you’re probably not too worried about maximizing the load speed. These pages are already under
maintenance.

But what about the pages you do want to optimize? For example, let’s say you want people searching your
website on mobile to see a version of your website that’s optimized for their phone. Solution #1 is to use a
redirect. This increases the number of HTTP requests on your webpage. Solution #2 is to use a mobile
responsive design. This optimizes your site for all devices without any redirects. Avoid using redirects to solve
problems on your website that can be fixed through a more strategic design.

If you use HubSpot's CMS, you don't have to worry about this since your website is automatically responsive
for mobile users. Optimizing your web page for the first render is one thing, but how can you avoid time-
consuming queries in the first place? Well, that’s where caching comes into play. Caching is the process of
saving resources to be reused.

For website optimization, there are two types of caching: server-side caching and client-side caching. Server-
side caching happens when the server saves the result of a single render and serves that same result when it
is requested again. Client-side caching happens when the server tells a web browser to keep the files it
downloads so that it doesn’t have to download them again in the future. Caching benefits both content
consumers and content providers.

The benefits of caching:

• Decrease network costs by reducing requests to your server.
• Improve responsiveness by making your website faster for browsers to retrieve.
• Content will be continuously available even if you experience server outages.

Most elements of a website can be cached, including logos and images, CSS stylesheets, JavaScript files,
media files, and so on. Setting up caching for your website depends on the CMS that you’re using. For the
HubSpot CMS Hub, server and client-side caching works automatically without any additional plugins
required. If you’re using the WordPress CMS, you can use a plugin called WP Super Cache to cache your
pages for you. This plugin generates static HTML files of your web pages which will be served to the majority
of your users. This is a great turn-key solution for marketers without coding skills. Many of the other CMSs out
there also offer caching functionality too. Check out the advanced settings in your CMS and look for options
to enable page caching on your website.

The role of HTTP requests and caching pages is technical. Be sure to connect with your web team to make
sure that the solutions they are implementing are improving your website's overall performance, including
limiting HTTP requests and maximizing page caching. This will help you create web pages that render quickly,
are lightweight, and follow best practices for website optimization.