精减代码  清除网页中一些冗余的代码,网上有这样的工具,可以辅助完成,如果需要的话,我们可以把代码中的注释去掉,甚至空行之类的也去掉,尽量的减少代码量,从而减小页面体积。
  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前端优化的更多相关文章

  1. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧

    单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...

  2. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  3. [转] Web前端优化之 内容篇

    原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...

  4. 网站前端优化 -saveForSelf

    九.网站前端优化 – IMG 9.1.可以优化的图片 图片总共可以分为两类,一个是CSS IMAGES,另一个是产品图片. 9.2.CSS IMAGES CSS图片现在采用的方式是图片合并的方式,这样 ...

  5. 网站前端优化技术 BigPipe分块处理技术

    前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化 ...

  6. 前端优化点(此文转载 http://mp.weixin.qq.com/s/6mVVKmqDL_xYl15AeoJTWg)

    此文转载自:http://mp.weixin.qq.com/s/6mVVKmqDL_xYl15AeoJTWg (原文地址) 围绕前端的性能多如牛毛,涉及到方方面面,以下我们将围绕PC浏览器和移动端浏览 ...

  7. 【前端优化之渲染优化】大屏android手机动画丢帧的背后

    前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...

  8. 【前端优化之拆分CSS】前端三剑客的分分合合

    几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...

  9. 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

随机推荐

  1. Codeforces Round #313 (Div. 2) A. Currency System in Geraldion 水题

    A. Currency System in Geraldion Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/c ...

  2. Android之使用AchartEngineActivity引擎绘制柱状图、曲线图

    1.简介 AChartEngine(简称ACE)是Google的一个开源图表库(for Android).它功能强大,支持散点图.折线 .关于里面类的具体使用,请下载响应的文档说明(主页上有). 2. ...

  3. oc-04-类的声明和实现

    //main.m //10-[掌握]类的声明和实现 //.h为类的声明,.m为类的实现,+表示类方法静态方法,-表示对象方法..h文件中的方法都是public不能更改的.变量3中访问域:public, ...

  4. python 2.5源代码编绎

    VS C++项目中,选择工程项名称,右菜单中选择--->仅适用于项目---->仅生成(项目) 1.make_buildinfo,make_versioninfo make_buildinf ...

  5. python工具程序一、复制目录中指定扩展名的文件

    #!/usr/bin/env python # coding:utf-8 # xcopy Lib directory and rename all files to *d.lib import os ...

  6. 关于使用NotificationComat导致android2.3及以下版本无法显示自定义布局的解决方法.

    大伙都知道 android-support-v4为我们提供了很多兼容的解决方案, 其中就有关于通知栏的. NotificationCompat, 顺利成章操刀显示通知. eg: Intent inte ...

  7. Qt增加webp格式支持

    Webp 是一种图片文件格式,能在相同质量的情况下比 PNG 文件尺寸小巧. Chrome 应用商店图片已全部转换为 WebP 格式 YY(基于Qt开发)也已经把图片格式换成webp了 http:// ...

  8. cocos2d-x混合BlendFunc的使用

    1.什么是混合模式 “混合”是指两种颜色的叠加方式.在新图片将要渲染画到屏幕上的时候,将用在新图片中的红.绿.蓝和透明度信息,与屏幕上已经存在的图片颜色信息相融合. 说的具体一点,就是把某一像素位置上 ...

  9. reset.css(详细说明)

    @charset "utf-8";/************************************************************************ ...

  10. 第二节:Maven的运行机制

    Maven 的运行机制分为两个分别是生命周期和插件 首先我们来说说Maven的生命周期 1.1:生命周期是个个阶段组成的 1.2:Maven的生命周期是相互独立的,他们之间没有交集 1.3:阶段是有顺 ...