网站JS脚本和CSS优化

本文由金楠于 2017-1-10 13:34 发布在 SEO网站优化阅读：3729

由于网站效果的需要，许多网站都会在网页上，加上一些JS特效，或者大量的CSS样式，以达到丰富网站内容的作用。但是由于有的网站建设者技术不够专业，或建设习惯问题，导致有的网站中，JS和CSS占用了大量的篇幅。这不仅影响了网页打开的速度，而且给蜘蛛的爬行带来了不便，虽然蜘蛛常会跳过大量的JS代码，但是过多的可以外置的代码，仍然会给蜘蛛带来不好的印象。要知道，搜索引擎蜘蛛喜欢的是简单有条理的内容，而对蜘蛛来说大篇的JS代码就是无用的，因为大多数搜索引擎，都不知道它所表示的具体意思。

对于SEOer来说，我们需要的不只是网站怎么美观、效果怎样的丰富，我们更需要的是便于搜索引擎优化的网页。因此对于网站内大段的JS和CSS代码，最好的办法就是将它们独立成单个的文件，放置在一个专门的JS和CSS目录下。在需要的网页head部分，调用JS脚本文件或者CSS样式表，以下为站长之家首页，调用外部JS和CSS文件的代码：

<head>

</head>

上段代码中href及src后面的值为调用JS和CSS文件的URL地址，调用JS或者CSS外置文件时注意：

q 调用代码应在网页head部分。

q JS文件调用时应使用<script language="javascript/vbscript" type="text/javascript/vbscript" src="../xx.js"></script>为标准调用代码，里面的javascrip/vbscript根据调用文件的类型决定。为何站长之家没有写language="javascript" type="text/javascript"呢？因为以IE内核为标准的浏览器默认的script文件为javascript语言脚本，因此在绝大部分的浏览者中都不会发生错误。但是不排除有使用vbscript的网站，因此我们为保证准确性，最好完整的写出来。

q 调用CSS样式表的标准代码为<link rel="stylesheet" type="text/css" href="../xx.css">，同样告诉浏览器此调用的是样式表（stylesheet），格式为CSS文本。不过CSS发生错误的几率非常低，但是为了万无一失最好还是按照标准写法编写。

将JS和CSS独立出来，放置在一个单独文件夹里，使网站的维护和修改变得更为便捷，当需要修改某个样式或者效果时，只需要改动单个文件。同时当多个网页使用同一个JS或者CSS文件时，用户只需要加载一次代码文件就行了。浏览其他网页时，直接使用浏览器缓存里的JS和CSS文件，有利于减少带宽和打开速度。

但外置文件也有不利因素，那就是当用户第一次访问网页时，浏览器会发出多次HTTP请求，这会加大服务器的负担。如果初次访问用户过多的话，很可能出现网页打开不全的情况，这就是为什么有时候打开某些网站会出现网站布局错乱的情况。

我们在决定使用，外置还是内置JS和CSS文件这个问题时，一般还是考虑将它们独立出来，以提高网站的打开速度，也便于搜索引擎蜘蛛的爬行，这是利大于弊的。尤其是网站内容丰富，用户浏览网页数量较多的网站，例如新闻站、信息资源站等。这些网站用户浏览的网页数量一般很多，而且大多数页面的样式和效果都一样，外置JS和CSS文件是非常重要的。而且对于SEO来说，外置JS和CSS文件，是规范整站和内部优化的一项重要工作。

　　本文节选自金楠所著《seo搜索引擎实战详解》一书，更多内容可关注金楠博客或者选择购买本书。