优化

GTMetrix

优化的第一步，我们照样先大年夜GTMetrix开端。一般网站常见的问题和建议如下：

CDN

平日情况下，你须要为你的网站开通CDN办事，以确保在地舆地位上离用户比来的办事器可以优先为用户供给办事。供给CDN办事的厂商很多，并且价格并不昂贵，很多云办事商比如阿里云、百度云都有供给这方面的办事。

Enable gzip compression

这一项主如果检查你的nginx办事器是否设置了gzip紧缩传输的方法。打开你的Chrome开辟者对象，检查Network标签琅绫强一个请求的Response header，看一下是否有content-encoding: gzip，如不雅没有，解释你的网站没有设置gzip传输。

有时刻这一标准会有误判，为了能让它经由过程，你可能须要设置额外的background-color属性，例如(stylus)：

解决筹划：参照我的┞封篇文┞仿《我的nginx锅炉片》设置。

Add Expires headers

这一项也是很多网站缺掉的设备，因为没有给jpg图片以及css和js设置合适的过不时光，导致每次拜访网站都须要从新大年夜网站攫取内容，这是很多网站拜访速度慢的原因。设置方法：同样，参照上一节所提到的文┞仿。

解决筹划：参照我的┞封篇文┞仿《我的nginx锅炉片》设置。

很多情况下，或者是出于蒙昧，或者是出于偷懒，工程师们偏向于把一张大年夜图用css方法缩小，例如如许：width: 100px; height: 50px;。导致的结不雅是这张图片在网页上看起来似乎图片缩小了，但实际上文件尺寸并没有变小。这也是很多网站变慢的主因。

结不雅

起首，你的网站必须要有一个manifest.json文件，这个文件琅绫氰述了最根本的一些信息。比如我的网站的manifest.json文件是如许的：

雪碧图

如不雅你的页面中有很多小搁笔的时刻，最糟糕的作法莫过于把它们全部切成小碎的jpg或者png，如许会使你的页面在加载时向办事器端发送很多次http请求，而每一次请求都有自力的建立连接、传输数据、断开连接的过程，异常浪费资本。

解决筹划：如不雅可能的话，把这些搁笔做成自力的搁笔字体文件。如不雅不可，则把它们紧缩成雪碧图。

紧缩js和css

平日情况下，你方才写完的js是下图中左边这种样子的，而平日大年夜公司网站的代码是图中右边如许的。

解决办法：参照我的┞封篇文┞仿《用imgproxy主动缩放图片》设置。

图片大年夜小

左边的代码仁攀类浏览没有什愦问题，然则你不该该把它们就如许在收集中传输。第一，浪费流量;第二，你能读得懂，你的友商也能读得懂，晦气于安然。

解决筹划：你应当把你的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应用(Progressive Web Apps)

头一项标准『渐进式Web应用』，这个标准是Google自家创造的。其目标是为了让网站能在收集不通顺的情况下也能显示根本内容，或者上一次缓存的内容，而不是给出一个难看的『收集不通』的提示，并且可以或许让用户像安装通俗应用一样直接把网页安装在手机上。PWA的最终幻想是可以用网页应用来代替应用，所以今朝并不被Apple支撑。Google官网给出了关于若何实现PWA的具体指南，按照指南进修一步一步就可以构建出你的第一个PWA网页。扶植完成后可以用Lighthouse来测试一下你的网页到底有多相符PWA标准。

渐进式Web应用标准共有11项。

下面重点介绍一下为了矢荷琐网页能知足根本的PWA请求所必须要完成的工作：

manifest.json

关于favicon图片尺寸的选择

因为各类设备各类操作体系各类浏览器的差别，连一个最简单的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种适应通俗浏览器。

　　推荐阅读

　　iOS 11.2将开启免费试用应用功能

不久之后，您将可以或许为App Store上的主动续订订阅供给扣头的入门价格。iOS 11.2惹人了SKProduct（subscriptionPeriod和introductoryPrice）上的新类（SKProductDiscount和SKProductSubscriptionPeri>>>详细阅读

本文标题：如何打造一个全满分网站?

地址：http://www.17bianji.com/lsqh/38586.html

 1/2    1