骨灰级极简主义代码优化

       你的网站打开加载速度慢，代码冗余，兼容性差？这些都是站内基础优化(代码优化、CSS优化、JS优化、图片优化)没做好造成的。为自己做个代言，重庆吖七SEO是纯手写代码骨灰级极简主义者，只要服务器不是垃圾，所建设的网站打开速度是杠杠的，以最少的代码，达到相同的效果，兼容性强，后期维护成本低。

       搜索引擎虽然纠错能力（兼容性）越来越好了，但代码越精简越好，都知道SEO优化中网站打开速度是影响用户体验的。常见的代码优化有：选用Html标签优化、CSS优化（最重要）、JS优化、Table表格优化等，今天放出来，不看是损失。

垃圾代码多：少复制别人的东西，尽量纯手打

       每个人都有自己的习惯写法，只要你觉得简洁，代码少，就用哪种，当然要兼容性强，便于检查，如果把<!--注释内容-->去掉也行，建议保留主要的说明，毕竟网站后面可是需要调整的。纯手打代码需要掌握以下技巧。

Html标签优化：多用默认的短标签

       常用的块标签（默认占用一行）有

<dl>、<dt>、<dd>、<p>、<ul>、<li>、<h1>、<h2>、<h3>、<h4>...

       行间标签有

<b>、<em>、<i>、<a>、<b>...

       实在用完了，还有

<span><small><strong>...

       DIV+CSS已经成为网站建设的主流，个人习惯分块后，最大的外框用<div clsss="title">标题</div>，但是除非必要，并不鼓励用<div id="title">标题</div>的形式，该div里面的元素全部用短标签，如果一定要用class，就采用公共样式。

选用标签原则

       能达到相同效果的越简单越短的越好。比如<i>、<em>都是倾斜，就优先用<i>，原来有强调的作用，但是<i>标签大多数被用来做一些ico图标，倾斜效果现在比较少用了；

       <b>、<strong>都是加粗，但意义完全不一样，<b>就是纯加粗，<strong>有强调的意思，让搜索引擎注重里面的内容，不建议过多采用，防止别误判作弊。

CSS样式优化：多用公共样式

       如果怕出问题，较完整的HTML源码写法如下：

<div class="Ti w1200 cl">
 <ul>
  <li><h4>这是列表的文章标题1</h4><span>2016-5-27</span></li>
  <li><h4>这是列表的文章标题2</h4><span>2016-5-28</span></li>
 </ul>
</div>
<style>/*样式放在</head>之前*/
*{margin:0;padding:0;font-famliy:"Microsoft Yahei";}
ul{list-style-type:none;}
cl{clear:both;}
.w1200{width:1200px;height:auto;margin:0 auto;text-align:left;}/*橙色部分为全站的公共样式*/
.Ti{font-size:14px;color:#444;}/*这是title的公共样式*/
.Ti span{float:right;font-size:12px;color:#c00;}/*只写与title公共样式不一样的就行了*/
</style>

       在确定页面布局后，采用CSS压缩，去掉多余的回车和“}”前的“;”

<style>*{margin:0;padding:0;font-family:"Microsoft Yahei"}.cl{clear:both}.title{font-size:14px;color:#444}.title span{font-size:12px;color:#c00}</style>

       当然形式不是固定的，一般有列表调用的都使用<ul><li>或者<dl><dt><dd>组合，后者更灵活些，毕竟多了一组标签。

       一般首页采用CSS样式直接写到页面的形式（减少页面请求次数），其他页面写到公共样式表，全站只用一个样式表。

JS优化：只采用一个JS封装

       出现多个JS封装的一般都是不会写JS的站长，JS封装不同，这样很容易发生冲突。建议采用统一的JS插件，推荐采用SuperSlide，自己网上搜吧，PC和移动的常见JQuery特效效果都有，代码简单，修改也容易。建议一个站内不要用太多的效果，看起来爽，但是打开速度堪忧，用户也懒得点那些华而不实的效果；简单的JS效果比如弹窗、条件判断等可以写在页面内（减少页面请求次数）。

Table标签：上个世纪的事了

       用习惯了DIV+CSS建站之后，对table标签实在是没办法接受，一个一个的表格嵌套，复杂不易更改，是个蛋疼的标签，如果是表单，也完全可以用其他标签代替。快遗忘这个标签把。

站内图片优化原则：重点

图片尽量本地化

       一张图片可以顶好几段源代码了，如果从外部空间调用，需要的时间当然教长。如果是图片或视频站，启用其他空间放图片或视频的情况是可以的，一般的优化站尽量把图片本地化。

缩略图和内容详情图分开上传

       实际上是为了减少加载时间，缩略图一般较小，清晰度要求没那么高，内容页需要展示较多细节。缩略图控制在50-60Kb以内，内容页控制在90-110Kb以内。

DIV元素背景颜色采用纯CSS样式颜色

       传统的网站把网站切成了几十个小图片，用background的进行编写，对那些还不是整张图片的背景图片，我只能说这样非常蛋疼，修改起来非常费力！

图片清晰度和占用空间大小（不是尺寸大小）需要平衡

       如果你的站点不是对清晰度要求很高的话，可以采用PhotoShop等软件转存为Web专用格式，压缩图片处理，尽量达到清晰度和占用空间大小平衡，

小图片或不常更换的图片集中到一张图片

       这样的处理可以用CSS样式：background-position，进行背景的定位，图片尽量采用gif或者png，这两种格式能做成背景透明，会减少很多占用空间。

图片lazyload延迟加载技术

       这是一个延迟加载的插件，用户鼠标滚动之后才开始加载下面的图片，保证访问速度。参考文章《网站图片Lazyload延迟加载技术》

扩展阅读