The Front-End Checklist

時間  2019-11-09
標籤 end checklist 简体版
原文   原文鏈接

作個記錄，摘自Front-End Performance Checklist 

HTML

  1. Minified HTML:medium The HTML code is minified, comments, white spaces and new lines are removed from production files. 
  2. Remove unnecessary comments: low Ensure that comments are removed from your pages.
  3. Remove unnecessary attributes: low 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: high  Ensure that your CSS is always loaded before having JavaScript code.
  5. Minimize the number of iframes: high  Use iframes only if you don't have any other technical possibility. Try to avoid as much as you can iframes.

CSS

  1. Minification: high All CSS files are minified, comments, white spaces and new lines are removed from production files.
  2. Concatenation: medium CSS files are concatenated in a single file (Not always valid for HTTP/2).（合併css，減小http請求，http2沒必要）
  3. Non-blocking: high 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: low The length of your classes can have an (slight) impact on your HTML and CSS files (eventually).
  5. Unused CSS: medium Remove unused CSS selectors.
  6. CSS Critical: high 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: high Avoid using embed or inline CSS inside your <body> (Not valid for HTTP/2)
  8. Analyse stylesheets complexity: high Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.
    分析樣式表，去除冗餘重複的代碼

Fonts

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

Images

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

JavaScript

  1. JS Minification: high 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: medium (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: high JavaScript files are loaded asynchronously using async or deferred using defer attribute.
  4. Optimized and updated JS libraries: medium 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: low 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: medium Check for performance problems in your JavaScript files (and CSS too).

Server

  1. Page weight < 1500 KB (ideally < 500 KB): high Reduce the size of your page + resources as much as you can.
  2. Page load times < 3 seconds: high 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: high Reduce as much as you can the time your browser waits before receiving data.
  4. Cookie size: medium 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: high Always ensure that every file requested are essential for your website or application.
  6. Use a CDN to deliver your assets: medium Use a CDN to deliver faster your content over the world.
  7. Serve files from the same protocol: high Avoid having your website using HTTPS and serve files coming from source using HTTP.
  8. Serve reachable files: high Avoid requesting unreachable files (404).
  9. Set HTTP cache headers properly: high Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.
  10. GZIP / Brotli compression is enabled: high
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程