前端自检清单
Last updated
Last updated
前端自检表 中的所有项对于大多数项目都是必需的，但是有些元素可以省略或不是必需的(例如，对于管理web应用程序，你可能并不需要RSS订阅)。我们使用三个级别来灵活区分：
意味着 推荐 该项，但在某些特定情况下可以省略。
意味着 强烈推荐 该项，并且在某些特定情况下最终可以省略。如果省略某些元素，可能会对性能或SEO产生不良影响。
意味着该项 不能被省略 ，不管你有什么理由。如果忽略了这项，页面中可能会造成功能障碍，或存在可访问性或SEO问题。测试优先级需要首先关注在这些元素上。
有些资源拥有相对的符号，可帮助你了解清单中可能找到的内容或类型：
📖: 文档或文章
🛠: 在线工具或测试工具
📹: 媒体或视频内容
接下来的两个meta标记(Charset and Viewport) 需要首先出现在head里。
browserconfig.xml文件所需的最低xml标记如下：
Facebook OG 和 Twitter Cards 是的，对于任何网站，强烈推荐。如果你的目标用户是某个特定的用户，并且想要确保显示效果，可以考虑其他社交(social )媒体标签。
注意： 使用
og:image:width和og:image:height将为爬虫指定图像的尺寸，这样爬虫就可以立即呈现图像，而不必异步下载和处理图像。
注意： 使用WebFonts可能导致非样式文本的闪烁/不可见文本的闪烁-考虑使用回退字体和/或使用WebFont加载器来控制行为。
你可以通过阅读 为 前端自检表应用 做出一些贡献，README文件里详细的阐述了关于此项目的所有事情。
注意： 你可以找到一份可能在HTML document的<head>里包含了。
Doctype: Doctype是HTML5并且在所有HTML页面的顶部。
📖
Charset: charset (UTF-8) 是被正确声明
Viewport: viewport 是被正确声明
Title: 标题用于所有页面(SEO:谷歌计算标题中使用的字符的像素宽度，并在472到482像素之间截断。平均字符限制在55个字符左右)。
📖
🛠
Description: 为描述提供了meta，它是唯一的，并且不具有超过150个字符。
📖
Favicons: 每个favicon 都被创建并正确显示。如果你只有一个favicon.ico，请将其放在你网站的根目录下。通常，你不需要使用任何标记。但是，使用下面示例的link，它仍然是一个很好的实践。现如今，PNG格式已优于 ico格式(尺寸:32x32px)。
🛠
🛠
📖
📖
📖
Apple Web App Meta: 对于Apple的meta-tag
📖
📖
Windows Tiles: window tiles 呈现并且被link
📖 [Browser configuration schema reference]()
Canonical: 使用rel="canonical"避免重复内容
📖
📖
Language attribute: 你网站的lang属性被指定，并与当前页面的语言相关。
Direction attribute: 方向是在HTML标记上指定的(它可以用于其他html标记)。
📖
Alternate language: 替代语言，指定网站的语言标签，并与当前页面的语言相关。
Conditional comments: 如果需要，IE将提供条件注释。
📖 [About conditional comments (Internet Explorer) - MSDN - Microsoft]()
RSS feed: 如果你的项目是博客或有文章，则提供RSS链接。
CSS Critical: CSS critical(或"折叠以上")收集用于呈现页面可见部分的所有CSS。它嵌入在主CSS调用之前和<style></style>之间的一行中(缩小)。
🛠 automates this.
CSS order: 在<head>中，所有CSS文件都要在JavaScript文件之前加载(除了有时JS文件在页面顶部异步加载)。
可视化并自动生成带有的social 元标记。
Facebook Open Graph: 所有的Facebook Open Graph (OG)都经过测试，没有人出错或有虚假信息。
📖
📖
🛠 Test your page with the
Twitter Card:
📖
🛠 Test your page with the
HTML5 Semantic Elements: HTML5语义元素被适当地使用(header, section, footer, main...)。
📖
Error pages: 存在错误的404和5xx页面。请记住，5xx错误页面需要集成它们的CSS(当前服务器上没有外部调用)。
Noopener: 如果使用target="_blank"的外部链接，那么你的链接应该具有rel="noopener"属性，以防止标签被阻止。如果你需要支持旧版本的火狐，使用rel="noopener noreferrer"。
📖
Clean up comments: 在将页面发送到生产环境之前，需要删除不必要的代码。
W3C compliant: 所有页面都需要使用W3C验证器进行测试，以识别HTML代码中的可能问题。
🛠
HTML Lint: 我使用工具来帮助我分析HTML代码中可能出现的任何问题。
🛠
🛠
Link checker: 在我的页面中没有破坏性的link，验证下你是否有任何404错误。
🛠
Adblockers test: 你的网站会在启用广告拦截器的情况下正确显示你的内容（你可以提供一条消息，鼓励他们停用其广告拦截器）。
📖
📖
Webfont format: 所有现代浏览器都支持WOFF、WOFF2和TTF。
📖 .
📖 .
📖
📖
Webfont size: Webfont大小不超过2 MB(包括所有变体)。
Webfont loader: 使用webfont加载器控制加载行为
🛠
注意： 看看大多数前端开发人员所遵循的和。如果你对CSS属性有疑问，可以访问。为了保持一致性，还有一个简短的。
Responsive Web Design: 该网站采用响应式网页设计。
CSS Print: 提供了一个打印样式表，并且在每个页面上都是正确的。
Preprocessors: 你的项目使用的是CSS预处理器（例如 , , ）。
Unique ID: 如果使用ID，则它们对于页面是唯一的。
Reset CSS: 使用CSS重置(重置、规范化或重新启动)并保持最新。(如果您使用的是Bootstrap或Foundation之类的CSS框架，那么它已经包含了一个规范化。)
📖
📖
📖
JS prefix: 所有类(或id——在JavaScript文件中使用)都以js-开头，并且CSS文件中对其进行样式处理。
embedded or inline CSS: 不惜一切代价避免在<style>标签中嵌入CSS或使用内联CSS：仅用于有效原因(例如，用于滑块的background-image，关键的CSS)。
Vendor prefixes: 使用CSS供应商前缀，并根据浏览器支持兼容性生成相应的前缀。
🛠
Concatenation: CSS文件连接在一个文件中(不适用于HTTP/2)。
Minification: 所有CSS文件被压缩。
Non-blocking: CSS文件需要是非阻塞的，以防止DOM花费时间来加载。
📖
📖
Unused CSS: 移除未使用的CSS。
🛠
🛠
🛠
🛠
Stylelint: 所有CSS或SCSS文件都没有任何错误。
🛠
📖
Responsive web design: 所有页面都在以下断点进行测试：320px，768px，1024px(根据你的分析，可以更大/不同)。
CSS Validator: 对CSS进行了测试，纠正了相关错误。
🛠
Desktop Browsers: 所有页面都在所有当前桌面浏览器(Safari、Firefox、Chrome、Internet Explorer、EDGE……)上进行测试。
Mobile Browsers: 所有页面都在所有当前的移动浏览器(原生浏览器、Chrome、Safari……)上进行测试。
OS: 所有页面都在所有当前操作系统(Windows、Android、iOS、Mac……)上进行测试。
Design fidelity: 根据项目和质检，你可能会被要求更接近设计。你可以使用一些工具来比较创造性和代码实现，并确保一致性。
Reading direction: 如果需要支持LTR和RTL语言，则需要对所有页面进行测试。
📖
📖
注意： 要全面了解图片优化，请查看Addy Osmani的免费电子书。
Optimization: 所有图像都经过优化，以便在浏览器中呈现。WebP格式可用于关键页面(如主页)。
🛠
🛠 使用 to optimise your images for free.
🛠 Use awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.
🛠 losslessly optimise png, apng (animated png) and jpg images. Free and paid version available.
🛠 jpg-like compression for transparent images using svg masking.
🛠 a Nodejs-based tool for optimizing SVG vector graphics files.
🛠 a web-based GUI version of SVGO for optimising your svgs online.
Picture/Srcset: 使用picture/srcset为用户的当前视图提供最合适的图像。
📖
Retina: 提供的布局图像2x或3x，支持Retina显示。
Sprite: 小图像位于sprite文件中(对于图标，它们可以位于SVG sprite图像中)。
Width and Height: 如果已知最终呈现的图像大小，则在<img>上设置width 和height 属性(对于CSS大小调整可以省略)。
Alternative text: 所有都有一个可选的文本，可以直观地描述<img>。
📖
Lazy loading: 图像是延迟加载的(始终提供noscript回退)。
JavaScript Inline: 不要有任何内联的JavaScript代码(混合在你的HTML代码里的)。
Concatenation: JavaScript文件被合并起来。
Minification: JavaScript文件被压缩(可以添加.min后缀)。
📖
JavaScript security:
📖
noscript tag: 如果不支持页面上的脚本类型，或者当前在浏览器中关闭了脚本，那么在HTML body 中使用<noscript>标签。这将有助于客户端渲染重型应用程序，如React.js，请参阅示例。
Non-blocking: JavaScript文件使用async异步加载，或者使用defer属性延迟加载。
📖
Optimized and updated JS libraries: 在项目中使用的所有JavaScript库都是必需的(对于简单的功能，最好使用原生的JavaScript)，并更新到它们的最新版本，并且不要用不必要的方法胜过JavaScript。
📖
📖
Modernizr: 如果需要针对某些特定特性，你可以使用自定义Modernizr在<html>标签中添加class。
🛠
ESLint: 通过ESLint 来标记不会有错误(基于你的配置和规范规则)
📖
HTTPS: HTTPS用于每个页面和所有外部内容（插件，图像......）。
🛠
🛠
📖
HTTP Strict Transport Security (HSTS): HTTP标头设置为“Strict-Transport-Security”。
🛠
📖
📖
Cross Site Request Forgery (CSRF): 你确保向服务器端发出的请求是合法的，并且来自你的网站/应用程序，以防止CSRF攻击。
📖 [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP]()
Cross Site Scripting (XSS): 你的页面或网站不存在XSS可能存在的问题。
📖 [XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP]()
📖
Content Type Options: 防止谷歌Chrome和Internet Explorer试图从服务器声明的响应中嗅出响应的内容类型。
X-Frame-Options (XFO): 保护你的访问者免受劫持攻击。
📖
📖
Content Security Policy: 定义如何在站点上加载内容，以及允许从何处加载内容。也可以用来防止劫持攻击。
📖
📖
📖
📖
Goals to achieve: 你的页面应该达到以下目标:
🛠
🛠
📖
Minified HTML: HTML要被压缩
Lazy loading: 图像、脚本和CSS需要延迟加载，以提高当前页面的响应时间(请参阅它们各自部分的详细信息)。
Cookie size: 如果你使用cookie，请确保每个cookie不超过4096字节，并且你的域名不超过20个cookie。
📖
📖
🛠
Third party components: 如果可能的话，依赖外部JS的第三方iframe或组件(如共享按钮)将被静态组件替换，从而限制对外部api的调用，并保持用户活动的私密性。
🛠
📖
DNS resolution: 可能需要的第三方服务的DNS在空闲期间使用dn -prefetch提前解析。
Preconnection: 使用preconnect在空闲时间提前完成DNS查找、TCP握手和与即将需要的服务的TLS协商。
Prefetching: 使用prefetch在空闲时间期间预先请求将很快需要的资源（例如，延迟加载的图像）。
Preloading: 使用preload提前在当前页面中所需的资源（例如，放置在末尾的脚本）。
📖
Google PageSpeed: 你的所有页面都经过了测试(不仅仅是主页)，得分至少为90/100。
🛠
🛠
🛠
🛠
🛠
注意: 你可以观看注意事项视频列表 📹
Progressive enhancement: 主导航和搜索等主要功能应该在不启用JavaScript的情况下工作。
📖
Color contrast: 颜色对比至少通过WCAG AA标准验证(移动端需要通过AAA)。
🛠
H1: 所有页面都有H1，他不是页面的标题。
Headings: 标题应正确使用，顺序正确（H1至H6）。
📹
Specific HTML5 input types are used: 这对于显示针对不同类型的定制键盘和小部件的移动设备尤其重要。
📖
Label: 标签与每个输入表单元素相关联。如果无法显示标签，则使用aria-label。
📖
Accessibility standards testing: 使用WAVE工具测试你的页面是否符合可访问性标准。
🛠
Keyboard navigation: 仅使用键盘以可预见的顺序测试您的网站。所有交互式元素都可以访问和使用。
Screen-reader: 所有页面都在屏幕阅读器（VoiceOver，ChromeVox，NVDA或Lynx）中进行了测试。
Focus style: 如果禁用了focus ，则用CSS中的可见状态替换它。
📹
Google Analytics: 安装并正确配置了谷歌分析。
🛠
🛠
Headings logic: 标题文本有助于理解当前页面中的内容。
🛠
sitemap.xml: 存在sitemap.xml并已提交给Google Search Console（以前是Google网站管理员工具）。
🛠
robots.txt: robots.txt没有阻止网页。
📖
🛠 Test your robots.txt with
Structured Data: 使用结构化数据的页面经过测试且没有错误。结构化数据有助于抓取工具了解当前页面中的内容。
📖
📖
📖
📖
🛠 Test your page with the
🛠 Complete list of vocabularies that can be used as structured data.
Sitemap HTML: 提供了HTML站点地图，可通过网站页脚中的链接访问。
📖
Pagination link tags: 提供rel="prev"和rel="next"来指示分页内容。
🛠
📖
原文：