How to Optimize Your Website

Performance to Grow
Traffic and Leads
The Complete Guide

Built by

Created by HubSpot Academy

Professor, Corey Braccialini
Table of Contents

1 Introduction

2 Improving Your Website’s Performance

3 Enhancing SEO for Your Website

4 Optimizing Your Website for Mobile

5 Implementing Website Security Best Practices

6 Bonus: Creating Memorable User Experiences

with Website Personalization

7 Conclusion

Optimize Your Website Performance 2

 Introduction
Crazy as it sounds, your website’s performance could be costing you lost sales.
Your visitors are more impatient and cautious than ever.

40%
of people
85%
of people
50%
of global internet
activity
will leave your page if it takes won’t browse your site is done on mobile
longer than three seconds if it’s not secure.
to load.

Think With Google HubSpot Research StatCounter

This means that for every second that your website takes to load, people abandon your site.
If your website’s mobile experience isn’t intuitive, users won’t explore it.
If your website has security issues, good luck getting your visitors
to trust your checkout process.
You’ve already found your website performance issues by scanning your site on
Website Grader

Optimize Your Website Performance 3

This guide will show you how to optimize your site for • How to allow Google to index your pages and
speed, search engines, mobile experience, and security plugins
so that you have a clearer path to growing your business.
• How to design your content correctly for mobile
You’ll learn why the website issues matter for improving
• How to use HTTPS for improved website security
traffic and how to fix them.
• Bonus: How to use data to create personalized
experiences on your website.
If you’ve been struggling to increase traffic to
your website, have you considered your website’s
performance as the source of the issue?

Let’s understand how to optimize your

website’s performance.

By the end of this guide, you will understand:

• The importance of website performance, on-page

SEO, mobile optimization, website security, and
website personalization

• How to increase your website’s performance and

improve your score.

• How to reduce page size and increase load speed

Optimize Your Website Performance 4

 Your website performance is critical for connecting with
customers online. If your site takes too long to load,
users simply are not going to wait around. In this lesson,
you’ll learn why website performance is important, how
to improve load speed, how to optimize the elements of

Improving
your web page, and how to reduce the workload of your
server to build a website that performs at its best.

Your Website’s The Importance of Website

Performance
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?

It’s the speed at which web pages are downloaded and

CHAPTER ONE displayed in a user’s web browser. Basically, website
performance tells you how fast your website is.
Why is website speed so important?
• Rankings in organic search

• Visibility on Facebook

• The user experience

will – because they’re solving for their users and helping
them find answers to their questions or solve their
Website performance impacts problems faster.
rankings in organic search.
There are many factors that search engines use to rank
Website performance impacts visibility
organic results on a search engine results pages, also
on Facebook.
known as “SERPs”. Factors include the URL, title and Facebook has always taken the load speed of the
header tags, inbound links, site architecture, and, you content that appears in the Facebook News Feed
guessed it, website speed. And if you think about it, that into consideration. For example, if you’re on a slow
makes a lot of sense. connection, you’ll see more text and image content than
videos. Facebook also takes your website’s performance
Performance is important to search into consideration in their algorithm, particularly for
engines. mobile app users. If your post links to a slow website,
Search engines like Google want to offer the best it may not be displayed to people using the Facebook
experience to its users. If a website takes too long to app. This means that you’re missing out on views,
load it will probably see a higher bounce rate. And interactions, and traffic from Facebook. Optimizing your
this is even more true on mobile. If Google can surface website’s performance could result in an increase in
comparable webpages that have a faster load time, they referral traffic from Facebook.

Optimize Your Website Performance 6

Website performance impacts the user Will people come back to a slow site?
experience. The short answer—no! 79% of shoppers who are
And a poor user experience affects the website metrics dissatisfied with site performance say they’re less likely to
that you care about, like bounce rate and conversion rate. purchase from the same site again.

How Quickly Should a Page Load?

40% of people will leave a page that takes longer than
three seconds to load.

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.

Optimize Your Website Performance 7

Website performance isn’t What is usability?

just a technical concern. Usability is how efficiently and easily visitors can see or
examine your website.
Website Performance Affects:
How does usability impact performance?
• The accessibility of your site
If your website or its elements take too long to load, it is
• The usability of your site inherently less usable. Things like the navigation, menus,

• Your web design content, images, videos, hyperlinks, forms – all those
things impact a website’s usability. When you include
What is accessibility? these on your website, you need these features to be
optimized to perform their best to offer great usability.
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
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.
Learn more about website accessibility here.

Optimize Your Website Performance 8

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

What did improving website
to you. Performance impacts metrics marketers care
performance help Carousell.com
about, like traffic, conversion rates, and revenue. Let’s
achieve?
take a look at the impact of website performance for
Carousell.com. Carousell.com is a marketplace for buying Carousell.com reduced their load time by 65% and saw

and selling new and secondhand goods. a 63% increase in traffic. That’s a drastic increase in traffic
that’s happened because they took the time to improve
their website’s performance.

Optimize Your Website Performance 9

Website performance isn’t just a technical
concern.
The first criteria to look at when optimizing your website FCP and TTI metrics are growing in popularity. Being able
is the overall page load speed. Load speed is the time it to see content on a website and interact with it is closer
takes to fully display the content on a specific page. to how users feel about site speed than the actual page
load speed of a website. But improving load speed can
How fast should a page load? help you improve FCP and TTI metrics as well.

Best-in-class webpages should load within 3

There are many ways to improve
seconds. That’s how long people are willing to wait
your page load speed, including
before they start clicking the back button and finding
minification and compression.
a different site that loads faster. Does your website
To understand minification and compression, we’re going
take longer to load? If you’re not sure, head on over
to talk about HTML, CSS, and JavaScript. This will not
to Website Grader to find out.
only help you understand how to reduce your page load
speed and improve user experience on your website, but
When diagnosing your website load speed, there are a
it’ll also help you sound knowledgeable in front of your
few other metrics to look at, including “first contentful
web development team.
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.

Optimize Your Website Performance 10

What is minification? What are HTML, CSS, and JavaScript?
A natural place to start when looking to increase your To understand minification, you first need to know a
webpage’s load speed is to reduce the size of what’s handful of things about HTML, CSS, and JavaScript.
actually being loaded. This is where minification comes They are components of every website that define the
in. Minification is the process of reducing resource size structure, style, and behavior of a webpage.
by removing unnecessary comments and spacing in the
Each of these components work together to create a
source code.
webpage.
These characters include whitespaces, line breaks,
The Components of a Website:
and comments which are useful for us humans but
• HTML provides the basic structure of sites, which is
unnecessary for machines. Don’t worry, minification is not
enhanced and modified by CSS and JavaScript.
a permanent change to the code. In general, minification
creates a new minified version of your source code. This • CSS is used to edit the presentation, formatting, and
means you can always continue editing your source code. layout of a page.
You can always unminify to work on it and reminify your
• JavaScript is used to control the behavior of
code to make it smaller again. We minify the files of a
different elements.
website containing HTML, CSS, and JavaScript code to
HTML, CSS, and JavaScript can all be minified. Don’t
reduce the file size so your web browser can read them
worry, unless you are a technical marketer and have built
faster.
your website yourself, minification is usually a job for your
web developer.

Check out this resource that could help you have

a conversation with your developer.

Optimize Your Website Performance 11

How minification works: Wondering what tools you can use for
This might lead you to question what exactly is
minification?
happening when you minify files. To start, developers Tools for Minification:
create these files with convenience in mind. They
• To minify HTML, try out the PageSpeed Insights
make the code easier for people to read by including
Chrome extension.
whitespace, comments, and long variable names. But
• For CSS, try CSS Compressor.
this also creates larger files to transfer across the internet
and more for the web browser to read. That’s where • For JavaScript, you could use JS Compress.
minification comes in. It essentially removes these extra

The second key way to

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,

improve page load speed
and JavaScript. is compression.
• HTML minification removes all unnecessary
Have you ever tried to send a file over email that was too
characters from the HTML.
big and you had to compress it into a ZIP file to make it
• CSS minification removes all the unnecessary
small enough to send? Well, that’s compression at work.
characters and comments from your stylesheet, the
When a user arrives on your website, a request is made
file that contains font and layout rules.
to your server, which is the computer program that stores,
• JavaScript minification removes all unnecessary processes, and delivers web pages. This happens for
characters and comments from the JavaScript. every single file. The larger these files are, the longer it
takes to load.

Optimize Your Website Performance 12

What is compression? Compression

Compression replaces repetitive pieces of code with • Removes all strings that are repeated.

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. See how minification and compression work.

Compression vs. Minification How do you get started with

compression?
Minification
There are a couple solutions out there for compression:
• Removes whitespace, comments, and non-required Gzip and Brotli. Gzip and Brotli are both open source
semicolons. and free to use. Enabling compression can get pretty
technical and it will depend on the server that you’re
using.

Many other CMSs on the marketplace will also compress

your files.

If you’re using the HubSpot CMS Hub, your files will be

compressed automatically. No work needed.

Optimize Your Website Performance 13

HubSpot offers a content management system (CMS) that takes
the pain out of managing your website, so you can focus on the
experience you’re providing your customers. . With CMS Hub,
marketers can edit without effort, developers can leverage the
tools & technologies they prefer to code the cool stuff, and with
24/7 threat monitoring and a globally hosted CDN, you get
security without the sleepless nights.

“With CMS Hub we are able to manage our update schedule

with ease. We don’t have to rely on an engineer to make
updates. We can go right in and quickly adjust the number
of partners we work with or update product information. It’s

given us the flexibility to move fast as we grow.”

AMANDA RAINES
Head of B2B Marketing, ClassPass

Start a 14-day free trial

*no credit card required
 Optimizing Your Web Page
But you can enable compression on other servers.

Elements
For those of you who are self-hosting your website, this is
where you’re going to want to work with your web expert.
What about page size?
How can you enable compression?
Let’s dive into the specific elements on a webpage that
Compression is enabled by adding code to a file called impact page size.
.htaccess on the web server.
What is page size?
.htaccess files can be used to alter the configuration of
Page Size (Page Weight) is the overall size of the block of
your server to enable or disable additional functionality
stored memory that makes up a page.
and features, including compression.
Reduce the overall size of the page to increase the load
To learn what code needs to be added to your .htaccess
speed.
file, check out the guide. This walks you through what
code needs to be added for a variety of servers. Minification and compression reduce the overall size of
your HTML, CSS, and JavaScript files. But what about the
Minification and compression are two elements that these files actually include?
solutions to reduce your page size.
Here are a few best practices for optimizing the elements
They perform their best when they work together. By on your web page to reduce the page size.
removing extraneous code and marking duplicate
• Optimizing Web Page Elements
strings, your web page will have smaller file sizes which
• Use Google Fonts instead of custom fonts.
means a faster load speed. • Use existing video hosting solutions.
• Compress your images.
• Make your images responsive.

Optimize Your Website Performance 15

Use Google Fonts instead of custom use and people might already have these fonts cached

fonts. in their browser, meaning that it’s ready to use — no

download required.
Fonts add weight to your webpage, and custom fonts
add even more. If your website uses custom fonts and Are you self-hosting videos on your
the person who is visiting your website doesn’t have that website?
font installed on their operating system, then they’ll need
If you are, you might be adding unnecessary weight to
to download the web font files along with the rest of the
your website. Self-hosting a video essentially means that
website.
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.

Host videos on a web page. Use an existing hosting

solution, like YouTube, Vimeo, or Vidyard. All of these
solutions can significantly reduce the weight of your
Use Google Fonts to decrease page size. Google Fonts
page. Instead of storing your video content on your
is a collection of fonts that are hosted by Google and
own server, you use their servers instead. To display
accessible to all web browsers. Google has optimized
the video on your webpage, you can embed the video
these fonts to be delivered to web browsers in the most
using the code provided by each platform. Plus, video
optimal way. So if someone is using the latest version
hosting solutions do a lot of work on their end to ensure
of a web browser, they receive the latest version of
a smooth user experience and optimal viewing quality.
that font that is optimized for their browser. This makes
downloading Google Fonts fast. Plus, they’re free to

Optimize Your Website Performance 16

The problem with unoptimized images Why does the size of an image matter?
Too many or too large images can also bog down your These file types contain an infinite amount of code
page weight. To optimize the size of your images, there behind them, which means that they can be sized to fit
are a few solutions, some more complex than others. any screen automatically. For any image, not just SVGs,
At the very minimum, you should be compressing the size of your images matter because they determine
the images that you place on your website. Image how much space on the screen the image will take up. So
Compression groups parts of an image together to we know that for illustrations saved as an SVG, they can
reduce its size without visibly decreasing quality. be resized automatically. But what about the rest of your
images?
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. Check out this resource to learn more.

What about illustrations?

If you have illustrations on your webpage, like a logo, for
example, save them as an SVG file. What is an SVG file?
An SVG File is a graphic file that uses a two-dimensional
vector graphic format designed specifically for the
internet.

Optimize Your Website Performance 17

 How to Reduce the Number of HTTP Requests
Reducing HTTP Requests • Combine text resources
and Maximizing Page • Combine image resources

Caching • Move render-blocking JavaScript

Every element that appears on a webpage needs to come • Reduce redirects

from somewhere. HTTP Request is an ask for information
from the browser, like Chrome or Firefox, to the server, Combine text resources.
the remote computer that fulfils that request. The server Web pages often have multiple script files. For example,
then delivers everything that needs to be displayed. This you might be using multiple 3rd party JavaScript libraries
includes text, images, styles, scripts, and everything else to perform specific functions, like an image slider,
that makes a web page a web page. Whereas reducing analytics tracking, or animations. The result is many
the file sizes of your HTML, CSS, and JavaScript impacts scripts slowing down your webpage. Every file that you
your web page’s overall download size, reducing the eliminate is one less HTTP request required to load your
number of HTTP requests reduces the frequency at page.
which these downloads need to happen. Less frequent
downloads mean your website can be displayed faster. So how do you combine multiple text files, like
JavaScript, on a page?
If you want to create a high-performing Use an open source bundler, like Webpack or Parcel, to
page, aim to have 30 requests max. combine JavaScript files. Getting set up with a bundler
We’ll cover four strategies you can use to reduce the gets technical. If your website is being slowed down
number of HTTP requests. by having too many HTTP requests and you are using
multiple text resources, chat with your web developer to
combine them.

Optimize Your Website Performance 18

You can also combine image resources. With the help of CSS background positioning, your web
developer can reposition this single image in a variety of
The same logic applies to your image resources. Think
different ways to show only the icon you need. This can
of all the places across your website that share the same
significantly decrease the number of image files that are
images. One thing that comes to mind are icons. You
limiting your load speed. Plus, it enhances consistency
might have specific social share icons that match your
and ensures that all of your icons match across your
brand’s style.
entire website.

So how do you fix render-blocking

JavaScript?
It’s common practice to put JavaScript blocks in your
You could include each image as its own file. But that page header. JavaScript enables your website to behave
increases the number of HTTP requests. differently based on criteria that you identify. But the
This is where image sprites come into play. Image Sprites behavior of your website cannot change if it doesn’t
is a group of small images that are included in one render in the first place. This means that the JavaScript
physical image instead of multiple. in the header is essentially blocking the rest of the page
from loading as quickly as it could otherwise.

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 header. 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

Optimize Your Website Performance 19

 How many redirects can you have? The best practice is
page experience. To ensure that this JavaScript renders
to limit the number of redirects on your web page to a
when the page first loads, you can call out the JavaScript
maximum of two. Too many redirects will slow down your
function specifically where it is needed. Here’s how this
page.
would look.

Some Redirects Are Okay:

Example JavaScript function
• 303: Moved Permanently
Put the critical JavaScript functions directly where they • 302: Moved Temporarily
are needed on the page.
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
This means that the JavaScript function “insert text” will optimized for their phone.
load immediately. Other nonessential functions of your
JavaScript file will load after the web page renders.
Solution #1
Use A Redirect—This increases the number of HTTP
requests on your webpage.
Redirects also require additional HTTP
requests. Solution #2
Use a Mobile Responsive Design—This optimizes your site
Redirect is a way to send both people and search for all devices without any redirects.
engines to a different URL from the one they originally
Avoid using redirects to solve problems on your website
requested.
that can be solved through design.

Optimize Your Website Performance 20

If you use HubSpot’s CMS, you don’t have to worry about Client Side Caching
this since your website is automatically responsive for
The server tells a web browser to keep the files it
mobile users. Learn more about a 301 redirect here.
downloads so that it doesn’t have to download them
Curious about technical SEO improvements? Check out
again in the future.
this resource.

What is caching?
Optimizing your web page for the first render is one
thing, but how can you avoid time-consuming queries
Caching benefits both content consumers and content
in the first place? Well, that’s where caching comes into
providers.
play. Caching is the process of saving resources to be
reused. The Benefits of Caching:
For website optimization, there are two types of caching: • Decrease network costs by reducing requests to your
server.
server side caching and client side caching
• Improve responsiveness by making your website
faster for browsers to retrieve.
Server Side Caching • Content will be continuously available even if you
experience server outages.
The server saves the result of a single render and serves
that same result when it is requested again. 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.

Optimize Your Website Performance 21

If you’re using the WordPress CMS, you can use a plugin The role of HTTP requests and caching
called WP Super Cache to cache your pages for you. WP pages is technical.
Super Cache is a plugin that generates static HTML files
Be sure to connect with your web team to make sure that
of your web pages which will be served to the majority of
the solutions they are implementing are improving your
your users. This is a great solution for marketers without
website’s overall performance, including limiting HTTP
coding skills. If you’re using wordpress, consider adding
requests and maximizing page caching. This will help you
HubSpot’s free CRM to grow your business. Capture,
create web pages that render quickly, are lightweight,
organize and engage web visitors with free forms, live
and follow best practices for website optimization.
chat, CRM (contact management), email marketing,
and analytics. Easy to use & no coding necessary. Built
natively into WordPress. And completely free. Check it
out here.

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.

Optimize Your Website Performance 22

 Optimizing your website content for search helps you
drive organic traffic to your website by providing a great
website experience for people and web crawlers alike.

Enhancing
In this lesson, you’ll learn how to set up a sitemap for
your website so search engines can index your pages.
Plus, we’ll cover how to write and edit effective meta

SEO for Your descriptions and link descriptions in your website

content.

Website Think about the last time you visited a website. Imagine
this scenario. You think to yourself: “I wonder when the
first Olympics were?” So what do you do? You take out
your phone and ask Google. You immediately learn
that it was way back in April of 1896. How did Google
know which article to show you first that immediately
CHAPTER TWO
answered this question? That’s on-page SEO at work.
 because it helps search engines understand your
website and its content. Elements of on-page SEO,
including meta descriptions and link text, helps crawlers
understand what your page is all about. A web crawler
(Spider or Bot) downloads and indexes content from all
over the internet to learn and understand the contents
What is on-page SEO?
of a webpage so that that information can be retrieved
On-Page SEO is the process of optimizing various when it’s needed.
front-end and back-end components of your website so
Search engines are putting a greater focus on intent and
that it ranks in search engines and brings in new traffic.
relevance with ongoing algorithm updates.
Merely creating and publishing your website isn’t
enough. You must optimize it for Google and other Search Engines Are Doing a Better Job
search engines in order to rank and attract new traffic. It’s of:
called “on-page” SEO because the tweaks and changes • Understanding what users are actually searching for
you make to optimize your website can be seen by when they type a query.

visitors on your page, whereas off-page and technical • Delivering search results that meet user intent, like
SEO elements aren’t always visible. Every part of on-page searching for information or making a purchase.
SEO is completely up to you; that’s why it’s critical that
Great, so on-page SEO is a clear must-have for visibility
you do it correctly.
in search engines.

On-page SEO is important for both

search engines and people.
Let’s start with search engines. On-page SEO is important

Optimize Your Website Performance 24

But how does this help people? Well, Google is What about image packs?
constantly innovating how they display information to
Image packs show an array of images related to the
people searching on their site.
query. Clicking on these images takes you to the
There are a ton of ways that Google uses your on-page Google Images results. This ultimately leads back to the
SEO to determine how your website appears in the webpage source of the image.
results pages. Traditional organic search results are the
most common result type.

Featured snippets typically appear for very specific

questions. Featured snippets pull information from
webpages to answer a question and display it in the
SERP.
You’re likely already familiar with these types of results.
They dominate the search engine results pages (SERPs),
but they’re not the only type of organic results you see
anymore.

Optimize Your Website Performance 25

When a search query contains a brand name, for Allowing Search Engines to Index Your
example, sitelink results show more than just a link to the Pages
company’s homepage. Sitelink results may appear for
The most important part of on-page SEO allows search
queries with high brand intent.
engines to crawl and index your pages. If you’re not
doing this, you’re not going to be in search engines. Let’s
take a look at how this process works and learn how to
enable it on your webpages.

How do search engines work?

1. Crawl: Search webpages and look over the code and
content for each URL.

2. Index: Store and organize the information it finds from

crawling.
Google will also display links to other areas of the site.
3. Rank: Provide the pieces of content that best match a
This includes their menu or reviews which are the second
person’s search query.
level down from their homepage in the navigation.

Search engines provide a lot of ways to appear in the

SERPs organically. All of these results types and more
are due to your on-page SEO. Following on-page SEO
best practices will make your page more visible in search
engines and solve for the needs of your audience.

Optimize Your Website Performance 26

How Google finds your content
Basically, Google uses a huge set of computers to crawl
billions of pages on the web. This crawler essentially
begins with a list of web page URLs generated from
previous crawls and then augments those pages with
the sitemap data that’s provided. During the crawling
process, the Googlebot looks for new sites, updates to
existing pages, and any broken links. Once the crawling
process is complete, all of the results are fed into
Google’s index, and any new sites or updated content
will be listed accordingly. While it processes the results,
Google looks at information on your page such as title
Crawlers are performing similar tasks as a librarian. They
tags, meta description, alt tags, and more.
are organizing all of the contents on the internet into
ways that make them easily accessible.
Think of this process like a library. Google Is a Massive
Library. Books need to be identified, categorized, and Can your pages already be found by
placed in the right order on shelves. Google?
The best place to start is to understand which pages on
your website are already being indexed. If your page is
being indexed, that means that Google is able to crawl
your page and store its contents. The best way to do this
is by using an advanced search operator.

Optimize Your Website Performance 27

An advanced search operator sounds content is indexed yet for a site, Google will let you know

complicated, but it’s actually pretty that your search did not match any results. If no content

simple. is found, your next step should be to create a sitemap

that you can submit to Google. Sometimes, though, you
In the search engine, type “site:yourdomain.com”
may want to block Google from knowing that your page
replacing the domain with your own. Example of an
exists. Learn about SEO trends in 2020 from HubSpot’s
advanced search operator for HubSpot.com. We’d type
Direct of Acquisition.
“site:hubspot.com” into Google.

What is a sitemap?
A sitemap is a file of code that lives on your web
server and lists all of the relevant URLs your website
is carrying. Your sitemap helps search engine web
crawlers understand how your website is built so they
can evaluate and rank it more easily. XML sitemaps are
designed specifically for search engines like Google.
Google needs to be able to find webpages anchored
within a website no matter how old or deeply nested
We see that HubSpot has 217,000 pages currently being
they might be in that website’s domain. For this reason,
indexed by Google. This isn’t going to be an exact
an XML sitemap is a crucial component of a blog, where
number, but it will at least give you an idea of how many
article pages are constantly bumped further back into the
of your own pages are currently being indexed.
website’s archive as new content is published.
What if no pages are being indexed by Google? If no

Optimize Your Website Performance 28

 To create a sitemap, you’ll want to ensure that various
Here’s an example of what an XML sitemap file might teams in your organization give input. Depending on
look like the size of your organization, there may be many people

An XML Sitemap Includes 4 Key Elements, within the involved in creating a sitemap.

<url> tags.
Though, you’ll want to ensure that the navigation
structure is correct. The structure of your website plays a
big role in your site’s SEO, so it’s important to plan your
top-level navigation structure carefully. Pay attention to
your website’s depth. The further away a page is from the
original homepage URL of your site, the worse it is for
that page’s SEO.

Once You’ve Planned Out How Your Website Will Be

Source: WooRank
Organized, You’ll:
What does each element of an XML sitemap do? • Create the XML sitemap
• Put it on your web server
• The URL location is the full URL to the webpage.
• Submit it to each individual search engine
• The last modified date is when the page was last
updated. Why submit your sitemap
• Change frequency can be set to: Never, Yearly, When you first publish your website, and each time you

Monthly, Weekly, Daily, Hourly, or Always. go through a significant site redesign, someone on your
team will have to submit the sitemap to each search
• And page priority is a number 0.0 through to 1.0
engine so that they can tell your homepage from your
to indicate the relative priority of pages within your
“About Us” page or your team management page. Unless
website.
Optimize Your Website Performance 29
you’re using a platform that automatically updates your Screaming Frog is a web crawler that allows you to
sitemap, you’ll need to update the sitemap yourself and assess your website’s on-page SEO.
resubmit any time you make significant changes to your
The company offers a tool to develop your own XML
website. Otherwise, you’ll have to wait for search engines
sitemap and strengthen your website’s on-page SEO in
to identify, crawl, and index your new pages itself. That
the process. To use Screaming Frog’s sitemap generator,
means if you’ve made a really significant change to your
you’ll first download the company’s SEO web crawler,
site’s structure, you might want to manually submit it.
which is free for crawling your first 500 URLs. Once your
website is crawled, you can create an XML sitemap from
Luckily, most content management systems and web
it including every webpage that scores a “200” in the
hosting providers provide you an XML site map. Once
initial crawl. This ensures only your strongest pages are
you build your site architecture and publish your pages,
included in your new XML sitemap.
the XML sitemap file autogenerates and you can submit
that file to Google. The tool XML-Sitemaps.com requires no registration
or initial download to create a sitemap for your
Using the HubSpot CMS Hub makes this easier. HubSpot website.
will automatically generate your XML sitemap file when
This tool is free to websites that carry up to 500 URLs.
you publish new pages and make changes to your site.
Once your sitemap has been created, you can either
To create your XML sitemap, there are a few free download it as an XML file or receive it via email if you
solutions, including Screaming Frog and XML-Sitemaps. need to transport it to a new computer or coworker. The
com. paid version of XML-Sitemaps.com allows you to crawl
up to 1.5 million pages and create other forms of XML
sitemaps — such as news, video, and image sitemaps —
and submit your sitemap directly to a search engine from
the sitemap generator.

Optimize Your Website Performance 30

How to submit a sitemap to Google
and Bing
For Google, sign in to Google Webmaster Tools.
Google Webmaster Tools will be your dashboard for
testing and submitting updated sitemaps to Google,
so you can ensure Google is always aware of the latest
pages published to your site. For Bing, sign in to Bing
Webmaster Tools.
But Google might not crawl and index
For help on each step, check out this resource by Yoast your new page as quickly as you’d
SEO. like.
To index your content the fastest way possible you
should resubmit your sitemap after publishing a new
page.

Having and maintaining your sitemap is crucial to being

discoverable in search engines. Your sitemap will help
search engines understand your content and get it
served to the people you are trying to reach.

Optimize Your Website Performance 31

Including Meta
Take a look at this meta description example

Descriptions
When you conduct a search, how do you decide
which result to click on? The page title and the meta
description probably play huge roles in deciding that a
resource is helpful to you. In this video, we’re going to
learn how to write and edit your meta descriptions.

What is a meta description?

Check out this meta description example for Best Buy.
Meta description is an HTML attribute that provides a Best Buy sells appliances and electronics.
brief summary of a webpage. This brief snippet of text
In this example, the meta description reads “Shop for
that appears below the blue link in a search engine
washers and dryers at BestBuy.com and find deals on
result. This description summarizes the content of the
the top brands, from stacked units and front loaders
webpage linked above it, and although it is not an official
to traditional washers & dryers.” This meta description
ranking factor in Google search results, it can be edited
describes exactly what you’ll see when clicking their link
to help people understand what the webpage is about
— washers and dryers available for purchase.
and encourage them to click through.
3 Reasons Why You Need a Meta Description

1. A meta description increases clickthrough rates and

visits from organic search.
2. A meta description gives the right people the right
information at the right time.
3. A meta description increases visits from social.

Optimize Your Website Performance 32

A meta description increases clickthrough rates and visits A meta description increases visits
from organic search. There might be 10 blue links per from social
search engine results page, but they don’t all get clicked
Google isn’t the only website that displays your meta
by an equal number of people.
description when you publish a piece of content. Social
People are more likely to click results that are higher up networks like Facebook use what’s called an “open
on the page. graph” to present the most important data on your

The #1 organic result is 10x more likely to receive a click webpage when you share it with your followers. The

compared to a page in #10 spot. open graph includes a meta description. People on social
media can see your meta description.

This example shows the

10X meta description for post

sharing a link to the Only
In Your State website on
Facebook.

The #1
organic result
To get your resultisto10x
rankmore likely you need people
well, however, The meta description for this page is “These 5 Trails In
to start clicking ontoit.receive a click entice people to
Meta descriptions Massachusetts Will Lead You To Extraordinary Ancient
click on your link instead of someone else’s. Great meta Ruins” and it appears at the bottom of the Facebook
descriptions can be powerful enough to get people to post. Your meta description doesn’t just drive search
click on your link even if you are below them in search engine traffic.It drives social media traffic, too.
results. A meta description gives the right people the
right information at the right time
Optimize Your Website Performance 33
Now that you know why you should write a meta of each page. Don’t stuff keywords anywhere you can.
description, here’s how to write an effective one. Make sure they fit naturally and help explain what
people can expect to see if they click on your link.
Best Practices for Writing a Meta
Description Aim for 155–160 characters in your meta
description. The number of characters that make up
• Write compelling content.
your meta description is important. But when actually
• Include one or two keywords.
• Aim for 155–160 characters. displaying this metadata, Google doesn’t measure by
• Avoid non-alphanumeric characters. characters — it measures by pixels. Your meta description
will be cut off if it becomes too long. Aim for 155–160
First, write compelling content. Write a short sentence characters in your meta description as a benchmark.
previewing the content or telling the searcher why they
should read your post. Give them a clear benefit of Avoid non-alphanumeric characters. Special
clicking through and reading your post, if necessary. characters might appear just fine on your computer
When writing your meta description, be informative and screen, but search engines can’t read these symbols
add value.The meta description is your chance to convey as easily. These are known as “non-alphanumeric”
the value of your page to the viewers. Use one or two characters. Avoid using special characters like plus signs
keywords in your meta description. You might already (+) and em-dashes (—) in your meta descriptions. Special
include keywords in a webpage’s body copy and title. But characters often don’t appear in the search results as you
the meta description should also include keywords that intended. And they may be removed all together.
help describe the content of the webpage.
Want to test out how your meta descriptions will
Keywords in your meta description optimize your look before setting them live?
content to match with related search queries. Focus Check out the SEOmofo snippet optimizer tool.
on one or two unique keywords in the meta description

Optimize Your Website Performance 34

How to edit your meta Writing Descriptive Link
description in a CMS Text
Depending on the CMS that you’re using, there will be On a webpage, descriptive link text is important for
different methods for editing your CMS. If you’re using your SEO performance. Link description is the clickable
WordPress, the Yoast SEO is the go-to SEO solution. All word(s) in a hyperlink. Link descriptions help users and
you’ll have to do is log into your WordPress dashboard, search engines better understand your content. Search
click on your posts, and edit your description. Other engines will be better able to understand the purpose of
CMS like HubSpot CMS Hub have an easy solution your links and the hierarchy of the post. And people will
within the CMS itself, no plugin required. In your CMS, be more inclined to click a link that directly explains what
look for a page or post setting that allows you to edit the the destination is.
meta description. And for the technical marketers out
What does a bad link look like? Generic words like “click
there, your meta description can also be edited within
here” or “learn more” is not an effective link description.
the HTML of your individual page by editing the “meta
Google suggests these link description best practices
name=description” field. Regardless of the solution that
works for you, having a well-written meta description will
• Stay on topic. Don’t use text that has no relation to the
help improve your rankings in search engines and drive page’s content.
traffic to your website. • Don’t use the page’s URL as the link description,
unless you have a good reason to do so, such as
referencing a site’s new address.
• Keep descriptions concise. Aim for a few words or a
short phrase.
• Format links so that they’re easy to spot.

Optimize Your Website Performance 35

Example of link descriptions and the page’s HTML In this example, replacing the “click here” link description
with the keyword “website optimization” is a better
Bad Link Description
experience. It’s a small change, but this effort really
The link description “click here” is not specific to the blog
impacts your page’s ranking and experience.
post on website optimization.
How do you edit link descriptions?

This one’s pretty easy. This can be edited directly in

your HTML, like in the examples we just covered. But
no matter which CMS you are using to publish content
online, it is as simple as hyperlinking keywords by right-
clicking the word, and clicking the hyperlink icon. With
meta descriptions and link descriptions in place, you’ll
see better performance on search engines and deliver a
better experience to your website visitors.
Good Link Description

Using the keyword “website optimization” as the link

description makes it clear that the link is about that topic. For further learning, check out HubSpot’s Ultimate Guide
to SEO in 2019

Optimize Your Website Performance 36

 The majority of people around the world are visiting
websites from a mobile device. Optimizing your
website for mobile has never been more important.
In this lesson, you’ll learn how responsive web design
works, see how to set up viewport for your website,

Optimize Your
and understand the best practices for using fonts and
interactive elements on your site.

Website for The Importance of Mobile

Optimization

Mobile Across the world, over 50% of total internet activity is

done on mobile.

CHAPTER THREE

40%
of people
85%
of people
50%
of global internet
activity
eave your page if it takes won’t browse your site is done on mobile
nger than three seconds if it’s not secure.
to load.
Desktop follows behind with a little over 45% of the How does responsive design work?
total internet activity and tablet makes up the rest. With
A website targets the size of the browser to match
so many people surfing the web from their phones, it is
how much space is available to display the website
essential to offer a great mobile website experience today.
appropriately. Setting up viewport as well as using
Without it, you are not catering to the majority and are
legible fonts and correctly-sized target tags all fold into
likely missing out on traffic and leads for your business as
an effective responsive design. And, breakpoints are
a result.
set up to target ranges that define specific displays. For
example, you generally see breakpoints for phones,
So how do you create an effective
mobile experience? tablets, and desktops.

Follow mobile optimization best practices for viewport, What about just creating a seperate website
fonts, and buttons. That’s where a responsive design version for mobile?
comes in. Responsive design is the method of designing
Marketers — Don’t create a separate mobile version of
webpages that appear in their optimized form on
Z your website. It will require a lot of resources to maintain
all devices. In other words, a responsive design will
in the long run. That’s where having a responsive design
automatically reformat your website for all screen sizes.
adds a ton of value — it is easier to manage one site that
This allows your website visitors to easily interact with your
works for all devices.
site no matter what device they’re using.

Key features of responsive web design

Unlike isolated mobile websites, where you create a

whole separate version of a website for mobile devices,
responsive design adapts the layout to any screen size
by using fluid, proportion-based grids.

Optimize Your Website Performance 38

Why is responsive web design better? The WorkFlowWise website viewed on a computer
screen is well laid out and easy to read.
Responsive websites serve the same HTML to all devices
and use CSS media queries to change how your website
should look on each device.

Getting started with a responsive web design

If you aren’t using responsive web design already,

then you’re in luck because it’s very easy nowadays
to get started with it. Across all of the available CMSs
on the market, such as WordPress, Squarespace, Wix,
and HubSpot, you’re bound to find free and paid web
This website home screen is easy to navigate and the
design templates that are mobile responsive out of the
imagery makes use of the entire space on the screen.
box. For those of you working with your own designer
and developer, responsive design is typically best
The elements of the
practice these days, but be sure to clarify that you want a
WorkFlowWise website
responsive website.
reposition when viewed on a
Let’s take a look at a responsive web design mobile device.
example from WorkFlowWise. The text, imagery, and buttons
WorkFlowWise enables you to automate, optimize, and all reposition when viewed
create value from any type of workflow. And they’re a on a mobile device to make
HubSpot customer. it easier to view on a smaller
screen.

Optimize Your Website Performance 39

So why switch to responsive design? Let’s take a look at a few examples of viewport in

As the number of people surfing the web from their

action.

phones continues to climb, a responsive design will make

your life as a marketer easier and your website more
effective. A mobile-friendly website will save you money
PetGuide.com Doesn’t Have
in the long run, deliver a great user experience, and
Viewport Set Up
perform better across all devices.
The text is not sized correctly

Sizing Your Content for the screen and half of the

website is cut off.
Correctly for Viewport
Just because a website is available on mobile doesn’t
mean that the webpage is sized correctly. That’s why it What does a website look like that is adaptive to
is important to set up viewport for your site. Think about different viewports?
the screen size of a typical phone. Viewport is the size of
a window or visible area of a screen on mobile and tablet
Ohmydog.com Is Optimized for
devices.
Mobile

The text and layout is

positioned correctly for reading
on a mobile device.

Optimize Your Website Performance 40

Simply setting up viewport won’t make your website If your website’s built on the HubSpot CMS Hub, you
look its best on all devices.That’s the role of a mobile- don’t need to worry about configuring a viewport. Your
responsive design. But setting up viewport will make it site will automatically adjust to any device’s viewport.
so mobile users don’t have to zoom in and out and scroll But if you’re not using HubSpot, you’ll need to configure
back and forth to read and interact with the content on your viewport in order to offer a good experience to your
your website. mobile visitors. So how do you configure your website’s
viewport?
Why doesn’t a webpage fit in viewport?

When you don’t set a viewport for mobile devices, those Add a meta viewport tag to any and
devices will render a webpage at the width of a typical
all webpages you would like to be
desktop screen and then scale to fit the screen so that
mobile-friendly.
the text and graphics are super small. This is called the Add This HTML Snippet to the Header of Your Site
“fallback width.” The fallback width ranges from 800–1024
<meta name=viewport content=”width=device-width,
pixels. These dimensions automatically update when you
initial-scale=1”>
do set a viewport for mobile devices.
You can copy and paste this HTML.
The webpage’s width will scale automatically to a user’s
Check out the blog post about how
mobile device, giving them a much better experience.
to set up a mobile viewport in the
resources.
Check if you have viewport configured already
Usually, placing the viewport tag in
To check, head on over to the Website Grader included
the header file will have the viewport
in the resources. If your viewport is not configured, the
carry across the whole site. This
tool will tell you.
makes your entire website more

Optimize Your Website Performance 41

mobile-friendly. But be aware you may have to add the webpage’s CSS file, which defines the style of your page.
viewport tag to each and every webpage individually,
especially if you use different software for your website Go to your website, right click, and select “inspect” to
versus your landing pages. If you’re not using an open your developer tools.
integrated solution like HubSpot’s CMS Hub, you’ll have
Click the “pointer” icon in the top left of the toolbar,
to manually check to make sure your landing pages, site
and then you can inspect the elements of your page,
pages, and blog have this viewport tag so they’re mobile-
including your fonts.
friendly. By setting up viewport, you’ll guarantee that your
Clicking on them will show you exactly where this font
content is being shown to fit the size of whichever screen
size is denoted in your CSS file.
size someone is using.
You can then bring this to your developer to optimize the
size of your fonts across your website.
Using Legible Font and Correctly-Sized
Target Tags If no font-size is declared, the browser will use a default
font size, which is usually 16px.
You want your website to be readable and usable on
every device. This means that, in order for your website to
Font size in the CSS
be optimized for mobile, you’re going to want your fonts
In your CSS, font size will look something like this: p
and interactive elements, like CTAs, to make sense on a
{font-size:120%;}.
mobile device.
You can use different units of measurement within the
There are a ton of different screen sizes out there. And CSS files to change the font size.
you want the text across your website to be easy to read
on every single one. The size of your font is noted in your

Optimize Your Website Performance 42

In Your CSS, You Can Use Multiple Units of Measurement, This means that the font sizes that you describe in the
Including: CSS are all based on the size of your body font. By
• Pixels (px) structuring your fonts this way, you’ll know that no matter
• Points (pt) what device your website is being viewed on, your fonts
• EMs (em)
will share the same size relationship.
• Percent (%)
Font Sizes in Your CSS Will Look Like This:
Here’s how you should think about fonts for your
body {font-size:16px}
site.
p {font-size:120%}
According to Google, it is best practice to use a base
font size of 16 CSS pixels. At a minimum, aim to have a h1 {font-size:250%}

font size of at least 12px or larger on the majority of your Now that you understand how font size works within the
page. CSS of your site, there are a few solutions to choose from.

If you are a technical marketer or if you have a developer

Let’s say you want your paragraph text to be a little larger
on hand, these font best practices can be implemented
than the body text, and that you want your header text to
manually across your site’s CSS. If you’re at an earlier
be even bigger than that.
stage and have some flexibility with your website’s
design, starting out with a responsive template will
Scale Your Fonts From Your Base Text Size
solve text readability issues before they happen. These
• Paragraph text is 120% of your base font.
best practices will already be baked into a responsive
• Header text is 250% of your base font. template.

Optimize Your Website Performance 43

What about other interactive web elements?
Fixing tap target size
issues
Your font isn’t the only thing you’ll want to make sure
appears correctly on mobile devices. The interactive
elements of your page need to look right and work, too. Google recommends tap targets should be 48 pixels
Think of things like buttons or links that a person would wide and 48 pixels tall. This gives your CTAs enough real
tap on their phone. Tap Targets are areas on a webpage estate on a mobile device for someone to actually click
that a user interacts with to carry out commands. it with their finger. These sizes are denoted in your CSS.
You can find this by using your developer tools, too, just
Appropriately-sized tap targets make pages more
like with the font size.
mobile-friendly and accessible,
like in this example from Youredi,
Another common problem with tap targets is the spacing
a platform for building data
between them. Think about how you use your phone.
integration solutions.
Your thumb is much larger than the mouse on a desktop,
The calls-to-action buttons are
so you need more space to be able to click the right
easy to click on a mobile device.
element on a phone. Google recommends that there
Beyond Responsive Design: How should be at least 8 pixels of space between tap targets.
to Optimize Your Website for
Mobile Users You can fix spacing issues within your site’s CSS.

Use These Properties to Add Spacing Around Each Tap

Target:

• Padding

• Margin

This is particularly common in things like lists of links.

Optimize Your Website Performance 44

Listicle Example From HubSpot

Each of these blue hyperlinks are considered a tap target. Use formatting
rules to make each link clickable on mobile. Most mobile optimization issues
can be solved with a responsive design. But it is a lot to ask to audit every
single element on your site.

By following the best practices for your fonts and tap targets
on your page, your website will be easy to read for people
on mobile and will offer a user experience that allows people
to actually engage with the content on your site.

Optimize Your Website Performance 45

 A secure website that is equipped with an SSL certificate
and free from vulnerabilities is what visitors and search
engines expect today. In this lesson, you’ll learn why
website security is so important, what the difference
between HTTP and HTTPS is, how to get and install an
SSL certificate, and how to remove existing JavaScript
vulnerabilities.

Implementing The Importance of Website Security

Website Security
85% of people will not continue browsing if a site is not
secure. Think about that — 85%. Imagine the traffic, leads,
and revenue that you would lose as a result.

Best Practices Source: HubSpot Research.

CHAPTER FOUR
40%
of people
85%
of people
50%
of global internet
activity
will leave your page if it takes won’t browse your site is done on mobile
longer than three seconds if it’s not secure.
to load.
Would you visit a website after seeing a security warning But big businesses are not the only ones who are
like this telling you that your connection is not private? susceptible to data breaches. SMBs and ecommerce
businesses are at risk online. Organizations providing
online services, like ecommerce companies, contributed
to the largest number of compromised credentials at
over 2 billion (Source: Digital Main St.)

And small to medium-sized businesses, or SMBs, are

especially at risk. You might see corporations in the
headlines as top data breach victims, but it’s actually
Web security is good for website visitors, customer data,
SMBs that hackers prefer to target. SMBs have more
and your business’ reputation.
digital assets that are more valuable than an individual
Is There Really a Security Risk? online, but less security than a larger enterprise-level
company.
56% of all internet traffic is from an automated source
such as hacking tools, scrappers and spammers,
Security breaches are frustrating and frightening for
impersonators, and bots (Source: WebARX). Having
both businesses and consumers.
a secure website has never been more important for
Studies show that, after a company data breach, many
protecting your data. Think about some major global
people take a break from shopping at that business —
businesses who have seen data breaches in the past few
and some people quit shopping there altogether. But
years. Equifax, Target, and Sony come to mind. These
cybersecurity is about more than just avoiding a PR
cases resulted in the exposure of hundreds of millions
nightmare. Investing in cybersecurity builds trust with
of online user information. Not to mention the fact that it
your customers. It encourages transparency and reduces
cost the businesses millions of dollars to resolve in court
friction as customers become advocates for your brand.
settlement.

Optimize Your Website Performance 47

Using HTTPS and Removing Security privacy, and data integrity between computer

Vulnerabilities applications.

Have you ever noticed that some URLs start with “http://” I won’t go into detail about the technical differences

and others with “https://”? between SSL and TLS But just know that in many ways,
TLS has superseded SSL. TLS is newer and arguably
What is the extra “s” for in https://?
more secure. But don’t worry, the certificates you used
to implement the TLS and SSL protocols are often
Perhaps you noticed that extra “s” when you were
interchangeable. So from here on out, we’ll look at
browsing websites that require giving over sensitive
solutions for SSL and TLS together since they’re often
information, like when you were paying bills online. To
one-in-the-same.
put it simply, the extra “s” stands for secure. This means
that your connection to that website is secure and
Both of these technologies make sure that all data
encrypted. Any data you enter is safely shared with that
passed between the web server and browser are private.
website.
When you fill out a form on an unsecured website and
The technology that powers that little “s” is one of two hit “submit,” the information you just entered can be
technologies: SSL or TLS. intercepted by a hacker. This information could be

SSL (Secure Sockets Layer) is the standard security anything from details on a bank transaction to high-level

technology for establishing an encrypted link between a information you enter to register for an offer. In hacker

web server and a browser. language, this “interception” is often referred to as a

“man-in-the-middle attack.”

TLS is a newer technology that also authenticates

websites. It’s a protocol that provides authentication,

Optimize Your Website Performance 48

The actual attack can happen in a number of ways, but You simply have to visit a website with SSL or TLS,
one of the most common is that a hacker places a small, and voila: your connection will automatically be
undetected listening program on the server hosting a secured.
website. That program waits in the background until a
How to Know If Your Website Has a Certificate:
visitor starts typing information on the website. It will
• Use HubSpot’s Website Grader
activate to start capturing the user’s information, like an
account login and password, and then send it back to the • The URL says “https://” and not “http://”
hacker.
• You see a little padlock icon in the URL bar.

• The certificate is valid.

How is a secure website different?

When You Visit a Website That’s Encrypted: In your web browser, you’ll be able to tell if a site is
secure because it will say “https://” and you’ll see a little
Your browser will form a connection with the webserver,
padlock icon in the URL bar.
look at the certificate, and then bind together your
browser and the server. This binding connection is
secure. That means no one besides you and the website https://www.google.com
you’re submitting the information to can see or access
what you type into your browser. This connection It’ll show up either on the left- or right-hand side of the
happens instantly, and in fact, many suggest it is now URL bar, depending on your browser. You can click on
faster than connecting to an unsecure website. the padlock icon to read more information about the
website and the company that provided the certificate.
Even if a website has the “https://” and a padlock icon,
the certificate could still be expired — meaning your

Optimize Your Website Performance 49

connection wouldn’t be secure. In most cases, a site that
You can get a free
displays as https will be secure, but if you encounter a
site that asks for a lot of personal information, it may be certificate or pay a few
worth double-checking to be sure the certificate is valid. hundred dollars per
month to obtain a custom
To find out whether your certificate is still valid in
certificate.
Chrome, go to View > Developer Tools.

From there, you will need to navigate to the Security tab First, check with your web hosting provider to see if
and you can see if the SSL certificate is valid or expired. they offer a free SSL certificate. Chances are they might
If you click the “View certificate” button, you will be able offer you one for free. But if not, we encourage you to
to see more information about the SSL certificate and the purchase an SSL through your hosting provider because
specific date it’s valid through. they usually have the easiest solution unique to your
needs.

How can you get a certificate on your website?

For most, a standard certificate will cover your content, Free Certificate Solution
but for companies in a regulated industry — such as Let’s Encrypt offers certificates at no cost, but the setup
finance and insurance — it may be worth talking with your is technical; that’s why we suggest starting with your
IT team because there are specific requirements within hosting provider first. You’ll probably need to work with a
your industry that specify the type of SSL certificate you web expert to get an SSL set up with Let’s Encrypt. These
need. The cost of certificates vary. certificates expire regularly, so you’ll need to make sure
they stay up to date.

Optimize Your Website Performance 50

One of the other key considerations is the validity period Follow this guide that walks you through the process on
of a certification. Most standard SSL certificates that you wordpress.
purchase are available for one to two years by default,
but if you’re looking for longer-term options, then look Once you have your certificate, you’ll need to

into more advanced certificates that offer longer time migrate your site.

periods. Websites currently not on https will need to migrate their

website from http to https. Depending on the CMS that
If you’re using HubSpot, all files hosted with the HubSpot you’re using, this may be as easy as clicking a button
File Manager are automatically encrypted with SSL. With to download a certificate and redirect your pages. For
the HubSpot CMS Hub you can direct all visitors to the others, you might have to manually set up redirects to
secure version of your site, no plugins required. your new https URLs. The solution is dependent on your
hosting server. So, find the best solution for your website
If you’re using WordPress, there are many plugins that by searching “[your hosting provider name] redirect to
can help you install your certificate. https”.

WordPress Plugins

Really Simple SSL, Insecure Content Finder, and WP

Force SLL can be used to install your certificate, encrypt
files, and direct traffic to the secure version of your site.

Optimize Your Website Performance 51

Removing security
To Fix JavaScript Library Vulnerabilities:

vulnerabilities
• Stop using vulnerable JavaScript libraries immediately

• Upgrade your libraries to their newest version and

Beyond SSL, there are other ways you can keep your
continue using if it fixes the vulnerability
visitors safe online. There are front-end JavaScript
libraries with known security vulnerabilities that you • Use a different library without known vulnerabilities

should avoid at all costs. To find which JavaScript libraries are causing you trouble,
we recommend following Google’s resource.
Front-End JavaScript Library is a library of prewritten
JavaScript which allows for easier development of
JavaScript-based applications. Security is practically a requirement today online.

Today, search engines will call your webpage out for

But not all libraries are created equally, and intruders not having an SSL certificate. Search engines are taking
know this. Intruders have crawlers that scan your site for their user’s cybersecurity into top consideration. With an
known security vulnerabilities. When the web crawler SSL certificate and by removing vulnerabilities in your
detects a vulnerability, it alerts the intruder. From there, JavaScript, you will keep your visitors’ best interest at the
the intruder just needs to figure out how to exploit the forefront of your website.
vulnerability on your site.

Scan your website in HubSpot’s Website Grader to

identify if your page is using any JavaScript libraries with
known vulnerabilities.

Optimize Your Website Performance 52

Bonus: Creating
Memorable User Personalization takes your website to the next level and
offers unique experiences based on behavior. In this

Experiences lesson, you’ll learn all about website personalization,

learn how to use data from your CRM to create

with Website
memorable experiences, and take a look at some
examples of website personalization in action.

Personalization
The Importance of Website Personalization

Have you ever gone to a website and been surprised at

how relevant its content is?

CHAPTER FIVE
For example, The Weather Channel shows you the Today, people expect a lot from websites. They
weather in your location immediately. aren’t satisfied by sites that act as digital brochures.
Now, consumers want websites to provide dynamic,
personalized experiences that are tailored specifically to
their needs.

Or maybe you have been looking at buying a new car.

Google News displays news articles related to your
search activity.
If your message doesn’t resonate, people simply
Or you go to Stitch Fix and take a quiz to learn more
ignore it. This is where personalization comes in.
about your style.

Stitch Fix determines your style and provides fashion What is personalization?
recommendations.
Personalization is the tailoring of messages or offers to
individuals based on their actual behavior.

How do website visitors react to personalized

experiences?

When you create personalized experiences, your website

visitors feel like you know them and care about them.
Personalization can make people more likely to engage
with your site.
Optimize Your Website Performance 54
How Does Personalization Impact Website Using Data to Create a
Performance?
Personalized Experience
Personalized calls-to-action (CTAs) perform 202% better
Website personalization is powered by data. A CRM and
than basic CTAs (Source: HubSpot).
a CMS that works together creates powerful personalized
Imagine what a 202% increase in performance could do
experiences.
for you?
What is a CRM system?

202% CRM (Customer Relationship Management) System

is a system of record that tracks and manages your
relationships with your prospects, leads, and customers.

A great example of website personalization in action

You can use HubSpot’s CRM for free. You can add an
is the homepage for Zipcar. The content of the page
unlimited number of users, data, and up to 1 million
changes based on where you are in the world. If you’re
contacts with no time limit or expiration date.
located in Boston for example, the page will read “Zipcar
in Boston” and display a map of available Zipcars in the What can you do with the HubSpot CRM?
Boston area.
In the HubSpot CRM, you can store information about
your audience using contact properties. Each property
corresponds to something specific about that contact,
such as their job title, their lifecycle stage, industry, and
products they’ve already purchased.

Optimize Your Website Performance 55

What is the relationship between a CRM and What can tracking a lead’s activity show you?
website personalization? Tracking a Lead’s Activity Shows You:
Your CRM and CMS can work together. Regardless if
• Which pages they’re viewing
you’re using the HubSpot CRM and CMS or another
• How long they spend on each page
solution, your personalization will only be as good as the
quality of data in your CRM. • If there’s a page they return to more than once

This can give you insight into what they’re interested in

How do you collect visitor information for
learning about or what they might be struggling with. You
personalization efforts?
can use these insights to create effective personalization
Use forms and chatbots to collect all the information you strategies for your website.
need about your visitors. After you’ve set up your CRM
Once you have collected data in a CRM, you can use it
with your custom contact properties, the next step is to
in your CMS. Depending on the CMS that you are using,
actually start collecting information about your visitors.
you can use the data from your CRM in different ways.
This is primarily done through forms on your website.
Within the HubSpot CMS Hub, for example, you can edit
Once a visitor fills out a form on your site, that data will
the way your website behaves based on the data you
be automatically entered into your CRM.
have in your CRM.

What happens when a lead fills out your website

form? In WordPress, there are plugins that you can use, like
Advanced Personalization, that allow you to personalize
Once you have lead information in your database, you
your website by country, first time user, day of week, and
can start tracking their activity on your website.
time of day.

Optimize Your Website Performance 56

The way that you implement these strategies is going to
depend on your unique business.

Are you an ecommerce business? Focus your efforts on

product recommendations.

Do you sell your products or services into a variety of

industries? Try using personalization to provide unique
content to each of your buyer personas.

Or if you want to provide unique content to your existing

customers, use personalization to give them exclusive
access to new products or high-quality content.

There’s a lot you can do with personalization. If you want

to continue learning about personalization, check out
our Contextual Marketing Certification Course or the
CMS Certification For Marketers from HubSpot Academy
to learn how to use the HubSpot CMS Hub to its full
potential.

Try HubSpot’s CMS Hub for free for 14-days.

Optimize Your Website Performance 57

Get a website content management system that is already
optimized for performance, SEO, security, and mobile
design. HubSpot offers a content management system
(CMS) that takes the pain out of managing your website,
so you can focus on the experience you’re providing your
customers.

With CMS Hub, marketers can edit without effort,

developers can leverage the tools & technologies
they prefer to code the cool stuff, and with 24/7 threat
monitoring and a globally hosted CDN, you get
security without the sleepless nights.

Start a 14-day free trial

*no credit card required
 Optimizing your website’s performance is a
concentrated effort that is well worth the time and
energy. Taking the essential steps to prioritize website

Conclusion
related issues to your team will help your business
capture more traffic, convert more visitors into leads,
and show opportunities for growth that may have been
hidden. We can’t wait to see what the future holds for
you and your new optimized website.

Thanks for reading! Made by your

friends at HubSpot Academy. Take free
lessons and get certified today.