日照网站建设公司告诉你网站的原始指标是什么！

日照网站建设公司告诉你网站的原始指标是什么！

网站性能基本的测试是看渲染页面所需要的资源，包括这些资源的大小和总数。

1.　页面大小

网站页面正变得越来越大。从 2014 年 4 月到 2015 年 4 月，网站页面的平均大小从 1762KB 增长到 2061KB，以每年 17% 的速率增长。而回到 2011 年 4 月，网站页面的平均大小只有不到 769KB ！

虽然页面大小并非影响网站加载速度的因素，但它确实对此影响重大。页面过大还有其他副作用，我们知道越来越多的用户通过移动设备访问网站，而他们要为数据流量付费。你的网站页面越大，用户就将支付越多的费用，尤其是在发展中国家。不然试试访问 What Dose My Site Cost来看看新的图片轮播功能让德国的手机用户花了多少钱。

当你希望缩减页面的大小时，可以从以下几个显而易见的地方开始。

图片占据页面平均大小的 61%。

优化 PNG 图片，并降低 JPEG 图片的质量。

利用新的响应式的 <picture> 标记和 srcset 属性来下载大小合适的图片。

制定一个预算，如果没有移除任何图片，就不增加图片大小。

太多自定义字体很快会使网页变得臃肿。

制定一个字体预算，不考虑增加2种或3种字体。

考虑必要的字体粗细，因为每增加一种粗细变化，都会使字体文件增加几千个字节。

虽然图标字体很不错，但要注意文件大小，因为图标字体会使字体文件迅速变大。如果一个网站只使用字体文件的一部分，其他网站使用另外的部分，那就拆分字体文件。也可以考虑使用内联 SVG 代替图标字体，只加载需要的 SVG 就可以得到很多图标字体了。

JavaScript 框架、jQuery 插件和 CSS 框架常常使页面大小增加很多，却收效甚微。

很多网站都已远离 jQuery，因为 vanilla JS 就可以满足其需求，尤其是网站只针对现代浏览器时。

jQuery 插件虽然可能会提供一些很厉害的功能，却常常使页面大小显著增加。考虑在现代浏览器上使用 CSS 能否达到同样的效果，并在低版本浏览器上合理地回退。

像 Angular 或者 Ember 这样的大型 JavaScript 框架也许能完成你的工作，但生成的网页大小会超出实际工作的需要。如果只需要使用 Angular 的视图层，那么要使用 React 或 Mustache 来替换。

CSS 框架往往是乱七八糟的。它包含可能会用到的所有想象得到的样式。虽然这对于网页快速成型很有帮助，但从现有的几千字节的 CSS 和 JavaScript 出发来构建网站，会让你在开始写一行代码之前就陷入困境。

使用压缩。

JavaScript 可以在构建流程中以编程的方式进行压缩，而且可以在服务器将文件发送到浏览器之前使用 gzip 压缩。这些都是缩减网页大小的关键步骤。

2.　HTTP请求次数

浏览器对页面渲染所需的每个文件都要进行 HTTP 请求。因为每个浏览器对 HTTP 请求的次数有单域名并发限制，所以大量单独的文件意味着浏览器必须进行多轮并发请求。在速度较慢的网络环境中，这么多并发请求会造成很复杂的影响。因此，减少获取所需文件的并发请求次数，效果会很显著。

可以通过如下的方法减少并发请求次数。

减少 HTTP 请求的次数。

不要提供数十个单独的 CSS 文件和 JavaScript 文件，而是把它们合并到一个文件中。

把多个单独的图像文件合并成一个图像映射或者图标字体。有很多不错的工具（例如 Compass 和 Grunt/Gulp 插件）可以帮你自动化地完成这些任务。

延迟加载页面期初加载所不需要的资源。这可能是直到用户与页面交互才需要的 JavaScript 文件，也可能是初始加载窗口之下距离较远的图片。

增加浏览器每次并发请求的资源个数。

分拆你的资源到不同的服务器（或者 CDN），可以使得浏览器单次并发下载更多的资源，因为浏览器的并发请求数量限制是针对单个服务器的。

以上是日照网站建设公司（昊诺网络公司）分享，如果你想了解更多的网站建设知识请关注我们网站的动态！