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

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

  • 相关推荐
  • 大家在看
  • 如何将访客转化为潜在客户?这个8个网站优化策略了解下

    你是否已经将自己的网站优化到最佳状态了呢?通过优化来产生潜在客户是转化网站已经获得的流量的最好方法之一。然而,如果你认为在网站的主页上添加几个“点击这里”的CTA策略(注:Callto Action,行动呼吁),就能获取更多的潜在客户,很遗憾的说,这个想法大错特错。

  • 疫情过后,产业互联网长跑有了“安全加速度”

    疫情虽然还在持续,但其衍生的数字化成果已经开始显现。传统行业加速数字化转型步伐,据iiMedia(艾媒咨询)发布的《 2020 疫情期间中国餐饮外卖市场商户专题研究报告》显示,疫情发生后,以线上作为主要战场的餐饮商家占78.0%,较疫情发生前增加了63. 1 个百分点,其中不乏有火锅等传统意义上无法“外送”的餐品。除了餐饮外,云会议、云教学、银行零接触服务更是借助疫情的影响,快速完成用户习惯教育。产业互联网正在疫情的催化

  • SEO优化,4个独辟蹊径的策略!

    有的时候SEO工作就是一个数字游戏,每天看着数据的增长,不断的调整相关性的策略,但我们非常清楚,有的时候SEO优化会面临各种调整,特别是同行业之间的竞争。

  • 优速快递聚力品效,不断实践 不断优化

    品效驱动货量 货量牵引收益收益拉动盈利 加速赢取未来品效、品效、品效。打牢集团底盘,以持续、稳定的品效服务驱动网络盈利能力,是集团决胜千里的不二法宝。加之,当前疫情所带来的挑战与机遇的双面性影响,我们更要聚焦品质和效率,伺机而起,不放过任何一个逆势而起的机遇。基于此, 4 月 17 日集团在全网吹响了为期 120 天的“品效提升季——全网在行动”战役号角。即集团总部高管、省区高层管理人员集体深入分拨中心操作一线

  • 车轮"加油"频道,深入优化客户体验

    近年来,得益于我国经济高速发展,人们的生活水平稳定提升,汽车消费呈现井喷之势。众所周知,汽车的使用离不开汽油的支持,因此,汽车加油成为用车养车中的主要消费项目。而使消费者在加油中感到便利和实惠,在当今社会人们日益忙碌,压力越来越大的情况下,显得尤为重要。专注于全国汽车生活服务领域的移动互联网公司车轮互联想车主所想,解车主之难,在全国范围内推出了加油服务,"价格优惠"和"一键加油"是其服务的亮点。目前,

  • 这个比QQ空间还古老的网站,是多少女孩的精神家园?

    ​你多久没有上网冲浪了?你还记得第一次和因特网的亲密接触吗?仔细算算那些诞生于 1999 年的网站,已经整整二十岁了。

  • 2345加速浏览器新功能:PDF转Word一键搞定

    不管是学生还是已经步入职场,都离不开PDF文件。PDF良好的视觉阅读性和通用性,不但使得它成为大家平时交流、汇报最喜欢发送的格式文件,就连网络上分享的资料也多以PDF为版本。但PDF的修改与编辑不便,网络上常常可以看到相关提问和网络求助。有需求就有市场,打开搜索,各类转换软件层出不穷。可要么受限于付费使用,要么使用环境没有安全保障,容易造成信息泄露。为了解决这一痛点,近日,2345加速浏览器上线的了“PDF格式转换”功能。新?

  • Kionix三轴加速度传感器的高级数据路径功能简介

    1.前言本应用指南旨在帮助开发者了解罗姆集团旗下Kionix公司的KX13x系列三轴加速度传感器搭载的独有功能——高级数据路径(Advanced Data Path,ADP)。ADP由用户可定制的频率滤波器和一个均方根(RMS)计算器组成,后者是提供所需带宽内的加速度振幅。X、Y和Z轴的 16 位ADP输出可以从专用输出寄存器中读取,存储在 512 字节的FIFO缓存中,然后被路由至Wake-Up(唤醒)和Back-to-Sleep(返回睡眠)引擎。通过设置想要的阈值振幅和计数器值?

  • IBM云服务出现故障 导致全球多个客户网站瘫痪

    太平洋时间 6 月 9 日下午,IBM Cloud的用户报告了一次故障,导致全球许多网站没有响应,目前该问题已经解决。

  • 这个网站靠帮人们分析怎么在网上赚钱,月入近3万

    不少想要搞副业的人,曾经花费大量时间和精力尝试在线赚钱,但最后才发现自己白折腾了。eBiz Facts 是一个小团队,该平台花费大量时间研究和审查各种在线赚钱方法是否靠谱,然后给用户一些建议,让他们避免被骗,以及浪费时间、精力和金钱在一些容易“踩坑”在线业务,并做出更明智的决策。

  • 阅文优化新合同,网文产业的质变何时才能到来?

    距离阅文集团与网文作者的“合同纠纷”已隔一月,昨天,这一事件终于有了阶段性的进展。 6 月 3 日,阅文集团新管理层发布了针对旗下作者的“单本可选新合同”。阅文方面表示,该合同根据不同授权分为三类四种,取消单一格式合同,并对此前充满争议的旧合同进行了十余项修改,以长图的形式为网友们划出重点。 阅文新领导团队在这份合同中表现出来的尊重与诚意,获得了网文大神与业内专家的支持与认可。 与此同时,作为内容产业的?

  • 电子书免费,写评论还奖励60美元,这家网站靠什么赚钱?

    对于喜欢阅读的用户来说,OnlineBookClub绝对是一个好地方。这个已经有着十多年历史的在线图书俱乐部,不但为用户提供免费的电子书,而且用户如果为电子书写评论,每条最高还可获得 60 美元的报酬。它甚至都不需要用户具备高级评论家的水平,只需要通过Online Book Club注册一个账户,注册成功后,你只要选好你喜欢的图书类型,然后从可供选择的图书中选择一本书,按照说明下载,然后提交评论就可以了。

  • 教你挑选香烟陈列优化神器——自动补货推进器

    自动补货器、香烟推烟器、卷烟推进器,一款陈列神器——推进器已被应用在各大商超。众所周知,为提升店铺档次,降低人工成本,减少损耗,提升满陈列效率,会想到借助自动理货器对商品进行整理,也就是——货架自动推进器,我们以香烟推进器作优势分析:1、使用了香烟推进器,丰富了香烟陈列场景,完善香烟陈列场景化,使不同的香烟陈列美观,丰富香烟陈列效果。2、一体成型工艺降低了人工组装成本,提高生产效率。和陈列柜,货架,?

  • 牛商网营销型网站:传统企业接到百万总统府邸大单

    牛商网的营销型网站助力13000+企业成功转型互联网,为传统企业转型互联提供无限可能。合肥市某专注于冷暖设备工程的传统企业,通过牛商网的营销型网站,单月销售额达 100 万,公司网络销售业务达到千万大关,通过网络成交的业绩占公司总业绩的90%,并通过牛商网制作的营销型官网接到了 5000 个平方的国外总统府邸工程订单。一起来看下牛商网是如何助力这家企业实现弯道超车的吧:传统做得再好,也要布局新跑道!这家冷暖设备工程公

  • 信息流优化策略与SEO搜索排名,有关联吗?

    最近,在和SEO你问我答群里小伙伴,私下交流的时候,总是在说一些流量获取的问题,而最为常讨论的情况就是SEO流量与信息流平台的流量。

  • 壹米滴答“品效提升季”优化全网服务品效

    品效驱动货量 货量牵引收益收益拉动盈利 加速赢取未来品效、品效、品效。打牢集团底盘,以持续、稳定的品效服务驱动网络盈利能力,是集团决胜千里的不二法宝。加之,当前疫情所带来的挑战与机遇的双面性影响,我们更要聚焦品质和效率,伺机而起,不放过任何一个逆势而起的机遇。基于此, 4 月 17 日集团在全网吹响了为期 120 天的“品效提升季——全网在行动”战役号角。即集团总部高管、省区高层管理人员集体深入分拨中心操作一线

  • 5个月创建将网站转换APP项目,月入3万!

    今天要跟大家分享的是一个将网站转换为ios、安卓APP的创业项目——Convertify。Lucas Maldonado是这个项目的创始人,他用了五个月的时间构建了这个产品,虽然产品刚发布就吸引不少关注,但中间经历了“无人问津”的低迷阶段。不过靠着独特的服务和前期扎实的SEO工作,Convertify在后期逐渐成长了起来。如今Convertify项目月均收入 5000 美元(约合3.5 万人民币)。

  • 你不知道的,抖音直播间流量优化细则

    大批的新人主播涌入抖音,不少小白主播开始遇到没人看、没人买、不会推广、不会合作的各种问题,希望今天的文章能够帮你解决这些问题。

  • iOS 14必升理由?iPhone摄像头大幅优化

    iOS 14已经正式公布,并面向开发者推送升级,公测版Beta1预计7月份上线。iOS 14带来了主屏幕小部件(支持层叠)、App Library自动归类聚合、App Clips小程序、弹窗式来电界面、消息置顶、地图

  • 微软准备Windows Core OS:全力优化Chromium使用体验

    微软正在全力准备新的Windows系统Core OS,作为Windows 10的模块化版本,该软件旨在容纳多种不同外形尺寸的设备。除了类似Chromebook的廉价上网本,Core OS还可在双屏/折叠设备、以及HoloLens 2

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