它基于前端开发人员多年的经验沉淀,以及其他优秀的开源清单。
目录
How to use?
前端开发清单中的所列出的点是大部分前端项目所必需的关注的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下,你可能并不需要RSS订阅源)。我们选择使用一下3级区分:
推荐,但在某些特定情况下可以省略。
强烈推荐,但是可能在某些特殊情况下能被省略。某些元素,如果省略将会对性能或SEO方面产生不良影响。
不能被任何理由忽略。忽略可能会导致你的页面部分功能障碍或者产生可访问性以及SEO等问题。测试优先级需要首先考虑这些元素。
某些资源拥有特定的标识符,帮助你去理解清单上不同类型的内容或帮助。
- 📖: 文档或文章
- 🛠: 在线工具/测试工具
- 📹: 媒体或视频内容
Head
注意: 你能在HEAD列表中找到HTML文档
<head>
标签内所有可配置的属性。
Meta 标签
- Doctype:
Doctype标签声明HTML5,需要写在HTML文件的顶部。
1 | <!-- Doctype HTML5 --> |
接下来三个 meta 标签 (Charset, X-UA Compatible, Viewport) 需要首先在head中声明
[ ] Charset(字符类型):
正确声明
Charset
meta (UTF-8)。1
2<!-- 设置文档的字符编码 -->
<meta charset="utf-8">[ ] X-UA-Compatible(IE相关设定):
正确声明
X-UA-Compatible
meta。
1 | <!-- 指示Internet Explorer使用其最新的渲染引擎 --> |
📖 指定旧文档模式(Internet Explorer).aspx)
- Viewport(视口):
正确声明
viewport
meta。
1 | <!-- 响应式网页设计viewpoint声明 --> |
- Title(标题):
所有页面都必须使用
title
标签(SEO:Google会计算标题中使用的字符的像素宽度,范围在472和482像素之间,所以平均字符数限制大约在55个字符左右)。
1 | <!-- 文档标题 --> |
- Description(描述):
提供
description
标签, 它是唯一的同时内容不能超过150个字符。
1 | <!-- Meta Description --> |
- Favicons:
每个
favicon
都被创建并正确显示,如果你只有一个favicon.ico
,把它放在你网站的根目录下。 通常来说你不需要做任何操作他就能正常显示。 然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用PNG格式,相比.ico
格式有较好的优势(推荐尺寸: 32x32px)。
1 | <!-- 标准favicon --> |
- Apple Touch Icon:
苹果设备favicon适配。 (创建至少200x200像素尺寸的Apple图标文件以支持你可能需要的用到的所有尺寸)
1 | <!-- Apple Touch Icon --> |
- Windows Tiles:
Windows tiles are present and linked.
1 | <!-- Microsoft Tiles --> |
browserconfig.xml文件的最小所需xml标记如下所示:
1 |
|
📖 浏览器配置模式参考.aspx)
- Canonical:
使用
rel="canonical"
以避免重复的内容。
1 | <!-- 帮助防止重复内容出现 --> |
HTML 标签
- Language tag(语言标签):
指定你网站的语言标签并与当前页面语言相关联。
1 | <html lang="zh_cn"> |
- Direction tag(方向标签):
direction
属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)
1 | <html dir="rtl"> |
- Alternate language(备用语言):
指定网站的语言标签并与当前页面的语言相关联。
1 | <link rel="alternate" href="https://es.example.com/" hreflang="es"> |
- Alternate language(条件注释):
如有需要,可针对IE添加条件注释。
- RSS feed(RSS 订阅):
如果你的项目是一个博客或者有大量的文章,可以添加一个RSS链接。
- Inline critical CSS(最小 CSS 合集):
CSS critical
收集并呈现当前页面可见部分的核心CSS。在主要的CSS调用渲染之前以单行(最小化)在<style></style>
中嵌入。
- CSS order(加载顺序):
所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。
Social meta
强烈推荐Facebook OG and Twitter Cards。如果你针对某些特定的存在并希望确保显示,也可以考虑其他社交媒体的meta。
- Facebook Open Graph:
所有Facebook Open Graph(OG)都经过测试并且没有任何错误。图片至少需要600 x 315像素,建议使用1200 x 630像素。
注意: 使用
og:image:width
和og:image:height
将会爬取制定尺寸的图像,以便图像能够快速呈现,无需进行异步下载和处理。
1 | <meta property="og:type" content="website"> |
- 📖 A Guide to Sharing for Webmasters
- 🛠 使用Facebook OG testing测试你的页面。
- 📖 Best Practices - Sharing
- 🛠 Test your page with the Facebook OG testing
- Twitter Card:
1 | <meta name="twitter:card" content="summary"> |
HTML
最佳实践
- HTML5 Semantic Elements(HTML5语义化元素):
正确的使用HTML5语义化标签(header, section, footer, main…).
📖 HTML 参考
[ ] Error pages(错误页面):
404页面和5xx错误的存在。5xx错误页面需要集成其CSS(在当前服务器上无外部调用)。
[ ] Noopener:
如果你使用外部链接
target="_blank"
, 你的链接必须有个rel="noopener"
属性,防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器,请使用rel="noopener noreferrer"
。
- Clean up comments(清除注释):
在将页面发布到生产环境之前,应该删除不必要的代码。
HTML 测试
- W3C compliant(兼容):
所有页面需要使用W3C验证器进行测试,以检测HTML代码中的可能存在的问题。
- HTML Lint:
使用工具来帮助我们分析HTML代码中可能存在的问题。
- Desktop Browsers:
所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE…)。
[ ] Mobile Browsers:
所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari…).
[ ] Link checker(链接检查器):
页面中链接没有失效,请确认你没有404错误。
- Adblockers test(广告拦截器测试):
你的的网站会在启用广告拦截器的情况下正确显示页面内容(你可以提供一条消息,引导人们停用其广告拦截器)。
- Pixel perfect:
页面的像素级实现。根据设计稿的质量,你的页面可能做不到100%的还原,但你的网页需要尽可能的靠近设计稿。
Webfonts
注意: 使用webfonts可能会导致文档样式闪烁以及文本不可见,所以在使用时需要考虑使用后备字体,或者使用webfont加载器来控制字体加载行为。
- Webfont format(字体格式):
现代浏览器都支持WOFF、WOFF2、TTF格式
[ ] Webfont size(字体大小):
Webfont大小不超过 2 MB (包括所有版本在内)。
[ ] Webfont loader(字体加载器):
使用webfont加载器控制加载行为。
CSS
- 响应式网站设计:
网站使用响应式设计。
- CSS打印属性:
提供打印样式表,并确保使用正确。
- 预处理器:
你的网站使用css预处理器(推荐Sass).
- 唯一ID:
如果使用了ID,确保ID的唯一性。
- Reset CSS:
使用CSS reset(如reset.css, normalize.css, reboot) (如果你使用的是CSS框架,例如Bootstrap或Foundation,则reset.css已被包含在其中)
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS 前缀:
所有以js-开头的class(或者JavaScript文件中使用的id)不写入css文件。
1 | <div id="js-slider" class="my-slider"> |
- CSS embed or line:
避免使用CSS嵌入或内联,仅用于必要的情况(例如: background-image for slider, CSS critical).
- 浏览器内核前缀:
对部分属性加上浏览器内核前缀,生成你浏览器兼容的属性。
性能
- Concatenation(合并):
将CSS文件合并到一个文件中。 (不适用HTTP/2)
- Minification(压缩):
压缩所有CSS文件。
- Non-blocking(非阻塞):
CSS文件需要非阻塞加载,以防在DOM加载时花费大量时间。
- 未使用的CSS:
删除未使用的CSS。
CSS 测试
[ ] 格式检查:
所有的CSS或SCSS文件没有任何格式错误。
[ ] 响应式网页设计:
所有页面都需要经过以下几种情况的测试: 320px, 768px, 1024px (根据自己的项目情况,可以设置更多)。
[ ] CSS验证器:
CSS都需经过测试,同时所有错误都被修复。
🛠 CSS验证器
[ ] 桌面浏览器:
所有页面都在桌面浏览器进行了测试(Safari, Firefox, Chrome, Internet Explorer, EDGE…)。
- 移动端浏览器:
所有页面都在移动端浏览器进行了测试(Native browser, Chrome, Safari…)。
- 操作系统:
所有页面都在当前操作系统上进行了测试(Windows, Android, iOS, Mac…)。
- Pixel perfect:
页面需要像素级实现。根据设计稿的质量,你可能不会100%与设计稿相同,但你的网页需要尽可能的靠近设计稿的要求。
- Reading direction:
如果需要的话,所有页面都需要对LTR和RTL语言进行测试。
Images
注意: 想要完整的了解图像优化,可以在Addy Osmani查看免费电子书图像优化基础。
最佳实践
- 优化:
所有图像都经过优化并且可在浏览器中正常显示。WebP格式可用于关键页面(如首页)。
- 🛠 Imagemin
- 🛠 使用ImageOptim免费优化您的图像。
- 🛠 使用Kraken.io优化png和jpg格式图像。
- Picture/Srcset:
使用Picture/Srcset为用户当前的视口提供最合适的图像。
- 视网膜屏:
提供x2 或 3x的图像来支持视网膜屏显示。
- 雪碧图:
小图片放到一个雪碧图中。
- 宽高:
请在
上设置宽度和高度属性,如果最终的渲染图像大小已知(可以忽略CSS大小)。
[ ] 图片描述文本:
所有
<img>
必须有alt
属性来直观的描述图片(在无障碍网页中尤其重要)。[ ] 懒加载:
图片懒加载 (A noscript fallback is always provided).
JavaScript
最佳实践
- JavaScript 内联:
确保没有任何js代码内联(与HTML代码混合)。
- 合并:
合并js文件。
- 压缩:
压缩所有js文件(可以添加
.min
后缀)。
- JavaScript安全性:
- Non-blocking(非阻塞):
JavaScript文件使用async或延迟使用defer属性异步加载。
- Modernizr:
如果您需要指定某些特定功能,则可以使用自定义Modernizr在
<html>
标签中添加class。
JavaScript 测试
- ESLint:
用ESLint检测并没有错误(基于你的配置规则)。
Security
扫描并检查你的网站
最佳实践
- HTTPS:
每个页面和所有外部内容(插件、图像…)都使用HTTPS。
- HTTP严格传输安全性(HSTS):
HTTP头设置 ‘Strict-Transport-Security’.
- 跨站点请求伪造攻击(CSRF):
确保向服务器端发出的请求是合法的,并来自您的网站/应用程序,以防止发生CSRF攻击。
📖 跨站点请求伪造(CSRF)防范清单 - OWASP_Prevention_Cheat_Sheet)
- 跨站脚本攻击(XSS):
确保页面或网站没有XSS攻击的可能性。
- 📖 XSS (跨站脚本攻击) 防范清单 - OWASP_Prevention_Cheat_Sheet)
- 📖 基于DOM的XSS防范清单 - OWASP
- Content Type Options
防止Google Chrome和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中嗅探出来。
- X-Frame-Options (XFO)(外部框架连接设定)
保护网站的访问者免受劫持攻击。
- Content Security Policy(内容安全策略)
定义内容如何加载到您的网站上的方式以及允许加载的位置。也可以用来防止劫持攻击。
Performance
最佳实践
- 页面大小:
控制每张网页的大小在0到500KB之间。
- 文件压缩:
压缩你的HTML文件。
[ ] 懒加载:
图片、js脚本和CSS需要懒加载,以提高当前页面的响应时间(请参见各自部分的详细信息)。
[ ] Cookie大小:
如果使用Cookie,确保每个Cookie不超过4096个字节,并且域名下不超过20个Cookie。
- 第三方组件:
在可能的情况下,用静态组件替代依赖于外部JS的第三方iframe或组件(如共享按钮),从而限制对外部API的调用,并将用户活动保持为私有。
为将到来的请求做准备
- DNS解析:
使用
dns-prefetch
让第三方DNS服务商主动去执行域名解析的功能。
1 | <link rel="dns-prefetch" href="https://example.com"> |
- 预连接:
使用
preconnect
在空闲期间提前做好DNS查询, TCP三次握手和TLS协商。
1 | <link rel="preconnect" href="https://example.com"> |
- 预获取:
使用
prefetch
在空闲期间提前请求即将需要的资源(例如:图像的懒加载)。
1 | <link rel="prefetch" href="image.png"> |
- 预加载:
使用
preload
提前加载当前页面所需要的资源(例如:js脚本放在<body>
的最后)。
1 | <link rel="preload" href="app.js"> |
性能测试
- Google PageSpeed:
所有的网页都经过测试(不仅仅是首页),而且得分至少为90/100。
Accessibility
注意: 查看注意事项视频列表A11ycasts with Rob Dodson 📹
最佳实践
- 渐进式增强:
主要功能如主导航和搜索等功能应该在没有启用JavaScript的情况下能够正常运行。
- 颜色对比度:
颜色对比度至少通过WCAG AA标准验证(移动端需要通过AAA)。
标题
- H1:
所有页面都有H1,它不是网站的标题。
- Headings:
标题应以正确的顺序合理使用(H1至H6)。
Landmarks
- banner角色:
<header>
标签中加入role="banner"
属性。 - navigation角色:
<nav>
标签中加入role="navigation"
属性。 - main角色:
<main>
标签中加入role="main"
属性。
语义化
- 使用特定的HTML5输入类型:
这对于显示不同类型的自定义键盘和小部件的移动设备尤其重要。
表单
- Label:
label
与每个输入表单元素相关联,如果label
无法显示,请使用aria-label
代替。
Accessibility 测试
- Accessibility标准测试:
使用WAVE工具测试你的页面是否符合accessibility标准。
- Keyboard navigation(键盘导航):
在你的键盘上以可能出现的操作顺序去测试,确保所有交互式元素都可访问和可用。
- Screen-reader(屏幕阅读器):
所有页面都在屏幕阅读器(VoiceOver, ChromeVox, NVDA or Lynx)中进行了测试。
- Focus style(专注风格):
如果焦点被禁用,它将被CSS中的可见状态所替代。
SEO
- Google Analytics:
Google Analytics 正确安装和配置。
- Baidu Analytics:
Baidu Analytics 正确安装和配置(国内网站)。
- Headings logic:
标题文字有助于表达当前页面的主要内容。
- sitemap.xml:
创建
sitemap.xml
文件并提交到Google Search Console(以前的Google管理员工具)。 - robots.txt:
robots.txt
正确配置,不要阻止网页被爬取。
- 🛠 使用Google Robots Testing Tool测试你的
robots.txt
。
- Structured Data(结构化数据):
使用Structured Data的页面通过测试并且没有错误。Structured Data会帮助爬虫理解当前页面的内容。
- 📖 Structured Data简介 | 搜索 | Google Developers
- 🛠 使用Structured Data Testing Tool测试你的页面。
- 🛠 适用于结构化数据的完整结构列表Schema.org Full Heirarchy
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- Sitemap HTML(HTML网站地图):
提供HTML网站地图,可通过网站页脚中的链接进行访问。