第176天：页面优化

SEO优化考虑的方面太多了。

下面说说页面怎么优化

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

1. 减少HTTP请求数

从设计实现层面简化页面，，合理设置HTTP缓存，资源合并与压缩

CSS Sprites，Lazy Load Image，将CSS放在HEAD中，减少不必要的HTTP跳转

二、代码级优化

Javascript，CSS选择符， Image压缩

三、页面优化

页面优化

页面优化可以提升页面的访问速度从而提高用户体验，优化的页面可以更好的提升 SEO 的效果同时也可以提高代码的可读性和维护性。

从下面的几个方面可以进行页面的优化：

• 减少请求数
  • 图片合并
  • CSS 文件合并
  • 减少内联样式
  • 避免在 CSS 中使用 import
• 减少文件大小
  • 选择适合的图片格式
  • 图片压缩
  • CSS 值缩写（Shorthand Property)
  • 文件压缩
• 页面性能
  • 调整文件加载顺序
  • 减少标签数量
  • 调整选择器长度
  • 尽量使用 CSS 制作显示表现
• 增强代码可读性与可维护性
  • 规范化
  • 语义化
  • 模块化

（1）减少请求

请求数与网页加载时长有直接的关系。所以对于图标可以使用 Sprite 来减少小图标的请求数，对于文本则可以通过合并缩小。（避免使用 import 引入 CSS 文件，并且请求是同步请求）

（2）减少文件大小

页面上最大的流量产生与多媒体（视频或图片）所以为了减少文件大小，开发者需要使用合适的媒体格式并对文件进行压缩。

（3）页面性能

页面文件的加载顺序自上而下，样式则需要放置于最顶部，脚本则放置于底部（因为 JavaScript 的加载会阻塞页面的绘制）。

减少标签的数量也可以起到提升性能的作用，缩短 CSS 选择器的层级来提高性能。减少使用消耗性能的样式属性例如下面的这些：

• expression
• filter
• border-radius
• box-shadow
• gradients

页面中所使用的图片尺子应该与现实尺寸相符否则在图标下载后需要重绘导致性能下降。

能使用样式（使用 CSS 的类名）实现的交互就不使用脚本（需要重绘导致多次页面渲染）来实现。

（4）可读性与可维护性

开发之前需要明确规范，尤其是对人协作时。使用 HTML5 语义化的标签来制作页面，同样也适用于样式选择器的 ID 与类名。在使用开发中的奇技淫巧的适合需要深思是否需要使用。模块化的制作页面和样式，提高可复用性并减少文件大小。

注释注释注释，在代码中添加注释，利人利己。