前端自检清单

如何使用？

前端自检表 中的所有项对于大多数项目都是必需的，但是有些元素可以省略或不是必需的(例如，对于管理web应用程序，你可能并不需要RSS订阅)。我们使用三个级别来灵活区分：

意味着推荐该项，但在某些特定情况下可以省略。
意味着 强烈推荐 该项，并且在某些特定情况下最终可以省略。如果省略某些元素，可能会对性能或SEO产生不良影响。
意味着该项 不能被省略 ，不管你有什么理由。如果忽略了这项，页面中可能会造成功能障碍，或存在可访问性或SEO问题。测试优先级需要首先关注在这些元素上。

有些资源拥有相对的符号，可帮助你了解清单中可能找到的内容或类型：

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

你可以通过阅读 README_APP 文件为 前端自检表应用 做出一些贡献，README文件里详细的阐述了关于此项目的所有事情。

Head

注意： 你可以找到一份可能在HTML document的<head>里包含了所有东西的列表。

Meta tag

Doctype: Doctype是HTML5并且在所有HTML页面的顶部。

<!doctype html> 
📖 Determining the character encoding - HTML5 W3C

接下来的两个meta标记(Charset and Viewport) 需要首先出现在head里。

Charset: charset (UTF-8) 是被正确声明

<!-- Set character encoding for the document -->
<meta charset="utf-8">

Viewport: viewport 是被正确声明

<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Title: 标题用于所有页面(SEO:谷歌计算标题中使用的字符的像素宽度，并在472到482像素之间截断。平均字符限制在55个字符左右)。

<!-- Document Title -->
<title>Page Title less than 55 characters</title>

📖 Title - HTML - MDN
🛠 SERP Snippet Generator

Description: 为描述提供了meta，它是唯一的，并且不具有超过150个字符。

<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">

📖 Meta Description - HTML - MDN

Favicons: 每个favicon 都被创建并正确显示。如果你只有一个favicon.ico，请将其放在你网站的根目录下。通常，你不需要使用任何标记。但是，使用下面示例的link，它仍然是一个很好的实践。现如今，PNG格式已优于 ico格式(尺寸:32x32px)。

<!-- 标准favicon格式 -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 推荐favicon格式 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

🛠 Favicon Generator
🛠 RealFaviconGenerator
📖 Favicon Cheat Sheet
📖 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks
📖 PNG favicons - caniuse

Apple Web App Meta: 对于Apple的meta-tag

<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

📖 Configuring Web Applications
📖 Supported Meta Tags

Windows Tiles: window tiles 呈现并且被link

<!-- 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>

📖 [Browser configuration schema reference](https://msdn.microsoft.com/en-us/library/dn320426(v=vs.85).aspx)

Canonical: 使用rel="canonical"避免重复内容

<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">

📖 Use canonical URLs - Search Console Help - Google Support
📖 5 common mistakes with rel=canonical - Google Webmaster Blog

HTML tags

Language attribute: 你网站的lang属性被指定，并与当前页面的语言相关。

<html lang="en">

Direction attribute: 方向是在HTML标记上指定的(它可以用于其他html标记)。

<html dir="rtl">

📖 dir - HTML - MDN

Alternate language: 替代语言，指定网站的语言标签，并与当前页面的语言相关。

<link rel="alternate" href="https://es.example.com/" hreflang="es">

Conditional comments: 如果需要，IE将提供条件注释。

📖 [About conditional comments (Internet Explorer) - MSDN - Microsoft](https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx)

RSS feed: 如果你的项目是博客或有文章，则提供RSS链接。
CSS Critical: CSS critical(或"折叠以上")收集用于呈现页面可见部分的所有CSS。它嵌入在主CSS调用之前和<style></style>之间的一行中(缩小)。

🛠 Critical by Addy Osmani on GitHub automates this.

CSS order: 在<head>中，所有CSS文件都要在JavaScript文件之前加载(除了有时JS文件在页面顶部异步加载)。

可视化并自动生成带有元标记的social 元标记。

Facebook OG 和 Twitter Cards 是的，对于任何网站，强烈推荐。如果你的目标用户是某个特定的用户，并且想要确保显示效果，可以考虑其他社交(social )媒体标签。

Facebook Open Graph: 所有的Facebook Open Graph (OG)都经过测试，没有人出错或有虚假信息。
图像至少需要600 x 315像素，但推荐1200 x 630像素。

注意： 使用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">

📖 A Guide to Sharing for Webmasters
📖 Best Practices - Sharing
🛠 Test your page with the Facebook OG testing

Twitter Card:

<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">

📖 Getting started with cards — Twitter Developers
🛠 Test your page with the Twitter card validator

⬆ 返回顶部

HTML

最佳实践

HTML5 Semantic Elements: HTML5语义元素被适当地使用(header, section, footer, main...)。

📖 HTML Reference

Error pages: 存在错误的404和5xx页面。请记住，5xx错误页面需要集成它们的CSS(当前服务器上没有外部调用)。
Noopener: 如果使用target="_blank"的外部链接，那么你的链接应该具有rel="noopener"属性，以防止标签被阻止。如果你需要支持旧版本的火狐，使用rel="noopener noreferrer"。

📖 About rel=noopener

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

HTML testing

W3C compliant: 所有页面都需要使用W3C验证器进行测试，以识别HTML代码中的可能问题。

🛠 W3C validator

HTML Lint: 我使用工具来帮助我分析HTML代码中可能出现的任何问题。

🛠 Dirty markup
🛠 webhint

Link checker: 在我的页面中没有破坏性的link，验证下你是否有任何404错误。

🛠 W3C Link Checker

Adblockers test: 你的网站会在启用广告拦截器的情况下正确显示你的内容（你可以提供一条消息，鼓励他们停用其广告拦截器）。

📖 Use AdBlocking in your Dev Environment

⬆ 返回顶部

Webfonts

注意： 使用WebFonts可能导致非样式文本的闪烁/不可见文本的闪烁-考虑使用回退字体和/或使用WebFont加载器来控制行为。
📖 Google Technical considerations about webfonts

Webfont format: 所有现代浏览器都支持WOFF、WOFF2和TTF。

📖 WOFF - Web Open Font Format - Caniuse.
📖 WOFF 2.0 - Web Open Font Format - Caniuse.
📖 TTF/OTF - TrueType and OpenType font support
📖 Using @font-face - CSS-Tricks

Webfont size: Webfont大小不超过2 MB(包括所有变体)。
Webfont loader: 使用webfont加载器控制加载行为

🛠 Typekit Web Font Loader

⬆ 返回顶部

CSS

注意： 看看大多数前端开发人员所遵循的CSS指南和Sass指南。如果你对CSS属性有疑问，可以访问CSS Reference。为了保持一致性，还有一个简短的代码指南。

Responsive Web Design: 该网站采用响应式网页设计。
CSS Print: 提供了一个打印样式表，并且在每个页面上都是正确的。
Preprocessors: 你的项目使用的是CSS预处理器（例如 Sass, Less, Stylus）。
Unique ID: 如果使用ID，则它们对于页面是唯一的。
Reset CSS: 使用CSS重置(重置、规范化或重新启动)并保持最新。(如果您使用的是Bootstrap或Foundation之类的CSS框架，那么它已经包含了一个规范化。)

📖 Reset.css
📖 Normalize.css
📖 Reboot

JS prefix: 所有类(或id——在JavaScript文件中使用)都以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: 不惜一切代价避免在<style>标签中嵌入CSS或使用内联CSS：仅用于有效原因(例如，用于滑块的background-image，关键的CSS)。
Vendor prefixes: 使用CSS供应商前缀，并根据浏览器支持兼容性生成相应的前缀。

🛠 Autoprefixer CSS online

Performance

Concatenation: CSS文件连接在一个文件中(不适用于HTTP/2)。
Minification: 所有CSS文件被压缩。
Non-blocking: CSS文件需要是非阻塞的，以防止DOM花费时间来加载。

📖 loadCSS by filament group
📖 Example of preload CSS using loadCSS

Unused CSS: 移除未使用的CSS。

🛠 UnCSS Online
🛠 PurifyCSS
🛠 PurgeCSS
🛠 Chrome DevTools Coverage

CSS testing

Stylelint: 所有CSS或SCSS文件都没有任何错误。

🛠 stylelint, a CSS linter
📖 Sass guidelines

Responsive web design: 所有页面都在以下断点进行测试：320px，768px，1024px(根据你的分析，可以更大/不同)。
CSS Validator: 对CSS进行了测试，纠正了相关错误。

🛠 CSS Validator

Desktop Browsers: 所有页面都在所有当前桌面浏览器(Safari、Firefox、Chrome、Internet Explorer、EDGE……)上进行测试。
Mobile Browsers: 所有页面都在所有当前的移动浏览器(原生浏览器、Chrome、Safari……)上进行测试。
OS: 所有页面都在所有当前操作系统(Windows、Android、iOS、Mac……)上进行测试。
Design fidelity: 根据项目和质检，你可能会被要求更接近设计。你可以使用一些工具来比较创造性和代码实现，并确保一致性。

Pixel Perfect - Chrome Extension

Reading direction: 如果需要支持LTR和RTL语言，则需要对所有页面进行测试。

📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks
📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks

⬆ 返回顶部

Images

注意： 要全面了解图片优化，请查看Addy Osmani的免费电子书Essential Image Optimization。

Best practices

Optimization: 所有图像都经过优化，以便在浏览器中呈现。WebP格式可用于关键页面(如主页)。

🛠 Imagemin
🛠 使用ImageOptim to optimise your images for free.
🛠 Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.
🛠 TinyPNG losslessly optimise png, apng (animated png) and jpg images. Free and paid version available.
🛠 ZorroSVG jpg-like compression for transparent images using svg masking.
🛠 SVGO a Nodejs-based tool for optimizing SVG vector graphics files.
🛠 SVGOMG a web-based GUI version of SVGO for optimising your svgs online.

Picture/Srcset: 使用picture/srcset为用户的当前视图提供最合适的图像。

📖 How to Build Responsive Images with srcset

Retina: 提供的布局图像2x或3x，支持Retina显示。
Sprite: 小图像位于sprite文件中(对于图标，它们可以位于SVG sprite图像中)。
Width and Height: 如果已知最终呈现的图像大小，则在<img>上设置width 和height 属性(对于CSS大小调整可以省略)。
Alternative text: 所有都有一个可选的文本，可以直观地描述<img>。

📖 Alt-texts: The Ultimate Guide

Lazy loading: 图像是延迟加载的(始终提供noscript回退)。

⬆ 返回顶部

JavaScript

最佳实践

JavaScript Inline: 不要有任何内联的JavaScript代码(混合在你的HTML代码里的)。
Concatenation: JavaScript文件被合并起来。
Minification: JavaScript文件被压缩(可以添加.min后缀)。

📖 Minify Resources (HTML, CSS, and JavaScript)

JavaScript security:

📖 Guidelines for Developing Secure Applications Utilizing JavaScript

noscript tag: 如果不支持页面上的脚本类型，或者当前在浏览器中关闭了脚本，那么在HTML body 中使用<noscript>标签。这将有助于客户端渲染重型应用程序，如React.js，请参阅示例。

<noscript>
  You need to enable JavaScript to run this app.
</noscript>

Non-blocking: JavaScript文件使用async异步加载，或者使用defer属性延迟加载。

📖 移除阻塞渲染的JavaScript

Optimized and updated JS libraries: 在项目中使用的所有JavaScript库都是必需的(对于简单的功能，最好使用原生的JavaScript)，并更新到它们的最新版本，并且不要用不必要的方法胜过JavaScript。

📖 你可能不需要jQuery
📖 用于构建功能强大的web应用程序的普通JavaScript

Modernizr: 如果需要针对某些特定特性，你可以使用自定义Modernizr在<html>标签中添加class。

🛠 Customize your Modernizr

JavaScript testing

ESLint: 通过ESLint 来标记不会有错误(基于你的配置和规范规则)

📖 ESLint - The pluggable linting utility for JavaScript and JSX

⬆ 返回顶部

Security

securityheaders.io
Observatory by Mozilla

最佳实践

HTTPS: HTTPS用于每个页面和所有外部内容（插件，图像......）。

🛠 Let's Encrypt - Free SSL/TLS Certificates
🛠 Free SSL Server Test
📖 Strict Transport Security

HTTP Strict Transport Security (HSTS): HTTP标头设置为“Strict-Transport-Security”。

🛠 Check HSTS preload status and eligibility
📖 HTTP Strict Transport Security Cheat Sheet - OWASP
📖 Transport Layer Protection Cheat Sheet - OWASP

Cross Site Request Forgery (CSRF): 你确保向服务器端发出的请求是合法的，并且来自你的网站/应用程序，以防止CSRF攻击。

📖 [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet)

Cross Site Scripting (XSS): 你的页面或网站不存在XSS可能存在的问题。

📖 [XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP](https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet)
📖 DOM based XSS Prevention Cheat Sheet - OWASP

Content Type Options: 防止谷歌Chrome和Internet Explorer试图从服务器声明的响应中嗅出响应的内容类型。

X-Content-Type-Options - Scott Helme

X-Frame-Options (XFO): 保护你的访问者免受劫持攻击。

📖 X-Frame-Options - Scott Helme
📖 RFC7034 - HTTP Header Field X-Frame-Options

Content Security Policy: 定义如何在站点上加载内容，以及允许从何处加载内容。也可以用来防止劫持攻击。

📖 Content Security Policy - An Introduction - Scott Helme
📖 CSP Cheat Sheet - Scott Helme
📖 CSP Cheat Sheet - OWASP
📖 Content Security Policy Reference

⬆ 返回顶部

Performance

最佳实践

Goals to achieve: 你的页面应该达到以下目标:
- 首先在1秒内出现有意义的内容
- 互动时间低于5秒的“平均”配置(一个200美元的Android在一个缓慢的3G网络上与400ms RTT和400kbps传输速度)和重复访问要低于2秒。
- 关键文件大小压缩低于170Kb

🛠 Website Page Analysis
🛠 WebPageTest
📖 Size Limit: Make the Web lighter

Minified HTML: HTML要被压缩
Lazy loading: 图像、脚本和CSS需要延迟加载，以提高当前页面的响应时间(请参阅它们各自部分的详细信息)。
Cookie size: 如果你使用cookie，请确保每个cookie不超过4096字节，并且你的域名不超过20个cookie。

📖 Cookie specification: RFC 6265
📖 Cookies
🛠 Browser Cookie Limits

Third party components: 如果可能的话，依赖外部JS的第三方iframe或组件(如共享按钮)将被静态组件替换，从而限制对外部api的调用，并保持用户活动的私密性。

🛠 Simple sharing buttons generator

Preparing upcoming requests

📖 Explanation of the following techniques

DNS resolution: 可能需要的第三方服务的DNS在空闲期间使用dn -prefetch提前解析。

<link rel="dns-prefetch" href="https://example.com">

Preconnection: 使用preconnect在空闲时间提前完成DNS查找、TCP握手和与即将需要的服务的TLS协商。

<link rel="preconnect" href="https://example.com">

Prefetching: 使用prefetch在空闲时间期间预先请求将很快需要的资源（例如，延迟加载的图像）。

<link rel="prefetch" href="image.png">

Preloading: 使用preload提前在当前页面中所需的资源（例如，放置在末尾的脚本）。

<link rel="preload" href="app.js">

📖 Difference between prefetch and preload

Performance testing

Google PageSpeed: 你的所有页面都经过了测试(不仅仅是主页)，得分至少为90/100。

🛠 Google PageSpeed
🛠 Test your mobile speed with Google
🛠 WebPagetest - Website Performance and Optimization Test
🛠 GTmetrix - Website speed and performance optimization
🛠 Speedrank - Improve the performance of your website

⬆ 返回顶部

Accessibility

注意: 你可以观看注意事项视频列表A11ycasts with Rob Dodson 📹

最佳实践

Progressive enhancement: 主导航和搜索等主要功能应该在不启用JavaScript的情况下工作。

📖 Enable / Disable JavaScript in Chrome Developer Tools

Color contrast: 颜色对比至少通过WCAG AA标准验证(移动端需要通过AAA)。

🛠 Contrast ratio

Headings

H1: 所有页面都有H1，他不是页面的标题。
Headings: 标题应正确使用，顺序正确（H1至H6）。

📹 Why headings and landmarks are so important -- A11ycasts #18

Semantics

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

📖 Mobile Input Types

Form

Label: 标签与每个输入表单元素相关联。如果无法显示标签，则使用aria-label。

📖 Using the aria-label attribute - MDN

Accessibility testing

Accessibility standards testing: 使用WAVE工具测试你的页面是否符合可访问性标准。

🛠 Wave testing

Keyboard navigation: 仅使用键盘以可预见的顺序测试您的网站。所有交互式元素都可以访问和使用。
Screen-reader: 所有页面都在屏幕阅读器（VoiceOver，ChromeVox，NVDA或Lynx）中进行了测试。
Focus style: 如果禁用了focus ，则用CSS中的可见状态替换它。

📹 Managing Focus - A11ycasts #22

⬆ 返回顶部

SEO

Google Analytics: 安装并正确配置了谷歌分析。

🛠 Google Analytics
🛠 GA Checker (and others)

Headings logic: 标题文本有助于理解当前页面中的内容。

🛠 Tota11y, tab Headings

sitemap.xml: 存在sitemap.xml并已提交给Google Search Console（以前是Google网站管理员工具）。

🛠 Sitemap generator

robots.txt: robots.txt没有阻止网页。

📖 The robots.txt file
🛠 Test your robots.txt with Google Robots Testing Tool

Structured Data: 使用结构化数据的页面经过测试且没有错误。结构化数据有助于抓取工具了解当前页面中的内容。

📖 Introduction to Structured Data - Search - Google Developers
📖 RDFa - Linked Data in HTML
📖 JSON-LD
📖 Microdata
🛠 Test your page with the Structured Data Testing Tool
🛠 Complete list of vocabularies that can be used as structured data. Schema.org Full Hierarchy

Sitemap HTML: 提供了HTML站点地图，可通过网站页脚中的链接访问。

📖 Sitemap guidelines - Google Support

Pagination link tags: 提供rel="prev"和rel="next"来指示分页内容。

🛠 Pagination (rel="prev/next") Testing Tool
📖 Pagination guidelines - Google Support

<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ 返回顶部

原文：选自github

Previousvideo Next递归及去重

Last updated 6 years ago

目录

如何使用？

Head

Meta tag

HTML tags

Social meta

HTML

最佳实践

HTML testing

Webfonts

CSS

Performance

CSS testing

Images

Best practices

JavaScript

最佳实践

JavaScript testing

Security

最佳实践

Performance

最佳实践

Preparing upcoming requests

Performance testing

Accessibility

最佳实践

Headings

Semantics

Form

Accessibility testing

SEO