SEO前端优化
精减代码 清除网页中一些冗余的代码,网上有这样的工具,可以辅助完成,如果需要的话,我们可以把代码中的注释去掉,甚至空行之类的也去掉,尽量的减少代码量,从而减小页面体积。
CSS Sprites
通俗点讲,就是图片合并,可以把网站中一些比较通用的小图片,合并到一张图片上,然后利用CSS技术来分别调用图片不同的部分。这样可以大大的减少HTTP的请求量,在网页加载的时候,速度就快很多,现在很多大中型网站都在用这个前端加速技术,效果也是很不错的。
为图片指定宽度与高度
这也是很多人比较容易忽略的,在页面中,请你为每一个图片,都指定一个width属性与height属性,这样在页面加载的时候,浏览器会预先留出既定的位置,图片下边的代码可以继续下载而不用等待,提高并行下载的速度,提高了页面加载的速度。
启用Keep-Alive属性
Keep-Alive你可以理解为长连接,在没有启用keep-alive属性之前,浏览器向服务器请求的connection是即连即断的,执行一次HTTP请求完成后,马上断开这个连接的,而启用
Conncetion的Keep-Alive属性之后,这个连接可以保持一段时间,从而可以提高页面加载的速度。
使用浏览器缓存
我们可以使用缓存技术来提高页面的加载速度,为一些不经常变化的文件,设置一个相对较长的过期时间,这样当用户访问网站后,就会在它的浏览器中留下缓存,当它在下次请求的时候,留在缓存中的组件就不用再向服务器发出HTTP请求了,这样减少了浏览器向网站服务器发出的HTTP请求数,从而提高了页面加载速度,这在一些图片比较多的网站,效果是非常明显的,我们要善于使用缓存技术。
启用GZIP压缩
大中型网站,基本都启用了GZIP压缩,如果你使用的是虚拟主机,你可以让服务商为你启用,如果自己有服务器,自己启用也很简单的,为什么启用 GZIP压缩就会加快速度呢,因为当启用了GZIP后,网站服务器向你传输数据之前,是经过压缩了的,当传输到你的浏览器后,会再被解压缩的,从而可以在你的浏览器上正常显示,而且压缩率可以达到很多高,效果非常好。一般你启用了压缩后,搜索引擎对你网站的抓取量也是上升了的。
前端速度优化方面还有很多工作可以去做,例如大公司都启用了CDN加速,你的图片也可以进行无损压缩,CSS、JS文件都可以用一些专业的工具去压缩,在你网页的head标头要声明字符集,尽量少用重定向,指定Last-Modified 或 ETag 标头等,当然这些都多少涉及了一些技术方面的问题,做页面前端优化是一个系统的工程,是需要技术、SEO、运维等去配合完成的,不过这个投入是绝对值得的。
SEO前端优化的更多相关文章
- 【webapp的优化整理】要做移动前端优化的朋友进来看看吧
单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...
- Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...
- [转] Web前端优化之 内容篇
原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...
- 网站前端优化 -saveForSelf
九.网站前端优化 – IMG 9.1.可以优化的图片 图片总共可以分为两类,一个是CSS IMAGES,另一个是产品图片. 9.2.CSS IMAGES CSS图片现在采用的方式是图片合并的方式,这样 ...
- 网站前端优化技术 BigPipe分块处理技术
前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化 ...
- 前端优化点(此文转载 http://mp.weixin.qq.com/s/6mVVKmqDL_xYl15AeoJTWg)
此文转载自:http://mp.weixin.qq.com/s/6mVVKmqDL_xYl15AeoJTWg (原文地址) 围绕前端的性能多如牛毛,涉及到方方面面,以下我们将围绕PC浏览器和移动端浏览 ...
- 【前端优化之渲染优化】大屏android手机动画丢帧的背后
前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...
- 【前端优化之拆分CSS】前端三剑客的分分合合
几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...
- 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)
本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...
随机推荐
- jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...
- [Angular 2] Directive intro and exportAs
First, What is directive, what is the difference between component and directive. For my understandi ...
- Ajax条用WebService 5星级
转:http://www.cnblogs.com/frozenzhang/p/ajax.html 随笔- 2 文章- 0 评论- 5 $.ajax()调用webservice 常规请求基本格式 [ ...
- fscanf()函数具体解释
曾经解析有规律的文件的时候要么用正則表達式,要么就是傻傻的自己敲代码来解析有规律的文件.今天突然发现c的库函数中有一个现成的能够解析有规律的文件的函数,就是fscanf()函数.哎 曾经自己做了这么多 ...
- MVC之 自定义过滤器(Filter)
MVC之 自定义过滤器(Filter) 一.自定义Filter 自定义Filter需要继承ActionFilterAttribute抽象类,重写其中需要的方法,来看下ActionFilterAttri ...
- 网络IPC:套接字
网络进程间通信(network IPC):不同计算机(通过网络相连)上运行的进程相互通信的机制. 套接字网络IPC接口:进程能够使用该接口和其他进程通信.通过该接口,其他进程运行位置是透明的,它们可以 ...
- jQuery Mobile 连接外部连接或切换动画
jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/Bl ...
- IOS横竖屏控制与事件处理
公司App里面有个需求,即所有界面都是竖屏,且不允许横屏切换,唯独有一个图表界面允许横屏.那么,根据此需求处理如下: 首先,确保App本身应该允许转屏切换: 再次,我的App里面都是走UINaviga ...
- BootStrap2学习日记5---列表
常用列表标签有3中如下:<ul><li><ol><li><dl><dt><dd> 例子: <div class ...
- BootStrap2学习日记2--将固定布局换成响应式布局
概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...