PETE LEPAGE: Hi, I'm Pete, a developer advocate at Google.
We all know that a snappy website is always
a great thing.
It means happier users and higher conversions.
And fast is especially important on mobile,
where everybody is always in a hurry.
PageSpeed Insights is an awesome tool
that you can use to improve the performance of your site.
When you profile a page with PageSpeed Insights,
it evaluates the page and gives you
a score based on performance and user experience,
based on a set of criteria and best practices.
For a quick, easy analysis, you can just
hit the PageSpeed Insights service
by clicking the link on screen.
But let's give the Web Fundamentals site
a try to see how it works.
I'll enter a URL and hit the Analyze button.
After a few seconds, PageSpeed reports back its findings.
On this page, we scored a 70 out of 100 for speed.
Not bad, but there's certainly room for improvement here.
It gives us a list of criteria that we should fix.
On this page, it recommends that we eliminate
the render-blocking CSS and scripts.
In our case, it's our primary CSS file
and a CSS file that loads some specialized fonts.
It also tells us that we should check the caching headers
on some of our files.
It looks like a couple of the files
are cached for 60 minutes.
And we definitely want to up that number.
We had eight rules pass, there are no redirects,
and the page weight has been optimized
by turning on compression and minifying the JavaScript, HTML,
CSS, and images.
The above-the-fold content has been properly prioritized
and the servers are responding quickly.
Perfect, we're in a good situation.
Now, we get a similar report for the user experience rules.
It looks like this page was dinged two points because some
of the tap targets are a little bit too close together.
Otherwise, the page is good.
It doesn't use any plug-ins, the viewport
is configured properly, and the content is sized to fit,
and all the font sizes are large enough to read.
This is great as a manual, one-off analysis,
but you can go even deeper.
You can integrate PageSpeed Insights directly
into your development workflow with the PageSpeed Insights
API.
It uses a simple REST API that takes three parameters:
the URL that we want to test, the API key that identifies
our project-- and, oh, by the way,
that-- not really my API key, so don't bother trying it--
and the strategy, either desktop or mobile
that you want to test against.
You can learn about some of the other optional parameters
in the documentation.
Now, if you don't already have an API key,
you'll need to enable the PageSpeed Insights
API in the Google Developer Console.
And you can get your key there.
The PageSpeed Insights API returns its result
as a JSONObject.
It includes the server response code, the final URL,
and the score.
It also includes page stats such as the total number
of each resource downloaded, the total number of hosts,
and the size of the request.
And finally, the results of all the rules tested.
Each PageSpeed rule generates an impact number
that indicates the importance or priority of implementing
that set of suggestions for the rule
relative to the other rules.
For instance, if enabling compression
would save one megabyte, while optimizing images would save
500k, then the enable compression rule
would have an impact value that's
twice that of the optimized images rule.
You can query the URL from the command line,
or better yet, just automate it.
Grunt makes the command line testing super easy.
The Grunt PageSpeed plug-in simply
tests the deployed pages, reporting the PageSpeed score,
page stats, and the individual rule results.
If the PageSpeed score falls below the specified threshold,
well, then the Grunt task fails.
By testing your site regularly with a Cron job
or other scheduled task and saving the results,
you can use PageSpeed Insights to track your site over time.
Small changes, when looked at individually,
may not make a big difference, but over time, these numbers
add up, helping you to spot regressions
or see trends that you might otherwise have missed.
By adding PageSpeed Insights to your development workflow
today, you can ensure that your pages follow the best practices
for performance and user experiences.
And you can spot trends before they become a problem.
So go, test your pages right now,
and then add PageSpeed Insights to your workflow.
Thanks for watching, and go build something awesome.