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