保留文字效果。

如果需要兼顾用户体验和SEO效果，在必须用图片的地方，例如个性字体的标题，我们可以利用样式控制，让文本文字不会出现在浏览器上，但在网页代码中是有该标题的。

例如这里的“电视剧分类”，为了完美还原设计图，前端工程师可以把文字做成背景图，之后用样式让html中的文字的缩进设置成足够大的负数，偏离出浏览器之外，也可以利用设置行高的方法让文字隐藏。注意：不可使用display:none;的方法让文字隐藏，因为搜索引擎会过滤掉display:none;里边的内容，就不会被蜘蛛检索了。

HTML代码：

CSS代码：

或

利用CSS截取字符。

如果文字长度过长，可以用样式截取，设置高度，超出的部分隐藏即可。这样做的好处是让文字完整呈现给搜索引擎，同时在表现上也保证了美观。

提升网站速度

尽量外链CSS和JS，保证网页代码的整洁，也有利于日后维护。

这样的好处是可以把内容、表现和行为分离开，保证代码整洁的同时也方便维护。

CSS放在文件头部，JS放在文件尾部，可使用工具对CSS和JS文件进行压缩。

CSS Sprites。

减少HTTP请求。利用CSS Sprites技术可以把网页用到的切片合成到一张图上，这样做既减少了HTTP请求数，又使得样式图片一次加载，避免网页“白”的尴尬。

360官网首页（http://www.360.cn）主要前端图片2张：

图片1：

图片2：

为图片设置高度和宽度，可提高页面的加载速度。

为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站。

减少大改版的频率。

压缩、格式化代码。