Page speed has always been a critical part of SEO work, and as more companies switch to online operations, optimization becomes more important than ever. However, it is a complex topic that is usually very technical. What is the most important information about the page speed of your website and how can you start to improve? To help answer these questions, we share this popular episode of Whiteboard Friday (originally released in February 2019), in which Britney Muller explains everything you need to know to get started.
Hey Moz fans. Welcome to another edition of Whiteboard Friday. Today we're going through all of the page speed things and really get to the bottom of why it's so important for you to think about and work on it at work.
At the very basic level, I will briefly explain how to load a website. This way we can somehow take care of why all of this is important.
How to load a website
Typically, the DOM needs to request additional resources from your server so that everything is possible. This is where things on your site really slow down. I hope that with this background knowledge we will be able to solve some of these problems.
Problems that could slow down your website
What are some of the most common culprits?
- In the first place are pictures. Large images are the main cause of slow website loading.
- Hosting can cause problems.
- Plugins, apps and widgets, basically any third-party script, can slow down the loading time.
- Your subject and any large files beyond that can also slow things down a lot.
- Redirects, the number of hops it takes to get to a website, slow down the work.
But all of these things can be a culprit. So we're going to look at some resources, some of the metrics and what they mean, and then some ways you can improve your page speed today.
Page speed tools and resources
The main resources I have listed here are Google tools and insights suggested by Google. I think what's really interesting about these is that we can see what their concerns about page speed are and really start seeing the shift towards the user. We should think about it anyway. But first and foremost, how does this affect the people who come to your website, and secondly, how can we achieve the double advantage that Google perceives it as being of higher quality?
We know that Google suggests a website that should load between two and three seconds. The faster the better, of course. But there is the range. I also suggest that you see this as competitive. Put your competitors in some of these tools and compare your speed goals with those of your industry. I think that's a cool way to go into that.
Chrome User Experience Report
These are real Chrome user metrics. Unfortunately, it's only available for larger, popular websites, but you get some really good data from it. It's in BigQuery *, so some basic SQL knowledge is required.
* Editor's Note: We have edited this transcript for accuracy. In the video, Britney said "BigML" but wanted to say BigQuery. It's hard to film an advanced-themed whiteboard Friday in a single shot! 🙂
Lighthouse, one of my favorites, is available directly in Chrome Dev Tools. If you're on a webpage and click "Check Item" and open Chrome Dev Tools on the far right of the "Monitoring" tab, you can run a lighthouse report directly in your browser.
What I love about it is that it gives you very specific examples and corrections that you can do. It's fun to know that it's automatically simulating fast 3G and that they focus on 3G mobile users. I like to switch this to applied 3G fast because Lighthouse has to actually run this load. It takes a little bit longer, but it seems a little bit more precise. Good to know.
Insights into page speed
Page Speed Insights is really interesting. You have now integrated the Chrome User Experience Report. However, if you are not one of these large websites, your actual page speed is not even measured. It will look at how your site is configured and give and rate feedback accordingly. Just something good to consider. It still offers good value.
Test the speed and performance of your mobile website
I don't know what the title is. If you do, please comment below. But it's on testmysite.thinkwithgoogle.com. This is really cool because it tests the mobile speed of your website. If you scroll down, the ROI for your company or website is linked directly. We see that Google is using real metrics and tracing them back to the percentage of people you lose because your website is so slow. It's a great way to get us all on board and fight for some of these improvements.
Pingdom and GTmetrix are products that are not from Google or Google, but are also very helpful.
Site speed metrics
So what are some of the metrics?
What is first color?
First color is the first non-blank color on a screen. It could only be the first pixel change. This initial change is considered the first color.
What is first color content?
The first content color is when the first content appears. This can be part of the navigation device or the search bar or whatever it may be. – This is the first controversial color.
What is meaningful color first?
The first meaningful color is when the primary content is visible. If you get the reaction: "Oh, yes, that's why I came to this page", that's the first meaningful color.
What is interactive time?
It's time for interactivity when it's visually usable and responsive. We've all gone to a website and it looks like it's done, but we still can't use it entirely. This is where this metric comes in. When can it be used for the user? Notice again how user-centric these metrics are. Really, really, really neat.
DOM content loaded
The DOM content is loaded. In this case, the HTML code is fully loaded and analyzed. So some really good ones to watch and generally be aware of.
Ways to improve your page speed
HTTP / 2
HTTP / 2 can definitely speed things up. To what extent you have to research and test this somehow.
Preconnect, prefetch, preload
Preconnect, Prefetch and Preload are really interesting and important to speed up a site. We see that Google does this on its SERPs. When you examine an item, you can see that Google prefetches some of the URLs, so clicking on some of these results will make it more readily available to you. You can also do this on your website. It helps to load and speed up this process.
Enable caching and use a content delivery network (CDN).
Caching is so important. Be sure to do your research and make sure that it is set up correctly. The same is true for CDNs that are of great value in accelerating a site, but you want to make sure that your CDN is set up properly.
The easiest and probably fastest way for you to speed up your website today is to compress these images. It is so easy. You can compress all kinds of free tools. Optimizilla is one. You can even use free tools on your computer, save them for the web, and compress them properly.
You can also minimize resources. So it's really good to know what minimization, bundling, and compression do so that you can have some of these more technical conversations with developers or other people working on the site.
So this is a kind of general overview of page speed. There's a lot more to discuss, but I'd love to hear your posts and your questions and comments in the comments section below.
I really appreciate that you watched this issue of Whiteboard Friday and we'll see you again soon. Many thanks. See you.
Video transcription from Speechpad.com
Learn more about SEO insights at MozCon Virtual in July
Don't miss the exclusive dates, tips, workflows and advice from Britney and our other fantastic speakers at this year's show MozCon Virtual! For the first time, MozCon will be completely remote control friendly. It's like 20+ of your favorite whiteboards on Fridays with vitamins and double size, as well as interactive questions and answers, virtual networking and full access to the video package:
Save my place at MozCon Virtual!
We can't wait to see you there!