Web加载速度优化清单

网页加载速度是衡量一个网页好坏的重要标准,网页遗弃率随网页加载时间的增加而增加。据说近一半的用户希望网页加载时间不超过2s,超过3s一般就放弃该网页。时间就是生命,干等着,谁愿意平白无故地+1s呀,所以今天来整理下具体如何加快网页

HTML

  • 压缩 HTML: HTML代码压缩,将注释、空格和新行从生产文件中删除。

    为什么:

    删除所有不必要的空格、注释和中断行将减少HTML的大小,加快网站的页面加载时间,并显著减少用户的下载时间。

    怎么做:

    大多数框架都有插件用来压缩网页的体积。你可以使用一组可以自动完成工作的NPM模块。

    • HTML minifier | Minify Code
    • Experimenting with HTML minifier — Perfection Kills
  • 删除不必要的注释: 确保从您的网页中删除注释。

    为什么:

    注释对用户来说是没有用的,应该从生产环境文件中删除。可能需要保留注释的一种情况是:保留远端代码库(keep the origin for a library)。

    怎么做:

    大多数情况下,可以使用HTML minify插件删除注释。

  • remove-html-comments - npm
  • 删除不必要的属性:type="text/javascript" or type="text/css" 这样的属性应该被移除。

    
    
    
    
    
    

    为什么

    类型属性不是必需的,因为HTML5把text/css和text/javascript作为默认值。没用的代码应在网站或应用程序中删除,因为它们会使网页体积增大。

    怎么做:

    ⁃ 确保所有link和script标记都没有任何type属性。

    • The Script Tag | CSS-Tricks
  • 在JavaScript引用之前引用CSS标记: 确保在使用JavaScript代码之前加载CSS。

    为什么:

    在引用JavaScript之前引用CSS可以实现更好地并行下载,从而加快浏览器的渲染速度。

    怎么做:

    确保 head 中的 link 和 style 始终位于 script 之前。

  • 最小化iframe的数量: 仅在没有任何其他技术可行性时才使用iframe。尽量避免使用iframe。

  • DNS预取: 一次 DNS 查询时间大概在60-120ms之间或者更长,提前解析网页中可能的网络连接域名

     
    

CSS

  • 压缩: 所有CSS文件都需要被压缩,从生产文件中删除注释,空格和空行。

    为什么:

    缩小CSS文件后,内容加载速度更快,并且将更少的数据发送到客户端,所以在生产中缩小CSS文件是非常重要,这对用户是有益的,就像任何企业想要降低带宽成本和降低资源。

    怎么做:

    使用工具在构建或部署之前自动压缩文件。

    • cssnano: 基于PostCSS生态系统的模块化压缩工具。
    • @neutrinojs/style-minify - npm
  • Concatenation: CSS文件合并(对于HTTP/2效果不是很大)。

    
    
    
    
    
    
    
    

    为什么:

    如果你还在使用HTTP/1,那么你就需要合并你的文件。不过在使用HTTP/2的情况下不用这样(效果待测试)。

    怎么做:

    在构建或部署之前使用在线工具或者其他插件来合并文件。
    当然,要确保合并文件后项目可以正常运行。

    • HTTP: 优化应用程序交付 - 高性能浏览器网络 (O'Reilly)
    • HTTP/2时代的性能最佳实践
  • 非阻塞: CSS文件需要非阻塞引入,以防止DOM花费更多时间才能渲染完成。

    
    
    

    为什么:

    CSS文件可以阻止页面加载并延迟页面呈现。使用preload实际上可以在浏览器开始显示页面内容之前加载CSS文件。

    怎么做:

    需要添加rel属性并赋值preload,并在元素上添加as=“style”

    • loadCSS by filament group
    • 使用loadCSS预加载CSS的示例
    • 使用rel =“preload”预加载内容
    • Preload: What Is It Good For? — Smashing Magazine
  • CSS类(class)的长度: class的长度会对HTML和CSS文件产生(轻微)影响。

    为什么:

    甚至性能影响也是有争议的,项目的命名策略会对样式表的可维护性有重大影响。如果使用BEM,在某些情况下可能会写出比所需要的类名更长的字符。重要的是要明智的选择名字和命名空间。

    怎么做:

    可能有些人更关注类名的长度,但是网站按组件进行划分的话可以帮助减少类名的数量和长度。

    • long vs short class · jsPerf
  • 不用的CSS: 删除未使用的CSS选择器。

    为什么:

    删除未使用的CSS选择器可以减小文件的大小,提高资源的加载速度。

    怎么做:

    ⚠️ 检查要使用的CSS框架是否已包含reset/normalize代码,可能不需要用到reset/normalize文件中的内容。

    • UnCSS Online
    • PurifyCSS
    • PurgeCSS
    • Chrome DevTools Coverage

JavaScript

  • JS 压缩: 所有JavaScript文件都要被压缩,生产环境中删除注释、空格和空行(在HTTP/2仍然有效果)。

    为什么:

    删除所有不必要的空格、注释和空行将减少JavaScript文件的大小,并加快网站的页面加载时间,提升用户体验。

    怎么做:

    建议使用下面的工具在构建或部署之前自动缩小文件。

    • uglify-js - npm
    • Short read: How is HTTP/2 different? Should we still minify and concatenate?
  • 非阻塞JavaScript: 使用defer属性或使用async来异步加载JavaScript文件。

    
    
                        
                        

你可能感兴趣的:(Web加载速度优化清单)