A Beginner’s Guide to SSL: What It is & Why It Makes Your Website More Secure

Have you ever noticed that some URLs start with “http://”, while others start with “https://”?

Example of a website wth httpsMaybe you noticed that extra “s” when you were browsing websites that require giving over sensitive information, like when you were paying bills online.

But where’d that extra “s” come from, and what does it mean?

To put it simply, the extra “s” means your connection to that website is secure and encrypted; Any data you enter is safely shared with that website. The technology that powers that little “s” is called SSL, which stands for “Secure Sockets Layer.”

Learn More About HubSpot's CMS Software

As a consumer, you always want to see https:// when visiting any site you trust with your essential information. As a marketer, you’ll want to make sure you have an SSL or two for your audience.

So let’s talk about why SSL is a big deal.

What is an SSL Certificate?

Let’s define an SSL. This definition comes straight from SSL.com:

When you land on a page that has a form you filled in and hit “submit” for, the information you entered can be intercepted by a hacker on an unsecure website.

This information could be anything from details on a bank transaction to what you enter to register for an offer. In hacker lingo, this “interception” is often referred to as a “man-in-the-middle attack.”

One of the most common ways an attack happens is this: A hacker places a small, undetected listening program on the server hosting a website. That program waits in the background until a visitor starts typing information on the website, and it will activate to start capturing the information and then send it back to the hacker.

A little scary, right?

But when you visit a website that’s encrypted with SSL, your browser will form a connection with the web server, look at the SSL certificate, then bind your browser and the server. This binding connection is secure to ensure no one besides you and the website can see or access what you type.

This connection happens instantly, and in fact, some suggest it’s faster than connecting to an unsecure website. You simply have to visit a website with SSL, and voila: Your connection will automatically be secured.

An SSL is security technology. It’s a protocol for servers and web browsers that makes sure that data passed between the two are private. This is done using an encrypted link that connects the server and browser.

Companies that request personal information from a user, such as an email address or payment information, should have SSL certificates on their website. Having one means that the details you are collecting are private and ensures the customer that when they see that padlock and “https://”, their privacy is safe.

SSL certificates are categorized by the level of validation and encryption provided or the number of domains or subdomains under the certificate. There’s three types of certificates you can earn depending on the SSL you obtain. Let’s talk about them in more detail.

Types Of Certificates

The umbrellas that SSL certificates fall under are encryption and validation, and domain number. They each have three classifications, and can be applied for on the SSL website. Certificates are processed by a Certificate Authority (CA), which is software designed specifically for running and granting these certificates.

For encryption and validation certificates, there are domain, organization, and extended validation. For certificates defined by the domain number, the types are single, multidomain, and wildcard.

Extended Validation (EV) SSL Certificate

This certificate shows the padlock, HTTPS, business name and country in the address bar to diminish being mistaken for a spam website.

Extended Validation (SV) SSL are the most expensive SSLs to obtain, but they are valuable in showing the legitimacy of your domain from the address bar. To set up an EV SSL, you must prove that you are authorized to own the domain you’re submitting. This ensures users that you are legally collecting the data needed to execute certain actions — such as a credit card number for an online transaction.

An EV SSL certificate can be obtained by any business, and it should be a priority especially for those that need identity assurance. For instance, if your website processes web payments or collects data, you’d want to get this certificate.

Organization Validated (OV SSL) Certificate

This certificate verifies that your organization and domain validation are real. Organization Validated (OV) SSL certificates offer a medium level of encryption and are obtained in two steps. First, the CA would verify who owns the domain and if the organization is operating legally.

On the browser, users would see a small green padlock with the company’s name following. Use this type of certificate if you don’t have the financial resources for an EV SSL but still want to offer a moderate level of encryption.

Domain Validation (DV) Certificate

The Domain Validation (DV) certificate offers a low level of encryption shown as a green padlock next to the URL in the address bar. This is the quickest validation you can receive, and you’ll only need a few company documents to apply.

This verification happens when you add a DNS to the CA. For this certificate, the CA will review the right of the applicant to own the domain being submitted. (Note: DVs don’t secure subdomains, just the domain itself).

Unlike the EV SSL, the CA won’t vet any identity data, so you won’t know who is receiving your encrypted information. But if you’re part of a business that can’t afford a higher-level SSL, a DV gets the job done.

Wildcard SSL Certificates

Wildcard SSL Certificates are in the “domain and subdomain number” category. Wildcard SSLs ensure that if you buy a certificate for one domain, you can use that same certificate for subdomains.

For example, if you bought a Wildcard for example.com, it could be applied to mail.example.com and blog.example.com. An option like this is cheaper than obtaining multiple SSL certificates for a number or domain.

Unified Communications (UCC) SSL Certificate

Also known as Multi-domain SSL certificates, Unified Communications certificates (UCCs) allow multiple domain names to be on the same certificate. UCCs were created to bridge communication between a single server and browser but have since expanded to include multiple domain names by the same owner.

A UCC in the address bar shows a padlock to display verification. They can also be considered an EV SSL if they are configured to show that green text, padlock, and home country. The only difference is the number of domain names associated with this certificate.

Multi-domain SSL certificates cover up to 100 domain names. If you need to alter the names in any way, you can do that with the Subject Alternative Name (SAN) option. Some examples of Multi-domain names you can use are: www.domain.co.uk, www.domain.com, mail.example.com, and checkout.example.com.

Single Domain SSL Certificate

A Single Domain SSL protects one domain. The thing to remember about this certificate is that you can’t use it to protect subdomains or a completely different domain.

For example, if you purchase this certificate for example.com, you can’t use it for blog.example.com or 2ndexample.com.

How can I get an SSL certificate for my website?

The first step is to determine what type of certificate you need. For example, if hosting content on multiple platforms (on separate domains/subdomains) it may mean that you need different SSL certificates.

For most, a standard SSL certificate will cover your content. But for companies in a regulated industry — such as finance or insurance — it may be worth talking with your I.T. team to ensure you’re meeting the specific SSL certificate requirements set within your industry.

The costs of SSL certificates vary, but you can get a free certificate or pay per month to obtain a custom certificate. On the free side — Let’s Encrypt offers certificates at no cost, but I would strongly recommend that you have someone knowledgeable about the DNS and technical setup of your website to help. These certificates will also expire every 90 days, so make sure they stay up to date.

One of the other key considerations is the validity period of a certification. Most standard SSL certificates that you purchase are available for one to two years by default, but if you’re looking for longer-term options, consider more advanced certificates that offer longer time periods.

Is SSL good for SEO?

Yes. While the primary purpose of SSL is securing information between the visitor and your website, there are benefits for SEO as well. According to Google Webmaster Trends Analysts, SSL is part of Google’s search ranking algorithm.

In addition, let’s say two websites are similar in the content provided but one has SSL enabled and the other doesn’t. That first website may receive a slight rank boost because it’s encrypted. As a result, there is a clear SEO benefit to enabling SSL on your website and across your pages.

How can I tell if my website has SSL?

When you visit a website with SSL, there are a few distinct differences that display within the browser. Click here for a free SSL checker tool..

1. The URL says “https://” and not “http://”.

The URL should look something like the screenshot below. Remember, an SSL-encrypted website will always have that “s” that stands for “secure.” Additionally, that text can show up green and follows a green padlock (another indicator, explained below).

Double checking your address is secure

2. You’ll see a padlock icon in the URL bar.

The padlock will show up on the left- or right-hand side of the URL bar, depending on your browser. For example, on Chrome and Safari, it’ll be on the left. You can click on the padlock to read more information about the website and the company that provided the certificate.

HubSpot SSL certificate padlock.3. The certificate is valid.

Even if a website has the “https://” and a padlock, the certificate could still be expired — meaning your connection wouldn’t be secure. In most cases, a site that displays as https will be secure but, if you encounter a site that asks for a lot of personal information, it may be worth double-checking to be sure the certificate is valid.

HubSpot's validity certificate.To find out whether the certificate is valid in Chrome, go to View > Developer > Developer Tools. From there you will need to navigate to the security tab to see if the SSL certificate is valid or expired. If you click the “View certificate” button, you will be able to see more information about the SSL certificate and the specific date it’s valid through.

The next time you visit a website, check its encryption status. I love knowing that by clicking a little padlock, I can see if my data is secure. On the flip side, if you are a part of a business that doesn’t have SSL certificates, make them a part of your next goal set, so you can protect your customers’ data and privacy.

Discover videos, templates, tips, and other resources dedicated to helping you launch an effective video marketing strategy. 

Originally published Jun 18, 2020 3:00:00 PM, updated June 18 2020

Topics:

Site Performance

6 Easy Ways to Help Reduce Your Website’s Page Load Time

The adage “patience is a virtue” doesn’t apply online.

Even a one-second delay can drastically reduce pageviews, customer satisfaction and drop conversions. The speed of your site even affects your organic search rankings.

So what’s the biggest factor contributing to your page speed?

Size.

It takes browsers time to download the code that makes up your page. It has to download your HTML, your stylesheets, your scripts and your images. It can take a while to download all that data.

How strong is your website? Grade it using HubSpot's free Website Grader.

As web users expect more engaging site designs, the size of a site’s resource files will continue to grow. Each new feature requires a new script or stylesheet that weighs down your site just a little more.

How do you make sure your site is up to speed?

There are some great resources for analyzing this. Google’s PageSpeed Insights, HubSpot’s Website Grader, and GTMetrix are some of the most popular. Both services will analyze your site and tell you where you’re falling behind.

A little warning: the results can be a bit daunting sometimes, but most fixes are relatively quick and easy. You might not fix everything the speed service recommends, but you should fix enough to make the site experience better for your visitors.

Let’s learn how to speed up things.

While a few modern content management systems like HubSpot implement speed-enhancing options out-of-the-box, more common systems, like WordPress and Joomla, require a little manual labor to get up to speed.

Now let’s look at some essential speed solutions that every webmaster should consider.

1. Scale down your images.

Images are one of the most common bandwidth hogs on the web. The first way to optimize your images is to scale them appropriately, so they don’t affect page loading time as much.

Many webmasters use huge images and then scale them down with CSS. What they don’t realize is that your browser still loads them at the full image size. For example, if you have an image that is 1000 x 1000 pixels, but you have scaled it down to 100 x 100 pixels, your browser must load ten times more than necessary.

Take a look at the size difference when we scaled down one of our images:

How much file size is affected by scalingJust by changing the dimensions of my image, from 598 x 398 to 600 x 232, the file size decreased immensely. If you optimize your images before uploading them, you won’t forget to when you put them on your page.

Sometimes though, scaling images will make your photos blurry. The clarity can be lost and the image becomes distorted. If that usually happens to you, go with the second option: compressing.

Compressing images will drastically reduce image size without losing out on the quality. There are several free online tools for image compression, such as tinypng.com, that can reduce your image sizes.You can see size reductions anywhere from 25% to 80%.

For example, I took that first image, with 133 KB, and compressed it using a free website app called Squoosh. When the image was completed, it was 87% smaller, and didn’t lose any of its original quality.

2. Cache your browser for data storage.

Why make visitors download the same things every time they load a page? Enabling browser caching lets you temporarily store some data on a visitors’ computer, so they don’t have to wait for it to load every time they visit your page.

How long you store the data depends on their browser configuration and your server-side cache settings. To set up browser caching on your server, check out the resources below or contact your hosting company:

3. Reduce CSS load time.

Your CSS loads before people see your site. The longer it takes for them to download your CSS, the longer they wait. An optimized CSS means your files will download faster, giving your visitors quicker access to your pages.

Start by asking yourself, “Do I use all of my CSS?” If not, get rid of the superfluous code in your files. Every little bit of wasted data can add up until your website’s snail-pace speed scares away your visitors.

Next, you should minimize your CSS files. Extra spaces in your stylesheets increase file size. CSS minimization removes those extra spaces from your code to ensure your file is at its smallest size.

The effects of compressing a CSS file

See if your CMS already minimizes your CSS or if there’s an option for it. HubSpot, for example, already minimizes your CSS by default, whereas WordPress websites require an additional plugin such as WP Hummingbird to optimize those files.

If your CMS does not have a minimize CSS option, you can use a free online service like CSS Minifier. Simply paste in your CSS and hit “Compress” to see your newly minimized stylesheet.

Minimizing your resource files is a great way to knock some size off your files. Trust me — those little spaces add up quickly.

4. Keep scripts below the fold.

Javascript files can load after the rest of your page, but if you put them all before your content — as many companies do — they will load before your content does.

This means your visitors must wait until your Javascript files load before they see your page. The simplest solution is to place your external Javascript files at the bottom of your page, just before the close of your body tag. Now more of your site can load before your scripts.

Another method that allows even more control is to use the defer or async attributes when placing external .js files on your site. Both defer and async are very useful, but make sure you understand the difference before you use them.

Async tags load the scripts while the rest of the page loads, but scripts can be loaded out of order. Basically, lighter files load first. This might be fine for some scripts, but can be disastrous for others.

For instance, let’s say one of your pages has a video above the fold, text underneath, and a couple of pictures at the bottom. If you run async tags on this page, the text will load first, then the images, and the video last.

The largest file — the video file — is also what users are supposed to interact with first. When it loads last, it doesn’t have the same impact. So use async tags if your page has a lot of the same elements that don’t take a long time to load, like text, or a carousel of images.

The defer attribute loads your scripts after your content has finished loading. It also runs the scripts in order. To illustrate, think of your homepage. All of the elements, including image fields, text fields, and layout, would appear in order, with the rest loading after.

Just make sure your scripts run without breaking your site. All you need to do is add a simple word in your <script> tags. For example, you can take your original script:

<script type=”text/javascript” src=”/path/filename.js”></script>

And add the little code to ensure it loads when you want:

<script type=”text/javascript” src=”/path/filename.js” defer></script>

<script type=”text/javascript” src=”/path/filename.js” async></script>

The importance of your scripts will determine if they get an attribute and which attribute you add. More essential scripts should probably have the async attribute so they can load quickly without holding up the rest of your content. The nonessential ones, however, should wait until the end to ensure visitors see your page faster.

But always make sure you test each script to ensure the attribute doesn’t break your site.

5. Add asynchronous pages.

Most web pages download content little by little from different sources. For instance, the body of a web page is loaded by the browser. The head, however, is rendered by external sources, such as a stylesheet and script used to load text and images.

The browser loading the page from beginning to end, head to body, takes a while, but is how a lot of pages are rendered, with this synchronous loading. If one part of the page needs a certain function to load, but that component is already loading another portion of the page, then that initial load must finish before getting to work on the next task.

In the meantime, the visitor is waiting for ages for a web page to appear. On the backend, so much of a computer’s processor is being leveraged that it seems like everything just stops.

Instead, asynchronous loading recognizes the scripts that can be loaded simultaneously, overriding synchronous features. When certain pages are loaded at the same time, eliminating that chain of function commands discussed earlier, other aspects of the page, like the page’s head, can be loaded in tandem.

Asynchronous pages can be implemented just by adding in a few lines of code in your page’s CSS. Read how to design them in this post.

6. Minimize redirects.

How many redirects rest on your website? If you recently did a website migration or acquired subdomains, it’s likely you have an HTTP request or two. These redirects make pages take a while to load.

Redirects, like “Error: 404 not found,” pop up when users type in an incorrect web address or are taken to a broken page on a website. When a page is redirected, another page takes its place or a blank page with the error message replaces the screen.

Visitors would have to sit through the HTTP screen while they’re being redirected, increasing the amount of time taken to load the page. Let’s say your “About” page has been moved to a different subdomain.

When visitors type in the website, let’s say mywebsite.com/about, they should be taken instantly to that page. Instead, mywebsite.com/about leads to an HTTP page, then takes a visitor to mywebsite.com > mywebsite.com/aboutus. That’s an additional page users have to go through just to get to their intended destination.

Instead of hosting multiple redirects, remove them. In this post, you’ll learn how to find all of your redirect pages, alternatives, and most importantly, how to remove them.

As online users demand a richer online experience, the size of our pages will continue to grow. There will be flashier Javascript, more CSS tricks and more third-party analytics to weigh down our websites.

A little attention will go a long way — remember, just a one-second delay is all it takes to lose a lead.Improve your website with effective technical SEO. Start by conducting this audit.  

Originally published Jun 18, 2020 2:45:00 PM, updated June 18 2020

Topics:

Site Performance