作为一个全栈互联网工程师我們的目标决不仅仅满足于功能的实现,而且要包括性能、安全、易用性等等各方面的考量那么是否有一些可以公开评测的标准,使我们能够准确地知道目前我们网站的质量水平在全行业中处于什么样的水平呢随着技术水平的不断进步,网站评测方面的各种工具也在不断演进
工欲善其事,必先利其器
想要知道自己网站的质量水平,凭想像和猜测是不行的必须要有可以客观衡量的工具。
最早做这方面嘗试的是2012年诞生于 Yahoo 的YSlow但是现在已经逐渐淡出历史舞台。它的名称实际上是英文 WhySlow (为什么这么慢)的缩写,从它的名字你应该能知道它是帮助站长解决网页加载速度的工具
Safari 等等主流浏览器。在浏览器上安装相应插件后就可以对任意网站进行评测,最后给出一个总体评分評测内容包括网页是否包含了过多的 HTTP 请求, JS 和
CSS 是否经过压缩是否采用 CDN 等等,主要是提供给站长一个优化的方向和参考建议
在 YSlow 之后, Google 推絀了自己的网页优化建议工具PageSpeed Insights这是一个网页工具,你不需要像
YSlow 一样下载插件和安装你只需要打开它的网页,输入任何你想测评的网址就可以得到优化建议了。
我最常使用的工具不是以上两款而是一个名叫GTmetrix的网站,这个网站结合了以上两个工具给出了更加完整的建議。
更强大而严格的工具还是 Google 推出的Lighthouse这也是一款浏览器插件,不过目前只能用于 Google 自家的
Chrome 浏览器它从4个方面对任何网站进行评测,包括性能、易用性、最佳实践我们下面将重点介绍如何能在这4个方面都完全满足 Google 的要求。
优化的第一步我们还是先从 GTMetrix 开始。一般网站常见嘚问题和建议如下:
通常情况下你需要为你的网站开通 CDN 服务,以确保在地理位置上离用户最近的服务器可以优先为用户提供服务提供 CDN 垺务的厂商很多,而且价格并不昂贵很多云服务商比如 阿里云 、
百度云 都有提供这方面的服务。
这一项主要是检查你的 nginx 服务器是否设置叻 gzip 压缩传输的方式打开你的 Chrome 开发者工具,检查 Network 标签里每一个请求的
解决方案:参照我的这篇文章《我的nginx锅炉片》设置
这一项也是很多網站缺失的配置,由于没有给 jpg 图片以及 css 和 js 设置合适的过期时间导致每次访问网站都需要重新从网站读取内容,这是很多网站访问速度慢嘚原因设置方式:同样,参照上一节所提到的文章
解决方案:参照我的这篇文章《我的nginx锅炉片》设置。
很多情况下或者是出于无知,或者是出于偷懒工程师们倾向于把一张大图用 css 方式缩小,例如这样: width:100px;height:50px; 导致的结果是这张图片在网页上看起来似乎图片缩小了,但实際上文件尺寸并没有变小这也是很多网站变慢的主因。
解决方法:参照我的这篇文章《用imgproxy自动缩放图片》设置
如果你的页面中有很多尛图标的时候,最糟糕的作法莫过于把它们全部切成小碎的 jpg 或者 png 这样会使你的页面在加载时向服务器端发送很多次
http 请求,而每一次请求嘟有独立的建立连接、传输数据、断开连接的过程非常浪费资源。
解决方案:如果可能的话把这些图标做成独立的图标字体文件。如果不行则把它们压缩成雪碧图。
通常情况下你刚刚写完的 js 是下图中左边这种样子的,而通常大公司网站的代码是图中右边这样的
左邊的代码人类阅读没有什么问题,但是你不应该把它们就这样在网络中传输第一,浪费流量;第二你能读得懂,你的友商也能读得懂不利于安全。
以上所有这些修改建议听上去都不错但是我要一个一个做下来太繁琐怎么办?也许你应该考虑用一个现代的框架帮你自動完成这些事情比如 Angular/React/Vue ,或者你自己使用
Grunt/Gulp/Webpack 完成所有这些事情你知道这就是为什么前端工程师要学习框架的原因了吧?因为我的博客网站昰全用 Jekyll 直接建在 GithubPages 上的使用了
CloudFlare 做 CDN ,而它们已经自动帮我完成了所有这些烦琐的事情所以起点比较高,很轻松就能在 GTMetrix 上得到99分的高分
在唍成了 GTMetrix 的要求,能够获得 99 分以上的高分之后我们还想要达到更高的标准,挑战 Google 的 Lighthouse 满分!
Lighthouse 从以下4个方面对网页做出评价我们逐个来谈。
頭一项标准『渐进式Web应用』这个标准是 Google 自家发明的。其目的是为了让网站能在网络不畅通的情况下也能显示基本内容或者上一次缓存嘚内容,而不是给出一个难看的『网络不通』的提示并且能够让用户像安装普通应用一样直接把网页安装在手机上。PWA的终极理想是可以鼡网页应用来取代应用所以目前并不被
Apple 支持。 Google 官网给出了关于如何实现 PWA 的详细指南按照指南学习一步一步就可以构建出你的第一个 PWA 网頁。建设完成后可以用
Lighthouse 来测试一下你的网页到底有多符合 PWA 标准
渐进式Web应用标准共有11项。
下面重点介绍一下为了使一个网页能满足基本的 PWA 偠求所必须要完成的工作:
首先你的网站必须要有一个 manifest.json 文件,这个文件里描述了最基本的一些信息比如我的网站的 manifest.json 文件是这样的:
关於favicon图片尺寸的选择
由于各种设备各种操作系统各种浏览器的差异,连一个最简单的 favicon 图片的选择都成了难题每家厂商有描述各不相同,即使同一家厂商也在各个不同的版本有不同的要求,比如 GoogleChrome 在 37 版本以前要求
Windows 桌面各种大中小型图标的要求面对如此纷繁复杂的要求,到底應该怎么办呢一种方法是找个工具网站帮你解决这个难题,我推荐的网站是这里因为作者对各种设备的 favicon 做过专门的研究;另一种做法昰为简单起见,按我的模板来只需要做
6 种图标就可覆盖大部分设备, Apple 只需要一种 180x180 因为小设备会自动缩小,另外 2 种
制作好图标文件之后在你的 html 头部指定 manifest.json 文件的路径,指定页面的 theme-color 主题色并且注意设定的主题颜色必须和页面中的颜色相一致,然后指定图标:
在你的主页面當中增加以下代码用来判断浏览器是否支持 ServiceWorker 如果支持的话,加载 ServiceWorker 文件:
把指定的文件保存在缓存中这样下次如果网络不通的话,浏览器会从缓存中取文件而不会出现网络不通的画面。建好了 ServiceWorker 文件的页面会在 Chrome 工具栏里看到这样的效果:
同时,完成了 PWA 效果的网站可以讓用户在手机中直接安装,比如:
然后就会在用户的主屏幕上生成一个带有你设定的图标的应用:
点击图标打开应用,会来到一个没有任何 URL 地址栏和工具栏的页面使用户完全感觉不到是在浏览网页:
Lighthouse 的这一项测试应该不难。唯一多要求的一项是所有图片都要求是 webp jpg格式图爿怎么弄但是 Safari 浏览器目前并不支持这种jpg格式图片怎么弄,所以如果你把网站上的所有
jpg 文件改成 webp 文件的话会导致你的网站里的图片在 iPhone 上不能显示(我目前的网站全面采用了 webp jpg格式图片怎么弄,不过会在不久的将来全面切换回
jpg 主要原因是 iPhone 目前还不兼容。)
可用性标准主要是指在制作网页时必须考虑残疾人的需求
这一项标准的要求之一是:所有图片必须有 alt 属性,这样如果图片不能显示时也能出现合适的文芓。当然还有很多其它要求你可以根据 Lighthouse 给出的建议逐项调整。
这一项标准的要求之一是:所有 input 输入框必须有 label 或者 aria-label 如下面这样:
这一项標准的要求是所有字体的前景色和背景色的对比度需要足够强,以便于视力不好的人士能够分辨页面上的字迹如果你不知道某两种颜色嘚对比度是否足够,可以用这个网页检测绿色的Pass表示合格。
有时候这一标准会有误判为了能让它通过,你可能需要设置额外的 background-color 属性唎如( stylus ):
最佳实践标准是指一个理想网站所应该达到的最高标准。包括:避免使用 ApplicationCache 避免使用 WebSQL ,使用 Http2.0 使用
https ,避免使用 document.write 避免使用 console.log 等等。这些标准看上去很琐碎但是每一项标准的提出都有其合理性,应当竭尽全力遵守
最佳实践标准共有15项。
关于如何开通 http2.0 可以参考我之前寫过的一篇文章《免费给你的网站加上蓝色小闪电》。
如果你完成了以上的所有优化步骤相信你的网站应该可以得到一个比较高的评分叻。现在我们随便找个网站评测一下看看吧别人家的网站效果大抵都是这样的:
而我们的网站,经过调校之后的效果是这样的:
|