Python for Entrepreneurs Transcripts
Chapter: SEO and Content Marketing
Lecture: Site speed
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
One significantly underappreciated factor in achieving high search result rankings is how fast your site is.
0:08
Fast can mean a couple of different things, the page load performance is important, both in your server responding to the web browser's requests,
0:16
so keeping the number of requests low is important, but also the rendering time once the HTML, CSS and JavaScript is downloaded.
0:22
The browser has to render everything, so keeping the CSS small and the JavaScript minimal improves the rendering time in the web browser.
0:32
Let's see how we can measure the speed off of the web frameworks page as an example on Full Stack Python.
0:37
In Chrome, I am often in the network tab of the developer tools, so when you open up developer tools, go to this network tab
0:43
and we want to see how fast does this page load, press the refresh button, and empty cache and hard reload, so we'll clear all of the files
0:50
that you've already downloaded, and reload everything. Now if we make this a little larger, we'll get this handy dashboard down below,
0:57
the things that are most important to look for here are these are the files that you are actually downloading, and then a little waterfall diagram,
1:03
that will show you when those files were downloaded, so the first thing is always the HTML page, the actual page that forms the backbone of the content
1:11
and then that page has references to other files, like the CSS, or the images that are on the page,
1:17
so we can see the page itself is first and then after that, once we have the page in the web browser,
1:23
the web browser then sees "oh, I got to also get the CSS, I got to get these images", and then we'll initiate request after the HTML is downloaded,
1:31
so that is why we can see these bars start after the page itself downloads. Now the size is important, the average web page in 2016
1:40
was something like 1,5 MB that is just insanely large, we're viewing pages on a web browser just through a cell phone connection.
1:47
Sure, you can download it, but it's probably going to be a little slow. One cool feature about the Chrome developer tools is
1:54
that we can actually simulate a slow connection, so up here we have a no throttling, so throttling is disabled, we can change the presets,
2:03
we can say well what if they are only on regular 3G connection, what does that look like? and then again,
2:09
hit shift and then empty cache and hard reload, and this is going to simulate a much slower connection.
2:15
Now this took three fourths of a second to finish. On our fast, no throttled connection it finished in a tenth of the time,
2:24
so when I am working on improvements to my site, I try to keep throttling on, keeping in mind that a lot of people
2:29
are going to be on cell phones, reading this content. What is some other handy information that we can get out of here?
2:33
We can see the number of requests, this page has six requests, this was very low compared to most pages. Let's take a look at New York Times.
2:42
If we reload this, we can see it's still loading, on a regular connection still not loaded,
2:50
still not loaded, let's reload this- still going. 2.8 MB and sure, there is some images here, but it's mostly text.
3:12
You can see this massive dependency, and all these different files, and a lot of it is just ad networks. It took us 33 seconds to load the front page
3:22
and it's still going, this is why you want to avoid adding a ton of JavaScript to your pages. Alright, let's go back over here,
3:30
what else can we clean from the Chrome developer tools? You can see the total amount transferred, so this page is a little bit less than 35 KB,
3:39
this would load really well on an old school modem. We know that this would work well even for the lowest common denominator connection.
3:47
Even people on the oldest cell phone networks are going to be able to load this page. That is what you should target when you're creating content,
3:53
and you're creating your blog, avoid using JavaScript model view controller frameworks like Angular
3:59
when you are creating content that other people are suppose to read. The reason why this matters for search results is think about the user experience,
4:06
if your search result is the top one, a searcher clicks on it and it is just not what they are looking for, the faster they can see
4:13
that it's not for them and click back button, or the faster they can see that it is for them,
4:19
and get the information that they need, that is a better user experience,
4:22
regardless of the search engine whether you're on Google or Bing or DuckDuckGo. Reduce the number of files, don't have a bunch of CSS files there,
4:30
don't have a bunch of JavaScript, put them together if possible, make sure that your images are small unless they really need to be large and detailed.
4:39
Now how do you get a benchmark other than the Chrome developer tools for how well you're doing? Well, there is a couple of tools that I recommend,
4:45
one of them is a free tool via Pingdom, so this is tools.pingdom.com and you can run a website speed test.
4:52
So I am just going to run this on the same page, the web frameworks page of Full Stack Python, I'll take a few seconds,
4:57
and I'll run this test, and now we can see if we scroll down it's going to give us a performance grade, sort of an arbitrary number
5:04
but this one looks pretty good, tell us the load time, you are typically aiming for something that is less than a second
5:10
and I'll give you a relative performance indicator. So faster than 99 percent of the tested sites that are out there,
5:16
six requests and the page size, the same information we could get out of Chrome developer tools,
5:21
and you can test from different locations, which could be really important
5:24
if for example your audience is only in Asia, or if they are only in South America, you can do tests from those locations.
5:30
And it will give you some insights into what you can do to improve your performance. Some of these you may not necessarily be able to do, for example,
5:35
leverage browser caching, this is just an issue with Google analytics, nothing I can really do about that to make it better.
5:44
But the rest of these, especially for an unoptimized site could be really low score, so are going to want to address those.
5:50
And, we'll just get a little bit of a breakdown, some more information about the size of the content and the types, the request types,
5:56
so super useful information, and what this does is it provides you a baseline you can test your site, over time, and work on improve on it,
6:03
provide you some insight into what you should be changing in order to make it better.
6:08
Another tool that is great for that is page speed insights by Google. developers.google.com/speed/pagespeed/insights.
6:16
And we can hit the analyze button, it's going to go out to the site and it's going to analyze both from mobile and from desktop
6:22
and then provide us with some fixes. There will typically be other rules when you are working with your unoptimized site
6:29
where maybe you don't have minified CSS, or you have a bunch of redirects that are not necessary.
6:35
So what is great about this is you are going to be testing for both mobile and desktop and it's another free tool that allow you to improve the content
6:42
and if you are improving your performance over time, it will definitely help to improve your search rankings.