推56论坛

 找回密码
 立即注册(限中文)

QQ登录

只需一步,快速开始

查看: 1397|回复: 0

[WordPress教程] WordPress网站速度优化:WP加速图文教程(二)

[复制链接]
发表于 2019-9-20 11:43:51 | 显示全部楼层 |阅读模式
四、开启缓存插件缓存,英文名Cache,有个美妙的发音,跟 Cash 发音基本相同。
缓存的作用主要是减少数据交互的传输量,减少数据处理次数,加快响应速度,降低对磁盘文件的访问次数。
高速缓存能将一些文件创建副本存放起来,用以下一次访问或查询的快速调用响应,返回页面或结果。当缓存副本被调用时,只会产生很小的网络流量,可以有效地降低带宽消耗。

网站所涉及到的缓存,主要是指指一个 Web资源(如 html 页面,图片,JS文件,数据等)存在于 Web 主机(服务器)和客户端(浏览器)之间的副本。
缓存会根据网站访客的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制来决定:是直接使用副本来响应访问请求,还是向源 Web 主机(服务器)再次发送请求。
为什么我要认真介绍缓存,因为当你的网站建立差不多的时候,你就要开始应用缓存机制。几乎每个成功的 WordPress 网站都需要使用缓存。
毕竟,缓存可以使你的 WordPress网站的速度明显提高 2-4 倍!
一般来说,在客户端,我们比较常见的是本地电脑浏览器的缓存。我们的浏览器会缓存访问过网站的网页,当再次访问这个 URL 网页地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地浏览器中缓存的网页。只有当网站明确标识有资源已经更新,浏览器才会再次从网站上下载网页。
根据缓存的类型,一般分为:静态缓存、动态缓存、数据库缓存、CDN缓存以及浏览器缓存等。
静态缓存 (Static):CSS样式表文件、JS脚本文件、HTML静态网页、JPG/GIF/PNG 图片文件、MP3/MP4/AVI 等静态媒体文件的缓存。
如果一个页面包含很多图片,每次访问都要从网站主机上下载图片,必然十分耗费资源。所以一些经常要读取又很少要修改的静态文件,是最佳的缓存对象。通常很多缓存插件都支持静态文件缓存。
动态缓存 (Dynamic):关于动态缓存,主要是加速 PHP 运行效率用的。
WordPress 的页面是“动态的”,即使可以设置 rewrite 规则使得 WordPress 支持伪静态,但本质来说,WP 还是动态的。这意味着每当有人访问你网站上的文章或页面时,它们都是即时构建的。
用户访问 WordPress 搭建的网站,WordPress 执行 PHP 程序,PHP 向 MySQL 数据库请求数据,数据库查询并返回数据给 PHP,PHP 将内容以 HTML 格式的页面呈现给浏览者。
如果对 PHP 能够创建缓存,那么这个环节的速度会得到极大提升。事实上,一些知名的缓存插件如 WP Super Cache 或 WP Fastest Cache 都支持动态缓存。如果你使用 SiteGround 主机,则无需安装这些插件。后面我再解释。
另外,如果你使用 VPS,可以用 LNMP 环境包装包开启 OPCache 缓存,或者安装BT面板开启 OPCache 缓存,有助于提升 PHP7 以及更高版本的 PHP 性能。PHP 5.5 版本之后已经默认内嵌 OPCache 了,只是没有开启。
以前还有个老牌的 PHP 缓存应用:eAccelerator。一般使用了 OPCache 之后,就无需再安装 eAccelerator 了。
至于 SiteGround 的用户就更不用操心了,SiteGround 从 PHP7 版本就默认配置开启了 OpCache 缓存,所以不用管它。
数据库缓存:如果同一时间访问请求太多,可能会造成对于数据库查询的负荷增大。有很多功能强大的 Web 应用或 WP插件,由于功能太多,往往会创建很多数据库表,如果频繁进行数据库查询,很容易导致数据库不堪重负。
为了提升数据查询的性能,我们可以把查询后的数据放到内存中进行缓存。下次查询时,直接从内存缓存读取,提高响应效率。
比如常见的数据库缓存方案有 Memcached 和 Redis,我比较喜欢用前者。Memcached 和 Redis 都是通过在内存中缓存数据和对象来减少读取数据库的次数,属于内存级的缓存。
如果你用 SiteGround 主机,也无需了解如何安装 memcached,后面我再解释。
另外,如果你使用 VPS,可以用 LNMP 环境包装包开启和配置 MemCached 缓存,或者安装BT面板开启 MemCached 缓存,有助于提升数据库查询速度和效率。VPS 上安装开启 MemCached 之后,可以在 WordPress 后台搜索:Memcached is your friend 插件,启用插件,将此插件文件夹内的 object-cache.php 文件上传到网站 wp-content 文件夹下,即可使用管理 Memcached 缓存。
CDN缓存:CDN(Content delivery networks)缓存,也叫反向代理缓存。关于 CDN 是什么,下文我再解释。
浏览器缓存:浏览器缓存的作用是记住浏览器已加载的资源。当访问者访问你网站上的其它页面,并且新页面调用跟之前已访问页面相同的资源时(比如 网站 Logo 图片,CSS文件或JS文件)时,不需要再次加载这些文件。
开启启用浏览器缓存时,一些不需要改动而又有必要被缓存的文件,将存储在访问者的浏览器中。
很多缓存插件都支持开启浏览器缓存,比如 WP Super Cache 或 WP Fastest Cache。如果你使用 SiteGround 主机,则无需安装这些插件。
SiteGround 的 SuperCacher 缓存工具
SiteGround 开发了一个名为 SuperCacher 的缓存工具,这个工具在三个不同的层提供服务器端缓存:
  • Level 1 Cache 一级缓存 – 用于静态内容,如图像,HTML文件等;
  • Level 2 Cache 二级缓存 – 用于动态内容,如 PHP 脚本;
  • Level 3 Cache 三级缓存 – 用于执行数据库的结果查询

在 SiteGround 后台 Cpanel 下,可以看到一个 SITE IMPROVEMENT TOOLS 板块。下面有个 SuperCacher 应用。
SiteGroundSiteGroundhttps://www.siteground.com/go/noredirect


点击进入后可以看到,有三部分的设置。

这个 SuperCacher 相当于你 SiteGround 上网站的缓存总开关。我们依次开启 LEVEL 1,LEVEL 2 和 LEVEL 3。
因为 SuperCacher 这个缓存工具,是 SiteGround 开发的整体的缓存机制,适用于每个网站。但不同的网站是由不同的程序创建的,比如有些是 WordPress 建的站,有些是 Drupal, Joomla 或 Magento 建的站,不同的程序怎样控制这个缓存系统呢?当然不同的程序下,开发了各自对应的插件,来分别控制。
这里我们全部启用之后,WordPress 网站上,只要安装启用插件 “SG Optimizer“,就可以控制各类缓存功能。安装插件后,在 WP 后台左侧菜单中,找到 SG Optimizer。
进行如下设置:

要排除的缓存的 URL,可以填写 wp-admin/* 和 wp-includes/* ,防止 wp-admin 和 wp-includes 下的动态文件被缓存。
https://www.ledlightsmfg.com/wp-includes/*
https://www.ledlightsmfg.com/wp-admin/*


关于 PHP Management Method 说明:
保持使用最新版本的 PHP,可以提高 PHP 的效率,提高网站速度。另外,保持使用较高版本的 PHP,也可以让网站变得更安全一些。
但,可能有个问题,一些插件可能还不支持最新版的 PHP。所以为了兼容性,你也可以选择 Set Manual PHP Version,选择次高版本的 PHP 版本。然后每过半年检查一次 PHP 的版本,保持一致使用次高版本的 PHP。
这里的 Browser Caching 的作用类似于 VPS 上设置 Nginx 规则:
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
     expires 30d;
}

这里设置expires,并不是指把静态内容缓存在 nginx 中,而是设置客户端浏览器缓存的时间。
接着前端页面优化设置(Fronted Optimization)如下,我个人建议不要勾选 Minify Javascript Files,因为 JS 脚本文件的代码压缩,比 CSS 样式表文件容易出一些意外的问题或状况。

还有一页的 IMAGE OPTIMIZAITON 可以启用。以前我们使用 TinyPNG 出品的图片压缩插件,这个之前的文章里介绍过:WordPress图片压缩插件:Compress JPEG & PNG images
现在我们可以少使用一个插件了。当然你可以先取消启用这个图片插件(不然后台总是提示 SG Optimizer 有图片优化功能,跟你已经安装的图片压缩插件功能类似…),然后启用 SG Optimizer 的 IMAGE OPTIMIZATION 里的图片优化功能。
开启新图片优化,执行批量图片压缩优化,开启图片的 Lazy Load 功能,具体下面的每个选项,如果你并非的确清楚或强烈需要,我建议不用开启。

注意:这里有个问题,批量优化图片时,可能会把你网站现有的 LOGO 图片的质量降低。如果出现这种情况,你可以对 LOGO 图片单独用 Cpanel 的 File Manager 上传上去,或者用 FTP 工具如 FlashFXP 上传。
OK!这样几步就搞定了 SG Optimizer 的设置。
另外,在后台顶部,有个 Purge SG Cache 的链接按钮。点击之后,会清理 SiteGround 的缓存。
有时候,你做了一些修改,想清理缓存。比如修改更新了 CSS 文件,希望加载新的样式。但是刷新后网站并无变化,此时你需要刷新缓存。可能你点击了 Purge SG Cache 后也没什么用,因为尽管 SiteGround 主机上已经清理了缓存,但你的浏览器上仍然存在静态文件缓存。
此时假设你是 Chrome 浏览器,可以直接按 Ctrl F5 或 ctrl shift R(Mac上使用Cmd   Shift   R)强制不读取浏览器缓存刷新,即可看到修改后的最新样式。其他浏览器我不太清楚,可以尝试一下快捷键,如果不行在浏览器菜单里清理一下缓存文件,刷新网页即可。
另外,如果你使用的不是虚拟主机而是 VPS,你不会安装设置各类缓存应用,那么有个简单的方案可以供你考虑:安装 WP Rocket 加速插件。注意:如果你使用的是 SiteGround 虚拟主机,可以不用购买和安装 WP Rocket 插件。因为 WP Rocket 跟 SG Opitimizer 很多基本缓存的功能重合。
(题外话:WP Rocket 这款缓存工具这几年实在是太流行了。设置简单,功能强大,使用界面简洁友好。所以,还有种选择是:用着虚拟主机,但是也可以配合使用付费的缓存工具 (WP Rocket 或 WP Fastest Cache
即:虚拟主机缓存工具(SG Optimizer)+WP Rocket/WP Fastest Cache。
这种组合方案下:如果虚拟主机的缓存工具有 MemCached,那么只开 MemCached 功能,其他功能都不用开,只开启 Memcached,即 SG Optimizer 只控制 MemCached。具体缓存的各类功能,都交给 WP Rocket 或 WP Fastest Cache 来完成。这也是一种不错的搭配方式。
)
WP Rocket 是一个付费的WP加速插件,有不同价格套餐。如果是单个网站,价格 49 美金/年 (Single方案);如果是 3个网站以内,价格 99 美金/年(Single方案);更高的 Infinite 方案不限网站数量 249美金/年。如果你用的不是 SiteGround 虚拟主机,你非常有必要买一个这样简单又给力的插件。
WP Rocket 功能包括:
Combine Google Fonts Files
Static File Optimaztion
Remove query strings from static resources
Minify CSS Files
Combine CSS Files
Minify HTML Output
Minify JavaScript Files(不建议开启)
Combine JavaScript Files(不建议开启)
Lazy Load
Preload
Database Optimization
CDN Setting
Add-ons

具体就不一一解释介绍了。上面介绍了 SiteGround 的 SG Optimizer 插件的各项设置,大概各项起什么作用也有个基本概念了。这里再解释一下什么是 Lazy load(懒加载)。就是浏览者页面往下滚动时,滚动到能看到图片的位置时,图片才加载出来。可以节省加载资源,加快网页载入速度。
注意:SiteGround 的 SG Optimizer 插件只能用在 SiteGround 主机上,且该插件很多功能与 WP Rocket 插件重合。因此使用 SiteGround 虚拟主机的建站者,无需再安装第三方缓存插件。而 WP Rocket 作为一款优秀的缓存加速插件,功能丝毫不比老牌缓存插件如 WP Super Cache,W3 Total Cache 或 WP Fastest Cache 差,设置和界面的友好度以及易用性等等,都比这些老牌插件好太多了。
唯一的一个遗憾是 WP Rocket 没有包含 Memcached 缓存。
关于缓存,就先说到这里。
五、优化图片加速页面加载通常在互联网上,JPEG 和 PNG 是最常见的图片格式。
PNG图像格式是未压缩的。压缩图像时会丢失一些信息,因此未压缩的图像质量会更高,细节更多。缺点是文件大小较大,因此加载时间较长。而 JPEG是一种压缩文件格式,略微降低了图像质量,但它的尺寸明显较小。
那么,在处理一些产品图片的时候,应该如何决定选择哪种图像格式呢?如果照片或图片有很多不同的颜色,那么使用 JPEG。如果图片是一个相对简单颜色较少的图片或你需要透明图片,那么更适合使用 PNG。
这个基本上各类缓存插件都开始内嵌这个功能了。上面 SiteGround 的 SG Optimizer 插件以及付费的 WordPress 缓存插件 WP Rocket 都包含这个功能。
使用图片优化,图像大小可以减少最多 5 倍,还是非常有用的。
六、大图片适当使用 Thumbnail 缩略图通过网站测速工具,发现一个问题,提示:Serve scaled images(可以给幻灯片等大图片设置缩放图片),如果你没有这样的问题,这一步可以跳过。

在 WP 后台,Settings – Media 下,看到 Thumbnail size,按照,勾选:Crop thumbnail to exact dimensions (normally thumbnails are proportional)
点击 Save Changes 按钮,确认保存。

本版积分规则

站长QQ
在线咨询
咨询热线
QQ:405327411

QQ|免责声明|站长论坛 ( 豫ICP备11018337号-5 )

GMT+8, 2020-8-11 20:14

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表