【万字拆解】全面优化你的独立站/2B/2C外贸官网网站优化完全指南 | WordPress网站加速技巧 | 配套视频讲解

建站教程5个月前发布 码神
118 0
✅ 【摘要】
中文摘要: 本视频详细介绍了提升WordPress网站速度的11个关键策略,包括去除不必要的插件、切换到CDN服务、安装缓存插件、压缩代码、优化图片和视频、使用最新的PHP版本、优化数据库、使用高效的主题和模板、启用Gzip压缩、优化服务器配置以及定期监控和优化。通过这些策略,您可以显著提升网站速度,提高用户满意度和SEO效果。
Abstract in English: This video provides a comprehensive guide on 11 key strategies to improve the speed of your WordPress website. These strategies include removing unnecessary plugins, switching to a CDN service, installing caching plugins, compressing code, optimizing images and videos, using the latest PHP version, optimizing the database, using efficient themes and templates, enabling Gzip compression, optimizing server configuration, and regularly monitoring and optimizing. By implementing these strategies, you can significantly enhance your website’s speed, user satisfaction, and SEO performance.
✅ 【码神在用的服务】
👉 semrush低价购买:
https://bit.ly/4i4dw1R
👉hostinger 高性价比主机(码神在用的主机):
https://bit.ly/4hO0Yf5
👉 码神常用的价格优惠的AI和流媒体工具:
https://bit.ly/4ftbV3m
✅ 【其它平台】
————–
向我咨询:https://bit.ly/4eaYAfa
We & Chat:zy467016899
公众号:开发者码神
X/推:@码神
即刻: @码神的出海朋友圈
B站:@码神的出海朋友圈 – https://bit.ly/3AByown
赚美刀必备导航站:https://bit.ly/40uXrfn
出海赚美刀学习讨论、建站、网站/独立站优化、SEO、商品推广、技术咨询、欢迎找我咨询
———————————–

 

一、速度优化

为什么 WordPress 网站速度至关重要?

研究显示,人类的注意力跨度从2000年的 12秒 缩短到了2016年的 7秒
这对你意味着什么?作为网站的运营者,你只有极短的时间抓住用户的注意力,向他们展示内容,并让他们愿意留下来继续浏览。
慢加载=用户流失如果页面加载过慢,用户很可能在内容出现之前就离开了。
数据显示:
  • 页面加载时间延迟 1秒,转化率可能降低 7%
  • 页面浏览量可能减少 11%
  • 客户满意度下降高达 16%
这些数据来自亚马逊、谷歌等大公司参与的 StrangeLoop 研究。网站速度快慢直接影响你的用户体验、转化和品牌信任。
最重要的是,谷歌和其他搜索引擎已经开始通过将较慢的网站在搜索结果中下移来惩罚较慢的网站,这意味着慢速网站的流量会减少。
总而言之,如果你希望网站获得更多流量、订阅者和收入,那么你必须让你的网站变得更快!

如何检查你的 WordPress 网站速度?

页面自身质量检查:这一块主要是分析你网页的元素是否渲染很慢,是否有不合理的地方
https://pagespeed.web.dev/
站点网络检查:
每个地方的人访问你的网站可能速度都一样,取决于你的服务器地址、域名解析的厂商。
下面是免费的测试工具,测试你的主要客户访问你的网站速度如何,比如你用户主要是英国,那就看英语那个区域。
https://www.aimashen.com/sites/83.html

优化步骤

  1. 去除不必要的插件

如果你使用的不是全新安装的 WordPress 网站,很可能已经累积了许多未使用的插件。例如,你可能安装过一些用于短期活动的插件,如倒计时工具或促销弹窗插件。这些插件在活动结束后可能被遗忘,但它们仍然会占用资源并影响页面加载速度。
因此,建议定期检查插件列表,停用并卸载那些不再需要的插件,比如已经替换功能的 SEO 工具或过时的缓存插件。不过,在执行此操作时需要小心。如果你不确定某些插件是否对网站功能至关重要,比如一个看似未使用的备份插件,最好先保留它,或在进一步确认后再移除。
  1. 切换域名DNS服务商到Cloudflare

什么是网站?
网站其实就是存储在互联网上一台“硬盘”(服务器)上的一堆文件。每台连接到互联网的设备都有一个唯一的IP地址,比如 123.123.12.1
为什么需要域名?
IP地址就像电话号码,很难记住。为了方便,域名(比如 example.com)出现了。域名通过 DNS(域名系统) 映射到对应的IP地址。你可以把DNS想象成互联网的“通讯录”,输入域名时,DNS会帮你找到网站所在的服务器。
免费DNS的问题
很多人直接使用域名注册商提供的免费DNS服务,但这些服务通常比较慢,可能导致你的网站访问速度变慢。
你可以使用 Cloudflare,优秀的边缘计算服务商(https://www.cloudflare.com/zh-cn/) 提供的免费DNS服务,它速度快而且稳定。
什么是边缘计算:
边缘计算是一种致力于使计算尽可能靠近数据源、以减少延迟和带宽使用的网络理念。简而言之,边缘计算意味着在云端运行更少的进程,将这些进程移动到本地,例如用户的计算机、IoT 设备边缘服务器。将计算放到网络边缘可以最大程度地减少客户端和服务器之间必须进行的长距离通信量。
以下是操作步骤:
  1. 注册 Cloudflare 帐户
    1. 点击“注册”按钮,用邮箱创建一个免费帐户。
  2. 添加你的网站
    1. 登录Cloudflare后,点击“添加站点(Add Site)”。
    2. 输入你的域名,比如 example.com,然后点击“继续(Continue)”。
  3. 更改域名服务器
    1. Cloudflare会显示两组新的域名服务器(Nameservers),比如 ns1.cloudflare.comns2.cloudflare.com
    2. 打开你域名注册商的网站(比如 GoDaddy 或阿里云),找到域名设置,将原来的域名服务器替换为 Cloudflare 提供的。
  4. 确认设置
    1. 返回Cloudflare,点击“完成(Done)”。
    2. 等待几分钟到24小时,Cloudflare会检测到设置生效,你的网站就成功使用更快的DNS服务了!
这样,你的网站访问速度就会得到显著提升,而且还可以使用Cloudflare提供的其他安全功能,比如DDoS防护和SSL证书。
  1. 安装缓存插件

缓存就像一个“便签本”,用来快速存储和读取常用的内容。这样,当你再次需要这些内容时,可以直接从便签本上取,而不用重新去“生产”或“下载”它们。这大大节省了时间和资源。
举例: 想象你每天早晨都去一间咖啡馆点咖啡。如果咖啡师记住了你的固定咖啡偏好(比如“中杯拿铁不加糖”)并提前做好,等你来时直接拿走,这就像“缓存”了你的订单。 如果咖啡师每天都要重新询问你的偏好并现做,那就像没有缓存。

两种主要缓存类型
  1. 浏览器缓存 这是在访问者的电脑上保存常用文件。比如你访问一个网站的 Logo 或背景图片,这些内容被存储在你的浏览器里。下次访问同一个网站时,浏览器会直接从本地硬盘加载这些文件,而不是重新从网络下载。 举例: 假设你喜欢访问某个新闻网站,Logo 会经常显示。第一次访问时,它会下载到你的电脑,之后再访问时,Logo会直接从你的电脑中显示,不会消耗你的网络流量。
  2. 服务器缓存 这是在网站的服务器上保存已经“制作好”的页面内容。每当新的用户访问网站时,服务器直接给出保存的页面版本,而不需要每次都重新“制作”。 举例: 你开了一家披萨店,提前做好了几种热门口味的披萨存起来(缓存)。当顾客点这些口味时,直接拿给他们,不需要再现做。
使用 WP Rocket 插件的缓存简化
  • 安装和启用:WP Rocket 是一个帮你管理缓存的工具,操作很简单。只需要购买、安装并激活,它会自动启用浏览器缓存和服务器缓存。
  • 移动设备缓存:如果你的网站对手机和平板的用户体验也很重要,可以在 WP Rocket 的设置中开启“移动设备缓存”,这样移动端访问也会更加流畅。
地址:https://wp-rocket.me/

4.压缩你的代码

压缩你的代码,
压缩就像把一件大衣服叠得整整齐齐,占用更少的空间。通过去掉文件中“没用”的部分,比如空白和注释,可以让文件变得更小,从而让网站加载更快。
举例: 想象你打算寄一封信,信纸上有很多留白和装饰。你可以把内容重新整理,删除不必要的空行和图案,让信更短小精炼,这样寄起来更省时省力。

为什么压缩有用: 代码文件(如 HTML、CSS 和 JavaScript)通常包含一些对机器没用的部分,比如:
  • 空格:只是为了让人更容易阅读,但机器不需要这些。
  • 注释:开发人员用来记录解释,用户访问时并不需要。
压缩就是去掉这些部分,让文件更小,传输更快。

压缩的好处
  1. 缩短加载时间:文件越小,浏览器加载它们的时间越短。
  2. 提升用户体验:网页加载得快,用户等待的时间就短,体验更好。
举例: 假设一个网站的 CSS 文件原本是这样的:
/* 这是背景颜色设置 */
body {background-color: #fff; /* 设置为白色 */ }
压缩后会变成:
body{background-color:#fff;}
去掉了注释和多余的空格,效果完全一样,但文件更小了。
压缩工具如 WP Rocket 可以自动完成这些操作。启用压缩功能后,它会自动优化代码文件,无需手动操作,文件变小,网站变快!
https://wp-rocket.me/

5.整合JavaScript和CSS资源

网站的 CSS 和 JavaScript 文件就像不同的零件,分别负责外观和功能。如果把它们整合在一起,就像把零散的物品打包成一个箱子,运输时更快更省力。是否需要打包取决于你网站的“运输方式”(服务器协议)。

两种“运输方式”
  1. HTTP/1.1 这个版本就像排队进门,一次只能传输一个文件,必须等前一个完全加载后,下一个才会开始。所以,如果文件很多,加载会变慢。 解决方案:通过整合,把多个文件合并成一个或几个文件,减少排队的次数,加载速度会更快。
  2. HTTP/2 这个版本就像多人同时进门,可以同时传输多个文件,不需要排队。因此,即使文件较多,加载速度也不会受到太大影响。 解决方案:整合文件的效果不明显,因为不管文件多少,都能同时加载。

如何检查你的网站是否支持 HTTP/2: 可以使用工具(如 Key CDN’s Tester),输入你的网站地址,查看服务器使用的协议。如果是 HTTP/1.1,整合文件有帮助;如果是 HTTP/2,整合可能没有显著效果。

如何整合文件
  1. 使用 WP Rocket 插件 在设置中找到“Combine JavaScript files”(整合 JavaScript 文件)和“Combine CSS files”(整合 CSS 文件)的选项,勾选后插件会自动合并这些文件。
  2. 使用 Autoptimize 插件 同样可以勾选整合选项。不过需要注意,有时候合并可能会导致网站功能异常(例如按钮无法点击)。为避免这种情况:
    1. 先清除缓存。
    2. 用浏览器的隐身模式检查是否一切正常。

举例: 假设你的 WordPress 网站有以下文件:
  • CSS 文件:style.csstheme.cssplugin.css
  • JavaScript 文件:script.jsplugin.js
在 HTTP/1.1 下:需要一个个加载,效率低。通过整合,变成一个 all.css 和一个 all.js 文件,加载速度更快。 在 HTTP/2 下:文件可以同时加载,所以即使不整合,加载效率也不会差太多。

6.去除阻碍渲染的资源

渲染就像组装家具。网站的代码(HTML、CSS、JavaScript)是说明书和零件,而浏览器就像工人,它把这些代码“组装”成用户能看到的网页。

关键词
  • “可见的”:浏览器并不需要加载完所有内容后才开始显示页面,而是优先显示“首屏”(用户一打开页面就能看到的部分),这样用户可以更快看到有用的信息。
  • “首屏优先”:把最重要的资源优先加载,比如文字、图片或按钮,而不重要的部分(如底部内容或动画)稍后加载。

优化渲染速度的方法
  1. 延迟加载非关键资源
    1. “非关键资源”指的是不影响首屏显示的 CSS 和 JavaScript 文件。
    2. 把这些资源的加载顺序推迟,让浏览器先专注于加载首屏内容。
  2. 工具设置 如果使用 WP Rocket
    1. 勾选 “Load JavaScript deferred”(延迟加载 JavaScript):可以让 JavaScript 文件稍后加载。
    2. 勾选 “Optimize CSS delivery”(优化 CSS 交付):只加载用于首屏的 CSS,其他 CSS 文件延迟加载。
  3. 如果不使用 WP Rocket
    1. 使用 Autoptimize 插件:勾选“Inline and Defer CSS”以优化 CSS 的加载。
    2. 使用 Async JavaScript 插件:在设置中启用“Enable Async JavaScript”,推迟 JavaScript 的加载。

举例: 假设一个网站首页上:
  • 顶部有文字和图片(首屏内容)。
  • 底部有视频和动画(非首屏内容)。
未优化的情况:浏览器加载时会先下载所有 CSS 和 JavaScript,等全部加载完成后,才显示整个页面,用户可能需要等待很久。
优化后的情况:浏览器会优先加载文字和图片,快速显示首屏内容;而底部的视频和动画会在首屏加载完成后才开始加载。这样,用户几乎立刻就能看到页面,体验更好。

解决“阻碍渲染资源”的问题: 如果你在 Google PageSpeed Insights 工具中看到“eliminate render-blocking resources”(去除阻碍渲染的资源)提示,这些方法可以帮助优化渲染速度,减少用户等待时间。

7.懒加载图片和视频

懒加载就像餐馆的点餐服务。只有当客人需要某道菜时,厨师才开始准备,而不是一开始就把所有菜都做完。同样,网页中的图片和视频只有在用户滚动到它们的位置时才加载,从而减少初始加载的压力,让页面更快显示出来。

懒加载的关键词
  • “延迟加载”:浏览器先加载用户视野中的内容(首屏),而图片或视频等较大的资源则等到用户滚动到它们时再加载。
  • “提高速度”:这样可以减少页面初始加载的内容量,让网页快速呈现给用户。

WordPress 懒加载的情况
  • 图片懒加载:如果你的网站运行的是 WordPress 5.5 或更高版本,这项功能默认已经开启,图片会自动延迟加载。
  • 视频懒加载:默认没有开启,需要额外设置或使用插件。

如何启用懒加载
  1. 使用 WP Rocket 插件
    1. 打开插件的 “LazyLoad” 设置。
    2. 勾选 “Enable for iframes and videos”(启用 iframe 和视频的懒加载)。这样可以让视频和嵌入内容也支持懒加载。
  2. 不使用 WP Rocket 的情况
    1. 可以安装免费的 Lazy Load for Videos 插件。
    2. 这个插件专门针对视频懒加载,可以确保 YouTube、Vimeo 等嵌入的视频不会在页面加载时立刻加载,而是在用户需要时才加载。

举例: 假设一个网页包含以下内容:
  • 文字和图片(首屏内容)。
  • 一个嵌入的视频在页面底部。
没有懒加载的情况: 页面加载时,浏览器会同时加载图片和底部的视频,即使用户并没有滚动到视频的位置,这会拖慢加载速度。
启用懒加载的情况: 浏览器只加载首屏文字和图片,底部的视频等到用户滚动到它时才开始加载。这样页面更快显示出来,用户体验更好。

好处总结
  1. 减少初始加载时间,提高页面打开速度。
  2. 节省带宽,尤其是用户没有滚动到某些资源时,就不用浪费流量加载它们。
  3. 提升用户体验,让重要内容更快呈现。
7.优化你的网站的谷歌字体
许多主题都在使用谷歌字体,并且每次有人访问你的网站时,都必须从谷歌的服务器下载这些字体。这可能是一个耗时的过程,因为你的服务器必须发出HTTP请求,下载CSS文件,然后从样式表中引用的位置下载字体。同时它也必须对页面上的每种字体都执行此操作。
如果你使用的是 WPRocket插件,它将自动优化谷歌字体请求。否则,最好替换谷歌字体

8.使用CDN

这一点可以参照步骤2,其实就是整站交给cloudfare托管,这里再说个技巧,就是你的图片、视频资源都可以使用Cloudfare,免费享受10G,真的是赛博菩萨,具体配置参考我另外一篇文章。
https://mp.weixin.qq.com/s/G2d0kFx1LQG4BZszxCtwiQ

9.优化图片

为什么需要压缩图片
  1. 即使启用了懒加载,图片还是会被加载。如果图片文件本身很大,加载时间仍然较长,影响用户体验。
  2. 压缩图片可以大幅减少文件体积,加快网页加载速度,同时节省带宽。

如何压缩图片(以 ShortPixel 为例)
  1. 安装插件:安装并激活 ShortPixel 插件。
  2. 设置 API 密钥:转到插件设置页面,输入你的 API 密钥(安装后会引导获取)。
  3. 批量压缩:点击 “Save and Go to Bulk Process”,然后点击 “Restart Optimizing”,插件会自动批量优化你的网站所有图片。
  4. 调整压缩类型:如果发现图片质量变差,可以在设置中选择压缩类型:
    1. Glossy(有光泽):保持高质量,同时优化文件大小,适合大多数情况。
    2. Lossless(无损):完全不损失图片质量,但压缩效果较低,适合对图片质量要求高的场景。
或者使用tinypng,免费。
https://www.aimashen.com/sites/73.html
或者
https://compressor.io/
10.保持你的Wordpress网站更新
为什么要定期更新
  1. 获取新功能:更新后,你可以使用最新的工具和功能,让网站更强大。
    1. 例如:新增的编辑器功能或性能优化选项。
  2. 修复安全问题:更新会修补漏洞,防止网站被攻击。
    1. 例如:修复黑客可以利用的漏洞,保护用户数据和隐私。
  3. 提高运行效率:更新后,网站加载更快、运行更稳定。
    1. 例如:减少插件冲突,优化代码加载速度。

10.不要上传你的视频和图片到你的站点服务器

你可以直接把音频和视频文件上传到你的 WordPress 网站,系统会自动用 HTML5 播放器展示这些文件,看起来很方便。
但千万别这么做!
因为上传音频和视频会占用大量带宽,即使你的主机套餐声称“无限带宽”,一旦流量超出正常范围,主机商可能会额外收费,甚至暂停你的网站。
此外,大型媒体文件会让网站备份变得很庞大,不仅增加存储压力,还让恢复备份变得麻烦。
正确的做法是:使用专业的音频和视频托管平台,比如 YouTube、Vimeo、DailyMotion 或 SoundCloud,让这些服务商帮你处理流量问题。他们的带宽足够支持。
而且,WordPress 自带的视频嵌入功能,你只需要复制视频的 URL 粘贴到帖子中,视频就会自动嵌入,非常方便!

11.升级最新的PHP版本, 如果你用的wordpress

WordPress 是用 PHP 语言编写的,这是一种服务器端语言,也就是说,PHP 的代码运行在你的托管服务器上,而不是用户的电脑上。
优秀的 WordPress 托管服务商通常会在他们的服务器上使用最新的稳定版 PHP,但有时候他们可能还在运行旧版本。
需要注意的是,PHP 的新版本性能更好。例如,PHP 8.3 的速度比之前的版本提升了 42%,这对你的网站来说是一个非常显著的性能提升,能让页面加载更快。
如果你想知道自己的网站当前使用的是哪个 PHP 版本,可以安装一个 版本信息插件。激活插件后,它会在 WordPress 管理后台的页脚位置显示当前的 PHP 版本号。
这能帮你判断是否需要联系托管商,要求升级到更高版本的 PHP,来获得更好的网站性能。

二、代码优化

1.网站资源加载情况检测

主要就是打开你的网站,点击F12,刷新网页,看所有的请求有没有非200的。
这类可能主要404比较多。
请求失败或404错误通常发生在用户请求某个资源时,服务器无法找到该资源,或服务器出现故障时。
解决方法
  • 确认链接是否有效: 定期检查网站上所有外部链接,确保链接指向正确的页面。如果网站内有过时的链接,及时更新。
  • 自定义404页面: 为网站创建一个友好的404错误页面,告知用户他们所访问的页面不存在,并提供返回首页或搜索其他内容的选项。这不仅能减少用户流失,还能帮助搜索引擎更好地处理错误页面。
  • 检查网站地图: 定期更新网站地图,确保搜索引擎能抓取到所有最新的页面内容。如果存在旧的页面链接,及时删除或重定向到新的有效页面。
  • 使用重定向: 如果某些页面被删除或迁移,可以使用301重定向将用户自动引导到新的页面,而不是返回404错误。
其他场景的错误代码:
403 Forbidden
原因:服务器理解请求客户端的请求,但是拒绝执行此请求。
解决方法:检查是否已登录,或者是否拥有访问该资源的权限。如果服务器配置了IP访问限制,可能需要确保你的IP地址被允许访问。
500 Internal Server Error
原因:服务器遇到了一个未曾预料的情况,导致其无法完成对请求的处理。
解决方法:通常这是服务器端的错误,需要服务器管理员检查服务器日志以找到并解决问题。
502 Bad Gateway
原因:作为网关或代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。
解决方法:等待一段时间再试,或者联系网站管理员。
503 Service Unavailable
原因:由于临时的服务器维护或者过载,服务器当前无法处理请求。
解决方法:稍后再试,或者查看网站是否有关于维护时间的通知。
504 Gateway Timeout
原因:作为网关或代理工作的服务器尝试执行请求时,上游服务器未能及时响应。
解决方法:尝试重新加载页面,或者检查你的网络连接是否稳定。
408 Request Timeout
原因:请求超时,服务器等待客户端发送请求的时间过长。
解决方法:检查网络连接,或者尝试重新发送请求。
400 Bad Request
原因:服务器无法理解或无法满足请求。
解决方法:检查请求的语法是否正确,例如URL参数、请求头或请求体。
401 Unauthorized
原因:请求要求身份验证。
解决方法:提供有效的身份验证凭据,例如用户名和密码。
405 Method Not Allowed
原因:服务器不支持请求中所用的HTTP方法(如GET、POST)。
解决方法:检查请求的HTTP方法是否正确,或者联系网站管理员了解支持的HTTP方法。

2.网站证书检查

检查证书有效性: 使用浏览器或在线工具检查证书的有效期,确保SSL证书未过期。如果证书即将过期,及时续订。
证书链完整性: 确保SSL证书链完整。如果缺少中间证书或根证书,浏览器可能无法正确验证证书的有效性。可以通过SSL检查工具确认证书链是否完整。
更新到更强的加密算法: 为了增强安全性,确保使用强加密算法的证书,避免使用过时的算法(如SHA-1)。目前推荐使用SHA-256或更强的加密算法。
启用HTTPS强制重定向: 配置Web服务器,将所有HTTP请求自动重定向到HTTPS协议。这可以提高网站的安全性,并确保所有流量都经过加密。

3.服务器配置选择

很多人问码神建站的配置要求,这里比较有一个比较宽泛的标准,供参考。
如果是为了使用网站进行博客文章类创作, 那么我们推荐你购买配置在2-4h/2-4g 基本上足够了。

访问量需求

  • 小型企业: 每日访问量<5000次,主要是信息展示。
  • 中型企业: 每日访问量在5000-20000次,可能包括用户交互和简单电商功能。
  • 大型企业: 每日访问量>20000次,有较多的用户交互需求或高带宽需求

1)基础配置(适合小型企业)

适合流量较低的企业展示型网站:
  • CPU:2核(如 Intel Xeon 或 AMD EPYC)。
  • 内存:4GB。
  • 存储:50GB SSD(系统盘)+ 50GB SSD(数据盘)。
  • 带宽:5-10Mbps。

2)标准配置(适合中型企业)

适合流量适中且需要动态内容的站点:
  • CPU:4核。
  • 内存:8GB。
  • 存储:100GB SSD(系统+数据盘)。
  • 带宽:10-20Mbps。
  • 操作系统:Ubuntu 22.04

3)高级配置(适合大型企业或高流量网站)

适合流量较高且需要复杂功能支持的网站:
  • CPU:8核。
  • 内存:16GB。
  • 存储
    • 100GB SSD(系统盘)。
    • 200GB SSD(数据盘)。
  • 带宽:50Mbps。
可以参考码神再用的机器,见文末。
© 版权声明

相关文章

暂无评论

暂无评论...