做个记录，摘自Front-End Performance Checklist

HTML

  1. Minified HTML: The HTML code is minified, comments, white spaces and new lines are removed from production files.
  2. Remove unnecessary comments:  Ensure that comments are removed from your pages.
  3. Remove unnecessary attributes:  Type attributes like type="text/javascript" or type="text/css" are not required anymore and should be removed.
  4. Place CSS tags always before JavaScript tags:   Ensure that your CSS is always loaded before having JavaScript code.
  5. Minimize the number of iframes:   Use iframes only if you don't have any other technical possibility. Try to avoid as much as you can iframes.

CSS

  1. Minification:  All CSS files are minified, comments, white spaces and new lines are removed from production files.
  2. Concatenation:  CSS files are concatenated in a single file (Not always valid for HTTP/2).（合并css，减少http请求，http2不必）
  3. Non-blocking:  CSS files need to be non-blocking to prevent the DOM from taking time to load.（css必须是非阻塞的）
    How：You need to add the rel attribute with the preload value and add as="style" on the <link> element 
    <link rel="preload" href="a.css" as="style" onload="this.rel='stylesheet'">
    
<noscript><link rel="stylesheet" href="a.css"></noscript>
  4. Length of CSS classes:  The length of your classes can have an (slight) impact on your HTML and CSS files (eventually).
  5. Unused CSS:  Remove unused CSS selectors.
  6. CSS Critical:  The CSS critical (or "above the fold") collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between <style></style> in a single line (minified if possible).
    取出首屏渲染所必须的 critical CSS,以内联的方式写在 <style></style> 之中,然后异步加载剩余的 CSS 样式,这相当于离线加载剩余部分的 CSS 样式,然后在后台将其注入到页面中。
  7. Embedded or inline CSS:  Avoid using embed or inline CSS inside your <body> (Not valid for HTTP/2)
  8. Analyse stylesheets complexity:  Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.
    分析样式表，去除冗余重复的代码

Fonts

  1. Webfont formats:  You are using WOFF2 on your web project or application.
  2. Use preconnect to load your fonts faster:  
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  3. Webfont size:  Webfont sizes don't exceed 300kb (all variants included)
  4. Prevent Flash or Invisible Text:  Avoid transparent text until the Webfont is loaded

Images

  1. Images optimization:  Your images are optimized, compressed without direct impact to the end user.
  2. Images format:  Choose your image format appropriately.
  3. Use vector image vs raster/bitmap:  Prefer using vector image rather than bitmap images (when possible).
    矢量图像(SVG)往往比图像小，SVG的响应速度和比例都很好
  4. Images dimensions:  Set width and height attributes on <img> if the final rendered image size is known.
  5. Avoid using Base64 images:  You could eventually convert tiny images to base64 but it's actually not the best practice.
  6. Lazy loading:  Images are lazyloaded (A noscript fallback is always provided).
  7. Responsive images:  Ensure to serve images that are close to your display size.（srcset和picture了解一下）

JavaScript

  1. JS Minification:  All JavaScript files are minified, comments, white spaces and new lines are removed from production files (still valid if using HTTP/2).
  2. No JavaScript inside:  (Only valid for website) Avoid having multiple JavaScript codes embedded in the middle of your body. Regroup your JavaScript code inside external files or eventually in the <head> or at the end of your page (before </body>).
  3. Non-blocking JavaScript:  JavaScript files are loaded asynchronously using async or deferred using defer attribute.
  4. Optimized and updated JS libraries:  All JavaScript libraries used in your project are necessary (prefer Vanilla JavaScript for simple functionalities), updated to their latest version and don't overwhelm your JavaScript with unnecessary methods.
  5. Check dependencies size limit:  Ensure to use wisely external libraries, most of the time, you can use a lighter library for a same functionality.（比如dayjs替代了momentjs）
  6. JavaScript Profiling:  Check for performance problems in your JavaScript files (and CSS too).

Server

  1. Page weight < 1500 KB (ideally < 500 KB):  Reduce the size of your page + resources as much as you can.
  2. Page load times < 3 seconds:  Reduce as much as possible your page load times to quickly deliver your content to your users.
  3. Time To First Byte < 1.3 seconds:  Reduce as much as you can the time your browser waits before receiving data.
  4. Cookie size:  If you are using cookies be sure each cookie doesn't exceed 4096 bytes（4kb） and your domain name doesn't have more than 20 cookies.
  5. Minimizing HTTP requests:  Always ensure that every file requested are essential for your website or application.
  6. Use a CDN to deliver your assets:  Use a CDN to deliver faster your content over the world.
  7. Serve files from the same protocol:  Avoid having your website using HTTPS and serve files coming from source using HTTP.
  8. Serve reachable files:  Avoid requesting unreachable files (404).
  9. Set HTTP cache headers properly:  Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.
  10. GZIP / Brotli compression is enabled: 

The Front-End Checklist的更多相关文章

  1. Security Checklist （路由器安全checklist）

    Security Checklist Website by     Michael Horowitz  Home | Introduction | Router Bugs | Security Che ...

  2. Java Web项目报错java.lang.NullPointerException at org.apache.jsp.front.index_jsp._jspInit(index_jsp.java:30)

    环境:myeclipse+tomcat6+jdk6 今天搭建了一个Java Web项目,访问index.jsp时报如下错误: 严重: Servlet.service() for servlet jsp ...

  3. Front End Developer Questions 前端开发人员问题（二）CSS 后续

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...

  4. 企业管理咨询Interview Checklist

    企业管理咨询Interview Checklist 一. 企业战略 1. 您对公司所处行业的看法如何? 2. 请您介绍一下公司的发展历程,主要业务开展状况及核心竞争力.关键成功因素有哪些? 3. 在您 ...

  5. I finally made sense of front end build tools. You can, too.

    来源于:https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b#.nvnd2vsd8   ...

  6. H3C汇聚层交换机认证在线人数展示系统之CheckList和燃尽图（16/04/06-16/04/13）

    一.CheckList(核查表) 序号 事件 计划完成时间 实际完成时间 未延迟 未完成 完成 1 登录口令加密以及解密 16/04/06   16/04/06 Y     2 表的创建和IP以及口令 ...

  7. [front]有效开展一个前端项目

    今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...

  8. [software development] 需求分析checklist

    [software development] 需求分析checklist // */ // ]]>   [software development] 需求分析checklist Table of ...

  9. Queue的push和front操作

    #include <queue> #include <cstdlib> using namespace std; int main(){ queue<int> qu ...

  10. 自己动手做Web框架—MVC+Front Controller

    在我前面一篇博文<逃脱Asp.Net MVC框架的枷锁,使用Razor视图引擎>发表之后,很多人关心,脱离了之后怎么办?那么这可以说是它的续篇了. 同时,这也是eLiteWeb开源软件的一 ...

随机推荐

  1. cmd重启服务器，有时不想去机房，并且远程桌面连接登录不上了

    有时不想去机房,并且远程桌面连接登录不上了,需要远程重启服务器的,这时可以使用命令行方式远程重启.在cmd命令行状态下输入:shutdown -r -m \\192.168.1.10 -t 0 -f ...

  2. no-siteapp 和 no-transform

    简单的说,是禁止转码 . 举个通俗的例子. 你建了一栋房子(网站),百度说我给你做个大门,但是大门上要有我的广告 你不愿意,就建立了一条路叫no-transform 别人去你家走这条路就行了 后来百度 ...

  3. jQuery常用操作

    jQuery jQuery是一个轻量级的JS库,是一个被封装好的JS文件,提供了更为简便的元素操作方式,jQuery封装了DOM. 使用jQuery 引入jQuery文件 <scrtipt sr ...

  4. 左连接LEFT JOIN 连接自己时的查询结果测试

    #左连接LEFT JOIN 连接自己时的查询结果测试 #左连接LEFT JOIN 连接自己时的查询结果(都会出现两个重复字段),两个表都有as后只能查询相等条件merchant_shop_id非nul ...

  5. Python入门之面向对象的多态和继承

    本章内容 Python面向对象的多态和继承对比 ========================================= 在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的 ...

  6. html模板生成静态页面及模板分页处理

    它只让你修改页面的某一部分,当然这"某一部分"是由你来确定的.美工先做好一个页面,然后我们把这个页面当作模板(要注意的是这个模板就没必要使用EditRegion3这样的代码了,这种 ...

  7. Python3基础 list 使用for循环 删除列表中的重复项

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. GNU C 中零长度的数组【转】

    原文链接:http://www.cnblogs.com/dolphin0520/p/3752492.html 在标准C和C++中,长度为0的数组是被禁止使用的.不过在GNU C中,存在一个非常奇怪的用 ...

  9. 写一个标准宏MIN，输入两个参数，返回较小的

    #define MIN(A,B) ((A) <= (B) ? (A) : (B))MIN(*p++, b)会产生宏的副作用 剖析: 这个面试题主要考查面试者对宏定义的使用,宏定义可以实现类似于函 ...

  10. DDMS files not found

    在eclipse中启动新建的android项目的时候,控制台提示如图: 方法1.cmd中adb kill-server,然后adb -startserver 方法2.方法1不管用,那么在任务管理器中杀 ...