你的网站上线前，最好检查下这些项目是否都做到位了

6 年前阅读量：2818 字数：5941 阅读时间：14min

就像一辆汽车交付前需要经过非常多项目的检查一样。一个网站上线前，我们也得确保各个方面都做到位了，没有遗漏也没有错误。比如：HTML、CSS、JavaScript、安全、SEO、性能、可访问性等等。

Head

Meta 标签

1、在 HTML 顶部申明 HTML 5 Doctype

<!doctype html>

紧接着，我们要申明下面这些 meta 标签：

2、正确地设置 Charset

<!-- 设置文档的字符编码 -->
<meta charset="utf-8">

3、别忘了 X-UA-Compatible

<!-- 告诉 IE 用最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

4、viewport

<!-- 为响应式设计设置 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">

5、Title

Title 标签的重要性不需要赘述了。务必要确保所有页面都正确的设置了 title 标签。像 Google 搜索引擎会计算 title 的宽度，一般在 472 到 482 像素左右，因此 title 内容建议控制在 55 个字符以内，国内的引擎大家可以自行了解这部分的限制。

<!-- 文档标题 -->
<title>Page Title less than 55 characters</title>

6、Description

和 Title 标签一样重要，出于 SEO 考虑，建议不要超过 150 个字符。

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

7、Favicons

关于网站图标，光这个话题要深入讲可以讲很久，不同的设备，不同的系统都需要考虑，而且遇到 iOS 设备可以讲一个网页作为快捷方式放到桌面上，这个时候这个图标也是需要专门设置的，包括 Windows Tile 等等。今天这部分不在本文中展开，但是最起码的，底线是你得有一个 ico 文件，最好你在准备一个 32x32 的 png 图标。就像这样：

<!-- 标准 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">

<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.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>

8、Canonical

如果你的网站有多个页面虽然 URL 不同但是呈现的内容都是一样的，那么就可以使用 canonical 来避免重复的内容，告诉搜索引擎把相关的搜索信号都传递到第一个 URL 上面，这样不管一个页面实际的 URL 是什么，搜索引擎都只会收入 canonical 指向的页面。

<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="https://tan90.co/Resources">

HTML 标签

1、正确设置 lang 属性

<html lang="en">

2、dir 属性

一般支持 rtl（right to left）都需要设置这个属性

<html dir="rtl">

3、RSS

如果是一个博客或者文章为主的网站，那么最好提供一个 rss feed

4、内联 critical CSS 代码

所谓 Critical CSS 代码就是指首屏渲染必要的 CSS 代码，对于这些代码最好直接内联在 HTML 中。

HTML

最佳实践

1、使用 HTML 5 语义化更好的标签

比如：header、section、footer、main 等

2、记得错误页面

错误的 404 以及 5xx 页面都要有专门的错误页面展示给用户

3、别忘了 noopener

如果页面中有超链接，并且需要打开新的标签或者窗口的，那么别忘了设置 rel=”noopener”（除非你有足够的理由需要在新窗口中获取父窗口的句柄），否则打开的页面就可以通过 window.opener 获取父页面的句柄了，这是有风险的。

<a class="user-generated" href="malicious.html" target="_blank" rel="noopener">打开新页面</a>

4、将注释都移除掉

HTML 测试

1、检查代码是否违反 W3C 标准

可以使用 https://validator.w3.org/ 来测试

2、看看 HTML 代码是否规范

可以使用 https://dirtymarkup.com/ 进行检查

3、确保页面上没有 404 的链接

可以用 https://validator.w3.org/checklink 来检查

Web 字体

这部分中文网站一般比较少，除非你用了 icon font，那么留意下下面两条

1、使用 WOFF、WOFF2、TTF、SVG 来兼容主流浏览器

2、Web 字体大小不要超过 2 MB

CSS

CSS 规范

1、支持响应式

2、提供了打印的 CSS 样式

3、可以使用 CSS Preprocessor

4、确保页面上的 ID 是唯一的5、Reset CSS

6、不要对第三方库所用到的专属 ID 作为 CSS 选择器

有的时候，很多第三方库要求 DOM 上包含指定的 ID，这个时候你的 CSS 定义样式的时候不要去使用这个 ID，因为这个 ID 很可能以后会变动的，就像这样：

<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

7、自动对生成浏览器前缀

有些 CSS 属性需要添加浏览器前缀，这种时候尽量使用工具自动生成，比如：autoprefixer

CSS 性能

1、合并多个 CSS 文件

2、压缩 CSS 文件

3、考虑非阻塞加载 CSS 文件

4、移除不用的 CSS 代码这个

现在直接用 Chrome 开发者工具就能看到哪些 CSS 没有用到。

CSS 测试

1、CSS 代码规范测试

可以用 https://stylelint.io/ 来进行测试。

2、对响应式进行测试

需要在不同的显示宽度上进行多分辨率测试

3、兼容性测试针对不同设备、浏览器进行测试

4、不同操作系统测试

这部分和浏览器测试可以合并，因为 IE 你只能在 Windows 上测试，而 Mac 版的 Safari 和 Windows 版的 Safari 虽然也有微小的差异但是考虑到成本，一般测试一个系统就可以了。

5、支持 RTL 的话还要针对 RTL 进行测试

图片

图片最佳实践

1、使用 picture/srcset 提供不同图片以保证最好的用户体验

2、支持 Retina 显示

3、针对一系列小图标或者小尺寸图片考虑用雪碧图

4、设置图片宽高如果提前就知道图片宽高的话就需要设置好宽高，这样可以提高渲染速度

5、别忘了图片的 alt 属性6、对图片进行懒加载

JavaScript

JavaScript 最佳实践

1、不要内联 JavaScript 代码

2、合并并压缩 JavaScript 代码

3、注意 JavaScript 安全性相关的问题

可以查看：https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript 了解详细内容

4、考虑通过 async 和 defer 属性来异步加载 JavaScript 代码

5、针对特殊功能的时候进行特性检测比如可以使用 Modernizr。

JavaScript 测试

1、使用各类 lint 工具对 JavaScript 代码进行校验

安全

对网站进行安全扫描

比如使用 https://securityheaders.io/ 这类工具对网站进行安全扫描

安全方面最佳实践

1、HTTPS

全站使用 HTTPS 包括外部资源

2、使用 HSTS（HTTP Strict Transport Security）

通过返回 Strict-Transport-Security 响应头来告诉浏览器只能通过 HTTPS 而非 HTTP 来访问本网站

性能

性能方面最佳实践

1、注意页面尺寸不要太大

2、压缩 HTML 代码

3、对一切可以懒加载的资源都进行懒加载

4、Cookie 尺寸

Cookie 不要超过 4093 个字节，数量不要超过 20 个

提前准备后续会发送的请求

1、dns-prefetch

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

2、preconnect

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

3、prefetch

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

4、preload

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

性能测试

可以使用像 Google PageSpeed： https://developers.google.com/speed/pagespeed/insights/ 这样的工具进行性能测试，并且分数最好超过 90 分。

SEO

1、合理的使用标题

有利于让搜索引擎了解你页面内容的结构

2、提供 sitemap.xml

3、提供 robots.txt

4、页面结构合理

关于 SEO 你还可以针对国内的不同的搜索引擎，进行有针对性的 SEO 优化。

这份长长的清单中包含了非常多非常细致的项目，最好当然是都能够做到，但是实际情况下未必能实现，从而你可以结合你实际的需求根据优先级有针对性的进行检查和完善。

发布于： #网站 #SEO