×

深圳网站建设—APP开发—网站制作—小程序开发_博纳网络公司

0755 -
82538016
82560826
网站制作资讯

深圳网站建设公司详解网站页面大小的原始指标

文章编辑:网站建设 文章来源:深圳网站建设专栏 浏览量:

    深圳网站建设公司详解网站页面大小的原始指标。网站建设公司资深设计师提醒网站性能最基本的测试是看渲染页面所需要的资源,包括这些资源的大小和总数。网站页面正变得越来越大。深圳网站建设公司资深设计师举例说明从 2014 年 4 月到 2015 年 4 月,网站页面的平均大小从 1762KB 增长到 2061KB,以每年 17% 的速率增长。而回到现在,一个高用户体验的商城网站页面的平均大小只有不到 769KB!虽然页面大小并非影响网站加载速度的唯一因素,但它确实对此影响重大。页面过大还有其他副作用,我们知道越来越多的用户通过移动设备访问网站,而他们要为数据流量付费。你的网站页面越大,用户就将支付越多的费用,尤其是在发展中国家。不然试试访问 What Dose My Site Cost(http://whatdoesmysitecost.com/)来看看新的图片轮播功能让德国的手机用户花了多少钱。
    
当你希望缩减页面的大小时,可以从以下几个显而易见的地方开始。
· 图片占据页面平均大小的 61%。
· 优化 PNG 图片,并降低 JPEG 图片的质量。
· 利用新的响应式的 <picture> 标记和 srcset 属性来下载大小合适的图片。
· 制定一个预算,如果没有移除任何图片,就不增加图片大小。
· 太多自定义字体很快会使网页变得臃肿。
· 制定一个字体预算,不考虑增加第二种或第三种字体。
· 考虑必要的字体粗细,因为每增加一种粗细变化,都会使字体文件增加几千个字节。
· 虽然图标字体很不错,但要注意文件大小,因为图标字体会使字体文件迅速变大。如果一个网站只使用字体文件的一部分,其他网站使用另外的部分,那就拆分字体文件。也可以考虑使用内联 SVG 代替图标字体,只加载需要的 SVG 就可以得到很多图标字体了。
· JavaScript 框架、jQuery 插件和 CSS 框架常常使页面大小增加很多,却收效甚微。
· 很多网站都已远离 jQuery,因为 vanilla JS 就可以满足其需求,尤其是网站只针对现代浏览器时。
· jQuery 插件虽然可能会提供一些很厉害的功能,却常常使页面大小显著增加。考虑在现代浏览器上使用 CSS 能否达到同样的效果,并在低版本浏览器上合理地回退。
· 像 Angular 或者 Ember 这样的大型 JavaScript 框架也许能完成你的工作,但生成的网页大小会超出实际工作的需要。如果只需要使用 Angular 的视图层,那么最好使用 React 或 Mustache 来替换。
· CSS 框架往往是乱七八糟的。它包含可能会用到的所有想象得到的样式。虽然这对于网页快速成型很有帮助,但从现有的几千字节的 CSS 和 JavaScript 出发来构建网站,会让你在开始写第一行代码之前就陷入困境。
· 使用压缩。
◎JavaScript 可以在构建流程中以编程的方式进行压缩,而且可以在服务器将文件发送到浏览器之前使用 gzip 压缩。这些都是缩减网页大小的关键步骤。
深圳网站建设公司详解网站页面大小的原始指标之HTTP请求次数
    浏览器对页面渲染所需的每个文件都要进行 HTTP 请求。因为每个浏览器对 HTTP 请求的次数有单域名并发限制,所以大量单独的文件意味着浏览器必须进行多轮并发请求。在速度较慢的网络环境中,这么多并发请求会造成很复杂的影响。因此,减少获取所需文件的并发请求次数,效果会很显著。网站建设公司提醒可以通过如下的方法减少并发请求次数。
· 减少 HTTP 请求的次数。
· 不要提供数十个单独的 CSS 文件和 JavaScript 文件,而是把它们合并到一个文件中。
· 把多个单独的图像文件合并成一个图像映射或者图标字体。有很多不错的工具(例如 Compass 和 Grunt/Gulp 插件)可以帮你自动化地完成这些任务。
· 延迟加载页面最初加载所不需要的资源。这可能是直到用户与页面交互才需要的 JavaScript 文件,也可能是初始加载窗口之下距离较远的图片。
· 增加浏览器每次并发请求的资源个数。
◎分拆你的资源到不同的服务器(或者 CDN),可以使得浏览器单次并发下载更多的资源,因为浏览器的并发请求数量限制是针对单个服务器的。好了,深圳网站建设公司本文关于“深圳网站建设公司详解网站页面大小的原始指标”经验就分享到这里。如果您需要寻找深圳高端网站建设定制服务商,请您联系我们。拨打网站制作联系电话,我们会有专人为您提供免费的设计制作方案。谢谢关注,博纳网络编辑整理。

当前文章链接:/construction/solution/14863.html
如果您觉得案例还不错请帮忙分享:

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【qin@198bona.com 】,我们在确认后,会立即删除,保证您的版权。

相关案例推荐