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

WordPress网站全方位速度优化：HTMLJSCSS等

上一篇文章《WordPress网站全方位速度优化:主机》讲的是WordPress网站所拥有的服务器的设置。这一次，网站内部的松散导致加载速度变慢。

哪个例子是最后一个？如果一个网站主页的总大小从3MB减少到1MB。即使是1M网络带宽的服务器，加载时间也会从25秒降低到8秒，也是非常丰富的。但是，给网站瘦身并不是一件很容易的事情。我会尽力解释:

一个专用工具分析页面加载整个过程

访客浏览器从远程控制服务器抓取网页，先抓取首页的HTML文档，再从HTML文档中获取CSS、JS、图片、视频等文档并分别加载。有些JS和CSS会继续加载更多的CSS，图片和视频。

有一个专门的工具，可以看到网页加载的全过程，比如文档总数，加载顺序，每个元素的响应速度，列表等信息。GoogleChrome内置的“检查”专用工具和Firefox的FireBug专用工具都可以完成上述工作。此外，360浏览器、Safari浏览器以及最新版本的IE都集成了这一功能。(如图:minify是一个大小为426KB的css文档)

如果我们自己写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是否管用。此外，还可以使用浏览器检查工具检查表头是否有Gzip。

一般情况下，Gzip总是压缩HTML、TXT等文本文档。不建议用它来压缩图片。由于这将增加网络服务器CPU的压力，它将继续增加图片的数量。实际上，我们来看看。后面会讲减肥供图。

图片提升：先掌握图片类型和主要用途

网站上大概有几种图片:
1顶滑的背景和市场前景图片。2商品图片和实例。3其他装饰设计图片。

(很多同学不懂基础知识)

完全不透明的图片，如情况图片、商品展示图片等。

给PNG全透明图片减肥的绝招

先说全透明的图片，常见的是PNG格式。自然PNG图片也分全透明和部分透明，也有8位和24位的区别。一般来说，人们对所有透明图片都使用PNG，但是PNG图片非常大。解决办法是去TingPNG网站提高压缩。网址是https://tinypng.com/,一般能得到比较好的压缩比，画质基本没变。因为这种压缩是在线压缩，必须免费提交下载，有点不方便，但是不方便一次受益终身。

给JPG图片减肥秘笈

先说常用的jpg图片。一般大家马上在PhotoShop里修改，把尺寸剪下来，存成web格式压缩。JPG质量大约是60。每个人都知道怎么做。我再分享一个秘密:“WPSmush”，这是一个WordPress软件。每次提交图片，都会在网上进行全压缩。压缩比很高，质量不受损，速度慢。绝对值得。一般来说，我不会告诉他。

PNG透明图和JPG图的极端压缩方式都是代码转换器，小巧美观，小巧精致。是他们的秘密，不容易随便传播。把服务项目显示在网上也是一种维护。

给视频减肥瘦身

网站放视频一般有两种方式。一种方式是把它们托管在视频网站上，比如优酷视频。我们在自己的网站上介绍优酷视频的详细地址，一般会有优酷的logo或者广告。另一种方法是将视频存储在本地服务器上，这是关键点。这种视频通常体量非常大，客户下载也比较慢，应用的时候一定要注意。以下是改进的方法:

以小丽网站公司首页为例，折叠上方有一个情况视频in，视频速率1005kb，MP4格式，36秒，5.4MB，严重危害打开率。压缩成视频速率为384kb的webm格式视频后，变成1.4MB，但画质不流畅，看起来很低。最后把视频剪成22秒压缩成512kb视频速率的webm是1.4MB，质量更好。它在视频上覆盖了一层深灰色来遮挡不流畅的视频，整体看起来高端。

这也有问题。IE11浏览器和微软Edge浏览器不兼容webm格式的视频，需要将改进mp4格式的视频附加到微软浏览器上。如果浏览器是Google等适合webm视频的浏览器，网站会立刻给他们展示webm视频；如果访问者是IE浏览器，网站会给他们看MP4视频。

同样的，22秒512k的视频速率MP4也是1.4MB，但是质量差很多，所以我们要提高768k的比特率，视频质量和webm的512k比特率差不多。取笑Edge浏览器，玩视频MP4性价比高。同样的视频比IE11差很多，而且Massek严重。

以上是网站内部HTML，CSS，JS，图片，视频的推广压缩。在详细介绍了《坎尼金定律》中的两块木板“服务器加速”和“网站减肥”之后，下集将是最后一集，讲的是谷歌的“外敌入侵”。还有外部链接，缓存文件，启用系统软件的中文字体微软雅荷。

注:阅读关于网站基本建设方法的文章，请将场景移至网站建设教程频道栏目。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/767512.html