WEB前端开发优化技巧

2471

web前端开发主要包括网站上大部分人所能看到的内容和效果,这些涉及到HTMLCSSJS相关内容。一般web前端开发时更多的注意布局是否和效果图一样,浏览器是否兼容,页面效果好不好看。今天主要从SEO优化和网页加载速度两方面讲解下web前端开发需要注意的事项。

1、网页加载速度相关的优化技巧
a、减少网站HTTP请求。将多个图片合并到一张图片,然后使用CSS的background-position来显示,将多个CSS文件和JS文件合并成一个。这样就大大减少了页面中HTTP请求。

b、减少请求时内容的传输。正式上线的时候使用压缩工具对CSS文件和JS文件压缩,图片在不影响显示效果的情况下尽可能的压缩大小。

c、让CSS先加载,JS后加载。HTML代码在浏览器中都是从上到下一行行执行。如果将CSS样式定义放在中间或者底部,网络不好就会出现短暂白屏或者页面抖动。js文件一般是页面的效果,可以等页面css加载完了再引入。如果放在头部也会占用浏览器http请求数。每个浏览器的同时请求HTTP数是有限的,超过了就得排队。js文件在解析的时候,也会阻塞页面内容的渲染和呈现。

d、尽量使用Ajax,Ajax可以缓存请求的内容。

2、网页SEO优化相关的优化技巧
1、每个页面都必须有且仅有一个h1标签,h1~h6的标签的使用必须从h1~h6,不能直接跳过。比如:h1用了直接就用h3标签。

2、有些标签的属性对用户来说可能看不到,但对搜素引擎非常重要,比如:a标签的title属性,meta标签的description和keywords,img标签的alt属性。

3、代码的结构尽量简洁,减少标签间的嵌套,更利于搜索引擎分析抓取的内容。

4、页面内容尽量不要做成flash、图片、视频,这些搜素引擎是抓不到的。