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

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>