码迷,mamicode.com
首页 > Web开发 > 详细

web网站性能优化整理

时间:2018-11-12 18:34:18      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:地址   拆分   package   bpa   文本   arc   bundle   数据   baidu   

 

async 和 defer 的区别

  • <script src="a.js" async></script>
  • <script src="a.js" defer></script>
上面 async 和 defer 都是异步加载脚本,虽然两者都是页面解析过程中在后台下载,但是 async 在下载完并且页面还未解析完时将会阻止页面解析,直接执行,这可能导致页面解析时间加长,而 defer 是在页面文档解析后并其下载完成后再加载执行

js 优化:

  • 1、缩小JS代码。
  • 2、使用async和defer 编写脚本。
  • 3、拆分代码以尽可能少地加载 - 并从依赖项中删除未使用的代码。

css 优化:

  • 1、缩小CSS代码。
  • 2、提取关键CSS 并首先获取它
  • // 第一步提取出关键 css(critical.css)和非关键 css(other.css)
  • critical.css + other.css
  • // 第二步将关键 css(critical.css)用内联方式嵌入页面
  • <style>...</style>
  • // 第三步利用预处理在后台加载非关键 css(other.css)
  • <link rel="preload" href="other.css" as="style">
  • // 第四步当 other.css 被缓存完后将 rel 属性的 preload 改成 stylesheet。这使浏览器获取缓存的 CSS 文件并将其应用于文档
  • <link rel="preload" href="other.css" as="style" onload="this.rel = ‘stylesheet‘">

html 优化:

  • 通过网络传输较少数据的第一种方法是缩小。缩小您发送给客户端的HTML文档(以及CSS和JS,如前所述)。
  • 使用 Gzip压缩文本(css,js),图片,字体,视频。和其他二进制文件通常已经被压缩,因此gzipping它们只会使响应时间更长。SVG图像是唯一的例外,因为它们是文本。
  • Gzip有另一种选择 - 一种名为Brotli的压缩算法。
  • Brotli的优势:在相同的CPU负载下,它比Gzip压缩20-30%。这是免费下载的字节数减少30%!
  • Brotli的劣势:它相对较新,并且支持比Gzip更糟糕。因此,您不能轻易地将Gzip替换为Brotli - 您必须同时使用两者来进行压缩才能在不同的浏览器中工作。
注意:使用这些说明启用Gzip将导致服务器动态压缩资源。这会使响应时间略大。在大多数情况下,您不需要关心这一点,但如果您希望获得一流的响应时间,请在构建期间预先压缩资源。
注意:不要将Brotli的压缩级别设置为最大值,因为它会比Gzip慢得多。Brotli的压缩级别4 比Gzip的默认级别更快并且压缩得更好。

什么是CDN?

  • 想象一下,您构建了一个应用程序并将其托管在位于美国的服务器上。如果应用程序的用户在华沙,他们的请求必须一直前往美国并返回波兰。这将花费大量时间,因为: - 请求必须行进很长的距离(其速度受光速限制); - 它还必须通过许多路由器和类似设备(并且每个设备都会增加处理延迟)。
  • 如果请求是检索应用程序数据,并且只有美国的一个服务器知道如何正确地形成它,则可以证明这是合理的。但是,如果用户试图下载图像或视频,这绝对没有必要 - 因为这只是一个可以由任何服务器提供服务的常规静态内容。

预加载资源

  • 指示浏览器提前对服务器的IP地址发出DNS请求。这对于CDN,Google字体以及所有其他情况非常有用,当您知道在短时间内需要资源时,知道它所托管的域,但不知道其确切路径。在这种情况下,提前解析服务器的IP地址可以节省50到300毫秒。
  • <link rel="dns-prefetch" href="//example.com">
  • 指示浏览器提前执行与服务器的连接。在有用的情况下,它在相同的情况下dns-prefetch很有用,但可以建立完整的连接并节省更多时间。这里的缺点是打开新连接是非常耗费资源的,因此您不希望过度使用此优化。
  • <link rel="preconnect" href="https://example.com">
  • 以低优先级预加载和缓存后台资源。这对于为应用程序的下一页预加载JS包非常有用。
  • <link rel="prefetch" href="/style.css" as="style">
  • 在后台预加载具有高优先级的资源。这对于在几秒钟内预加载您需要的资源非常有用 - 例如,非关键的CSS文件。
  • <link rel="preload" href="/style.css" as="style">
  • 在后台预加载指定的页面并将其呈现在不可见的选项卡中。稍后,当访问者点击指向预渲染页面的链接时,页面会立即显示。这是Google用来预加载其第一个搜索结果的内容。
  • <link rel="prerender" href="https://example.com/about">
注意:不要过度使用预取方法。在后台下载内容仍然会消耗访问者的流量 - 这在移动设备上非常糟糕。因此,添加10个额外的预加载可能会使您的应用程序更快一些,但您的访问者将为此付出真正的金钱。每页2-4个预加载可能没问题。

图片介绍及应用--图片在线压缩

  • svg 最适合矢量图像,如图标或徽标。
  • jpg 最适用于照片,因为它可以压缩图像,但人眼无法看到轻微的质量损失。
  • png 最适合您想要显示而没有任何质量损失的光栅图形 - 例如光栅图标或像素艺术。
  • 不幸的是,webp在Chrome浏览器只支持。但是,您仍然可以使用标记加载或回退webp图像
  • webp适用于照片和光栅图形,因为它支持有损和无损压缩。它也比jpg压缩至少20-30%。
  • <picture>
  •   <source srset="img.webp" type="image/webp">
  •   <img src="img.jpg" type="image/jpeg">
  • </picture>
  • gif(并不推荐使用,推荐用视频替代 gif )- 使用视频替换动画GIF

svg压缩

  • 缩小。由于SVG图像是文本,因此可以通过删除注释和空格来缩小它们。
  • 简化路径。如果从图形编辑器自动生成或导出SVG文件,则其中的路径可能过于复杂。如果出现这种情况,请删除不会直观影响任何内容的路径点
  • 简化文件结构。如果通常从图形编辑器导出SVG文件,它还包括额外的元元素。删除那些以使SVG更小。

jpg压缩

  • 压缩级别为70-80的JPG图像与压缩级别为100的JPG图像,质量损失并不明显
  • 要压缩JPG图像,请使用Photoshop或Gimp等图形编辑器,webpack加载器(例如)或其他工具。 image-webpack-loader
imageoptim 图片压缩
如何在 webpack 中优化图像
注意:不要过度使用预取方法。在后台下载内容仍然会消耗访问者的流量 - 这在移动设备上非常糟糕。因此,添加10个额外的预加载可能会使您的应用程序更快一些,但您的访问者将为此付出真正的金钱。每页2-4个预加载可能没问题。

字体优化

  • 字体要在 font-family 后面设置指定备用字体,后备字体可能是一种流行的内置字体(如Georgia); 它可能是一个通用的字体系列(如 serif 或者 sans-serif)
  • 使用 font-display CSS 属性作为自定义字体
  • -  font-display: fallback ,浏览器将立即使用可用字体呈现文本:自定义字体(如果已缓存)或后备字体。如果未缓存自定义字体,浏览器将下载它。如果自定义字体下载得足够快(通常在3秒内),浏览器会将后备字体与自定义字体交换。

    -  font-display: optional。这与后备行为一样,只有浏览器可以根据用户的连接速度决定不使用自定义字体(如果你的3G或更慢的3G,下载自定义字体然后交换将需要永远太晚了,太烦人了)

字体兼容查询
windows 和 mac 常用字体

使用工具优化网站性能

  • 第一个工具是Google PageSpeed Insights。
  • -  PageSpeed Insights 会对您提供的网址进行大量审核。他们分析页面资源,查找优化建议并计算您的绩效分数。如果您只是从网络性能开始,这个工具将最适合您。旨在使 PageSpeed 得分为80或更高。

    -  如果您只是从网络性能开始,这个工具将最适合您。旨在使 PageSpeed 得分为80或更高。

  • 第二个工具是Lighthouse
  • -  Lighthouse 是 PageSpeed 对类固醇的见解。它有几个审计(包括性能,搜索引擎优化和可访问性)。它计算多个指标并输出更多性能建议。

    -  与 PageSpeed Insights(作为独立站点运行)不同,Lighthouse 内置于 Chrome DevTools 中。这意味着即使是非公开访问的应用程序,您也可以使用它!

  • 第三个工具是WebPageTest
  • -  WebPageTest 是一种高级审计工具。它分析网站性能并输出大量数据,如指标,加载瀑布,内容细分等。它在进行复杂优化时很有用。

  • 第四个工具是webpack-bundle-analyzer
  • -  webpack-bundle-analyzer 是一个 webpack 实用程序,可以显示您的包内容。了解捆绑包中的大小以及可以优化的内容非常有用。

文章内容来自https://3perf.com/talks/web-perf-101/

web网站性能优化整理

标签:地址   拆分   package   bpa   文本   arc   bundle   数据   baidu   

原文地址:https://www.cnblogs.com/webBlog-gqs/p/9876663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!