前端相关的网站优化

图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。
如果图片为 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 缓存,浏览器缓存,服务器缓存。

时间: 2024-11-07 21:56:01

前端相关的网站优化的相关文章

网站优化——前端部分【转】

开篇语 作为一个前端的菜鸟,总是在面试的时候被问及一些优化的问题,说实话,回答的时候总是心虚,因为确实没有真真正正做过优化对比,也不知道从何说起,今天在网上收集一些例子加以总结,日后若是开发用到,也能一一对照,把自己开发的网站做到最优化! 网站优化 一个网站的优化,前端只是很小的一部分.大到系统架构,小到页面HTML布局,无一不影响这一个网站的用户体验.由于现在知识面还比较窄,对架构方面的优化(服务器集群.业务分离.NOSQL.数据库设计.缓存设置.单点登录)理解不全面,本篇就先只总结前端的一些

网站优化——前端部分

开篇语 作为一个前端的菜鸟,总是在面试的时候被问及一些优化的问题,说实话,回答的时候总是心虚,因为确实没有真真正正做过优化对比,也不知道从何说起,今天在网上收集一些例子加以总结,日后若是开发用到,也能一一对照,把自己开发的网站做到最优化! 网站优化 一个网站的优化,前端只是很小的一部分.大到系统架构,小到页面HTML布局,无一不影响这一个网站的用户体验.由于现在知识面还比较窄,对架构方面的优化(服务器集群.业务分离.NOSQL.数据库设计.缓存设置.单点登录)理解不全面,本篇就先只总结前端的一些

网站优化相关理论概述

1.网站优化 网站优化即是网站为了提高用户满意度和网站价值,根据相应策略对网站视觉设计.布局和信息架构等做出的改善措施.网站优化概念有广义和狭义之分,狭义的网站优化就是搜索引擎优化,即为了提高搜索引擎收录和排名,根据总结出的搜索引擎工作原理所做的优化措施.广义上的网站优化不但包括搜索引擎优化,还包括舒适愉悦的视觉体验.层次清晰的网站导航.健全的用户反馈和客服机制.原创且更新及时的网站内容等方面.可见广义上的网站优化有独立于搜索引擎而存在的特性,涵盖范围较广,且形式灵活多样,但用于检测这些优化方面

我对知乎前端相关问题的十问十答

之前知乎上有不少同行邀请我回答一些前端相关问题,但是,大家都知道了,要认真回答一个问题是需要大量时间和精力的,对于还在不断学习积累阶段的我,时不时分散原本的精力,打乱自己原本的节奏,实际上是一件不划算的事情.就好像邮件或者微信,来一条信息,你就去看一下,时间和精力都会大大分散,工作和学习效率必然会大打折扣.所以我的策略是一段时间后专门花时间统一处理,这样时间利用率会更高,投入产出比会更大. 对于知乎上的这些前端的问题,我也打算采用同样的套路,趁着端午节前还有两个晚上的自由时间(当晚修正:两个晚上

前端工程与性能优化

每个参与过开发企业级 web 应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎 14 条性能优化原则,还有两本很经典的性能优化指导书:<高性能网站建设指南>.<高性能网站建设进阶指南>.经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来.这些性能优化原则大概是在 7 年前提出的,对于 web 性能优化至今都有非常重要的指导意义. 然而,对于构建大型 web 应用的团队来说,要坚持贯彻这些优化原则并不是一件十分容易的事.因为优化原则中很多要求与工程管理

前端资源(优秀网站、博客、以及活跃开发者)

查看原文 @forked from hjzheng/front-end-collect 在前端路上摸索前行,在这里分享自己长期关注的前端开发相关的优秀网站.博客.以及活跃开发者.欢迎更新.以下各排名不分先后顺序. 前端收集图谱(点击查看) 聚合&&周报订阅 名称 订阅地址 介绍 Html5 Weekly http://html5weekly.com/ Html 技术类 CSS Weekly http://css-weekly.com/   Javascript Weekly http://

静态资源文件自动压缩并替换成压缩版本(大型网站优化技术)

原文:静态资源文件自动压缩并替换成压缩版本(大型网站优化技术) 这一次,我总结和分享一项大型网站优化技术,那就是在项目中自动压缩静态资源文件(css.js),并让网站自动加载压缩后的资源文件.当然,这项技术在雅虎35条前端优化建议里也有记载,但它那只是给出一个理论的方案而已,并且采用的是外部压缩工具去压缩,而在我的项目中,是直接通过自己的程序自动化去压缩所有css.js文件,然后让页面直接加载所压缩后的资源,接下来直接进入主题. 本次实验使用的是PHP脚本语言,版本是PHP5.6,是在LINUX

前端相关网址合集

综合类 | 地址--- | --- 前端知识体系--http://www.cnblogs.com/sb19871023/p/3894452.html前端知识结构--https://github.com/JacksonTian/fks免费的编程中文书籍索引--https://github.com/justjavac/free-programming-books-zh_CN智能社 - 精通JavaScript开发--http://study.163.com/course/introduction/2

推荐一些C#相关的网站、资源和书籍 (转载自http://blog.csdn.net/chinacsharper/article/details/17514923)

一.网站 1.http://msdn.microsoft.com/zh-CN/ 微软的官方网站,C#程序员必去的地方.那里有API开发文档,还有各种代码.资源下载. 2.http://social.msdn.microsoft.com/Forums/zh-CN/home 微软msdn论坛.定位于微软技术的传播和技术问题的解决,是学习微软技术的好去处. 3.http://www.codeproject.com/ 国外著名的社区网站,面向世界的程序员.有很多不错的程序都可以从那里下载到. 4.htt