Pretty hard to understand PageSpeed Insights and related components.
Any advice?
Okay, yeah.
So, PageSpeed Insight does sometimes give you these sort of,
I guess, vague problems about your website.
They might just say, you know, eliminate render blocking CSS or
eliminate render blocking JavaScript.
And then it kind of gives you some hints on what that means, but
it never really gives you a clear guideline on, okay, go and fix this.
So I would say the first thing to do is to definitely read what
PageSpeed Insights gives you as information about those things.
Then go back and look at your code and see if you can pick out any parts of
your code that sort of match with what they've described.
For example, if you have render blocking CSS that means that you have components
in your CSS that are preventing your entire page from rendering.
So you need to go and look at what particular CSS script
is the one that's causing this render blocking.
You can kind of do that by taking them out one at a time or
you can come up with some clever ways to do that.
Do you have any insights on the best way to interpret and
use PageSpeed Insights, Turner?
>> Yeah, that's great advice John.
And, if you ever have a question about something you can also Google for
the exact phrase and you'll probably find a wealth of extra pages
on minimizing the critical rendering path, beside and
in addition to what you learned in the course.
So, that never hurts in case you're extra curious,
but a lot of times, hopefully it does refer to
new terminology that you've learned of course.
But when it doesn't, certainly just go look it up and see if it's applicable,
learn a new thing here and there.
>> Can we load different images with different compression levels while using
different devices or different screen resolutions.
[LAUGH] >> But that way it's going to be
taking responsive images and wants to really optimize this.
>> The answer to that is absolutely, yes you can.
So it's a little trickier.
You have to utilize, CSS to
serve the appropriate images as opposed to hard coding them in your HTML.
You can also do it with JavaScript but
I prefer using CSS to render those kinds of images.
And then while using different devices with different screen resolution, yeah,
you're going to have to look into using media queries for that kind of stuff.
And serving your images with media queries and CSS.
In terms of actually creating all these different images for
all these different devices and different screen resolutions,
if you haven't looked at the responsive images course yet, you totally should.
Cameron breaks down how to use task runners like Grunt, for
example, to automate all of this.
And you don't have to sit there and tweak a bunch of images by
hand in some photo editor hoping that they're rendered correctly.
Different events on the page that change the render tree would cause
a new layout event each time.
We could increase or speed, supposedly,
by using batch updates according to the video.
Yeah, so Liam, what this means is, we can create these JavaScript
events that basically manipulate our DOM or our render tree.
And the more times we call those events,
the more times we're re-accessing the DOM,
changing something, and then redrawing the tree.
Basically creating a new layout event each time.
What they mean by batch updates is,
you want to create basically a function or some sort of methods that do as
much of this as possible without accessing the DOM multiple times.
A good way to do this is when you access a DOM, the DOM elements,
you actually put those in a variable and then you manipulate that variable.
And that way you only call the up document object model once.
And then you make all the changes you want and then all the updates happen.
And then the layout event happens.
because every time you take requests from the DOM,
it has to process all those changes that have been previously.
And, so you'll actually notice this in the pizza page.
For example, with the moving pieces in the background.
Pay close attention to how many times you're actually accessing your document
object model.
Because it's a lot, and if you can reduce the number of times that that
query selector is selecting everything, the faster you're page is going to load,
and you'll be amazed at how much faster, too.
It literally goes from a couple seconds to a couple milliseconds.
>> Do we not care about frames per second for page loading.
>> Yes, so this thing is,
there are two fixes that you have to do in your main.js file.
If you had read the comments, Cameron has given you that.
There are two fixes to do in main.js, and they are completely pertaining
how you scroll through through the page and how the pizza sizes changes.
And how the background pizzas move around in the page.
So, whenever you scroll up and down you can see the background pizzas moving.
So, that is one area where there is a major fix to be carried out.
So for this project and for this particular solution we
are only looking for scrolling over the page, up and
down the page, and then resizing the pizzas.
So, yeah, you should only worry about that,
don't be too concerned about page loading.