前端页面代码优化

一个网站由后端和前端两部分组成，前端部分是呈现给用户的。在本文中，笔者将讲解前端页面代码的优化，当然这也是基于SEO优化的。

  就前端而言，如果做了伪静态处理，那么基本就是普通的html代码，正常情况下这些页面内容都是通过页面模板来输出。那么前端的页面代码有哪些地方需要优化呢，我们从以下几个方面来看看。

一、头部冗余代码

有些开源的网站程序在<meta>里加入了大量的代码，如果不查看源代码根本看不到，这对用户来说并没什么，但有些代码完全是多余的，甚至有些代码使用不当还会导致一些不必要的错误。

笔者建议，<meta>里的代码尽量简洁，用不到的直接丢弃，另外，不能确定如何使用的代码也果断放弃。精简代码对于页面打开的速度有一定的好处。

二、代码位置

代码的位置处理其实是个小细节，但意义不小。百度搜索引擎优化指南明确指出，页面应该尽量让主体内容优先呈现，什么叫主体内容？举个简单的例子，文章页，文章的具体内容就是主体内容，其他的像边栏、相关内容等模块就是附加内容。

部分使用了两栏的网站页面，左边是边栏，右边是页面主体，在前端代码里则使用了从上到下、从左到右的顺序。这样的代码处理对用户阅读没有不妥，但对于爬取代码的搜索引擎来说，就是先抓取了次要内容，后再抓取到主体内容，对seo优化而言，这不合理。

其实要解决代码位置的问题很简单，现在绝大部分网站都是使用div+css，我们只需要稍微调整下代码即可！比如通过div的float属性处理左右位置，在页面模板里把右侧内容区块放置到上面。

三、结构化和H标签

这里的结构化主要是针对H标签及div区块来说的，比如说H标签能标注处页面哪些内容是最重要的，哪些是次重要的。关于H标签推荐大家阅读页面H标签怎么使用一文。

至于div其实也很好理解，比如说把某些相关性强的内容放到一个div中，这样就可以很明确的跟其他内容区分开。举个最简单的例子，还是说文章页，我们可以把文章内容放到一个div中，相关推荐内容放到一个div中，边栏放到一个div中，经过这样处理，整个页面代码就有了明显的架构化和层次感。

让页面代码结构化及设置H标签，目的就是辅助搜索引擎更好的识别和抓取页面内容，这对于seo优化来说是有好处的。

四、css外调

css代码应该放置在一个独立的文件中，因为css文件中很多样式同时被不同类型的页面调用，设置独立文件再进行调用就保证了页面代码的整洁，避免代码冗余。

PS：最近有种说法，就是除去公共部分的css代码，把页面单独使用到的css代码直接写在页面模板里，这样精简css文件代码，在调用css文件的时候减少代码渲染的时间，提供页面打开速度。这在理论上是可行的，只是会让工作量加大，大家具体权衡吧！

五、尽量少用js

有些朋友为了让页面看起来更炫酷，使用了大量的js代码，这样炫酷的效果是达到了，但却忽略了这些特效的代码会大大影响页面打开速度！对seo优化是极为不利的。

六、图片处理

关于图片的处理注意说两点，一是添加图片的alt属性，来帮助搜索引擎识别图片内容；二是设置尺寸，尤其是在pc端，设置了尺寸，打开页面后就减少了渲染的过程。

在前端页面代码优化中还有很多小细节，大家需要记住，能够提高页面打开速度以及有助于搜索引擎识别页面内容的地方都值得去研究。