Google PageSpeed Insights : 网站性能优化检测工具
1
1
https://developers.google.com/speed/pagespeed/insights/
使您的网页在所有设备上都能快速加载。
分析
网页性能
详细了解 Google 提供的网页性能工具,包括浏览器扩展程序和 Insights API、PageSpeed 服务以及我们的优化库。
提供反馈
有关于 PageSpeed Insights 的意见或问题吗?请发送反馈或通过我们的邮寄名单进行讨论。
关于 PageSpeed Insights
PageSpeed Insights 先分析网页的内容,然后提供关于如何提升网页加载速度的建议。了解详情。
1
1
1
1
https://developers.google.com/speed/docs/insights/UseLegibleFontSizes#header
使用清晰可辨的字体大小
当PageSpeed Insights检测到网页上的文字太小而难以辨认时,就会触发此规则。
概览
您可以使用以下四种常用单位来指定网页字体大小:像素(px)、点(pt)、EM(em)和百分比(%)。
- 像素即“CSS像素”,会因设备尺寸和密度而异。
- 点是相对于像素而定义的。一个像素是0.75点*。
- EM和百分比是“相对”单位:这两个单位是相对于沿用已使用字体大小和属性而言的。1 EM相当于100%。
*请参见其他说明。
此外,视口会影响字体在移动设备上的缩放方式。未适当配置视口的网页会在移动设备上缩小显示,这通常会导致网页文字较小而难以辨认。
建议
首先,配置视口以确保字体将会在各个设备中按预期缩放。配置视口后,请实施下面这些额外的建议:
- 使用16 CSS像素的基准字体大小。根据要使用的字体的属性按需调整字体大小。
- 使用相对于基准字体的字体大小定义排版比例。
- 每行文字的字符之间需要留出一定的垂直空间,而且还可能需要根据每种字体进行不同的调整。我们通常建议您使用浏览器默认的行高1.2em。
- 限制所用字体的数量以及排版比例:过多字体和字体大小会导致网页布局杂乱且过于复杂。
例如,以下CSS代码段定义了16 CSS像素的基准字体大小,其中在CSS类“small”中将字体大小定义为基准字体大小的75%(即12 CSS像素),在CSS类“large”中将字体大小定义为基准字体大小的125%(即20 CSS像素):
body {
font-size: 16px;
}
.small {
font-size: 12px; /* 75% of the baseline */
}
.large {
font-size: 20px; /* 125% of the baseline */
}
对于适用于移动设备的其他字体建议,请参阅Android排版指南。
其他信息
请仔细阅读CSS 2.1规范,以了解长度单位的定义方式。该规范包含此处未提到的其他单位:英寸、厘米、毫米和皮卡。另外,有一点很容易被人忽略,那就是CSS中1英寸并不一定等于1物理英寸。
所有绝对单位都是相对于其他单位而定义的。1像素等于0.75点,1点等于1/72英寸,而1英寸等于2.54厘米等。不过,这些单位的“定位”最终都取决于设备。例如,在纸张上打印时,1英寸就会锚定为1物理英寸,其他所有单位应相对于物理英寸而定。然而,在手机上显示时,设备会根据著名的“参考像素”进行锚定。您可以根据此参考像素定义1 CSS像素,然后以CSS像素为参考来调整其他所有单位(例如,英寸、厘米等)。因此,1 CSS英寸通常会以小于现实中1物理英寸的大小显示在手机上。
鉴于这个原因,我们建议您使用像素定义字体大小。不然,某些设计人员和开发者看到所用单位是英寸或点时可能会被误导,因为这些单位尽管也是物理尺寸,但不一定等同于现实世界中的尺寸。请将像素想象成会根据所在设备的尺寸来变更显示大小的单位。
最后,每种字体还具有自身的特征:大小、间距等。默认情况下,浏览器将会以16像素(CSS像素)显示每种字体。这个默认设置适用于大部分情况,但某些特定字体可能需要再另外进行调整,也就是说,您可以设置较低或较高的默认字体大小,以适应字体的不同属性。然后,待默认大小设置完毕后,请根据默认像素大小定义较大和较小的字体,以便调整网页上主要、次要和其他类型内容的文字大小。
某些移动浏览器可能会在没有恰当配置视口的情况下尝试缩放网页字体。由于这种缩放行为因浏览器而异,因此您最好不要依赖这种方式来为移动设备显示清晰可辨的字体。PageSpeed Insights会照原样显示您网页上的文字,而不会应用浏览器指定的字体缩放比例。
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.
上次更新日期:四月 15, 2014
1
1
1
已正确实施5条规则
使用清晰可辨的字体大小
网页中的文本清晰可辨。详细了解使用清晰可辨的字体大小。调整内容的尺寸,使其符合视口设置
网页内容的尺寸适合视口的大小。详细了解将内容尺寸调整为适合视口大小。避免使用会遮住内容的应用安装插页式广告
您的网页上好像没有任何会遮住大量内容的应用安装插页式广告。详细了解避免使用应用安装插页式广告的重要性。避免使用插件
您的网页似乎没有使用会导致内容无法在多类平台上使用的插件。详细了解避免使用插件的重要性。配置 viewport
您为自己的网页指定了一个与相应设备尺寸相符的视口,因此该网页可在所有设备上正常显示。详细了解如何配置视口
1
1
1
1
Google PageSpeed Insights : 网站性能优化检测工具的更多相关文章
- Yslow网站性能优化工具
Yslow是一款网站性能优化的插件:
- 网站性能优化(Yahoo 35条)
Yahoo 网站性能优化 35条 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 ...
- Yahoo团队经验:网站性能优化的34条黄金法则
Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...
- 网站性能优化实战——从12.67s到1.06s的故事
文章摘自https://juejin.im/post/5b0b7d74518825158e173a0c 作为互联网项目,最重要的便是用户体验.在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接 ...
- Yahoo网站性能优化的34条规则
摘自:http://blog.chinaunix.net/uid/20714478/cid-74195-list-1.html Yahoo网站性能优化的34条规则 1.尽量减少HTTP请求次数 终端用 ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- Yahoo! 35条网站性能优化建议
Yahoo! 35条网站性能优化建议 Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客 ...
- asp.net网站性能优化2则
摘要:Web服务器的性能优化有很多资料介绍了,多台主机负载均衡,查询结果的多级缓 存,数据库索引优化等都是常见的优化手段.随着后端优化空间越来越小,现在越来越多 的网站更注重前端性能的优化,就是浏览器 ...
- 网站性能优化小结和spring整合redis
现在越来越多的地方需要非关系型数据库了,最近网站优化,当然从页面到服务器做了相应的优化后,通过在线网站测试工具与之前没优化对比,发现有显著提升. 服务器优化目前主要优化tomcat,在tomcat目录 ...
随机推荐
- 对象存储 COS 帮您轻松搞定跨域访问需求
背景 早期为了避免 CSRF(跨站请求伪造) 攻击,浏览器引入了 "同源策略" 机制.如果两个 URL 的协议,主机名(域名/IP),端口号一致,则视为这两个 URL " ...
- Arduino 上手实战呼吸灯
前言 这篇稿子比以往的时候来的稍晚了一些,望fans们见谅,那即便如此,最终还是姗姗来迟了,公司新一轮战略性部署,被拖出去孵化新产品,开拓新市场去了,手头精力没有那么多了,另外产品一茬接一茬.韭菜一波 ...
- MySQL的双主配置
配置MySQL双主配置,需要先配置MySQL的主从复制,传送门: 0.集群规划 hadoop105 hadoop106 hadoop107 MySQL(master,slave) MySQL(slav ...
- 二:SpringBoot-配置Log4j2,实现不同环境日志打印
SpringBoot-配置Log4j2,实现不同环境日志打印 日志打印之外观模式 1.日志配置 2.Log4j2的配置文件 3.简单的测试程序 日志打印之外观模式 每一种日志框架都有自己单独的API, ...
- Spark动态加载外部资源文件
Spark动态加载外部资源文件 1.spark-submit --files 动态加载外部资源文件 之前做一个关于Spark的项目时,因项目中需要读取某个静态资源文件,然后在本地IDEA测试一切皆正常 ...
- Lambda表达式及相关练习
语法格式一无参数无返回值 语法格式二有一个参数并且无返回值 语法格式三若只有一个参数小括号可以省略不写 语法格式四有两个以上的参数有返回值并且Lambda体中有多条语句 语法格式五若Lambda体中只 ...
- ESRI,空间数据处理,WKT,GeoJson
ESRI,空间数据处理,WKT,GeoJson 一.WKT 二.GeoJson 三.WKT转GeoJson 四.GeoJson 转 WKT 一.WKT WKT(well-known text)是一种文 ...
- java架构《并发线程高级篇三》
本章主要介绍和讲解concurrent.util里面的常用的工具类. 一.CountDownLatch使用:(用于阻塞主线程) 应用场景 :通知线程休眠和运行的工具类,是wait和notify的升级版 ...
- docker --- (入门必读)
容器 容器就是一个视图隔离.资源可限制.独立文件系统的进程集合.所谓"视图隔离"就是能够看到部分进程以及具有独立的主机名等:控制资源使用率则是可以对于内存大小以及 CPU 使用个数 ...
- 如何将下载到本地的JAR包手动添加到Maven仓库,妈妈再也不用担心我下载不下来依赖啦
我们有时候使用maven下载jar包的时候,可能maven配置都正确,但是部分jar包就是不能下载下来,如果maven设置都不正确的,可以查看我的maven系列文章,这里仅针对maven配置正确,但是 ...