This guide will show you how to optimize your site for speed, search engines, mobile experience, and security so that you have a clearer path to growing your business.


Introduction

Crazy as it sounds, your website’s performance could be costing you lost sales. Your visitors are more impatient and cautious than ever.
Some Facts Before We Go Any Ahead:
  • 40% of people will leave your page if it takes longer than three seconds to load.
  • 85% of people won’t browse your site if it’s not secure.
  • 50% of global internet activity is done on mobile
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.

This guide will show you how to optimize your site for speed, search engines, mobile experience, and security so that you have a clearer path to growing your business. You’ll learn why the website issues matter for improving traffic and how to fix them. 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
  • How to allow Google to index your pages and plugins
  • How to design your content correctly for mobile
  • How to use HTTPS for improved website security
  • Bonus: How to use data to create personalized experiences on your website.

Improving Your Website’s Performance

Chapter:1

Free Guide To Website Optimization
Ultimate Guide To Website Optimization




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 your web page, and how to reduce the workload of your server to build a website that performs at its best.
[next]

The Importance of Website Performance

People love fast things. 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 displayed in a user’s web browser. 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

Website performance impacts rankings in organic search.

There are many factors that search engines use to rank organic results on search engine results pages, also known as “SERPs”. Factors include the URL, title and header tags, inbound links, site architecture, and, you guessed it, website speed. And if you think about it, that makes a lot of sense.

Performance is important to search engines.

Search engines like Google want to offer the best experience to its users. If a website takes too long to load it will probably see a higher bounce rate. And this is even more true on mobile. If Google can surface comparable webpages that have a faster load time, they will – because they’re solving for their users and helping them find answers to their questions or solve their problems faster.

Related:

Website performance impacts visibility on Facebook.

Facebook has always taken the load speed of the content that appears in the Facebook News Feed into consideration. For example, if you’re on a slow connection, you’ll see more text and image content than videos. Facebook also considers your website’s performance in its algorithm, particularly for mobile app users.


If your post links to a slow website, it may not be displayed to people using the Facebook app. This means that you’re missing out on views, interactions, and traffic from Facebook. Optimizing your website’s performance could result in an increase in referral traffic from Facebook.

Website performance impacts the user experience.

And a poor user experience affects the website metrics that you care about, like bounce rate and conversion rate.

How Quickly Should a Page Load?

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

Will people come back to a slow site?

The short answer—no! 79% of shoppers who are dissatisfied with site performance say they’re less likely to purchase from the same site again.
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 the creative process but not for the end-user.

Website performance isn’t just a technical concern.

Website Performance Affects:
  1. The accessibility of your site
  2. The usability of your site
  3. Your web design

What is accessibility?

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.

What is usability?

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

What is website design?

Website Design is the process of planning, ideating, and organizing content for the internet. How does website design impact performance? Website design isn’t just how a website looks – it’s how it works, too.
A poorly designed website can lead to performance issues later down the road. For example, the overall layout of your website pages impacts a site’s hierarchy. And the fonts that you use impacts how your website performs.
Your page may look pretty, but if it doesn’t perform well it is not a good design. Think about the website performance metrics that matter to you. Performance impacts metrics marketers care about, like traffic, conversion rates, and revenue. Let’s take a look at the impact of website performance for Carousell.com. Carousell.com is a marketplace for buying and selling new and secondhand goods.


What did improving website performance help Carousell.com achieve?

Carousell.com reduced their load time by 65% and saw a 63% increase in traffic. That’s a drastic increase in traffic that’s happened because they took the time to improve their website’s performance.

Website performance isn’t just a technical concern.

The first criteria to look at when optimizing your website is the overall page load speed. Load speed is the time it takes to fully display the content on a specific page.

How fast should a page load?

  • Best-in-class webpages should load within 3 seconds. That’s how long people are willing to wait before they start clicking the back button and finding a different site that loads faster. Does your website take longer to load? If you’re not sure, head on over to Website Grader to find out.
When diagnosing your website load speed, there are a few other metrics to look at, including “first contentful paint” and “time to interactive”. First Contentful Paint (FCP) is the time it takes in seconds for text or images to be shown to users. Time to Interactive (TTI) is when the page responds to user interactions, such as clicking, within 50ms.
FCP and TTI metrics are growing in popularity. Being able to see content on a website and interact with it is closer to how users feel about site speed than the actual page load speed of a website. But improving load speed can help you improve FCP and TTI metrics as well.

There are many ways to improve your page load speed, including minification and compression.

To understand minification and compression, we’re going to talk about HTML, CSS, and JavaScript. This will not only help you understand how to reduce your page load speed and improve user experience on your website, but it’ll also help you sound knowledgeable in front of your web development team.

What is minification?

A natural place to start when looking to increase your webpage’s load speed is to reduce the size of what’s being loaded. This is where minification comes in. Minification is the process of reducing resource size by removing unnecessary comments and spacing in the source code.
These characters include whitespaces, line breaks, and comments which are useful for us humans but unnecessary for machines. Don’t worry, minification is not a permanent change to the code. In general, minification creates a new minified version of your source code.
This means you can always continue editing your source code. You can always un-minify to work on it and re-minify your code to make it smaller again. We minify the files of a website containing HTML, CSS, and JavaScript code to reduce the file size so your web browser can read them faster.

What are HTML, CSS, and JavaScript?

To understand minification, you first need to know a handful of things about HTML, CSS, and JavaScript. They are components of every website that define the structure, style, and behavior of a webpage.
Each of these components works together to create a webpage.

The Components of a Website:

  • HTML provides the basic structure of sites, which is enhanced and modified by CSS and JavaScript.
  • CSS is used to edit the presentation, formatting, and layout of a page.
  • JavaScript is used to control the behavior of different elements.
HTML, CSS, and JavaScript can all be minified. Don’t worry, unless you are a technical marketer and have built your website yourself, minification is usually a job for your web developer
Check out this resource that could help you have a conversation with your developer.

How minification works:

This might lead you to question what exactly is happening when you minify files. To start, developers create these files with convenience in mind. They make the code easier for people to read by including whitespace, comments, and long variable names. But this also creates larger files to transfer across the internet and more for the web browser to read.
That’s where minification comes in. It essentially removes these extra elements, making it harder for humans to read, but easier (and faster) for web browsers to read.
Here’s what’s happening when you minify HTML, CSS, and JavaScript.
  • HTML minification removes all unnecessary characters from the HTML.
  • CSS minification removes all the unnecessary characters and comments from your stylesheet, the file that contains font and layout rules.
  • JavaScript minification removes all unnecessary characters and comments from the JavaScript.

Wondering what tools you can use for minification?

Tools for Minification:



The second key way to improve page load speed is compression.

Have you ever tried to send a file over email that was too big and you had to compress it into a ZIP file to make it small enough to send? Well, that’s compression at work. When a user arrives on your website, a request is made to your server, which is the computer program that stores, processes, and delivers web pages.
This happens for every single file. The larger these files are, the longer it takes to load.

What is compression?

Compression replaces repetitive pieces of code with markers directing to the first instance of that code. Compression’s purpose is to reduce the file size during the 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.

Compression vs. Minification

Minification:

  • Removes whitespace, comments, and non-required semicolons.

Compression:

  • Removes all strings that are repeated.

How do you get started with compression?

There are a couple of solutions out there for compression: Gzip and Brotli. Gzip and Brotli are both open source and free to use. Enabling compression can get pretty technical and it will depend on the server that you’re using. Many other CMSs on the marketplace will also compress your files.

How can you enable compression?

Compression is enabled by adding code to a file called .htaccess on the webserver. .htaccess files can be used to alter the configuration of your server to enable or disable additional functionality and features, including compression. To learn what code needs to be added to your .htaccess file, check out the guide. This walks you through what code needs to be added for a variety of servers.

Minification and compression are two solutions to reduce your page size.

They perform their best when they work together. By removing extraneous code and marking duplicate strings, your web page will have smaller file sizes which means a faster load speed.

Optimizing Your Web Page Elements

What about page size?
Let’s dive into the specific elements on a webpage that impact page size. What is page size? Page Size (Page Weight) is the overall size of the block of stored memory that makes up a page.
Reduce the overall size of the page to increase the load speed. Minification and compression reduce the overall size of your HTML, CSS, and JavaScript files. But what about the elements that these files include?
Here are a few best practices for optimizing the elements on your web page to reduce the page size.
  • Optimizing Web Page Elements
  • Use Google Fonts instead of custom fonts.
  • Use existing video hosting solutions.
  • Compress your images.
  • Make your images responsive.

Use Google Fonts instead of custom fonts.

Fonts add weight to your webpage, and custom fonts add even more. If your website uses custom fonts and the person who is visiting your website doesn’t have that font installed on their operating system, then they’ll need to download the web font files along with the rest of the website.
Use Google Fonts to decrease the page size. Google Fonts is a collection of fonts that are hosted by Google and accessible to all web browsers. Google has optimized these fonts to be delivered to web browsers in the most optimal way.
So if someone is using the latest version of a web browser, they receive the latest version of that font that is optimized for their browser. This makes downloading Google Fonts fast. Plus, they’re free to use and people might already have these fonts cached in their browser, meaning that it’s ready to use — no download required.

Are you self-hosting videos on your website?

If you are, you might be adding unnecessary weight to your website. Self-hosting a video essentially means that the video is stored on your 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 page.
Instead of storing your video content on your server, you use their servers instead. To display the video on your webpage, you can embed the video using the code provided by each platform. Plus, video hosting solutions do a lot of work on their end to ensure smooth user experience and optimal viewing quality.

The problem with unoptimized images

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

How can you compress images?

A great tool to compress your images is TinyPNG. 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.

Why does the size of an image matter?

These file types contain an infinite amount of code behind them, which means that they can be sized to fit any screen automatically. For any image, not just SVGs, the size of your images matter because they determine how much space on the screen the image will take up. So we know that for illustrations saved as an SVG, they can be resized automatically. But what about the rest of your images?

Reducing HTTP Requests and Maximizing Page Caching

Every element that appears on a webpage needs to come from somewhere. HTTP Request is an ask for information from the browser, like Chrome or Firefox, to the server, the remote computer that fulfills that request. The server then delivers everything that needs to be displayed.
This includes text, images, styles, scripts, and everything else that makes a web page a web page. Whereas reducing the file sizes of your HTML, CSS, and JavaScript impacts your web page’s overall download size, reducing the number of HTTP requests reduces the frequency at which these downloads need to happen. Less frequent downloads mean your website can be displayed faster.


If you want to create a high-performing page, aim to have 30 requests max.

We’ll cover four strategies you can use to reduce the number of HTTP requests.

How to Reduce the Number of HTTP Requests

  • Combine text resources
  • Combine image resources
  • Move render-blocking JavaScript
  • Reduce redirects

Combine text resources.

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

So how do you combine multiple text files, like JavaScript, on a page?

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

You can also combine image resources.

The same logic applies to your image resources. Think of all the places across your website that share the same images. One thing that comes to mind is icons. You might have specific social share icons that match your brand’s style.
You could include each image as its file. But that increases the number of HTTP requests. This is where image sprites come into play. Image Sprites is a group of small images that are included in one physical image instead of multiple.
With the help of CSS background positioning, your web developer can reposition this single image in a variety of different ways to show only the icon you need. This can significantly decrease the number of image files that are limiting your load speed. Plus, it enhances consistency and ensures that all of your icons match across your entire website.

So how do you fix render-blocking JavaScript?

It’s common practice to put JavaScript blocks in your page header. JavaScript enables your website to behave differently based on the criteria that you identify. But the behavior of your website cannot change if it doesn’t render in the first place. This means that the JavaScript in the header is essentially blocking the rest of the page from loading as quickly as it could otherwise.
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 page experience. To ensure that this JavaScript renders when the page first loads, you can call out the JavaScript function specifically where it is needed. Here’s how this would look.

Example JavaScript functions

Put the critical JavaScript functions directly where they are needed on the page. This means that the JavaScript function “insert text” will load immediately.


Other nonessential functions of your JavaScript file will load after the web page renders.

Redirects also require additional HTTP requests.




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

Some Redirects Are Okay:

  • 303: Moved Permanently
  • 302: Moved Temporarily
In these situations, you’re probably not too worried about maximizing the load speed. These pages are already under maintenance. But what about the pages you do want to optimize?
For example, let’s say you want people searching your website on mobile to see a version of your website that’s optimized for their phone.


Solution #1
Use A Redirect—This increases the number of HTTP requests on your webpage.
Solution #2
Use a Mobile Responsive Design—This optimizes your site for all devices without any redirects.
Avoid using redirects to solve problems on your website that can be solved through design.

What is caching?

Optimizing your web page for the first render is one thing, but how can you avoid time-consuming queries in the first place? Well, that’s where caching comes into play. Caching is the process of saving resources to be reused. For website optimization, there are two types of caching: server-side caching and client-side caching:

Server-Side Caching

The server saves the result of a single render and serves that same result when it is requested again.

Client-Side Caching

The server tells a web browser to keep the files it downloads so that it doesn’t have to download them again in the future.
Caching benefits both content consumers and content providers.

The Benefits of Caching:

  • Decrease network costs by reducing requests to your server.
  • Improve responsiveness by making your website faster for browsers to retrieve.
  • Content will be continuously available even if you experience server outages.
Most elements of a website can be cached: Including logos and images, CSS stylesheets, JavaScript files, media files, and so on. Setting up caching for your website depends on the CMS that you’re using.
If you’re using the WordPress CMS, you can use a plugin called WP Super Cache to cache your pages for you. WP Super Cache is a plugin that generates static HTML files of your web pages which will be served to the majority of your users. This is a great solution for marketers without coding skills.
If you’re using WordPress, consider adding HubSpot’s free CRM to grow your business. Capture, organize, and engage web visitors with free forms, live 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.

The role of HTTP requests and caching pages is technical.

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

Enhancing SEO for Your Website

CHAPTER TWO:

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. 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 descriptions and link descriptions in your website content.
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 answered this question? That’s on-page SEO at work.


What is on-page SEO?

On-Page SEO is the process of optimizing various front-end and back-end components of your website so that it ranks in search engines and brings in new traffic. Merely creating and publishing your website isn’t enough. You must optimize it for Google and other search engines to rank and attract new traffic.
It’s called “on-page” SEO because the tweaks and changes you make to optimize your website can be seen by visitors on your page, whereas off-page and technical SEO elements aren’t always visible. Every part of on-page SEO is completely up to you; that’s why you must do it correctly.

On-page SEO is important for both search engines and people.

Let’s start with search engines. On-page SEO is important 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 of a webpage so that that information can be retrieved when it’s needed.
Search engines are putting a greater focus on intent and relevance with ongoing algorithm updates.

Search Engines Are Doing a Better Job of:

  • Understanding what users are searching for when they type a query.
  • Delivering search results that meet user intent, like searching for information or making a purchase.
    Great, so on-page SEO is a clear must-have for visibility in search engines.
But how does this help people? Well, Google is constantly innovating how they display information to people searching on their site. There are a ton of ways that Google uses your on-page SEO to determine how your website appears in the results pages. Traditional organic search results are the most common result type.
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.

What about image packs?

Image packs show an array of images related to the query. Clicking on these images takes you to the Google Images results. This ultimately leads back to the webpage source of the image.
Featured snippets typically appear for very specific questions. Featured snippets pull information from webpages to answer a question and display it in the SERP.
When a search query contains a brand name, for example, site link results show more than just a link to the company’s homepage. Sitelink results may appear for queries with high brand intent.
Google will also display links to other areas of the site. This includes their menu or reviews which are the second 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.

Allowing Search Engines to Index Your Pages

The most important part of on-page SEO allows search 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.
  3. Rank: Provide the pieces of content that best match a person’s search query.

How Google finds your content

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 are 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 pages such as title tags, meta descriptions, alt tags, and more. Think of this process as a library. Google Is a Massive Library. Books need to be identified, categorized, and placed in the right order on shelves.
Crawlers are performing similar tasks as a librarian. They are organizing all of the contents on the internet into ways that make them easily accessible

Can your pages already be found by 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 can crawl your page and store its contents. The best way to do this is by using an advanced search operator.

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 they might be in that website’s domain. For this reason, an XML sitemap is a crucial component of a blog, where article pages are constantly bumped further back into the website’s archive as new content is published.
Here’s an example of what an XML sitemap file might look like An XML Sitemap Includes 4 Key Elements, within the <URL> tags.






What does each element of an XML sitemap do?

  • • The URL location is the full URL to the webpage.
  • The last modified date is when the page was last updated.
  • Change frequency can be set to: Never, Yearly, Monthly, Weekly, Daily, Hourly, or Always.
  • And page priority is a number 0.0 through to 1.0 to indicate the relative priority of pages within your website.
To create a sitemap, you’ll want to ensure that various teams in your organization give input. Depending on the size of your organization, there may be many people involved in creating a sitemap. 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 Organized, You’ll:
  • Create the XML sitemap
  • Put it on your web server
  • Submit it to each search engine

Why submit your sitemap

When you first publish your website, and each time you go through a significant site redesign, someone on your team will have to submit the sitemap to each search engine so that they can tell your homepage from your “About Us” page or your team management page.
Unless you’re using a platform that automatically updates your sitemap, you’ll need to update the sitemap yourself and resubmit any time you make significant changes to your website. Otherwise, you’ll have to wait for search engines to identify, crawl, and index your new pages itself.
That means if you’ve made a significant change to your site’s structure, you might want to manually submit it. Luckily, most content management systems and web hosting providers provide you an XML site map. Once you build your site architecture and publish your pages, the XML sitemap file autogenerates and you can submit that file to Google.

Screaming Frog is a web crawler that allows you to assess your website’s on-page SEO.

The company offers a tool to develop your XML sitemap and strengthen your website’s on-page SEO in the process. To use Screaming Frog’s sitemap generator, you’ll first download the company’s SEO web crawler, which is free for crawling your first 500 URLs.
Once your website is crawled, you can create an XML sitemap from it including every webpage that scores a “200” in the initial crawl. This ensures only your strongest pages are included in your new XML sitemap.

The tool XML-Sitemaps.com requires no registration or initial download to create a sitemap for your website.

This tool is free to websites that carry up to 500 URLs. Once your sitemap has been created, you can either download it as an XML file or receive it via email if you need to transport it to a new computer or coworker.
The 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.

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.
For help on each step, check out this resource by Yoast SEO

But Google might not crawl and index your new page as quickly as you’d 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 discover-able in search engines.
Your sitemap will help search engines understand your content and get it served to the people you are trying to reach.

Including Meta Descriptions

When you 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? The meta description is an HTML attribute that provides a summary of a web page. This brief snippet of text that appears below the blue link in a search engine result.
This description summarizes the content of the web page linked above it, and although it is not an official ranking factor in Google search results, it can be edited to help people understand what the web page is about and encourage them to click through.

3 Reasons Why You Need a Meta Description

  1. A meta description increases click-through 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.
A meta description increases click-through rates and visits from organic search. There might be 10 blue links per search engine results page, but they don’t all get clicked by an equal number of people. People are more likely to click results that are higher up on the page.
The #1 organic result is 10x more likely to receive a click compared to a page in #10 spot. To get your result to rank well, however, you need people to start clicking on it. Meta descriptions entice people to click on your link instead of someone else’s. Great meta descriptions can be powerful enough to get people to click on your link even if you are below them in search results. A meta description gives the right people the right information at the right time.

A meta description increases visits from social

Google isn’t the only website that displays your meta description when you publish a piece of content. Social networks like Facebook use what’s called an “open graph” to present the most important data on your webpage when you share it with your followers.
The open graph includes a meta description. People on social media can see your meta description.
Now that you know why you should write a meta description, here’s how to write an effective one.

Best Practices for Writing a Meta Description

  • Write compelling content.
  • Include one or two keywords.
  • Aim for 155–160 characters.
  • Avoid non-alphanumeric characters.
First, write compelling content. Write a short sentence previewing the content or telling the searcher why they should read your post. Give them a clear benefit of clicking through and reading your post, if necessary. When writing your meta description, be informative, and add value. The meta description is your chance to convey the value of your page to the viewers.
Use one or two keywords in your meta description. You might already include keywords in a webpage’s body copy and title. But the meta description should also include keywords that help describe the content of the webpage.
Keywords in your meta description optimize your content to match with related search queries. Focus on one or two unique keywords in the meta description of each page. Don’t stuff keywords anywhere you can. Make sure they fit naturally and help explain what people can expect to see if they click on your link.
Aim for 155–160 characters in your meta description. The number of characters that make up your meta description is important.
But when displaying this metadata, Google doesn’t measure by characters — it measures by pixels. Your meta description will be cut off if it becomes too long. Aim for 155–160 characters in your meta description as a benchmark.
Avoid non-alphanumeric characters. Special characters might appear just fine on your computer screen, but search engines can’t read these symbols as easily. These are known as “non-alphanumeric” characters. Avoid using special characters like plus signs (+) and em-dashes (—) in your meta descriptions. Special characters often don’t appear in the search results as you intended. And they may be removed all together.
Want to test out how your meta descriptions will look before setting them live? Check out the SEOmofo snippet optimizer tool.

How to edit your meta description in a CMS

Depending on the CMS that you’re using, there will be different methods for editing your CMS. If you’re using WordPress, the Yoast SEO is the go-to SEO solution. All you’ll have to do is log into your WordPress dashboard, click on your posts, and edit your description.
In your CMS, look for a page or post setting that allows you to edit the meta description. And for the technical marketers out there, your meta description can also be edited within the HTML of your page by editing the “meta name=description” field. Regardless of the solution that works for you, having a well-written meta description will help improve your rankings in search engines and drive traffic to your website.

Writing Descriptive Link Text

On a webpage, descriptive link text is important for your SEO performance. The link description is the clickable word(s) in a hyperlink. Link descriptions help users and search engines better understand your content.
Search engines will be better able to understand the purpose of your links and the hierarchy of the post. And people will be more inclined to click a link that directly explains what the destination is.
What does a bad link look like? Generic words like “click here” or “learn more” is not an effective link description. Google suggests these link description best practices
  • Stay on topic. Don’t use text that has no relation to the page’s content.
  • 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
[next]

Optimize Your Website for Mobile

CHAPTER THREE

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, and understand the best practices for using fonts and interactive elements on your site.

The Importance of Mobile Optimization

Across the world, over 50% of total internet activity is done on mobile.
Desktop follows behind with a little over 45% of the total internet activity and tablet makes up the rest. With so many people surfing the web from their phones, it is essential to offer a great mobile website experience today.
Without it, you are not catering to the majority and are likely missing out on traffic and leads for your business as a result.

So how do you create an effective mobile experience?

Follow mobile optimization best practices for viewport, fonts, and buttons. That’s where responsive design comes in. Responsive design is the method of designing webpages that appear in their optimized form on all devices.
In other words, a responsive design will automatically reformat your website for all screen sizes. This allows your website visitors to easily interact with your site no matter what device they’re using.

How does responsive design work?

A website targets the size of the browser to match how much space is available to display the website appropriately. Setting up viewport as well as using legible fonts and correctly-sized target tags all fold into an effective responsive design.
And, breakpoints are set up to target ranges that define specific displays. For example, you generally see breakpoints for phones, tablets, and desktops.

What about just creating a separate website version for mobile?

Marketers — Don’t create a separate mobile version of your website. It will require a lot of resources to maintain in the long run. That’s where having a responsive design adds a ton of value — it is easier to manage one site that works for all devices.

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.

Why is responsive web design better?

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 design templates that are mobile responsive out of the box.
For those of you working with your designer and developer, responsive design is typically best practice these days, but be sure to clarify that you want a responsive website.

So why switch to responsive design?

As the number of people surfing the web from their 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 in the long run, deliver great user experience, and perform better across all devices

Sizing Your Content Correctly for View-port

Just because a website is available on mobile doesn’t mean that the webpage is sized correctly. That’s why it is important to set up a viewport for your site. Think about the screen size of a typical phone. The viewport is the size of a window or visible area of a screen on mobile and tablet devices
Simply setting up viewport won’t make your website look its best on all devices. That’s the role of mobile responsive design.
But setting up viewport will make it so mobile users don’t have to zoom in and out and scroll back and forth to read and interact with the content on your website.

Why doesn’t a web page fit in view-port?

When you don’t set a viewport for mobile devices, those devices will render a webpage at the width of a typical desktop screen and then scale to fit the screen so that the text and graphics are super small.
This is called the “fallback width.” The fallback width ranges from 800–1024 pixels. These dimensions automatically update when you do set a viewport for mobile devices. The web page's width will scale automatically to a user’s mobile device, giving them a much better experience.

Check if you have viewport configured already

To check, head on over to the Website Grader included in the resources. If your viewport is not configured, the tool will tell you.

Add a meta viewport tag to any webpages you would like to be mobile-friendly.

Add This HTML Snippet to the Header of Your Site
<meta name="viewreport content"=width="device-width, initial-scale=1">
You can copy and paste this HTML. Check out the blog post about how to set up a mobile viewport in the resources. Usually, placing the viewport tag in the header file will have the viewport carry across the whole site.
This makes your entire website more mobile-friendly. But be aware you may have to add the viewport tag to every webpage individually, especially if you use different software for your website versus your landing pages.
If you’re not using an integrated solution like HubSpot’s CMS Hub, you’ll have to manually check to make sure your landing pages, site pages, and blog have this viewport tag so they’re mobile friendly. By setting up viewport, you’ll guarantee that your content is being shown to fit the size of whichever screen size someone is using.

Using Legible Font and Correctly-Sized Target Tags

You want your website to be readable and usable on every device. This means that, for your website to be optimized for mobile, you’re going to want your fonts and interactive elements, like CTAs, to make sense on a mobile device. There are a ton of different screen sizes out there.
And 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 webpage’s CSS file, which defines the style of your page.
Go to your website, right-click, and select “inspect” to open your developer tools.
Click the “pointer” icon in the top left of the toolbar, and then you can inspect the elements of your page, including your fonts. Clicking on them will show you exactly where this font size is denoted in your CSS file.
You can then bring this to your developer to optimize the size of your fonts across your website. If no font-size is declared, the browser will use a default font size, which is usually 16px.

Font size in the CSS

In your CSS, font size will look something like this: p {font-size:120%;}.
You can use different units of measurement within the CSS files to change the font size.
In Your CSS, You Can Use Multiple Units of Measurement, Including
  • • Pixels (px)
  • Points (pt)
  • EMs (em)
  • Percent (%)

Here’s how you should think about fonts for your site.

According to Google, it is best practice to use a base font size of 16 CSS pixels. At a minimum, aim to have a font size of at least 12px or larger on the majority of your page.
Let’s say you want your paragraph text to be a little larger than the body text, and that you want your header text to be even bigger than that.

Scale Your Fonts From Your Base Text Size

  • The paragraph text is 120% of your base font.
  • Header text is 250% of your base font.
This means that the font sizes that you describe in the CSS are all based on the size of your body font. By structuring your fonts this way, you’ll know that no matter what device your website is being viewed on, your fonts will share the same size relationship.
Font Sizes in Your CSS Will Look Like This: body {font-size:16px} p {font-size:120%} h1 {font-size:250%} Now that you understand how font size works within the CSS of your site, there are a few solutions to choose from.
If you are a technical marketer or if you have a developer on hand, these font best practices can be implemented manually across your site’s CSS.
If you’re at an earlier stage and have some flexibility with your website’s design, starting with a responsive template will solve text readability issues before they happen. These best practices will already be baked into a responsive template.

What about other interactive web elements?

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. Think of things like buttons or links that a person would tap on their phone.
Tap Targets are areas on a webpage that a user interacts with to carry out commands. Appropriately-sized tap targets make pages more mobile-friendly and accessible, like in this example from Youredi, a platform for building data integration solutions. The call-to-action buttons are easy to click on a mobile device.

Fixing tap target size issues

Google recommends tap targets that should be 48 pixels wide and 48 pixels tall. This gives your CTAs enough real estate on a mobile device for someone to click it with their finger. These sizes are denoted in your CSS. You can find this by using your developer tools, too, just like with the font size.
Another common problem with tap targets is the spacing between them. Think about how you use your phone. Your thumb is much larger than the mouse on a desktop, so you need more space to be able to click the right element on a phone.
Google recommends that there should be at least 8 pixels of space between tap targets. 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.
[next]

Implementing Website Security Best Practices

CHAPTER FOUR

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.

The Importance of 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.
Source: HubSpot Research.

Is There a Security Risk?

56% of all internet traffic is from an automated source such as hacking tools, scrapers and spammers, impersonators, and bots (Source: WebARX). Having a secure website has never been more important for protecting your data.
Think about some major global businesses who have seen data breaches in the past few years. Equifax, Target, and Sony come to mind. These cases resulted in the exposure of hundreds of millions of online user information. Not to mention the fact that it cost the businesses millions of dollars to resolve in a court settlement.
But big businesses are not the only ones who are 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 SMBs that hackers prefer to target. SMBs have more digital assets that are more valuable than an individual online, but less security than a larger enterprise-level company.

Security breaches are frustrating and frightening for both businesses and consumers.

Studies show that, after a company data breach, many people take a break from shopping at that business — and some people quit shopping there altogether. But cybersecurity is about more than just avoiding a PR nightmare.
Investing in cybersecurity builds trust with your customers. It encourages transparency and reduces friction as customers become advocates for your brand.

Using HTTPS and Removing Security Vulnerabilities

Have you ever noticed that some URLs start with “Http://” and others with “https://”? What is the extra “s” for in https://? Perhaps you noticed that extra “s” when you were browsing websites that require giving over sensitive information, like when you were paying bills online.
To put it simply, the extra “s” stands for secure. This means that 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 one of two technologies: SSL or TLS.
SSL (Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. TLS is a newer technology that also authenticates websites. It’s a protocol that provides authentication, privacy, and data integrity between computer applications. I won’t go into detail about the technical differences between SSL and TLS But just know that in many ways, TLS has superseded SSL.
TLS is newer and arguably more secure. But don’t worry, the certificates you used to implement the TLS and SSL protocols are often interchangeable. So from here on out, we’ll look at solutions for SSL and TLS together since they’re often one-in-the-same. Both of these technologies make sure that all data passed between the web server and browser are private.
When you fill out a form on an unsecured website and hit “submit,” the information you just entered can be intercepted by a hacker. This information could be anything from details on a bank transaction to high-level information you enter to register for an offer. In hacker language, this “interception” is often referred to as a “man-in-the-middle attack.”
The actual attack can happen in several ways, but one of the most common is that 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. It will activate to start capturing the user’s information, like account login and password, and then send it back to the hacker.

How is a secure website different?

When You Visit a Website That’s Encrypted: Your browser will form a connection with the webserver, 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 you’re submitting the information to can see or access what you type into your browser. This connection happens instantly, and in fact, many suggest it is now faster than connecting to an unsecured website. You simply have to visit a website with SSL or TLS, and voila: your connection will automatically be secured.
How to Know If Your Website Has a Certificate:
  • Use HubSpot’s Website Grader
  • The URL says “https://” and not “Http://
  • You see a little padlock icon in the URL bar.
  • The certificate is valid. 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 padlock icon in the URL bar.
It’ll show up either on the left- or right-hand side of the URL bar, depending on your browser. You can click on 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
https://www.google.comOptimize Your Website Performance 50 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.

To find out whether your certificate is still valid in Chrome, go to View > Developer Tools.

From there, you will need to navigate to the Security tab and you can 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.

How can you get a certificate on your website?

For most, a standard certificate will cover your content, but for companies in a regulated industry — such as finance and insurance — it may be worth talking with your IT team because there are specific requirements within your industry that specify the type of SSL certificate you need. The cost of certificates varies.
You can get a free certificate or pay a few hundred dollars per month to obtain a custom certificate.
First, check with your web hosting provider to see if they offer a free SSL certificate. Chances are they might offer you one for free. But if not, we encourage you to purchase an SSL through your hosting provider because they usually have the easiest solution unique to your needs.

Free Certificate Solution

Let’s Encrypt offers certificates at no cost, but the setup is technical; that’s why we suggest starting with your hosting provider first. You’ll probably need to work with a web expert to get an SSL set up with Let’s Encrypt. These certificates expire regularly, so you’ll need to 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, then look into more advanced certificates that offer longer periods
If you’re using WordPress, many plugins can help you install your certificate.

WordPress Plugins

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.
Follow this guide that walks you through the process of WordPress.

Once you have your certificate, you’ll need to migrate your site.

Websites currently not on https will need to migrate their website from Http to https. Depending on the CMS that you’re using, this may be as easy as clicking a button to download a certificate and redirect your pages.
For others, you might have to manually set up redirects to your new https URLs. The solution is dependent on your hosting server. So, find the best solution for your website by searching “[your hosting provider name] redirect to https”.

Removing security vulnerabilities From Your Website

Beyond SSL, there are other ways you can keep your visitors safe online. There are front-end JavaScript libraries with known security vulnerabilities that you should avoid at all costs.
Front-End JavaScript Library is a library of prewritten JavaScript which allows for easier development of JavaScript-based applications. But not all libraries are created equally, and intruders know this. Intruders have crawlers that scan your site for known security vulnerabilities.
When the web crawler detects a vulnerability, it alerts the intruder. From there, the intruder just needs to figure out how to exploit the 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.

To Fix JavaScript Library Vulnerabilities:

  • Stop using vulnerable JavaScript libraries immediately
  • Upgrade your libraries to their newest version and continue using if it fixes the vulnerability
  • Use a different library without known vulnerabilities
    To find which JavaScript libraries are causing you trouble, we recommend following Google’s resource. Security is practically a requirement today online. Today, search engines will call your webpage out for not having an SSL certificate.
    Search engines are taking their user’s cybersecurity into top consideration. With an SSL certificate and by removing vulnerabilities in your JavaScript, you will keep your visitors’ best interest at the forefront of your website.

Conclusion

Thanks for reading! Made by your friends at Fadewblogs. Take free lessons and get certified today.
Optimizing your website’s performance is a concentrated effort that is well worth the time and energy. Taking the essential steps to prioritize website-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.