Posted by BritneyMuller

Page speed is an important consideration for your SEO work, but
it’s a complex subject that tends to be very technical. What are
the most crucial things to understand about your site’s page speed,
and how can you begin to improve? In this week’s edition of
Whiteboard Friday, Britney Muller goes over what you need to know
to get started.

https://fast.wistia.net/embed/iframe/8gw0zeguwt?seo=false&videoFoam=true

Click on the whiteboard image above to open a high resolution
version in a new tab!

Video Transcription

Hey, Moz fans. Welcome to another edition of Whiteboard Friday.
Today we’re going over all things page speed and really getting to
the bottom of why it’s so important for you to be thinking about
and working on as you do your work.

At the very fundamental level I’m going to briefly explain just
how a web page is loaded. That way we can sort of wrap our heads
around why all this matters.

How a webpage is loaded

A user goes to a browser, puts in your website, and there is a
DNS request. This points at your domain name provider, so maybe
GoDaddy, and this points to your server where your files are
located, and this is where it gets interesting. So the DOM starts
to load all of your HTML, your CSS, and your JavaScript. But very
rarely does this one pull all of the needed scripts or needed code
to render or load a web page.

Typically the DOM will need to request additional resources from
your server to make everything happen, and this is where things
start to really slow down your site. Having that sort of background
knowledge I hope will help in us being able to triage some of these
issues.

Issues that could be slowing down your site

What are some of the most common culprits?

  1. First and foremost is images. Large images are the biggest
    culprit of slow loading web pages.
  2. Hosting can cause issues.
  3. Plugins, apps, and widgets, basically any third-party script as
    well can slow down load time.
  4. Your theme and any large files beyond that can really slow
    things down as well.
  5. Redirects, the number of hops needed to get to a web page will
    slow things down.
  6. Then JavaScript, which we’ll get into in a second.

But all of these things can be a culprit. So we’re going to go
over some resources, some of the metrics and what they mean, and
then what are some of the ways that you can improve your page speed
today.

Page speed tools and resources

The primary resources I have listed here are Google tools and
Google suggested insights. I think what’s really interesting about
these is we get to see what their concerns are as far as page speed
goes and really start to see the shift towards the user. We should
be thinking about that anyway. But first and foremost, how is this
affecting people that come to your site, and then secondly, how can
we also get the dual benefit of Google perceiving it as higher
quality?

We know that Google suggests a website to load anywhere between
two to three seconds. The faster the better, obviously. But that’s
sort of where the range is. I also highly suggest you take a
competitive view of that. Put your competitors into some of these
tools and benchmark your speed goals against what’s competitive in
your industry. I think that’s a cool way to kind of go into
this.

Chrome User Experience Report

This is Chrome real user metrics. Unfortunately, it’s only
available for larger, popular websites, but you get some really
good data out of it. It’s housed on Big ML, so some basic SQL
knowledge is needed.

Lighthouse

Lighthouse, one of my favorites, is available right in Chrome
Dev Tools. If you are on a web page and you click Inspect Element
and you open up Chrome Dev Tools, to the far right tab where it
says Audit, you can run a Lighthouse report right in your
browser.

What I love about it is it gives you very specific examples and
fixes that you can do. A fun fact to know is it will automatically
be on the simulated fast 3G, and notice they’re focused on mobile
users on 3G. I like to switch that to applied fast 3G, because it
has Lighthouse do an actual run of that load. It takes a little bit
longer, but it seems to be a little bit more accurate. Good to
know.

Page Speed Insights

Page Speed Insights is really interesting. They’ve now
incorporated Chrome User Experience Report. But if you’re not one
of those large sites, it’s not even going to measure your actual
page speed. It’s going to look at how your site is configured and
provide feedback according to that and score it. Just something
good to be aware of. It still provides good value.

Test your mobile website speed and performance

I don’t know what the title of this is. If you do, please
comment down below. But it’s located on testmysite.thinkwithgoogle.com.
This one is really cool because it tests the mobile speed of your
site. If you scroll down, it directly ties it into ROI for your
business or your website. We see Google leveraging real-world
metrics, tying it back to what’s the percentage of people you’re
losing because your site is this slow. It’s a brilliant way to sort
of get us all on board and fighting for some of these
improvements.

Pingdom and GTmetrix are non-Google products or
non-Google tools, but super helpful as well.

Site speed metrics

So what are some of the metrics?

First paint

We’re going to go over first paint, which is basically just the
first non-blank paint on a screen. It could be just the first pixel
change. That initial change is first paint.

First contentful paint

First contentful paint is when the first content appears. This
might be part of the nav or the search bar or whatever it might be.
That’s the first contentful paint.

First meaningful paint

First meaningful paint is when primary content is visible. When
you sort of get that reaction of, “Oh, yeah, this is what I came to
this page for,” that’s first meaningful paint.

Time to interactive

Time to interactive is when it’s visually usable and
engage-able. So we’ve all gone to a web page and it looks like it’s
done, but we can’t quite use it yet. That’s where this metric comes
in. So when is it usable for the user? Again, notice how
user-centric even these metrics are. Really, really neat.

DOM content loaded

The DOM content loaded, this is when the HTML is completely
loaded and parsed. So some really good ones to keep an eye on and
just to be aware of in general.

Ways to improve your page speedHTTP/2

HTTP/2 can definitely speed things up. As to what extent, you
have to sort of research that and test.

Preconnect, prefetch, preload

Preconnect, prefetch, and preload really interesting and
important in speeding up a site. We see Google doing this on their
SERPs. If you inspect an element, you can see Google prefetching
some of the URLs so that it has it faster for you if you were to
click on some of those results. You can similarly do this on your
site. It helps to load and speed up that process.

Enable caching & use a content delivery network (CDN)

Caching is so, so important. Definitely do your research and
make sure that’s set up properly. Same with CDNs, so valuable in
speeding up a site, but you want to make sure that your CDN is set
up properly.

Compress images

The easiest and probably quickest way for you to speed up your
site today is really just to compress those images. It’s such an
easy thing to do. There are all sorts of free tools available for
you to compress them. Optimizilla is one. You can even
use free tools on your computer, Save for Web, and compress
properly.

Minify resources

You can also minify resources. So it’s really good to be aware
of what minification,
bundling, and compression do so you can have some of these more
technical conversations with developers or with anyone else working
on the site.

So this is sort of a high-level overview of page speed. There’s
a ton more to cover, but I would love to hear your input and your
questions and comments down below in the comment section.

I really appreciate you checking out this edition of Whiteboard
Friday, and I will see you all again soon. Thanks so much. See
you.

Video
transcription
by Speechpad.com

Sign up for The Moz Top
10
, a semimonthly mailer updating you on the top ten hottest
pieces of SEO news, tips, and rad links uncovered by the Moz team.
Think of it as your exclusive digest of stuff you don’t have time
to hunt down but want to read!

http://bit.ly/2UAAr9v

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s