2nd Fab. 2019
Page speed is an important part for your SEO work, but it's a hard subject that tends to be very technical. What are the most important things to understand how your site's page speed improve, and how can you grow up? Today I will give you some tips here What you need to know to get started.
How a webpage is loaded
Any user goes to a browser, puts in your website information and any activity related to your websites there is a DNS request. This points at your domain name provider and this points to your server where your files are located, and this is where it gets interesting. DOM starts to load all of your HTML files, CSS Files and 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 some ideas I hope will help you.
What are some of the most common Issues?
- 1. Images, Large images are the biggest problem of slow loading web pages.
- 2. Hosting can cause issues.
- 3. Plugin, Apps, and Widget basically third-party scripts.
- 4. Your theme and any large files
- 5. Redirects, the number of hops needed to get to a web page will slow things down.
- 6. JavaScript, which we'll get into in a second.
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
We have primary resources I have listed here are Google tools and Google suggested insights. 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. 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.
Chrome User Experience Report
This is Chrome real user metrics. Unfortunately, it's only available for larger and popular websites, but you can get some really good data out of it. It's housed on Big ML, so some basic SQL knowledge is needed.
Lighthouse
Lighthouse is the best part of my favourite data, is available right in Chrome Dev Tool. If you are on a website and click inspect element then open Chrome Dev Tools. to the far right tab where it says Audit, you can run a Lighthouse report right in your browser.
Page Speed Insights
Page Speed Insights is really interesting. They've now incorporated Chrome User Experience Report. 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.
Test your mobile website speed and performance
This one is really best tools 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.
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 getting 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 engageable. 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 speed
HTTP/2
HTTP/2 can definitely speed things up. As to what extent, you have to sort of research 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.
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. I think it's very helpful for you.
Thanks.