前端相关的网站优化

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

CSS 优化、提高性能的方法：
1.关键选择器(key selector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)；
如果规则拥有 ID 选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)；
2.提取项目的通用公有样式,增强可复用性,按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
3.使用预处理工具或构建工具(gulp 对 css 进行语法检查、自动补前缀、打包压缩、自动优雅降级)；