The Front-End Checklist
做个记录,摘自Front-End Performance Checklist
HTML
- Minified HTML: The HTML code is minified, comments, white spaces and new lines are removed from production files.
- Remove unnecessary comments: Ensure that comments are removed from your pages.
- Remove unnecessary attributes: Type attributes like
type="text/javascript"
ortype="text/css"
are not required anymore and should be removed. - Place CSS tags always before JavaScript tags: Ensure that your CSS is always loaded before having JavaScript code.
- 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
- Minification: All CSS files are minified, comments, white spaces and new lines are removed from production files.
- Concatenation: CSS files are concatenated in a single file (Not always valid for HTTP/2).(合并css,减少http请求,http2不必)
- Non-blocking: CSS files need to be non-blocking to prevent the DOM from taking time to load.(css必须是非阻塞的)
How:You need to add therel
attribute with thepreload
value and addas="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>
- Length of CSS classes: The length of your classes can have an (slight) impact on your HTML and CSS files (eventually).
- Unused CSS: Remove unused CSS selectors.
- 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 样式,然后在后台将其注入到页面中。 - Embedded or inline CSS: Avoid using embed or inline CSS inside your
<body>
(Not valid for HTTP/2) - Analyse stylesheets complexity: Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.
分析样式表,去除冗余重复的代码
Fonts
- Webfont formats: You are using WOFF2 on your web project or application.
- Use
preconnect
to load your fonts faster:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- Webfont size: Webfont sizes don't exceed 300kb (all variants included)
- Prevent Flash or Invisible Text: Avoid transparent text until the Webfont is loaded
Images
- Images optimization: Your images are optimized, compressed without direct impact to the end user.
- Images format: Choose your image format appropriately.
- Use vector image vs raster/bitmap: Prefer using vector image rather than bitmap images (when possible).
矢量图像(SVG)往往比图像小,SVG的响应速度和比例都很好 - Images dimensions: Set
width
andheight
attributes on<img>
if the final rendered image size is known. - Avoid using Base64 images: You could eventually convert tiny images to base64 but it's actually not the best practice.
- Lazy loading: Images are lazyloaded (A noscript fallback is always provided).
- Responsive images: Ensure to serve images that are close to your display size.(
srcset和
picture了解一下
)
JavaScript
- JS Minification: All JavaScript files are minified, comments, white spaces and new lines are removed from production files (still valid if using HTTP/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>
). - Non-blocking JavaScript: JavaScript files are loaded asynchronously using
async
or deferred usingdefer
attribute. - 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.
- 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)
- JavaScript Profiling: Check for performance problems in your JavaScript files (and CSS too).
Server
- Page weight < 1500 KB (ideally < 500 KB): Reduce the size of your page + resources as much as you can.
- Page load times < 3 seconds: Reduce as much as possible your page load times to quickly deliver your content to your users.
- Time To First Byte < 1.3 seconds: Reduce as much as you can the time your browser waits before receiving data.
- 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.
- Minimizing HTTP requests: Always ensure that every file requested are essential for your website or application.
- Use a CDN to deliver your assets: Use a CDN to deliver faster your content over the world.
- Serve files from the same protocol: Avoid having your website using HTTPS and serve files coming from source using HTTP.
- Serve reachable files: Avoid requesting unreachable files (404).
- Set HTTP cache headers properly: Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.
- GZIP / Brotli compression is enabled: