首页 > 经验 > 关键词 > 网站优化最新资讯 > 正文

WordPress 网站全方位速度优化:HTML JS CSS等

2016-09-27 10:08 · 稿源:分享建站经验的网站
文章目录

上一篇《WordPress 网站全方位速度优化:主机篇》讲的是关于WordPress 网站所在主机的设置,这次我们来讲网站内部臃肿导致加载变慢

还是上一篇那个例子,一个网站首页总大小,如果从3MB下降到1MB。即便是1M 带宽的主机,加载时间也会从25秒下降到8秒,也是很可观的。但是要给网站减肥可不是一件容易的事儿,我尽可能的详细介绍:

一个工具解析页面加载全过程

访客的浏览器从远程主机上抓取网页,先抓取首页的HTML 文件,然后再从 HTML 文件里提取出 CSS、JS、图片、视频等文件分别加载,有的 JS 和 CSS 里还会加载更多的 CSS、图片、视频。

有一个工具可以看到网页加载过程,比如:文件数量、加载顺序、每个元素的响应时间、明细等信息。谷歌Chrome浏览器自带的“检查”工具,火狐 Firefox 的FireBug 工具都可以完成以上的工作。此外360浏览器,Safari 浏览器,IE 新版本都集成了这个功能。(如图:minify是个 css 文件,大小426KB)

如果是咱们自己写的 HTML、CSS、JS 文件,可以轻易瘦身,自己熟悉代码哪里能优化,但 WordPress 主题的 HTML、CSS、JS 我们是无能为力,只能通过Gzip压缩解决。(如下图,经过 Gzip 压缩,minify 文件 从426KB变成了57KB)

给首页HTML、JS、CSS文件瘦身

Gzip是服务器或者虚机提供的一种组件服务,简单地说:Gzip开启后,从主机到访客之间传送的文件会被压缩处理,这样就会减小通过网络传输的数据量,提高浏览的速度。比如一个首页150KB,但是经过压缩真实传输大小是25KB。(如下图)

Gzip具体使用方法:主机不同调用方法也不同,有的是写.htaccess,有的是安装个插件,不管是那种,可以到 Chinaz 站长工具里面检测(网址:http://tool.chinaz.com/Gzips/)。比如小红公司的网站:www.jianzhan1.cn的 html 文件是150KB,Gzip 压缩之后变成26KB,然后在火狐里用 FireBug 检查首页果然是25.9KB。双重验证说明 Gzip 生效了。此外Gzip 对 CSS 这类文本类的文件也会压缩,比如有个CSS 文件是426KB,压缩之后是57KB。

上图为 ChinaZ 网站检查结果,我们也可以从其他网站看出Gzip 是否生效,另外也可以用浏览器检查工具检查 header 是否有 Gzip。

通常Gzip只会压缩 HTML 和 TXT 之类的文本文件,不建议用它来压缩图片,因为这样会增加服务器 CPU 的负担,还会增加图片的体积,具体原因大家百度一下。后面会说给图片瘦身。

图片优化:先了解图片种类和用途

网站上用的图片大概这么几种:
1 头部Slider的背景图和前景图。2 产品和案例的图片。3 其他装饰图片。

不论什么图片,第一步先看宽高尺寸,大小够用就好,切忌贪大,尺寸越大,容量越大,下载越慢,特别是产品图,有的同学直接上传2000px宽的2MB 图片。(很多同学不了解常识)

此外图片还分透明图片和不透明图片:透明图比如说去掉背景的产品图,还有特殊字体的文字也需要做成透明图片,可以把他们放到背景图上。不透明的图片比如说背景图片和产品展示图等。

给PNG 透明图片瘦身的绝技

先说透明图片,常用PNG格式,当然 PNG 图片也有透明和不透明之分,还有8位和24位的区别。总而言之,透明图片我们用 PNG,但是 PNG 图片很大,解决办法是,到 TingPNG 网站优化压缩,网址:https://tinypng.com/,通常可以得到比较好的压缩比,图片质量几乎没变化。因为这种压缩是在线压缩,需要上传和下载,有点麻烦,但是一次麻烦终身受益。

给 JPG 图片瘦身秘籍

再说经常用到的JPG 图片,通常我们直接在PhotoShop 里修改,裁切大小,另存为 web 格式压缩,jpg 质量60左右。这个大家都会,我再分享个秘籍:“WP Smush”,这是一个 WordPress 插件,每次上传图片时会自动在线压缩,压缩比很高,质量损失很小,速度稍慢,绝对值得,一般人我不告诉他。

PNG 透明图和 JPG 图的究极压缩方法都是在线工具,小而精 小而美,这是他们的独门秘籍,不会轻易外传,在线提供服务也是一种保护。

给视频减肥

网站上用的视频通常有两种方式,一种是托管在视频网站,比如优酷,我们在自己网站上引用优酷视频的地址,通常会有优酷的标志或者广告。另外一种方式是把视频存放在本地主机上,我们主要说这种。这种视频往往容量很大,用户下载慢,使用时一定要注意。下面说说如何优化:

以小红建站公司网站首页为例,第一屏有个背景视频,1000kb码率的MP4格式,36秒,5.4MB,严重影响打开速度。压缩成384kb码率的webm格式视频后,变成1.4MB,但画质很粗糙,显得很low。最后把视频剪辑成22秒,压缩成512kb码率的webm是1.4MB,质量好些,在视频上覆盖一层灰色,遮住粗糙的视频,整体显得高档。

这样做还有个问题,IE11浏览器 和 微软Edge浏览器 不支持webm 格式的视频,这需要额外增加mp4格式的视频给微软的浏览器。访客浏览器如果是支持webm视频的谷歌等浏览器,网站直接给他看webm视频;访客如果是 IE 浏览器,网站会给他看 MP4视频。

同样22秒 512k的码率MP4也是1.4MB,但是质量差很多,不得不提升768k码率,视频质量和webm的512k码率类似。吐槽Edge浏览器,播放MP4的质量好差,同样一段视频比IE11差不少,马赛克严重。

以上是对站内HTML,CSS,JS,图片,视频的优化压缩,木桶理论的两块木板“主机提速”和“站内减肥”介绍完了,下集将是最后一集,讲谷歌这个“外患”,还有外链,缓存,调用系统中文字体微软雅黑,。

  • 相关推荐
  • 大家在看
  • 携程回应比价搜索网站 Skyscanner 裁员:将进行组织结构优化

    针对裁员问题,携程方面回应称,由于全球疫情的冲击,天巡(Skyscanner)计划采取一系列措施加以应对,其中包括组织结构的优化。在此过程中,天巡还将产生约 60 个新工作岗位,并优先考虑现有的员工。此前,网传携程旗下机票比价搜索网站 Skyscanner 宣布至多20%,将近 300 人的裁员。

  • 美疾控中心网站删除部分疫情数据 美疾控中心网站网址

    美疾控中心网站删除部分疫情数据是怎么回事?据央视新闻援引美国有线电视新闻网(CNN)报道,当地时间 7 月 16 日,在特朗普政府决定「接管」新冠肺炎疫情数据后,美国疾病控制与预防中心网站上的一些数据已被删除,包括相关医院数据。

  • 百度SEO优化,外链自动优化与推广的工具,你真的需要吗?

    当我们做外链建设的时候,经常想寻找一个快速自动发布SEO外链的工具,并且希望在SEO工作中可以利用更多的工具,来加快SEO优化的工作进度,这些想法是可以理解的,但我们真的需要这样做吗?

  • 反复搜索并点击自己网站,对SEO排名影响有哪些?

    ​在做SEO的过程中,我们总是会有一个小习惯,那就是当我们刚开始做网站排名的时候,总是习惯性的去搜索自己的关键词,并且去点击相关的页面。  

  • IBM宣布SSD神优化技术:性能、可靠性提升3倍 延迟降低50倍

    随着技术的发展,SSD硬盘也面临着新的瓶颈,性能、可靠性及延迟等指标难以兼顾。IBM日前宣布推出一种新的SSD分区技术,它可以将SSD的性能及耐用性提升3倍,延迟足足降低了50倍。这个分区技术不

    IBM
  • SEO网站排名,现在如何重新规划与设计?

    对于百度搜索而言,并不是一个“平凡”的一年,可谓是“波澜不惊”,百度搜索引擎算法,几乎每天都在不断的调整与修正。

  • 微博:除了这四类网站 其他网址均不再支持跳转

    7月8日消息,微博管理员官微发布《微博平台实施外链白名单机制的公告》,公告称,8月初将上线微博外链白名单机制。所谓微博外链白名单,就是把目前免费的短链服务调整为受限制的免费服务,仅对

  • 数字科技加持信用飞,引领产业未来迈出“加速度”

    全球正在加速进入以“万物互联、泛在智能”为特点的数字化新时代! 目前,数字科技变革重构了全球产业,数字经济成为决胜未来全球竞争的重要战略,人类正在向一个以数字化生产力为主要特征的全新历史阶段迈进。产业数字化成为全球各国逐鹿新经济格局的客观选择、不同行业领域企业抢抓新机遇的必然趋势。在此背景下,信用飞也是身体力行,用实力与成绩交出了满意的答卷。基于数字与科技的结合,信用飞在不断的升级与实践中,通过新

  • 帮别人做seo推广优化如何赚钱

    很多人都知道网站搭建完后,需要做seo推广优化,不过大家一定没想到的是,做seo推广优化也可以赚钱。之前的文章都有说到,现在做seo推广优化越来越困难,搜索引擎的规则越来越严格,大家付出了很多的时间去做seo推广优化,网站的效果还是不明显。确实如此,但是如果用对了seo推广优化工具,不但让您的网站推广有效,还能够借助这个工具帮您赚到钱。现在就看看帮别人做seo推广优化如何赚钱吧。线上业务需求量大,潜在客户多根据数据显示,我国在

  • 轻松4步搭建一个有用的教育网站

    现在各行各业都纷纷转线上发展业务,教育行业也不例外,纷纷搭建起了网站。但是对于教育行业来说,一般不会配备一支技术团队在学校,因此搭建网站,对于教育行业来说,显然有些困难。而且,教育网站的要求比较多,需要充分地展示学校的风貌,还需要有相应的课程内容、购买功能等。那教育行业究竟怎么才能够很好地搭建完成一个教育网站,并且能够利用这个网站带来更多的生源呢?今天就以兴华国际教育控股公司为例,让大家也可以快速搭建好教育网

  • 宅家无聊?这个网站可以让你“窥视”别人家窗外景色

    尽管全球部分地区正在慢慢重新开放,但国外旅行仍受到广泛限制。不过有了这个新网站,你可要愉快的看着别人家窗外有美丽的“风光”了。

  • 为什么大家都爱用这款网站推广软件

    最近很多朋友都跟我推荐一款网站推广软件,总说因为这款软件,现在连竞价词也不用做了!其实朋友说的这款网站推广软件,是由耐思智慧自主研发的【千站推智能推广软件】,帮助中小企业和个人推广网站,让网站可以霸屏搜索引擎首页。今天就为大家分享一下这个朋友的案例,让大家看看究竟有什么吸引人的地方。今天要为大家分享广州米枫网络有限公司赵总的真实故事,看看赵总为什么会这么喜欢这款网络推广软件。顺势而为 突破困境赵总是80后,在

  • 国内版N号房网站被查处

    今天,全国“扫黄打非”办公室 9 日公布“净网2020” 专项行动上半年数据:全国共查处网络“扫黄打非”案件 1800 余起,处置淫秽色情等有害信息 840 余万条。网传所谓“国内版N号房网站”“滴滴司机直播性侵女乘客”“五一宜家门”等多起网上突发传播案事件被查处。通过严厉打击淫秽色情及低俗信息,在网络直播、短视频、社交群组、网络文学等领域开展专项整治,“净网”行动取得明显效果。根据两部门交办的线索,重庆市沙坪坝公安

  • 做网站推广最害怕的是花了钱还没效果

    各行各业现在都希望能够借助互联网帮助企业做推广,让更多的人能够关注到自己的企业。这个方向显然是正确的,但是,企业最担心的并非推广的途径和费用,而是担心花了钱去帮助网站推广,但没有效果。根据网站推广的常用方式,我计算了一些数据,看到这些数据,真让人细思极恐。现在就给大家看看两组数据,让大家看看企业常用的网站推广方式,到底要花费多少钱,以及效果如何。常用的网站推广方式企业一般为网站做推广的方法有两种,

  • 国内版N号房网站查处进展:某大一学生架设网站传播淫秽视频 充值会员近万人

    【TechWeb】7月9日消息,全国扫黄打非办公室今日公布“净网2020”专项行动上半年工作情况,其中提到快速处置网传所谓“国内版N号房网站”、“滴滴司机直播性侵女乘客”“五一宜家门”等多起网上突发传播案事件。通报显示,对网传所谓“国内版N号房网站”相关线索情况,全国“扫黄打非”办公室联合公安部治安局开展核查。经研判,涉案网站传播方式、组织架构与韩国“N号房”存在明显差异,属于日常打击的一般性境外淫秽色情网站。?

  • 我辍学创建了一个卖「滤镜」的网站,如今月入超20万!

    国外站长迈克·莫洛尼(Mike Moloney)从零开始创建了一个让摄影师和创作者可以买卖滤镜预设、视频模板的网站——FilterGrade(官方网址:https://filtergrade.com/),并实现月入 3 万美元(约合人民币 20 万元)成绩的故事。

  • 慧博和发现报告哪个更好用?研报网站全对比

    资料收集是一件相当繁琐的事。看研报的人都想要一个研报非常全、数据非常多、查询还方便的研报网站。我用的是【慧博投研】和【发现报告】。【慧博投研】作为国内第一批诞生的研报平台,有着多年运营研报平台的经验。研报多,性价比也不错,APP与客户端使用起来也相对便捷。凭着多年来的投研数据,吸纳了大量用户。【发现报告】则是我同事推荐给我的,去年才入坑【发现报告】。据我了解,它是近三年才诞生的互联网研报网站。一个免?

  • Cloudflare宕机导致大量网站和服务无法访问

    在Cloudflare的部分网络服务出现故障后,官方发布事故报告,称骨干网络的配置错误导致了持续 27 分钟的宕机。

  • AI抢饭碗 微软对MSN网站编辑团队大裁员

    微软公司旗下MSN新闻网站正在进行备受争议的转型,把此前由人工编辑做出的内容决定交给自动化和人工智能(AI)。现在,据科技网站Geekwire报道,微软公司打算进一步缩减MSN团队。

  • 一个超良心的字体网站,让你彻底摆脱用字困扰 不看后悔!

    对于字体,大家是否曾出现过以下疑问呢?电脑上的字体太少了?找不到合适的字体?字体不好看?用这个字体会不会侵权?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签