最新文章:

您的位置: 富录-前端开发|web技术博客 > SEO > 如何优化页面

如何优化页面

发布时间:2018年05月01日 评论数:抢沙发阅读数: 1183

    1.在书写HTML代码的时候,遵循标签语义化的要求,根据标签的语义性进行选择,如布局使用div、标题使用h系列标签、段落使用p标签等。

    2.HTML代码要合理嵌套,一般情况下,行元素当中不能包含块元素,除了段落、标题类型的块元素当中,既能够包含块元素,也能够包含行元素,而段落或标题类的块元素只能够包含文字或行元素。table元素只能够直接包含thead、tbody、tfoot、caption等元素;ul/ol元素只能直接包含li元素;dl元素当中只能直接包含dt和dd元素;form表单当中只能直接包含filedset和legend,不能直接包含input元素。

    3.使用外部引入CSS文件和JS文件,实现结构、样式和行为的相分离,降低模块间的耦合度。

    4.CSS规则命名中,一律采用小写加中划线的方式,不使用下划线或大写字母,命名采用更简明有语义的英文单词进行组合,进行合理的缩写

    5.CSS代码的书写顺序遵循CSS样式的渲染顺序:显示属性-自身属性-文本属性-其他

    6.在上线之前进行CSS文件压缩

    7.在CSS代码当中,尽量的规避掉不同浏览器的兼容问题,如果实在避免不了,也需要进行合理解决,同时尽可能的少使用hack。

    8.尽量不在代码中出现没有意义的空标签,对于可以采用空标签清除浮动的代码,可以用其他方法解决,如after伪元素。

    9.使用背景图合并技术,将多张背景图合并到一张图片上,从而降低页面与服务器之间的请求次数。

    10.权衡嵌套层级以及扩展性等多个方面后,在适当位置使用三层嵌套技术。

    11.合理的填写html文件中的title、meta等内容,合理书写a标签的title、img标签的title和alt,提升网站的SEO

    12.CSS Sprite网页图片应用处理技术

    13.合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可

    14.语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页

    15.重要内容HTML代码放在最前:搜索引擎抓取HTMl顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取

    16.重要内容不要用js输出:爬虫不会执行js获取内容

    17.少用iframe:搜索引擎不会抓取iframe中的内容

    18.非装饰性图片必须加alt

    19.提高网站速度:网站速度是搜索引擎排序的一个重要指标


    content方面

    1. 减少HTTP请求:合并文件、CSS精灵、inline Image

    2. 减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询

    3. 避免重定向:多余的中间访问

    4. 使Ajax可缓存

    5. 非必须组件延迟加载

    6. 未来所需组件预加载

    7. 减少DOM元素数量

    8. 将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量

    9. 减少iframe数量

    10. 不要404


    Server方面

    1. 使用CDN

    2. 添加Expires或者Cache-Control响应头

    3. 对组件使用Gzip压缩

    4. 配置ETag

    5. Flush Buffer Early

    6. Ajax使用GET进行请求

    7. 避免空src的img标签


    Cookie方面

    1. 减小cookie大小

    2. 引入资源的域名不要包含cookie


    css方面

    1. 将样式表放到页面顶部

    2. 不使用CSS表达式

    3. 使用不使用@import

    4. 不使用IE的Filter


    Javascript方面

    1. 将脚本放到页面底部

    2. 将javascript和css从外部引入

    3. 压缩javascript和css

    4. 删除不需要的脚本

    5. 减少DOM访问

    6. 合理设计事件监听器


    图片方面

    1. 优化图片:根据实际颜色需要选择色深、压缩

    2. 优化css精灵

    3. 不要在HTML中拉伸图片

    4. 保证favicon.ico小并且可缓存


    移动端方面

    1. 保证组件小于25k

    2. Pack Components into a Multipart Document

二维码加载中...
本文作者:DGF      文章标题: 如何优化页面
本文地址: http://arbays.com/post-82.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论