【站长学堂】如何优化网站加载时间

屏聚源码 2019年9月1日21:33:18屏聚学院评论74,194阅读模式

众所周知,网页的速度已成为影响搜索引擎排名的重要因素。随着超高速宽带使用人群的日渐庞大,加载速度慢的网站形势紧张。在这里,笔者将针对如何优化网站加载时间,分享一些实际的意见。

  需要使用的工具

  据笔者发现,最简单的工具是YSlow和Firefox/ Firebug的网页速度插件。

  下载Firebug的方式:http://addons.mozilla.org/en-US/firefox/addon/firebug/

  下载YSlow的方式:http://addons.mozilla.org/en-US/firefox/addon/firebug/

  下载Page Speed的方式:http://code.google.com/speed/page-speed/download.html

  一旦你已安装这些,就准备好进行下一步了。通过火狐浏览器进入你想要优化的网站,点击添加栏中Firebug的图标(如下所示),从而打开 Firebug控制台,然后点击网页的速度选项卡,其次是分析性能选项卡,在几秒钟内你会得到一个100以外的分数。这样做的目的是,获得一个分数使其越 接近100越好。而之前你的分数大概已经在70/80周围。

  使用这些工具,笔者已经使自己的一个网站分数达到90/100,拥有更快的载入时间。

  【站长学堂】如何优化网站加载时间

  Page Speed插件的便捷之处在于,如果你点击进入某个区域,它将给你提供额外的信息,而且此区域会以不同颜色的编码来指示其好坏,红色代表很差,黄色代表还好,绿色代表非常好。

  【站长学堂】如何优化网站加载时间

  你所能做的

  压缩CSS

  CSS(层叠样式表,使你网站美观的文件)经常被忽视。任何合理的网站,CSS文件都可以有成百上万行的代码,每个标签、空间、额外的逗号、换行和代码注释使你的文件大小增加。虽然它使人们编码时更容易,但却可以减缓你的网站速度。

  【站长学堂】如何优化网站加载时间

  对此的解决方法是为开发人员的工作保持原始副本,然后为网站缩减代码(删除所有不必要的),这样可以平均节省达到20-30%,特别在大的文件上这是很有帮助的。

  【站长学堂】如何优化网站加载时间

  避免不良的CSS

  CSS简单易学但很难掌握,对于学习如何写出更好的CSS,这里有一些很好的网站,你或你的开发人员都应该看看,这甚至值得每个人学习。

  【站长学堂】如何优化网站加载时间

  启用压缩

  你还可以启用gzip或在你的服务器上压缩,这将减少正发送给访客的HTML文件,CSS大小等。再次强调,更小的文件大小等于快速载入时间。

  你可以在这里了解更多的压缩的知识。(http://code.google.com/speed/page-speed/docs/payload.html#GzipCompression)

  使用一个CDN

  CDN是一种在你的网站上展示媒体的奇妙而廉价的方式。这并不是让你的网站发送图片,例如发送给访问者,而是从一个类似于亚马逊S3服务的CDN上加载它们,从而卸下你服务器上的负载,使其能够为更多的访客服务。

  使用缓存系统

  近来几乎所有网站都使用数据库,电子商务网站和博客是这方面最好的例子。正如之前所说,你对每个服务器的每一个请求,减缓了网页加载速度,而数据库也正是如此。每次加载页面时,数据库的信息被请求然后反馈给访问者。

  在试图满足每一个请求的负荷下,服务器每秒只能处理一定量的请求,而这正是缓存系统需要发挥作用的。

  缓存系统将每小时一次地调用和“保存”结果信息,每个访客将得到保存的版本,直到它再次更新,这是像Facebook这种要应付它们的数据库每秒得到的数以百万计的请求得到他们的数据库每秒钟处理的网站原则上的方式。

  这种战术通常只需要中等至较大的网站,但是如果你使用预建如WordPress或Magento安装包,那么你可以很容易地实现缓存。

  WordPress

  笔者最喜欢的缓存插件WordPress是一种超高速缓存插件。只需五分钟的安装/配置时间,就将帮助你处理大量的流量和流量峰值。这个的链接是http://wordpress.org/extend/plugins/hyper-cache/

  另外,还有许多类似于Wordpress的其它缓存插件也能保证快速搜索。

  电子商务

  大多数电子商务包内置高速缓存,例如Magento就有一个很好的内置缓存系统。如果你已经建立自己的电子商务软件,并发现它加载很慢,那么你应该考虑应用一个像memcache一样的缓存系统。

  使用CSS精灵

  这算是笔者最喜欢的一个小方法。CSS精灵是一个很好的方式,不仅减少了你的图片请求数量,也缩小了图像的整体规模。

  用一张图作为一个“模板”,然后选择模板的一小部分。

  【站长学堂】如何优化网站加载时间

  以上是一个CSS精灵。这张图是作为在网站上许多的按键、导航标题、图标等的一个模板。通过使用精灵,请求数量和整体文件的大小都会缩减。

  【站长学堂】如何优化网站加载时间

  写出良好的代码

  这一点似乎是显而易见的,但写出本身不需要重复的干净代码可以使你的网站快得多。如果上述没有一个方法加快你网站速度的话,假如你有自定义的软件,那么它可能非常值得移入一个预先建立的解决方案或重建系统。

  不管你网站前端所做的努力有多好。后端不良的优化代码必然会减慢网站的速度。

  检查你的硬件

  如果你使用诸如WordPress的预建软件,那么你只需要更新。开发商常常会写出更高效的代码,并解决了很多问题。如果你使用的是旧版本,那么你就不会受益于它们的改进。

  当你升级的时候请注意,首先要在一个单独的服务器对升级进行测试。不要只升级你的在线网站而希望程序不会中止,事实证明,这是经常发生的。

继续阅读
屏聚源码
怎么获取小程序页面路径 屏聚学院

怎么获取小程序页面路径

怎么获取小程序页面路径? 1、登录小程序的微信公众平台http://mp.weixin.qq.com/ 2、点击右上角工具选项卡,在下拉菜单中选择“生成小程序码” 3、弹出的窗口中填入小程序appID...
教你如何导出百度网盘目录结构-超详细的 屏聚学院

教你如何导出百度网盘目录结构-超详细的

百度网盘大家都在用,有时候希望把自己的文件目录结构给导出来,能形成一个文件树的形式,无奈网上找了好多资料都无果,大多数说的是在浏览器里控制台下,那个方法已经不适用,而且只能导出一级目录,求人不如求己,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定