Using the PageSpeed APIYouTube↗  IA↗(long shot)
Science & Technology  10.3K views 57 likes 5 dislikes   25 Jun 2014
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
hi I'm Pete a developer advocate at
hi 我是Pete Google的一名开发人员 PETE LEPAGE: Hi, I'm Pete, a developer advocate at Google.
Google we all know that a snappy website is always a great thing it means happier
我们都知道一个简洁的网页很棒 We all know that a snappy website is always a great thing.
users and higher conversions and fast is
它意味着用户满意度与评价的提升 It means happier users and higher conversions.
especially important on mobile where
而在手机端的体验速度很重要 And fast is especially important on mobile,
everybody is always in a hurry PageSpeed
特别是如今每人总是处于匆忙中 where everybody is always in a hurry.
insights is an awesome tool that you can
PageSpeed Insights是一个很赞的工具 PageSpeed Insights is an awesome tool
use to improve the performance of your site when you profile a page with
你可以用它去提高产品的性能 that you can use to improve the performance of your site. 当你用PageSpeed Insights刷新一个页面 When you profile a page with PageSpeed Insights,
PageSpeed insights it evaluates the page
它会对页面进行评估 it evaluates the page and gives you
and gives you a score based on performance and user experience based on
并以性能和用户体验为依据打分再发送给你 a score based on performance and user experience,
a set of criteria and best practices for
这些都以预先设定的标准和试验为基准 based on a set of criteria and best practices.
a quick easy analysis you can just hit
要进行一个快速简洁分析 For a quick, easy analysis, you can just
the PageSpeed insight service by clicking the link on-screen but let's
你只需点击屏幕上的链接到PageSpeed Insights service hit the PageSpeed Insights service by clicking the link on screen.
give the web fundamental site a try to
让我们以Web Fundamentals But let's give the Web Fundamentals site
see how it works I'll enter a URL and
为例看它是如何工作的 a try to see how it works.
hit the analyze button after a few
我会进入URL 连接到Analyze按钮 I'll enter a URL and hit the Analyze button.
seconds PageSpeed reports back its findings on
几秒钟之后 PageSpeed报告返回调查结果 After a few seconds, PageSpeed reports back its findings.
this page we scored a 70 out of 100 for
这个页面 我们为100的速度打了70分 On this page, we scored a 70 out of 100 for speed.
speed not bad but there's certainly room for improvement here it gives us a list
还行 但还有很大的提升空间 Not bad, but there's certainly room for improvement here.
of criteria that we should fix on this
它给我们了一个需要遵循的标准列表 It gives us a list of criteria that we should fix.
page it recommends that we eliminate the
在这个页面中 它建议我们消除 On this page, it recommends that we eliminate
render blocking CSS and scripts in our
render-blocking CSS和脚本 the render-blocking CSS and scripts.
case it's our primary CSS file and a CSS
在此例中 这是我们的原始CSS文件 In our case, it's our primary CSS file
file that loads some specialized fonts
一个CSS文件装载一些专业的文字 and a CSS file that loads some specialized fonts.
it also tells us that we should check
它也告诉我们 我们应该看看一些文件的 It also tells us that we should check the caching headers
the caching headers on some of our files
缓存文件 on some of our files.
it looks like a couple of the files are cached for 60 minutes and we definitely
它显示出一些文件被储存了60分钟 It looks like a couple of the files are cached for 60 minutes.
want to up that number we had eight
很显然 我们想提升那个数字 And we definitely want to up that number.
rules passed there are no redirects and
我们已经符合了8条规则 这些都不用调整 We had eight rules pass, there are no redirects,
the page weight has been optimized by
并且页面的权重已转向 and the page weight has been optimized
turning on compression and minifying the JavaScript HTML CSS and images the above-the-fold content has been properly
对压缩和消减的JavaScript HTML by turning on compression and minifying the JavaScript, HTML, CSS 和图像优化 CSS, and images. 33 00:01:42,310 --> 00:01:45,880 上面的内容已经确保优先顺序 The above-the-fold content has been properly prioritized
prioritized and the servers are responding quickly perfect we're in a
并且这些响应得很快 and the servers are responding quickly.
good situation
很好 现在处于良好的状态 Perfect, we're in a good situation.
now we get a similar report for the user experience rules it looks like this page
我们的用户体验标准也得到了相似的报告 Now, we get a similar report for the user experience rules.
was dinged two points because some of
它看起来像页面有两点 因为 It looks like this page was dinged two points because some
the top targets are a little bit too close together otherwise the page is
上面的一些对象靠得太近 of the tap targets are a little bit too close together.
good it doesn't use any plugins the
另外 这个界面很好 Otherwise, the page is good. 他不需要任何的插件程序 这个视口 It doesn't use any plug-ins, the viewport
viewport is configured properly and the content is sized to fit and all the font
装配很合适 并且内容都可以去适应 is configured properly, and the content is sized to fit,
sizes are large enough to read
所有的字体大小适合去阅读 and all the font sizes are large enough to read.
this is great as a manual one-off
它像知识手册一样全面 分析也一步到位 This is great as a manual, one-off analysis,
analysis but you can go even deeper you
但是你可以更加深入 but you can go even deeper.
can integrate PageSpeed insights
你可以通过PageSpeed Insights API直接将PageSpeed整合到 You can integrate PageSpeed Insights directly
directly into your development works flow with the PageSpeed insights API it
你的工作进程中 into your development workflow with the PageSpeed Insights API.
uses a simple REST API that takes three
它使用包含了三个参数的REST API It uses a simple REST API that takes three parameters:
parameters the URL that we want to test the API key that identifies our project
我们希望去测试的URL 定义工程的API the URL that we want to test, the API key that identifies
and oh by the way that not really my API key so don't bother trying it and the
并且 顺便说一下 our project-- and, oh, by the way, 这并不是我真正的API 密码 所以不要尝试 that-- not really my API key, so don't bother trying it--
strategy either desktop or mobile that
还有策略或者是桌面或手机 and the strategy, either desktop or mobile
you want to test against you can learn
你所希望再去测试 that you want to test against.
about some of the other optional
你可以学到其他可选择的参数 You can learn about some of the other optional parameters
parameters in the documentation now if
在这个记录中 in the documentation.
you don't already have an API key you'll
现在如果你该没有任何API密码 Now, if you don't already have an API key,
need to enable the PageSpeed insights
你需要去Google Developer Console激活 you'll need to enable the PageSpeed Insights
API in the Google developer console and
PageSpeed Insights API API in the Google Developer Console.
you can get your key there the PageSpeed
并获得你的密码 And you can get your key there.
insights API returns its results as a JSON object it includes the server
PageSpeed Insights API以JSONObject的形式返回结果 The PageSpeed Insights API returns its result as a JSONObject.
response code the final URL and the score it also includes page set such as
它包含了服务回应代码 最终的URL以及分数 It includes the server response code, the final URL, and the score. 他也包含页面统计例如总共的字数 It also includes page stats such as the total number
the total number of each resource downloaded the total number of hosts and
每个资源下载和主机的总数 of each resource downloaded, the total number of hosts,
the size of the request and finally the
和回应的大小 and the size of the request.
results of all the rules tested each
最后 所有规则都被测试过了 And finally, the results of all the rules tested.
PageSpeed rule generates an impact
每一个PageSpeed 产生冲击的数字 Each PageSpeed rule generates an impact number
number that indicates the importance or priority of implementing that set of
它指示出重点或者优先的实施步骤 that indicates the importance or priority of implementing
suggestions for the rule relative to the other rules for instance if enabling
相对于其他规则设计规则 that set of suggestions for the rule relative to the other rules.
compression would save one megabyte
例如 如果启用压缩 For instance, if enabling compression
while optimizing images would save 500 K
可以节省一个兆字节 而优化的图像将节省500k would save one megabyte, while optimizing images would save
then the enable compression rule would
然后启用压缩规则所影响价值的 500k, then the enable compression rule
have an impact value that's twice that
是优化图像的 would have an impact value that's
of the optimized images rule you can
两倍 twice that of the optimized images rule.
query the URL from the command line or
你可以从命令行查询URL You can query the URL from the command line,
better yet just automate it grunt makes
还有更好的 实现自动化 or better yet, just automate it.
the command line testing super easy
Grunt使命令行测试非常简单 Grunt makes the command line testing super easy.
there's grunt PageSpeed plug-in simply
The Grunt PageSpeed plug-in会简单地 The Grunt PageSpeed plug-in simply
test the deployed pages reporting the PageSpeed score page stats and the
测试页面的有效利用率并且返回报告 tests the deployed pages, reporting the PageSpeed score,
individual rule results if the PageSpeed
该份报告包含页面属性和个人统计的结果 page stats, and the individual rule results.
score falls below the specified
如果PageSpeed评分低于指定的阈值 If the PageSpeed score falls below the specified threshold,
threshold well then the grunt task fails
那么Grunt测试失败 well, then the Grunt task fails.
by testing your site regularly with a
经常使用Cron job测试你的网站 By testing your site regularly with a Cron job
cron job or other scheduled tasks and saving the results
或者其他计划任务并且保存结果 or other scheduled task and saving the results,
you can use PageSpeed insights to track your site over time small changes when
渐渐地 你可以使用PageSpeed Insights检测你的网站 you can use PageSpeed Insights to track your site over time.
looked at individually may not make a
单独观察时 会有小的改变 Small changes, when looked at individually,
big difference but over time these
可能不会有太大的不同 但是随着时间发展 这些数量会 may not make a big difference, but over time, these numbers
numbers add up helping you to spot
增加 帮助你去回归 add up, helping you to spot regressions
regressions or see trends that you might have otherwise have missed by adding
或者引起你注意你可能已经错过的趋势 or see trends that you might otherwise have missed.
PageSpeed insights to your development
在你的发展记录里加入PageSpeed Insights By adding PageSpeed Insights to your development workflow
workflow today you can ensure that your pages follow the best practices for
你可以通过良好的测试确定你的页面 today, you can ensure that your pages follow the best practices
performance and user experiences and you
表现和用户体验 for performance and user experiences.
can spot trends before they become a
并且你可以在它们成为问题之前观察到趋势 And you can spot trends before they become a problem.
problem so go test your pages right now and then
开始吧 测试你的页面 So go, test your pages right now,
add PageSpeed insights to your workflow
然后加入PageSpeed Insights到你的工作流程 and then add PageSpeed Insights to your workflow.
thanks for watching and go build something awesome
感谢观看 去创建一些美好的东西吧 Thanks for watching, and go build something awesome.
Similar videos:

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201485% match

Responsive images today
Google for Developers
14.6K views 179 likes 4 dislikes 25 Jun 201485% match

Fabulous Forms for the multi-device web
Google for Developers
25.6K views 115 likes 44 dislikes 25 Jun 201468% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201457% match

Getting Your PageSpeed Score Up
Google for Developers
95.2K views 1K likes 30 dislikes 25 Jun 201445% match

Using srcset for responsive images
Google for Developers
21K views 136 likes 10 dislikes 25 Sep 201444% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201442% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201438% match

Fetch API (100 Days of Google Dev)
Google for Developers
31.5K views 642 likes 12 dislikes 05 Jul 201538% match

Getting your events into the Knowledge Graph
Google for Developers
25.5K views 183 likes 8 dislikes 25 Jun 201438% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201437% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201436% match


Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201436% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201436% match


Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201434% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201433% match

Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201432% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201431% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201431% match

Maps Made Easier: GeoJSON in the Maps API
Google for Developers
29.9K views 242 likes 11 dislikes 25 Jun 201430% match

Building location-based apps with the Places API
Google for Developers
79.8K views 530 likes 22 dislikes 25 Jun 201429% match

DevBytes: Android L Developer Preview - Camera2 API
Google for Developers
70K views 564 likes 40 dislikes 28 Jul 201429% match

Perf Primer : CPU, GPU and your Android game
Google for Developers
31.3K views 334 likes 13 dislikes 12 Jun 201429% match

Android TV: Using the Leanback library
Google for Developers
32.8K views 227 likes 10 dislikes 27 Oct 201428% match


AdWords API DevBytes Episode 1: Why Use the AdWords API?
Google for Developers
61K views 138 likes 10 dislikes 22 Sep 201528% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201428% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201428% match

DevBytes: Notifications in the Android L Developer Preview
Google for Developers
37.2K views 357 likes 17 dislikes 26 Aug 201428% match

DesignBytes: Material Design in the Google I/O App
Google for Developers
139.8K views 1.2K likes 21 dislikes 05 Aug 201428% match

From Holo to Material
Google for Developers
64.8K views 792 likes 20 dislikes 25 Jun 201426% match


Settings Privacy About Contact Donate