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前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...
随机推荐
- java搭建finagle(1)
1.新建maven项目 2.pom文件添加依赖 添加3个主要依赖<dependency> <groupId>com.twitter</groupId> <ar ...
- JQuery Basic Features Quick Walkthrough
1. Basic Selectors $('p')—Accesses all the paragraph elements in the HTML file $('div')—Accesses all ...
- Hibernate征途(七)之复合主键映射和集合映射
把这两种映射放到一起说,是因为这两种映射不像前面的复用型映射.数量和方向型映射那么分类鲜明,所以放到了这个“其他”里面. 复合主键映射 在关系模型中,复合主键和其他的主键方式没有很大区别,但是反映到对 ...
- 跨平台实现wchar_t转成char
位宽.其实知道了这个以后,要在wchar_t 和 char两种类型之间转换就不难实现了. wchar_t 转换为char 的代码如下: 有如下的wchar_t和char变量 wchar_t w_cn ...
- delphi 菜单的项目是否可用
菜单的项目是否可用 TPopupMenu.OnPopup事件 把代码放在这里面判断 // ----------------------------------------------- ...
- 关于java的JIT知识
1.JIT的工作原理图 工作原理 当JIT编译启用时(默认是启用的),JVM读入.class文件解释后,将其发给JIT编译器.JIT编译器将字节码编译成本机机器代码. 通常javac将程序源码编译, ...
- 小米2在Eclipse 调试,要注意下列步骤。
小米2在Eclipse 调试,要注意下列步骤.1.连接线,打开设置:USB线连接小米2,在设置-->开发者选项->USB 调是打开.如果这一步,就业在Eclipse中真机调试,下面的步骤不 ...
- Ruby on Rails Tutorial 第一章 之 Heroku部署
1.目的:用Heroku将开发环境部署到生产环境中.Heroku专门用于部署Rails和其他Web应用,部署Rails应用的过程非常简单——只要源码纳入Git版本控制系统就好. 2.搭建Heroku部 ...
- dsp与sem的互补以及技术实现
SEM翻译过来叫搜索引擎营销,个人认为是随着搜索引擎竞价排名出现的一个行业,已经有了好多年的历史,做sem的公司这些年里手里应该都积攒着大量的cookie,关键词等与SEM和追踪相关的数据,这些数据现 ...
- 详解MySQL中EXPLAIN解释命令
Explain 结果解读与实践 基于 MySQL 5.0.67 ,存储引擎 MyISAM . 注:单独一行的"%%"及"`"表示分隔内容,就象分开“第一 ...