做为一个全栈互联网工程师,咱们的目标决不只仅知足于功能的实现,并且要包括性能、安全、易用性等等各方面的考量。那么是否有一些能够公开评测的标准,使咱们可以准确地知道目前咱们网站的质量水平在全行业中处于什么样的水平呢?随着技术水平的不断进步,网站评测方面的各类工具也在不断演进。css
工欲善其事,必先利其器。html
想要知道本身网站的质量水平,凭想像和猜想是不行的,必需要有能够客观衡量的工具。前端
最先作这方面尝试的是2012年诞生于Yahoo
的YSlow,可是如今已经逐渐淡出历史舞台。它的名称其实是英文Why Slow
(为何这么慢?)的缩写,从它的名字你应该能知道它是帮助站长解决网页加载速度的工具。YSlow
是一款浏览器插件,能够支持包括Chrome
, Firefox
, Safari
等等主流浏览器。在浏览器上安装相应插件后,就能够对任意网站进行评测,最后给出一个整体评分。评测内容包括网页是否包含了过多的HTTP
请求,JS
和CSS
是否通过压缩,是否采用CDN
等等,主要是提供给站长一个优化的方向和参考建议。android
在YSlow
以后,Google
推出了本身的网页优化建议工具PageSpeed Insights,这是一个网页工具,你不须要像YSlow
同样下载插件和安装,你只须要打开它的网页,输入任何你想测评的网址,就能够获得优化建议了。nginx
我最常使用的工具不是以上两款,而是一个名叫GTmetrix的网站,这个网站结合了以上两个工具,给出了更加完整的建议。git
更强大而严格的工具仍是Google
推出的Lighthouse。这也是一款浏览器插件,不过目前只能用于Google
自家的Chrome
浏览器。它从4个方面对任何网站进行评测,包括性能、易用性、最佳实践。咱们下面将重点介绍如何能在这4个方面都彻底知足Google
的要求。github
优化的第一步,咱们仍是先从GTMetrix
开始。通常网站常见的问题和建议以下:web
一般状况下,你须要为你的网站开通CDN
服务,以确保在地理位置上离用户最近的服务器能够优先为用户提供服务。提供CDN
服务的厂商不少,并且价格并不昂贵,不少云服务商好比阿里云
、百度云
都有提供这方面的服务。chrome
这一项主要是检查你的nginx
服务器是否设置了gzip
压缩传输的方式。打开你的Chrome
开发者工具,检查Network
标签里每个请求的Response header
,看一下是否有content-encoding: gzip
,若是没有,说明你的网站没有设置gzip传输。json
解决方案:参照个人这篇文章《个人nginx锅炉片》设置。
这一项也是不少网站缺失的配置,因为没有给jpg
图片以及css
和js
设置合适的过时时间,致使每次访问网站都须要从新从网站读取内容,这是不少网站访问速度慢的缘由。设置方式:一样,参照上一节所提到的文章。
解决方案:参照个人这篇文章《个人nginx锅炉片》设置。
不少状况下,或者是出于无知,或者是出于偷懒,工程师们倾向于把一张大图用css
方式缩小,例如这样:width: 100px; height: 50px;
。致使的结果是这张图片在网页上看起来彷佛图片缩小了,但实际上文件尺寸并无变小。这也是不少网站变慢的主因。
解决方法:参照个人这篇文章《用imgproxy自动缩放图片》设置。
若是你的页面中有不少小图标的时候,最糟糕的做法莫过于把它们所有切成小碎的jpg
或者png
,这样会使你的页面在加载时向服务器端发送不少次http
请求,而每一次请求都有独立的创建链接、传输数据、断开链接的过程,很是浪费资源。
解决方案:若是可能的话,把这些图标作成独立的图标字体文件。若是不行,则把它们压缩成雪碧图。
一般状况下,你刚刚写完的js
是下图中左边这种样子的,而一般大公司网站的代码是图中右边这样的。
左边的代码人类阅读没有什么问题,可是你不该该把它们就这样在网络中传输。第一,浪费流量;第二,你能读得懂,你的友商也能读得懂,不利于安全。
解决方案:你应该把你的js/css/html进行丑化(uglify)和压缩(minify)。
以上全部这些修改建议听上去都不错,可是我要一个一个作下来太繁琐怎么办?也许你应该考虑用一个现代的框架帮你自动完成这些事情,好比Angular/React/Vue
,或者你本身使用Grunt/Gulp/Webpack
完成全部这些事情。你知道这就是为何前端工程师要学习框架的缘由了吧?由于个人博客网站是全用Jekyll
直接建在Github Pages
上的,使用了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
文件是这样的:
{ "name": "日新亭", "short_name": "日新亭", "description": "苟日新,日日新,又日新", "start_url": "/index.html", "orientation": "any", "icons": [{ "src": "/assets/img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }, { "src": "/assets/img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }], "theme_color": "#000000", "background_color": "#000000", "display": "standalone" }
因为各类设备各类操做系统各类浏览器的差别,连一个最简单的favicon
图片的选择都成了难题,每家厂商有描述各不相同,即便同一家厂商,也在各个不一样的版本有不一样的要求,好比Google Chrome
在37
版本之前要求196x196
,37
版本之后又要求192x192
,而Apple
官网又要求你提供至少4
种尺寸:180x180
, 167x167
, 152x152
, 120x120
,Google TV
要求96x96
, 任务栏要求32x32
,普通浏览器要求16x16
,还不包括Windows
桌面各类大中小型图标的要求。面对如此纷繁复杂的要求,到底应该怎么办呢?一种方法是找个工具网站帮你解决这个难题,我推荐的网站是这里,由于做者对各类设备的favicon
作过专门的研究;另外一种作法是为简单起见,按个人模板来,只须要作6
种图标就可覆盖大部分设备,Apple
只须要一种180x180
,由于小设备会自动缩小,另外2
种512x512
和192x192
是为Google
准备的,还有3
种适应普通浏览器。
制做好图标文件以后,在你的html
头部指定manifest.json
文件的路径,指定页面的theme-color
主题色,而且注意设定的主题颜色必须和页面中的颜色相一致,而后指定图标:
<!-- Favicon --> <link rel="icon" type="image/png" href="/assets/img/icons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/assets/img/icons/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/assets/img/icons/favicon-96x96.png" sizes="96x96"> <!-- Apple Touch Icons --> <link rel="apple-touch-icon" href="/assets/img/icons/apple-touch-icon.png" /> <link rel="manifest" href="/manifest.json"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="{{ site.title }}"> <!-- Android Lolipop Theme Color --> <meta name="theme-color" content="{{ page.color }}">
在你的主页面当中增长如下代码用来判断浏览器是否支持ServiceWorker
,若是支持的话,加载ServiceWorker
文件:
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'); };
而后在根目录下增长一个serviceworker.js
的文件:
var cacheName = 'fengerzh'; var filesToCache = [ '/', '/index.html', '/assets/js/main.js', '/assets/css/main.css', '/assets/img/placeholder.png', '/assets/img/icons/preloader.svg', '/assets/img/icons/read.svg', ]; self.addEventListener('install', function(e) { e.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll(filesToCache); }) ); }); self.addEventListener('activate', function(e) { e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (key !== cacheName) { return caches.delete(key); } })); }) ); return self.clients.claim(); }); self.addEventListener('fetch', function(e) { e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); });
把指定的文件保存在缓存中,这样下次若是网络不通的话,浏览器会从缓存中取文件,而不会出现网络不通的画面。建好了ServiceWorker
文件的页面,会在Chrome
工具栏里看到这样的效果:
同时,完成了PWA
效果的网站,可让用户在手机中直接安装,好比:
而后,就会在用户的主屏幕上生成一个带有你设定的图标的应用:
点击图标打开应用,会来到一个没有任何URL
地址栏和工具栏的页面,使用户彻底感受不到是在浏览网页:
Lighthouse
对性能的要求基本和GTMetrix
差很少,若是你能在GTMetrix
得到高分的话,经过Lighthouse
的这一项测试应该不难。惟一多要求的一项是全部图片都要求是webp
格式,可是Safari
浏览器目前并不支持这种格式,因此若是你把网站上的全部jpg
文件改为webp
文件的话会致使你的网站里的图片在iPhone
上不能显示。(我目前的网站全面采用了webp
格式,不过会在不久的未来全面切换回jpg
,主要缘由是iPhone
目前还不兼容。)
性能标准共有10项。
可用性标准主要是指在制做网页时必须考虑残疾人的需求。
可用性标准共有8项。
这一项标准的要求之一是:全部图片必须有alt
属性,这样若是图片不能显示时,也能出现合适的文字。固然还有不少其它要求,你能够根据Lighthouse
给出的建议逐项调整。
这一项标准的要求之一是:全部input
输入框必须有label
或者aria-label
。以下面这样:
<input type="text" class="search-field" placeholder="搜索" aria-label="搜索">
这一项标准的要求是全部字体的前景色和背景色的对比度须要足够强,以便于视力很差的人士可以分辨页面上的字迹。若是你不知道某两种颜色的对比度是否足够,能够用这个网页检测,绿色的Pass表示合格。
有时候这一标准会有误判,为了能让它经过,你可能须要设置额外的background-color
属性,例如(stylus
):
p margin 0 0 rem(30px) background-color #141414 color darken(lightGray, 20%) font-size rem(17px) line-height rem(26px)
最佳实践标准是指一个理想网站所应该达到的最高标准。包括:避免使用Application Cache
,避免使用WebSQL
,使用Http 2.0
,使用https
,避免使用document.write
,避免使用console.log
等等。这些标准看上去很琐碎,可是每一项标准的提出都有其合理性,应当不遗余力遵照。
最佳实践标准共有15项。
关于如何开通http 2.0
,能够参考我以前写过的一篇文章《免费给你的网站加上蓝色小闪电》。
若是你完成了以上的全部优化步骤,相信你的网站应该能够获得一个比较高的评分了。如今咱们随便找个网站评测一下看看吧,别人家的网站效果大抵都是这样的:
而咱们的网站,通过调校以后的效果是这样的:
是否是颇有成就感呢?
以上全部代码均可以在个人开源博客模板代码库中找到,供你们学习参考,不吝啬的请你们给个星星吧!