如何网络推广:前端设计师如何降低服务器压力

SEO知识 战车网 来源:优优二手车网 60浏览 0评论

当一个网站从小流量短期内做到大流量的时候,我想给技术带来最大的问题就是服务器不稳定。同时在线几千IP里面,服务器上的CPU就会经带来100%,从而造成了访问网站速度下降,特别是一些网络比较慢的用户,此时容易打不开网站。在用户体验和网站本身都是一伤害。作为页面设计者,如何从页面结构上,在降低服务器连结数的一些经验之谈,希望对大家有用:

我们撇开程序运行效率的问题,一个网站如果要做的美观兼实用,肯定少不了一些小图,背景图的功能,同时还有表而上看不到的CSS,JS。

一、网站图片优化

图片我想是每个网站必备的,不然审美观上过不去;小图标,背景图,登录框等等。当访问一张页面时,每一张图片都是一样连结数,如果你的首页有20张的小图,那就是一个用户访问时,要占有用20个连接数,2千人同时在线时,恐怖啊。

解决图片问题就是把所有的小图集成到一个大图里面,如下图:

这样就把可以20变为1一个连接数,除了降低连接数,可以加快网页的加载图片,这儿我建议您保存为png-8格式化,因为它同比gif,jpg,png-32要更小,更小就意味着你加载页面的速度快,用户可以更快的看到你网站的内容,一石两鸟。

学一下如何调用这些图片:

比如要调用会员登录这个图标

页面上:

<a class="login" heft="#"> 会员登录</a>

CSS上:

.login{background:url("图片.png") 0 -100px no-repeat; height:30px; width:50px;}<!— 0 -100px;指图片所在的位置。Height和width是图标长宽看图标大小而定–>

这样就完成了对图标的调用,是不是很简单啊,赶快学一下吧。

二、网站的CSS优化

在CSS优化了,除了降低css大小,像marin,padding,font等一些常用的缩写外面。像上面所有说的backgroud这个也是可以简写的。如下;

页面上:

<p><a class=”login” heft=“#”> 会员登录</a><a class=”reg” heft=“#”> 会员注册</a><a class=”sell” heft=“#”> 我要卖车</a><a class=”buy” heft=“#”> 我要买车</a></p>

CSS上:

.login{background: url("../images/图片.png") 0 -100px no-repeat; height:30px; width:50px;}
.reg{background: url("../images/图片.png") 0 -100px no-repeat; height:30px; width:50px;}
.sell{background: url("../images/图片.png") 0 -100px no-repeat; height:30px; width:50px;}
.buy{background: url("../images/图片.png") 0 -100px no-repeat; height:30px; width:50px;}

改进后

.Login,.reg,.sell,.buy{background: url("图片.png") no-repeat; }<1

.Login{background-position: 0 -100px;}

.reg{background-position: 0 -100px;}

.sell{background-position: 0 -100px;}

.buy{background-position: 0 -100px;}

这是css的简写上,可以减少CSS文件大小。

为了降低CSS连接数,会把CSS代码直接写在首页的《style》***《/style》,这种情况适合像百度,163,淘宝这种重量级的。

常用的写法是

<link href="css/index.css" rel="stylesheet" type="text/css" />

<link href="css/top.css" rel="stylesheet" type="text/css"/>

我们可以把共用的头部样式写到一个common.css里面,然后在首页里的index.css里面

@import url("common.css");

注意:不要在@import url("common.css");又导入@import url("common1.css");这样在效果上适得其反。

因为在加载首页就会把common.css保存下,当第二次用户访问就直接调用本地的缓存,从而加快速度。

三、网站的JS优化

为了便于管理,很多人在写JS时,只要是广告就会用JS来代替,代码如下;

文字连接的JS调用:

<script language="javascript">document.write("<a href=’#’ target=’_blank’>会员广告链接</a>");</script>

图片链接的文字调用:

<script language="javascript">document.write("<a href=’#’ target=’_blank’><img src=’abc.jpg‘ /></a>");</script>

因为JS会把本来1行的代码变成了三,四行,增加了一些不必要的代码,还增加了下载请求。

总结:这是针对短期内来的高流量,等高流量稳定长涨后,收入增加了,可以买台服务器把CSS,JS,图片这些大量文件放到新的服务器。这是种方法能起到治本的效果。

以上只是我一些经验,希望能为广大站长提供帮助,写的并不好,希望大家理解。

本文由优优二手车网http://www.uu2car.com 原创,转载请注名出处。

转载请注明:战车网 » 如何网络推广:前端设计师如何降低服务器压力

猜你喜欢

白帽:web前端图片极限优化策略

随着web的发展,网站资源的流量也变得越来越大。据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力。 一、现有web图片格式 我们先来看下现在常用的web图片的格式: 几种文件格式的特点概述 ...

天蝎网站推广优化:优化网页速度三大细节

一。网站中图像格式的注意 一般在网页上使用的图片格式有三种,jpg、png、gif.三种格式的具体技术指标不是这篇文章探讨的内容,我们只需要知道在什么时候应该使用什么格式,以减少网页的加载时间。 1、JPG:一般用于展示风景、人物、艺术照的摄影作品。...

湖南seo:Web性能优化:图片优化

HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把...

avatar
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址