Advanced – Hosting your site & PageSpeed
Articles,  Blog

Advanced – Hosting your site & PageSpeed


So yeah,
here I have my terminal open, and I’ve actually gone into the repo
where the webpage resides. And here, what I’m going to do, is I’m
going to host my page on the local host. So, the command for
that is python -m SimpleHTTPServer 8080, 8080 is the port that I specified. So now I get a message that it’s
Serving HTTP on 0.0.0 port 8080. So when I go to local
host on my web browser, I can see a webpage does show up.>>Mm-hm.
>>But for PageSpeed Insights, you cannot test your webpages
locally because this is offline. And so, what I need to do
is get this page online. And that’s the reason why we use ngrok.>>And other way to do it instead of
downloading the entire folder and working with ngrok,
is hosting your page on github.io. And the way you do it is you
just want to go to GitHub and create a new repo with
your user name and github.io or your username on GitHub. And that could create that repo and
then you can actually go your username github.io and
then your projects/branch.>>Yeah so GitHub pages is just
creating another branch that has all the content in your master branch,
pushing it all into a new branch and hosting it online using
the github.io extension, which automatically
makes it into a webpage. That’s what github.io does. So yeah-
>>If you don’t want to do that, [LAUGH] ngrok is going to help.>>Yeah,
if you don’t want to use GitHub or if you’re not too comfortable using
GitHub, definitely use ngrok. So now I’m going to open
another tab on my terminal and what I’m going to do is I’m going to
call ngrok from where it resides. So for me, I have my ngrok
downloaded in my Downloads folder. So I’m going to go there
in my Downloads folder and just do ./ngrok and I specify the port. Which means, I’m taking in
whatever is there in port 8080 and pushing it online into a-
>>[CROSSTALK]>>Now there is a tunnel between, that ngrok is making between the public
Internet and this specific port.>>That’s right, yeah, yeah. So when I click that,
I get the tunnel status as online. And then I have a version and
then Forwarding. Forwarding actually denotes
the website where we have published online
the webpage provided to us. So there are two forwardings,
one uses a normal HTTP protocol and the other one uses
a HTTPS secure protocol. And so what I’m going to do is
I’m going to take this website, I’m going to go in my browser and
open it on here. So as here you can see,
the same webpage comes up.>>[CROSSTALK]
>>Yeah, now it’s on the public Internet and you
can analyze it on PageSpeed Insights. So when you actually Google for
PageSpeed Insight, the first thing that comes up is the Google Developers
webpage that has PageSpeed insights. So what I’m going to do is here, I’m going to enter the ngrok URL and
then hit ANALYZE. So this analyzes the website.>>Mm-hm.>>It’s not a very pretty score.>>[LAUGH]
>>Okay, so on the mobile, I can see I
have a speed of 73 out of 100. Now the greatest advantage
using the PageSpeed Insights, is that I can see what I should fix. And it gives suggestions on what
can be improved in your page. So, I can see that it says eliminate
render-blocking JavaScript and CSS in the above-the-fold content. And it actually gives me a small
solution on how I can do that by loading JavaScript files asynchronously
which has been taught in the past. So using the async attribute in your
script tags is going to help you fix this is part.>>The speed part of it.>>Yeah, mm-hm, yeah. And then when I go down, I see that
the user experience is 100/100, which is great. Which means that, yeah,
I’ve been doing a lot of things right. [LAUGH]
>>Okay and you want to go and and see what the desktops is?>>So yeah, the desktops not too
bad with speed, it’s around 89/100. I think it gives an overall score, unlike the mobile where it’s
user experience and speed.>>Mm-hm, I think user
experience matters a lot more on smaller devices because,
they’re a lot smaller.>>[LAUGH]
>>Okay, so here you have all
suggestions to fix it. So it’s going be pretty
straightforward to actually go about getting the score to 90 or
even above that. I’ve got a lot of the value
submissions from students who have PageSpeed
scores are up over 90.>>Yep.
>>It always happens. They have over 90 if they exceed
specifications in that section. Awesome.>>So, once you make that fix, you’re
in with the first part of your project which is the critical rendering path. And if you’re checking that you know
how good of a job you did by making sure that you go and paste your
web address in PageSpeed Insights. Again, the requirement is only in .HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *