Skip to content

Latest commit

 

History

History
56 lines (55 loc) · 2.57 KB

CRP-OPTIMIZATION-TODOLIST.md

File metadata and controls

56 lines (55 loc) · 2.57 KB

Critical Rendering Path Optimization Tasking

  • 环境配置
    • 配置 grunt
    • 配置 grunt-pagespeed
    • 配置 ngrok
    • 添加 npm scripts - psi, psi:watch, build, build:watch
  • Minification
    • HTML
      • basic minification - htmlmin html-minifier
      • JS 代码中的注释没移除 - minifyJS: true
      • JS 代码还有换行和空格 - minifyJS: true
    • CSS
      • basic minification - cssmin
      • dist/pizza/css/main.min.css 还有注释 - 420 / (420 + 9857) = 4%，不是很多，不搞了
    • JavaScript
  • Uglification
    • JavaScript - 只有一些函数名没有 uglify，不过比率非常小，估计不到0.01%。故忽略不计。
  • Compress
    • GZip HTML
    • GZip CSS
    • GZip JavaScript
    • Images
      • 自动化 - 在 img 标签中指定了 100px 的图片，自动压缩成这个比例
  • Combine critical resource
    • CSS - bootstrap.css + style.css -> main.min.css
    • JavaScript
  • Defer and asynchronously load non-critical resource
    • CSS
      • 将 render blocking CSS 放在页面底端
    • JavaScript
  • Cache - hard or impossible to modify Github Pages server
    • HTML
    • CSS
    • JavaScript
    • Images
  • Inline critical and small resources
    • JavaScript
    • CSS
      • organize entries
  • Others
    • Optimize online images
    • Optimize online fonts
    • Optimize css import
    • Refactor all duplicate configuration?
      • Can they auto scan new components with a new folder and similar structure? - yes most of them, while some cannot:
        • concat task: not able to auto-scan components as now components are hard-coded
        • imagemagick-resize task: images path can only be hardcoded as they need unique size while resizing
        • critical task: hardcoded due to lack of support of the plugin
      • Can they auto scan files? - yes, as long as they're following project naming/structure conventions like:
        • js files: make sure they are categorized and placed under vendor/ or bundle/ directory
        • css files: make sure they are categorized and placed under different directories like main/ or print/
        • html files: make sure they are placed under the component directory root
        • images: make sure they are placed under images/ folder under the component directory root
        • components: make sure they have their own directory under src, like index/ and pizza/
      • Support component based build & watch? - not necessary at the moment