critical-path-css-tools, 对 above 进行优先级排序的工具折叠( 关键路径) CSS

分享于 

5分钟阅读

GitHub

  繁體 雙語
Tools to prioritize above-the-fold (critical-path) CSS
  • 源代码名称:critical-path-css-tools
  • 源代码网址:http://www.github.com/addyosmani/critical-path-css-tools
  • critical-path-css-tools源代码文档
  • critical-path-css-tools源代码下载
  • Git URL:
    git://www.github.com/addyosmani/critical-path-css-tools.git
    Git Clone代码到本地:
    git clone http://www.github.com/addyosmani/critical-path-css-tools
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/addyosmani/critical-path-css-tools
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    关键路径( Above-the-fold ) CSS工具 Awesome

    帮助 上面-the-fold CSS优先级的工具

    优先设置上面-the-fold内容优先级。

    为了获得最佳的性能,PageSpeed建议将页面的关键( 上面-the-fold ) CSS直接嵌入到HTML中。 这消除了额外的往返,并允许浏览器将上面的折叠体验绘制到用户的屏幕上。 主要的想法是:

    • 确定页面的上面-the-fold样式,并将它们写在头的<style> 标记之间。
    • 在页脚中加载所有其他样式表,理想情况下是异步的。

    以下是帮助生成。inline 和报告关键路径CSS的工具列表。

    node-模块

    服务器端模块

    任务

    PhantomJS

    • dr-css-inliner - PhantomJS脚本在页面上的inline 上面-the-fold CSS。

    inline 源( 样式,脚本)

    异步加载 CSS

    在内联关键路径CSS之后,应该使用异步加载来获取网站的它的余样式。

    注意:卫报目前还将它们的全局样式缓存到localStorage中,以便。 更多信息在这个评论

    在线工具

    书签/扩展

    渲染块问题检测

    辅助工具


    tool  FOLD  路径  
    相关文章