页面优化参考

凤凰网技术中心 技术支持部

页面优化的对象 搜索引擎 浏览用户 编辑 开发人员

一、搜索引擎使用语义化标签进行编码<ul>

<div><li>aa</li><li>bb</li>

</div>

</ul><p><h1>cc</h1></p>

一、搜索引擎<div class=“breakingNews”><h1> 恐怖袭击 </h1><p>……</p></div>-----------------------------------------<div class=“breakingNews”><div class=“head”> 恐怖袭击 </div><div class=“content”>……</div></div>

二、浏览用户

三、前端工作的重要性1. 占据了 80% 的响应时间2. 实施简单易行3. 比程序开发需要更多的努力

四、 HTTP 概述

四、 HTTP 概述

五、优化网页加载速度的建议1. Make Fewer HTTP Requests 2. Use a Content Delivery Network 3. Add an Expires Header 4. Gzip Components 5. Put CSS at the Top 6. Move Scripts to the Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10. Minify JavaScript 11. Avoid Redirects 12. Remove Duplicate Scripts 13. Configure ETags 14. Make Ajax Cacheable

( 一 ) 减少 HTTP 请求数1.图像映射2.CSS Sprites3.增加过期时间4.避免跳转5.删除重复的脚本6.Ajax 缓存7.Javascript 、 CSS 和主页面分离

(*)

( 二 ) 缩短 HTTP 请求时间1.使用 CDN2.Gzip 压缩3.减少 DNS 查询4.压缩 Javascript 和 CSS 文件

( 三 ) 缩短页面渲染时间1.将CSS 置顶2.将 Javascript 置底3.避免 CSS 表达式 (CSS

Expression)

六、优化首屏加载速度1.设计规格 1000*6002.为什么重要？

六、优化首屏加载速度1. 减少图片的数量

Image Map CSS Sprites

2. 降低 HTML 布局的复杂性 设计方面 页面制作方面

基本要保证布局能够横向切断3. 减少或延迟脚本的下载和执行

编辑和开发人员提高可维护性，易于协同开发和维护。实际操作上来讲，和面向搜索引擎页面优化一样，就是使用语义化标签进行编码。

困难• 需求变化太快• 有害的需求• 坚持还是放弃

总结• 首屏设计 1000*600• 使用 CSS Sprites 处理装饰图片• CSS 置顶， Javascript 置底• CSS 和 JS 定义使用区块化编码• 首页与列表页、单页中 CSS 的不同处理方

式• 减少页面中资源文件的数量

The End参考书目：《 High Performance Web Sites 》