码迷,mamicode.com
首页 > Web开发 > 详细

前端相关的网站优化

时间:2017-08-14 18:53:22      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:默认   图片   重要   开始   决定   移动终端   rip   位置   密度   

 

图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。
如果图片为 css 图片,可以使用 CSSsprite,SVGsprite,Iconfont、Base64 等技术。
如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。

 

HTML 结构语义化:
更符合 W3C 统一的规范标准,是技术趋势。
没有样式时浏览器的默认样式也能让页面结构很清晰。
对功能障碍用户友好。屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
对 SEO 友好。

 

以前端角度出发的SEO:

搜索引擎主要以:外链数量和质量网页内容和结构来决定某关键字下的网页搜索排名。

前端应该注意网页结构和内容方面的情况:
Meta 标签优化
主要包括主题(Title),网站描述(Description)。还有一些其它的隐藏文字比如 Author(作者),Category(目录),Language(编码语种)等。
符合 W3C 规范的语义性标签的使用。
如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键词(一般在 5 个上下),然后针对这些关键词进行优化,包括关键词密度(Density),相关度(Relavancy),突出性(Prominency)等等。

 

在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,次js请求后进行缓存处理,例如dns 缓存,cdn 缓存,浏览器缓存,服务器缓存。

前端相关的网站优化

标签:默认   图片   重要   开始   决定   移动终端   rip   位置   密度   

原文地址:http://www.cnblogs.com/yxbje/p/7359276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!