前端清单

在将网站发布到生产环境前需要做的所有检查

github

目录

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Security
  8. Performance
  9. Accessibility
  10. SEO

使用方法

大多数项目都需要检查表中的所有项目， 但是一些元素可以省略或者不是必须的（例如，对于Web管理系统，可能不需要RSS提要）。 我们选择使用3个级别的灵活性：

  • Low 意味着项目是 推荐，但在某些特定情况下可以省略。
  • Medium 意味着该项目强烈推荐，并且在某些特定情况下最终可以省略。 一些元素，如果省略，可能会在性能或搜索引擎优化方面造成不好的影响。
  • High 意味着该项目不能被任何原因省略。 您可能会在您的网页中导致功能障碍，或者有无障碍或SEO问题。 测试优先级需要首先在这些元素上。

有些资源拥有一个表情符号，可以帮助您了解在清单中可以找到哪种类型的内容/帮助：

  • 📖: 文件或文章
  • 🛠: 在线工具/测试工具
  • 📹: 媒体或视频内容

Notes: Head 清单 介绍了所有可以在 head 中出现的元素

Meta 标签

  • Doctype: High Doctype 是 HTML5，位于所有HTML页面的顶部。
<!-- Doctype HTML5 -->
<!doctype html>

以下 3 个 meta 标签 (Charset, X-UA Compatible and Viewport) 需要在 head 中优先声明.

  • Charset: High 字符集（UTF-8）被正确地声明.
<!-- Set character encoding for the document -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium X-UA-Compatible meta 标签.
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
  • Viewport: High viewport 视口被正确声明.
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Title: High 所有页面上都要使用标题 (SEO: Google计算标题中使用的字符的像素宽度，在472和482像素之间切断。 平均字符数限制约为55个字符).
<!-- Document Title -->
<title>Page Title less than 55 characters</title>
  • Description: High 提供 description，它是唯一的，不超过150个字符.
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
  • Favicons: Medium 每个 favicon 都应该被正确的创建和显示. 如果只有一个favicon.ico, 最好将它放在站点的根目录. 通常不需要多余的标记. 然而, 最好像下边的示例一样引用. 现在, 更推荐 PNG 格式 相比 .ico 格式 (尺寸: 32x32px).
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
  • Apple Touch Icon: Low 设置 Apple touch favicon apple-mobile-web-app-capable (创建至少200x200px尺寸的苹果图标文件，以支持您可能需要的所有尺寸).
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
  • Windows Tiles:Low 预设并引用 Windows tiles.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

browserconfig.xml文件所需的最小xml标记如下所示：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>
  • Canonical: Medium 使用 rel="canonical" 避免重复的内容.
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML tags

  • Language attribute: High 网站的 lang 属性是指定的，并与当前页面的语言相关.
<html lang="en">
  • Direction attribute: Medium 在html标签上指定内容的方向，默认从左到右 (它可以在另一个HTML标签上使用).
<html dir="rtl">
  • Alternate language: Low 您网站的语言标签是指定的，并与当前页面的语言有关
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • Conditional comments: Low 需要时设置针对IE的条件注释.

  • RSS feed: Low 如果你的项目是博客 或者有文章，可能需要提供rss链接.

  • Inline critical CSS: Medium 在页面加载期间可见的内容区域 (“高于折叠内容”) 需要的样式叫做 “危急 CSS”. 它应当嵌入到<style></style> 中的一行 (压缩)，并放在主要 CSS调用前.

  • CSS order: High 所有的css放在 <head>中并在JavaScript文件加载前. (除了有时JS文件异步加载在页面顶部的情况).

Social meta

Facebook OG 和 Twitter Cards , 对于任何网站，强烈推荐。其他社交媒体标签可以考虑，如果你针对特定的存在，并希望确保显示.

  • Facebook Open Graph: Low 所有 Facebook Open Graph (OG) 文件经过测试确保没有 缺失和错误. Images 至少需要 600 x 315 像素, 推荐 1200 x 630 像素 .

Notes: 使用 og:image:width 和 og:image:height 将为爬虫指定图像尺寸，以便它可以立即渲染图像，而不必异步下载和处理它。

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

  • Twitter Card: Low

  • Twitter Card: Low

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ back to top

HTML

最佳实践

  • HTML5 Semantic Elements: High 恰当地使用HTML5语义元素 (header, section, footer, main…).

  • Error pages: High 错误404页面和5xx存在。 请记住，5xx错误页面需要集成CSS（在当前服务器上不需要外部调用）.

  • Noopener: Medium 如果你正在使用target =“_ blank”的外部链接，你的链接应该有rel =“noopener”属性来防止制表签名。 如果你需要支持旧版本的Firefox，可以使用rel =“noopener noreferrer”。

  • Clean up comments: Low 在将页面发布到生产之前，需要删除不必要的代码。

HTML testing

  • W3C compliant: High 所有页面都需要使用W3C验证器进行测试，以确定HTML代码中可能存在的问题.
  • HTML Lint: High 我使用工具来帮助我分析我的HTML代码中可能遇到的任何问题。
  • Link checker: High 在我的页面中没有断开的链接，请确认您没有任何404错误。
  • Adblockers test: Medium 您的网站在启用adblockers的情况下正确显示您的内容（您可以提供一条消息，鼓励用户禁用他们的adblocker）

⬆ back to top

Webfonts

Notes: 使用网页字体可能会导致未样式化文本闪烁 /不可见文本闪烁 - 考虑使用备用字体和/或利用网页加载器来控制行为。

  • Webfont format: High WOFF, WOFF2 和 TTF 被所有现代浏览器支持.

  • Webfont size: High Webfont 大小不要超出 2 MB (包括所有变体).

  • Webfont loader: Low 使用webfont加载器控制加载行为

⬆ back to top

CSS

Notes: 看看大多数前端开发人员使用的 CSS指南 and Sass指南。 如果您对CSS属性有疑问， 你可以访问[CSS Reference]（http://cssreference.io/）。 还有一个简短的[代码指南]（http://codeguide.co/）的一致性。

  • Responsive Web Design: High 网站正在使用响应式网页设计。
  • CSS Print: Medium 提供了一个打印样式表，并且在每个页面上都是正确的。
  • Preprocessors: Low 你的页面正在使用CSS预处理器（[Sass]（http://sass-lang.com/）是首选）。
  • Unique ID: High 如果使用ID，则它们对页面是唯一的。
  • Reset CSS: High CSS重置（reset, normalize 或 reboot）被使用并且是最新的。 *（如果您使用的是像Bootstrap或Foundation这样的CSS框架，则已经包含了Normalize。）
  • JS prefix: Low 所有的类（或在JavaScript文件中使用的id）都以 ** js- ** 开头，而不是放入CSS文件中。
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • Embedded or inline CSS: High 避免将CSS嵌入到<style>标记或使用内联CSS：只用于有效的原因（例如滑块，关键CSS的背景图像）。
  • Vendor prefixes: High CSS供应商前缀被使用，并与您的浏览器支持兼容性相应生成。

Performance

  • Concatenation: High CSS文件被连接在一个文件中 (Not for HTTP/2).
  • Minification: High 所有的CSS文件都被缩小了。
  • Non-blocking: Medium CSS文件需要是非阻塞的，以防止DOM花时间加载。
  • Unused CSS: Low 移除未使用的css.

CSS testing

  • Stylelint: High 所有的CSS或SCSS文件没有任何错误。

  • Responsive web design: High 所有页面都在以下断点进行了测试：320px，768px，1024px（根据您的分析可以更多/不同）。

  • CSS Validator: Medium CSS进行了测试，并纠正了相关的错误。

  • Desktop Browsers: High 所有页面都在当前所有桌面浏览器上进行了测试 (Safari, Firefox, Chrome, Internet Explorer, EDGE…).
  • Mobile Browsers: High 所有页面都在当前所有移动浏览器上进行测试(Native browser, Chrome, Safari…).

  • OS: High 所有页面都在当前所有操作系统上进行了测试 (Windows, Android, iOS, Mac…).

  • Pixel perfect: High 页面接近像素完美。 根据广告素材的质量，您可能不是100％准确的，但您的页面需要接近您的模板。

Pixel Perfect - Chrome Extension

  • Reading direction: High 如果需要支持,所有页面则需要测试LTR和RTL语言。

⬆ back to top

Images

Notes: 要全面了解图像优化，请查看免费电子书 Essential Image Optimization 。

Best practices

  • Optimization: High 所有图像都经过优化，在浏览器中呈现。 WebP格式可用于关键页面（如主页）。
  • 🛠 Imagemin
  • 🛠 使用 ImageOptim 压缩图片
  • 🛠 使用 Kraken.io 对于png和jpg优化都非常棒的选择。 免费计划每个文件最多1mb。
  • Picture/Srcset: Medium 您可以使用picture / srcset为用户的当前视口提供最合适的图像。
  • Retina: Low 提供布局图像2x或3x，支持视网膜显示。
  • Sprite: Medium 小图像在一个精灵文件中（在图标的情况下，它们可以在一个SVG精灵图像中）。
  • Width and Height: High 如果最终的渲染图像大小是已知的（CSS大小可以省略），在<img>上设置width和height属性。
  • Alternative text: High 所有<img>都有一个替代文字，可以直观地描述图像。
  • Lazy loading: Medium 图像都是懒加载的 (通常还需要 noscript 方案).

⬆ back to top

JavaScript

Best practices

  • JavaScript Inline: High 你没有任何内嵌的JavaScript代码（与你的HTML代码混合在一起）。
  • Concatenation: High JavaScript文件被连接在一起。
  • Minification: High JavaScript文件被缩小（您可以添加.min后缀）。
  • JavaScript security: High
  • Non-blocking: Medium JavaScript文件使用async异步加载，或者使用defer属性延迟加载。
  • Modernizr: Low 如果您需要定位一些特定的功能，您可以使用自定义的Modernizr在您的<html>标签中添加类。

JavaScript testing

  • ESLint: High 没有错误被ESLint标记（根据您的配置或标准规则）。

⬆ back to top

Security

扫描并检查您的网站

Best practices

  • HTTPS: Medium HTTPS用于每个页面和所有外部内容（插件，图像…）。
  • HTTP Strict Transport Security (HSTS): Medium HTTP头设置为“Strict-Transport-Security”。
  • Cross Site Request Forgery (CSRF): High 确保向您的服务器端发出的请求是合法的，并从您的网站/应用程序发起，以防止CSRF攻击。
  • Cross Site Scripting (XSS): High 您的页面或网站没有XSS可能的问题。
  • Content Type Options Medium 防止Google Chrome浏览器和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中剔除。
  • X-Frame-Options (XFO) Medium 保护您的访问者免受点击劫持攻击。
  • Content Security Policy Medium 定义如何在您的网站上加载内容，以及从哪里加载内容。 也可以用来防止点击劫持攻击。

⬆ back to top

Performance

Best practices

  • Page weight: High 每个页面的大小在0到500 KB之间。

  • Minified HTML: Medium 您的HTML被压缩。

  • Lazy loading: Medium 图片，脚本和CSS需要被延迟加载，以提高当前页面的响应时间（详见各自的章节）。

  • Cookie size: Medium 如果您使用Cookie，请确保每个Cookie不超过4096个字节，而您的域名没有超过20个Cookie。

  • Third party components: Medium 依赖于外部JS（如共享按钮）的第三方iframe或组件将尽可能地由静态组件替换，从而限制对外部API的调用并保持用户活动的私密性。

准备即将到来的请求

  • DNS resolution: Low 可能需要的第三方服务的DNS在空闲时间使用dns-prefetch事先解决。
<link rel="dns-prefetch" href="https://example.com">
  • Preconnection: Low DNS查询，TCP握手和TLS协商以及即将需要的服务在空闲时间使用preconnect预先完成。
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low 使用prefetch，在空闲时间提前请求资源（例如延迟加载的图像）。
<link rel="prefetch" href="image.png">
  • Preloading: Low 当前页面需要的资源（例如脚本放在<body>末尾）预先使用preload。
<link rel="preload" href="app.js">

Performance testing

  • Google PageSpeed: High 所有的网页都进行了测试（不仅是首页），并且得分至少为90/100。

⬆ back to top

Accessibility

Notes: 您可以观看播放列表 A11ycasts with Rob Dodson 📹

Best practices

  • Progressive enhancement: Medium 主导航和搜索等主要功能应该在没有启用JavaScript的情况下运行。
  • Color contrast: Medium 色彩对比至少应通过WCAG AA（移动AAA）。

Headings

  • H1: High 所有页面都有一个不是网站标题的H1。
  • Headings: High 标题应按照正确的顺序正确使用（H1到H6）。

Landmarks

  • Role banner: High <header> has role="banner".
  • Role navigation: High <nav> has role="navigation".
  • Role main: High <main> has role="main".

Semantics

  • Specific HTML5 input types are used: Medium 这对于显示不同类型的自定义键盘和小部件的移动设备尤其重要。

Form

  • Label: High 标签与每个输入表单元素相关联。 如果标签不能显示，请使用aria-label。

Accessibility testing

  • Accessibility standards testing: High 使用WAVE工具来测试您的页面是否遵守可访问性标准。
  • Keyboard navigation: High 只使用您的键盘以预先确定的顺序测试您的网站。 所有交互元素都可以访问和使用。
  • Screen-reader: Medium 所有页面都通过屏幕阅读器（VoiceOver，ChromeVox，NVDA或Lynx）进行测试。
  • Focus style: High 如果焦点被禁用，则在CSS中被替换为可见状态。

⬆ back to top

SEO

  • Google Analytics: High Google Analytics已安装并正确配置。
  • Headings logic: Medium 标题文字有助于了解当前页面中的内容。
  • sitemap.xml: High sitemap.xml存在并已提交到Google Search Console（以前的Google网站管理员工具）。
  • robots.txt: High robots.txt不会阻止网页。
  • Structured Data: High Pages using structured data are tested and are without errors. Structured data helps crawlers understand the content in the current page.
  • Sitemap HTML: Medium 提供了HTML sitemap，可以通过您网站页脚中的链接进行访问。

⬆ back to top

Translation

前端清单也可用其他语言。 感谢所有翻译和他们的工作！

Written on November 13, 2017