Website Optimization How to Increase Page Performance and More

Website Optimization: How to
Increase Page Performance
and More
Greenville
HUG

Let's Connect
linkedin.com/in/egarciavaz
boundify.io/demand-gen-studio
EMILIO GARCIA
Managing Partner,
Boundify
Greenville
HUG

Let's Connect
linkedin.com/in/gabriela-garcia-
137b77246/
GABRIELA GARCIA
Demand Generation
Specialist, Boundify
Greenville
HUG

Table of Contents
● Introduction
● Improving Website Performance
● Enhancing SEO for a Website
● Optimizing a Website for Mobile
● Implementing Website Security Best Practices

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

Best-in-class webpages
should
become interactive within 5.3
seconds. Any slower and
visitors will
abandon your site, reducing
conversions and sales.
5.3
seconds
How Quickly Should a
Page Load?
The Importance
of Website
Performance

Will people come back
to a slow site?
The Importance
of Website
Performance
79% of shoppers who are
dissatisfied with site
performance
say they’re less likely to
purchase from the same
site again.
79%

The accessibility
of your site
● The availability of a
website and its contents
to all people.
The usability of
your site
● How efficiently and
easily visitors can see or
examine your website.
Your web design
● The process of planning,
ideating, and organizing
content
for the internet.
Website Performance Affects:
● Performance impacts metrics marketers care about, like
traffic, conversion rates, and revenue.

Increasing Load Speed and Reducing
Page Size
Load Speed
The time it takes to fully display the content on a
specific page.
● Best-in-class web pages should become interactive within
5.3 seconds.

Website Optimization How to Increase Page Performance and More

First Contentful
Paint (FCP)
● The time it takes in
seconds for text or
images to be shown to
users.
Time to
Interactive (TTI)
● When the page
responds to user
interactions (such as
clicking) within 50ms.
Minification
The process of reducing
resources size by removing
unnecessary comments and
spacing in the source code.
Increasing Load Speed and Reducing
Page Size

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.

What Does Minification Do?
● HTML minification removes all unnecessary
characters from
the HTML.
● CSS minification removes all the unnecessary
characters and comments from your stylesheet
file that contains font and layout rules.
● JavaScript minification removes all
unnecessary characters and comments from
the JavaScript.
To minify HTML, try out the
PageSpeed Insights
Chrome extension.
• For CSS, try CSS
Compressor.
• For JavaScript, you could
use JS Compress.

Original CSS File
Increasing Load Speed and
Reducing Page Size
The strings are easy to read.
A developer did this on
purpose.

Minified CSS File
Reducing Page Size
Once this file is minified, the
file size shrinks, but it is also a
whole lot harder to read.

Compressed CSS File
Reducing Page Size
These characters are
placemarks for where the
duplicate code used to be.

Minified and Compressed
CSS File
Reducing Page Size
This generates the smallest
file size of the bunch.

Compression is enabled by
adding code to a file called
.htaccess on the web server.

Optimizing Your Web Page Elements
● Use Google Fonts instead of custom fonts.
● Use existing video hosting solutions.
● Compress your images.
● Make your images responsive.

How to Make Images Responsive
Add a CSS rule that sets all
images to fill the width of the
container the image is in.

On-Page SEO
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.
Web Crawler (Spider or Bot)
Downloads and indexes content
from all over the internet
to learn and understand the
contents of a web page so
that that information can be
retrieved when it’s needed.
The Importance of
On-Page SEO

1. Crawl: Search web
pages 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.
CRAWL INDEX RANK
Search Engines Have 3 Primary
Functions

Sitemap
A file of code that lives
on your web server and
lists all of the relevant
URLs your website is
carrying.

Marketing
● Marketing is usually
responsible for
defining the
structure of the site.
Development
● A developer will then
build an XML sitemap
file based on the
website’s structure.
IT
The Roles Involved in Structuring a
Website’s Sitemap
● The sitemap lives on a
server. An IT expert will
be able to get it there.
Legal
● Legal will make sure the
site doesn’t have
outstanding copyright
restrictions.

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 individual search engine

The Importance of
Mobile Optimization

50%
Internet Market Share
of Mobile
The Importance of
Mobile
Optimization
Follow mobile optimization
best practices for viewport,
fonts, and buttons.
Across the world, over 50%
of total internet activity is
done on mobile.

Responsive Design
The method of designing web pages that appear
in their optimized form on all devices.

The Importance of
Website Security

How to Get a Certificate on
Your Website:
● 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

With the HubSpot CMS Hub:
You can direct all visitors to the secure
version of your site, no plugins required.
WordPress Plugins
Really Simple SSL, Insecure Content
Finder, and WP Force SSL can be used to
install your certificate, encrypt files, and
direct traffic to the secure version of
your site
The Importance of
Website Security

Whether it’s your first time using this product, or you’re looking to build up
your skills around it, we’ve got the best resources for you to get started.
Getting Started
Education: Help Articles:
● Product page: Website Grader
● Themes: Google SERP Snippet
Optimization Tool
● Knowledge Article: Is Your Website's Viewport
Configured for Mobile Users? Here's How to Do It
● Academy: The Website Migration Guide: SEO Strategy,
Process, & Checklist
● Academy: How to Optimize Your Website Performance
to Grow Traffic and Leads

Website Optimization How to Increase Page Performance and More

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

Similar to Website Optimization How to Increase Page Performance and More

Similar to Website Optimization How to Increase Page Performance and More (20)

More from Boundify

More from Boundify (18)

Recently uploaded

Recently uploaded (20)

Website Optimization How to Increase Page Performance and More