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前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...
随机推荐
- DuiLib(四)——控件绘制
duilib的所有控件均绘制在唯一的真实窗口之中,本篇就具体看下这个绘制的过程.所有的绘制过程均在WM_PAINT消息处理过程中完成.由窗口及消息篇可以看到,窗口消息处理最终流到了CPaintMana ...
- SPOJ LIS2 Another Longest Increasing Subsequence Problem 三维偏序最长链 CDQ分治
Another Longest Increasing Subsequence Problem Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://a ...
- delphi 插入 HTML代码 播放器
Delphi在Webbrowser中插入 HTML/java script代码 使用方法将下面的代码赋值到1个记事本里保存,然后保存为xxx.htm就可以看到效果使用PasteHtml实现功能 的事件 ...
- Android apk的安装、卸载、更新升级(通过Eclipse实现静默安装)
一.通过Intent消息机制发送消息,调用系统应用进行,实现apk的安装/卸载 . (1) 调用系统的安装应用,让系统自动进行apk的安装 String fileName = "/data/ ...
- Redis 脚本
Redis 脚本使用 Lua 解释器来执行脚本. Reids 2.6 版本通过内嵌支持 Lua 环境.执行脚本的常用命令为 EVAL. 语法 Eval 命令的基本语法如下: redis 127.0.0 ...
- Android录音--AudioRecord、MediaRecorder
Android提供了两个API用于实现录音功能:android.media.AudioRecord.android.media.MediaRecorder. 网上有很多谈论这两个类的资料.现在大致总结 ...
- Android(java)学习笔记88:TextView属性大全
TextView属性大全: android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...
- Java中的文件操作
在使用计算机编程中,常常会用到对于文件的操作,以下是我对于Java中文件的相关内容学习之后的一个总结和在学习过程中遇到的一些问题. 一.什么是文件 对于文件进行操作,首先我们要知道什么是文件.在此之前 ...
- Write a beautiful button
.btn-warning { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); background-color: #faa732; backg ...
- ios webview点击图片看大图效果及相应手势操作
下面参考资料有比较详细的解释,在之前的就项目中也有比较好的效果(支持更多手势),可以参考下 参考资料