作家
登录

Web的现状:网页性能提升指南

作者: 来源: 2017-09-19 16:03:43 阅读 我要评论

【沙龙】51CTO诚邀您9月23号和多位技巧大年夜咖一路聊智能CDN的优化之路,抓紧时光哦!


互联网成长异常敏捷,所以我们创造了Web平台。平日 我们会忽视连通性等问题,但用户们却不会熟视无睹 。一瞥万维网的近况,可以发明我们并没有效同情心、变通意识去构建它,更不要说机能了。

所以,今天的Web是什么状况呢?

在这个星球上的74亿攘闼楝只有46%可以上彀。平均收集速度上限为7Mb/s。更重要的是,有93%的互联捕鱼户正在经由过程移动设备进行拜访——若不适配移动设备将引起用户反感。平日情况下,数据比我们假设的更昂贵——可能须要1到13小时才能购买500MB的数据包(德国 vs. 巴西;更有趣的统计数据拜见 Ben Schwarz 的 Beyond the Bubble: The Real World Performance )。

我们的网站也不是完美的——平均网站是 原始Doom游戏的大年夜小 (约3 MB)(请留意,为了统计精确,应应用中位数,浏览 Ilya Grigorik 的 优良“平均页面”是一个神话 ,中档网站大年夜小今朝为1.4MB)。图像可以轻松占用1.7 MB的带宽,而JavaScript平均值也有400KB的体积。这不仅是Web平台的问题,原生应用法度榜样可能更糟,还记得为了获取缺点修复版本,而下载200MB安装包的情景吗?

技恋人员经常会发明本身处于特权状况。跟着最新的高端标记本电脑、手机和快速有线互联网连接,很轻易让我们忘记,这些并不是每小我都有的前提(实际上,真的很少)。

如不雅我们大年夜特权和缺乏同情的角度来构建收集平台,那么将导致排他性的糟糕体验。

推敲到设计和开辟的机能,我们如何才能做得更好?

优化所有资本

懂得浏览器若何分析和处理资本,是明显进步机能的最强大年夜但未充分应用的方法之一。事实证实,浏览器在嗅探资本方面异常出色,同时解析并肯定其优先级。这里是 关键请求 的来源。

Web的近况:网页机能晋升指南

如不雅请求中包含用户视口中出现内容所必须的资本,则该请求至关重要。

对于大年夜多半网站,它将是HTML、须要的CSS、logo、收集字体,也可能是图片。在很多情况下,几十个其他不相干的资本(JavaScript、跟踪代码、告白等)影响了关键请求。荣幸的是,我们可以或许经由过程细心遴选重要资本并调剂优先级来控制这种行动。

经由过程 我们 可以手动强迫调高资本的优先级,确保所需的内容按时出现 。这种技巧可以明显改良“交互时光”指标,大年夜而使最佳的用户体验成为可能。

关键请求对很多仁攀来说,似乎仍然是一个黑匣子,可共享材料的缺乏并不克不及改变近况。荣幸的是, Ben Schwarz

揭橥了关于这个问题的异常周全并平易军人的文┞仿—— 关键请求 。别的,请参阅Addy的文┞仿, 在Chrome中的预加载、预取和优先级(Preload, Prefetch and Priorities in Chrome )。

Web的近况:网页机能晋升指南
[在Chrome开辟人员对象中启用优先级]

要跟踪在请求优先级处理方面的情况,请应用Lighthouse机能对象和 关键请求链审查对象 ,或查看Chrome开辟人员对象中“收集”选项卡下的请求优先级。

  • 通用机能清单
  • 积极地缓存
  • 启悠揭捉?缩
  • 优化关键资本的优先级
  • 应用CDN(Content Delivery Networks)
  • 图片优化

[font-display 属性实践]

在某些情况下,可以经由过程不合的技巧实现类似的结不雅。比如CSS就具有艺术偏向的一系列属性,例如暗影、渐变、动画及外形,许可我们构造恰当风格的DOM元素。

选择精确的格局

如不雅不克不及舍弃图片,肯定哪种格局更合适就很重要了。起重要在矢量和光栅图形之间做出选择:

  • 矢量图形 :分辨率自力,平日体积更小。异常合适logo、icon和R单的图形,包含根本外形(线,多边形,圆和点)。
  • 光栅图形 :出现更具体的信息,比较合适相片。

做出首个决定后,可以选择以下几种格局:JPEG、GIF、PNG–8、PNG–24,或最新的 WEBP 与 JPEG-XR 格局。有了这么多的选项,若何确保我们做出精确的选择?以下是找出最佳格局的根本办法:

  • JPEG :色彩异常丰富的图片(例如照片)
  • PNG–8 :色彩相对单一的图片
  • PNG–24 :局部透明的图片
  • GIF :动图

字塘?鲨塞衬着的——因为浏览器必鼓起首构建 DOM 和 CSSOM;在应用与现有节点相匹配的CSS选择器之前,浏览器并不会下载Web字体。这种行动会明显延迟文本出现,平日会导致前面提到的弗成见文本明灭(FOIT)。在较慢的收集和移动设备上,FOIT会加倍明显。

Photoshop可以经由过程各类设置,例如降低质量、降低噪音或色彩数量来竽暌古化以膳绫强一种格局。确保设计师懂得上述机能实践,并可以或许应用精确的方法优化响应格局的图片。如不雅您想懂得更多若何处理图片,请浏览 Lara Hogan 的好文 Designing for Performance 。

试用新格局

图像格局有几个较新的玩家,即WebP、JPEG 2000 和 JPEG-XR。它们都是由浏览器厂张开辟的:Google 的 WebP,Apple 的 JPEG 2000 和 Microsoft 的 JPEG-XR。

WebP是最受迎接的竞争者,支撑无损和有损紧缩,这使得它异常灵活。 无损的 WebP 比 PNG 小26%,比 JPG 小25-34% 。WebP 有着74%的浏览器支撑,它可以安然地进行降级,最多可节俭1/3的传输字节。JPG 和 PNG 可以在 Photoshop 和其他图像处理应用法度榜样以及敕令行界面( brew install webp )中转换为WebP。

 1/4    1 2 3 4 下一页 尾页

  推荐阅读

  如何将数据可视化技术应用于广告投放?

【沙龙】51CTO诚邀您9月23号和多位技巧大年夜咖一路聊智能CDN的优化之路,抓紧时光哦!不雅试着想象各行星活动的轨迹,你的脑海中会出现什么,是混乱无章的线条照样一张按照经度变更分列的一维线图?这就>>>详细阅读


本文标题:Web的现状:网页性能提升指南

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

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)