提高网站打开速度的7大秘籍

news/2024/5/16 16:09:07/文章来源:https://chen-cong.blog.csdn.net/article/details/53419368

转载自:http://lusongsong.com/reed/360.html


很多站长使用虚拟主机来做网站,网页内容一旦很多,网站打开速度就会特别慢,如果说服务器、带宽、CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度,卢松松总结了一些可行性的方法。

1: 缩小Javascript和CSS文件

如果你的网站大约有50-60%的用户是第一次访客,那么这些人会下载Javascript和CSS,如果这些文件很大浏览器会下载很长时间。

使用压缩工具可以减少Javascript和CSS尽一半的文件大小,如果你有信心使用“命令行”我强烈推荐使用雅虎的YUI压缩,至少能提高40%到60%的压缩率,如果你是在不懂可以用站长之家的CSS\JS压缩工具。

2:减少HTTP请求

浏览器会花费80%的时间获取外部元件,包括脚本、样式表、图像等,只有20%的时间用来加载内容,每个网站都会有许多HTTP请求,由于只有2个HTTP请求可以在同一时间传送,所以请求一旦过多就会造成延迟。

提高网站打开速度的7大秘籍 SEO推广

通过Yslow可以看出我博客的HTTP请求数,可以看到JS、CSS和CSS引用的图片文件过多,导致HTTP请求过多。

3:缓存图片、CSS和Javascript

每当一个新用户访问你的网站,图片、CSS和Javascript应该在其浏览器缓存,这样他们下一次访问就特别快。

绝大多数windows主机已经默认启用了,只需要在控制面板中设定过期时间和文件类型那个就可以了,我建议图片、CSS和Javascript时间可设置为一个月。而对于Apache Web服务器,使用mod_cache模块开启缓存。:

4:合并CSS引用图片

如图一所示,很多网站的图片都是切成小块的,这样下来就会有大量CSS引用图片,如卢松松博客的CSS就引用了14张图片,cssimages也是影响网站速度的一种重要因素。

如果我们把CSS图片合并成一个,14个HTTP请求变成1个,想想会是什么效果?它的原理就是通过CSS坐标的方式取得图片径路,每个CSS标签引用不同坐标就会得到不同图片。我们看到很多网站的CSS图片只有一张,用的就是这个原理。

不懂也没有关系,CSS图片合并生成器这个网站能帮助你合并CSS图片,并且能得到相应代码。

5:只加载<head>部分的基本脚本

这个最简单,不花时间,点击自己网站右键“查看源文件”找到<head>与</head>之间的区域,看看那些不重要好的JS文件,把它仍到页面底部,也就是让它最后加载。或者直接删除。

例如卢松松博客引用的jiathis(社会化分享按钮)和util.js(回顶部、写评论快捷标签),让它最后加载,这样能提升内容打开速度,而且它们也不太重要。

6:对图像进行压缩

除非你加载视频,那么影响网站速度罪魁祸首应该就是图片了,如果是jpeg、png图片,保证不失品质的前提下,让他们尽量压缩,Fireworks软件“导出向导”功能,它提供了一个很好的方式来预览保存的图像,让图片大小与质量之间平衡,大多数其他图像编辑软件都有类似的功能。

例如我的每篇博文配图都用了“导出向导”功能,我尽量把图片都压缩在30K以内,在一定程度上加快了浏览速度,但也有部分图片失真,看不清楚。

7:开启gzip模块

gzip压缩是非常流行的一种数据压缩格式,一般网站启用gzip后,压缩率都会有70%-80%的提升,效果是立竿见影的。

部分虚拟主机默认有gzip功能,但大部分没有,独立主机、VPS一般可以设置,开启gzip会加重服务器负担,而且要修改服务器配置,强烈建议大家开启gzip,如果不清楚可以问问所在空间商,让他们帮忙开启。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_843506.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端工程师必备实用网站

一、配色类网站 http://colorhunt.co 这个网站给我们提供了很多的配色方案&#xff0c;我们直接使用就OK了。使用方法也很简单&#xff0c;鼠标移动到对应的颜色上&#xff0c;我们就可以看到颜色的十六进制码&#xff0c;复制这个颜色到工具里就可以使用了。 01.pnghttps://c…

Nginx 网站服务 编译安装 访问统计 控制 虚拟主机

文章目录Nginx介绍对比Apache编译安装 Nginx 步骤安装依赖创建管理用户解压 nginx 包编译安装 Nginx让系统可以控制 nginxngxin 访问统计nginx 访问控制虚拟主机Nginx介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务…

LVS-NAT 负载均衡 轮询模式 从安装部署到访问网站

文章目录话不多说&#xff01;实验环境实验目的来吧&#xff01;&#xff01;展示&#xff01;&#xff01;&#xff01;配置NFS文件服务器配置节点服务器配置 LVS验证实验关于负载均衡的原理&#xff0c;我I在上一篇写的很详细~~(大概吧)~~ 了 链接在这&#xff1a;博客地址点…

asp.net 之web应用程序与web网站的区别

1、编译方式不一样 这个是我认为二者之间最大的区别了&#xff0c;首先&#xff0c;web应用程序中的所有的文件都是 相互独立 的&#xff0c;就是说我的一个文件的改变&#xff0c;或者发生错误不会影响其它的界面&#xff01;但是web网站就不一样了&#xff0c;它其中的一个文…

SharePoint 门户网站的图片轮播-页面定制

这个想法是自己突然的一个想法&#xff0c;想想我们经常用SharePoint做门户网站&#xff0c;不知道你们多数项目都是怎么完成的&#xff0c;我们客户要求的效果都还是很严格的&#xff0c;所有展现起来&#xff0c;还是很漂亮的&#xff0c;但是很多时候的效果&#xff0c;还是…

SharePoint 2010 电子书下载网站推荐

最近一直搜集SharePoint2010的资料&#xff0c;偶尔发现一个网站还不错&#xff0c;推荐给大家&#xff0c;皮皮书屋http://www.ppurl.com/tag/sharepoint&#xff0c;里面有很多SharePoint2010的电子书&#xff0c;虽然都是全英的&#xff0c;但是每本书去卓越都要好几百RMB的…

SharePoint 2010 网站备份还原简单介绍

今天尝试了SharePoint2010网站的备份和还原&#xff0c;从网上搜一些文档看看&#xff0c;然后自己试试&#xff0c;感觉和2007的操作没什么太大的区别&#xff0c;跟大家分享下自己尝试的命令行方式和数据库的方式&#xff0c;2007自己常用的也是这两种方式。 1、 命令行的方式…

Sharepoint 2010 自定义WebService 找不到网站应用程序

错误描述&#xff1a;Net 开发WebService调用Microsoft.SharePoint.dll的服务器端对象模型&#xff0c;出现找不到网站的应用程序&#xff0c;或者出现500错误。 错误截图&#xff1a; [Webservice调用页错误] System.IO.FileNotFoundException: 找不到位于 http://localhos…

SharePoint 搜索爬网第三方网站配置

介绍&#xff1a;SharePoint的搜索着实强大&#xff0c;而且最近用到SharePoint搜索第三方爬网&#xff0c;感觉收获挺大&#xff0c;而且网上资料没找到太多类似的&#xff0c;就小记录一下&#xff0c;分享给大家。 首先&#xff0c;我自己写了一个net页面&#xff0c;里面读…

SharePoint 2010 类似人人网站内信功能实施

简介&#xff1a;用SharePoint代码加实施的方式&#xff0c;完成类似人人网站内信功能&#xff0c;当然&#xff0c;实现的比较简单&#xff0c;样式也比较难看&#xff0c;只为给大家一个实施的简单思路&#xff0c;如有谬误&#xff0c;还请见谅。当然&#xff0c;还有就是截…

SharePoint 2013 新建网站集图解

前言&#xff1a;接触SharePoint的人可能是越来越多&#xff0c;但是很多人一接触就很迷茫&#xff0c;在技术群里问如何新建网站集&#xff0c;这样一篇图解&#xff0c;帮助新手学习在搭建好SharePoint环境之后&#xff0c;如何创建一个网站集&#xff0c;做一个基本的参考&a…

SharePoint 2013 图文开发系列之网站栏

网站栏的本质&#xff0c;就是一个xml的描述文件&#xff0c;所以创建过程&#xff0c;基本就是通过Feature部署一个Xml文件&#xff0c;然后修改Xml文件的网站栏描述。 1、添加新项目&#xff0c;选择SharePoint 2013 空项目&#xff0c;如下图&#xff1a; 2、选择调试网站和…

SharePoint 使用PowerShell恢复误删的网站集

在SharePoint网站集的使用中&#xff0c;我们很有可能会误删我们需要的网站集&#xff0c;SharePoint其实并没有把网站集删掉&#xff0c;只是放到了SPDeletedSite中&#xff0c;这样&#xff0c;我们还可以通过PowerShell找回来我们误删的网站集&#xff0c;具体操作详见下面介…

SharePoint 2013跨网站集发布功能简介

在SharePoint Server 2013网站实施中&#xff0c;我们经常会遇到跨网站集获取数据&#xff0c;而2013的这一跨网站集发布功能&#xff0c;正好满足我们这样的需求。 使用SharePoint 2013中的跨网站发布&#xff0c;我们可以使用列表和其他库来存储在发布网站上重复使用的内容&a…

SharePoint 2013 对象模型操作网站设置菜单

在SharePoint的开发中&#xff0c;经常会有客户提到网站操作上的栏目过多&#xff0c;其实&#xff0c;我们除了可以通过Feature的方式添加&#xff0c;还可以通过服务器端对象模型的方式添加&#xff1b;下面&#xff0c;让我用简单的例子&#xff0c;给大家介绍一下&#xff…

SharePoint Online 创建门户网站系列之准备篇

前 言门户是SharePoint自推出以来&#xff0c;就非常适合的一种站点类型&#xff0c;在Server版本中&#xff0c;发布站点的应用非常广泛。这里&#xff0c;我们以一个个简单的例子&#xff0c;然后以一个固定的项目Demo&#xff0c;为大家演示如何一步步在SharePoint Online中…

SharePoint Online 创建门户网站系列之母版页

前 言虽然SharePoint中母版页看起来只是头部Banner和底部版权信息这两个部分&#xff0c;但是实质在SharePoint Online中的页面模型中占有重要地位&#xff0c;而且SPO对母版页有着完善的签入签出机制和版本控制&#xff0c;方便使用。同时&#xff0c;除了保持网站所有页面的一…

SharePoint Online 创建门户网站系列之首页布局

前 言SharePoint Online中创建首页布局&#xff0c;一般都是首先将美工提供的效果图&#xff0c;切图成为Html Css Script的形式&#xff0c;然后&#xff0c;将所有资源文件传到SharePoint Online的资源库&#xff0c;在Designer中创建页面&#xff0c;添加Html页面&#xf…

SharePoint Online 创建门户网站系列之导航

前 言关于SharePoint Online中的导航&#xff0c;基本是由Html Css JavaScript组成效果以及样式&#xff0c;然后在后台列表或者SharePoint Online元数据导航当做数据源进行展示&#xff0c;通常数据源为列表的我们称之为自定义导航。下面&#xff0c;让我们分别介绍SharePoi…

SharePoint Online 创建门户网站系列之图片滚动

&#xfeff;&#xfeff;前 言创建SharePoint Online栏目我们之前已经介绍过了&#xff0c;具体就是内容编辑器方式、自带WebPart方式和JavaScript读取后台数据前台做展示的三种&#xff1b;但是&#xff0c;对于复杂的展示来说&#xff0c;这些方式还是会比较难以实现&#x…