关于前端优化技术之电脑端兼容性调试介绍

SEOER可以通过对网页性能的速度测量和剖析来获取网页上的大部分性能数据。如何依据这些数据采用恰当的方式和手腕来优化SEO的性能？

基于SEO优化的PC阅读器前端优化技术

前端优化策略很多，可以概括为网络加载类、页面出现类、CSS优化类、javascript执行类、缓存类、图像类、系统构造协定类等。

网络加载类

1、减少HTTP资源恳求的数量

百度和谷歌官员在他们的搜索优化指南中重复强调尽可能多地合并HTTP恳求。在前端页面中，通常建议尽量合并静态资源图片、javascript或css代码，以减少页面恳求数量和资源恳求耗费，从而缩短初次拜访页面的用户的等候时光。通过构建工具合并图像、CSS、javascript和其他文件可以减少HTTP资源恳求的数量。此外，我们应当尽尽力避免反复资源和增添冗余恳求。

2、减小HTTP恳求大小

除了减少HTTP资源恳求的数量，我们还应当小化每个HTTP恳求的大小。例如，可以使用减少不必要的图片、javascript、css和html代码、优化文件紧缩或使用gzip紧缩传输内容来减少文件大小和缩短网络传输等候时光。特殊是百度闪电算法之后，对网站的拜访速度也有要求。

3、将css或javascript放在外部文件中，避免直接使用<style>或<script>标志。

在HTML文件中引用外部资源可以有效地应用阅读器的静态资源缓存，但有时在简略的移动页面css或javascript的情形下，为了减少恳求，css或javascript会直接写入HTML，具体依据css或javascript文件的大小和业务场景而定。如果css或javascript文件的内容更多，业务逻辑更庞杂，建议将其引入外部文件。

<linkrel=“stylesheet”href=“//cdn.domain.com/path/main.css”><scriptsrc=“//cdn.domain.com/path/main.js”><script>

4、避免空心Href和SRC

当<link>标志的href属性为空或<script>、<img>和<iframe>标志的src属性为空时，阅读器在渲染进程中仍会加载href属性或src属性的空内容，直到加载失败，从而阻拦页面中其他资源的下载进程，加载的内容。是无效的，所以应当尽量避免。

<imgsrc=“”alt=“photo”>ahref=“>单击链接</a>

5、为HTML指定Cache-Control或Expires

为HTML内容设置Cache-Control或Expires可以将HTML内容缓存起来，避免频繁向服务器端发送恳求。在页面Cache-Control或Expires头部有效时，阅读器将直接从缓存中读取内容，不向服务器端发送恳求。

<metahttp-equiv="Cache-Control"content="max-age=7200"/><metahttp-equiv="Expires"content="Mon,20Jul201623:00:00GMT"/>

6、合理设置Etag和Last-Modified

合理设置Etag和Last-Modified使用阅读器缓存，对于未修正的文件，静态资源服务器会向阅读器端返回304，让阅读器从缓存中读取文件，减少Web资源下载的带宽耗费并降低服务器负载。

<metahttp-equiv="last-modified"content="Mon,03Oct201714:45:57GMT"/>

7、减少页面重定向

页面每次重定向都会延伸页面内容返回的等候延时，一次重定向大约须要600毫秒的时光开销，为了保证用户尽快看到页面内容，要尽量避免页面重定向。

8、使用静态资源分域寄存来增添下载并行数

阅读器在同一时光向同一个域名恳求文件的并行下载数是有限的，因此可以应用多个域名的主机来寄存不同的静态资源，增大页面加载时资源的并行下载数，缩短页面资源加载的时光。通常依据多个域名来分离存储JavaScript、CSS和图片文件。

<linkrel="stylesheet"href="//cdn1.domain.com/path/main.css"><scriptsrc="//cdn2.domain.com/path/main.js"></script>

9、使用静态资源CDN来存储文件

如果条件容许，可以应用CDN网络加快同一个地理区域内反复静态资源文件的响应下载速度，缩短资源恳求时光。

10、使用CDNCombo下载传输内容

CDNCombo是在CDN服务器端将多个文件恳求打包成一个文件的情势来返回的技术，这样可以实现HTTP衔接传输的一次性复用，减少阅读器的HTTP恳求数，加快资源下载速度。例如同一个域名CDN服务器上的a.js，b.js，c.js就可以按如下方法在一个恳求中下载。

<scriptsrc="//cdn.domain.com/path/a.js,b.js,c.js"></script>