2022 一步步学习Woocomerce建站教程

学习教程前,可以先看看选择Woocomerce建站的理由:🆚WooCommerce 对比 Shopify、OpenCart 和 Magento:最佳建站平台评选

💽1 域名和服务器服务商推荐

🗄️2 注册域名与购买服务器

🔥3 安装及设置WordPress及Woocomerce

🚚4 详解 Woocomerce 设置运费教程

🛒5 WooCommerce 添加产品步骤详解

6 如何设置WooCommerce可变产品

👑7 如何为Woocomerce选择合适的主题模板

⚙️8 推荐 10 个最佳 WooCommerce 插件

📣9 如何使用 WooCommerce 优惠券促销

🌏10 WooCommerce 发票教程:如何免费设置 PDF 格式的Invoice

💲 11 七大策略推广外贸站

⚡️12 woocomerce 网站加速的 10 个基本技巧

💸13 Woocomerce 接入PAYPAL支付

💸14 Woocomerce 接入Stripe支付

更多了解PAYPAL相关问题:💸Paypal 常见问题汇总

英文不好?快速提升产品页面内容质量的技巧:❤️‍🔥外贸站如何快速编写高转换的产品描述

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

研究表明,从 2000 年到 2016 年,人类的平均注意力持续时间从 12 秒下降到 7 秒。随着移动设备的普及,人类的注意力可能还会持续下降到更短的时间。根据亚马逊、谷歌和其他大型网站的 StrangeLoop 案例研究,页面加载时间延迟 1 秒会导致 7% 的转换损失、11% 的页面浏览量和 16% 的客户满意度,从SEO的角度来说,谷歌和其他搜索引擎已经开始通过降低搜索排名来惩罚打开速度较慢的网站。

我们可以通过免费的Wordpress专业测速网站来检测自己外贸站的打开速度:https://www.isitwp.com/free-website-speed-test-tool-for-wordpress/
⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

Woocomerce网站打开速度慢的主要原因

  • 服务器 – 当服务器配置低或者节点和买家地理位置相距较远时,会影响网站打开速度。
  • WordPress 配置 – 如果不使用缓存页面,有可能会导致服务器过载,进而网站变慢或完全崩溃。
  • 页面大小 – 主要是未针对 Web 优化的图像。
  • 插件过多 – 使用数量过多的WC插件,会显著降低网站速度。
  • 外部脚本 – 外部脚本,如广告、字体、流量统计等,也会对网站性能产生巨大影响。

如何测试 外贸站性能

推荐三种在线工具测试网站的加载时间:

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

1. WebPageTest

WebPageTest 是测试网站性能的首选,可以在具有不同节点的服务器上测试站点速度。

除了常规数据,WebPageTest 还测试网站的速度指数。速度指数衡量商店的大部分页面对用户可见的时间(以毫秒为单位)。

2. PageSpeed Insights

PageSpeed Insights按优先级提供有关 Web 性能优化 建议。强烈建议解决高度和中等重要问题。

3. Pingdom 在线工具

Pingdom 可在几秒钟内测试 WooCommerce 的速度,Pingdom 的标准版本免费。

Woocomerce网站提速的方法

1.为woocomerce添加缓存功能

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

如上图所示,当用户访问站点时,服务器会从 MySQL 数据库和 PHP 文件中检索信息,然后生成 HTML 页面,提供给用户。但是当woocomerce使用缓存插件时,可以跳过费时的访问检索数据库和PHP解析的过程。

推荐使用WP Super Cache(免费)插件

2.优化站点产品图片

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

产品图片可以说是外贸站最重要的内容,从手机或相机上传照片之前,请使用照片编辑软件优化图片大小,因为这些图片的原始文件可能很大,而通过使用软件转换图片文件格式压缩图片质量,最多可以将图片减小 5 倍。建议使用JPEG 或者 PNG图片。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

PNG图像格式是未压缩的,压缩图像时会丢失一些细节内容,因此未压缩的图像质量更高,细节更多,但是文件较大,加载时间较长。

JPEG是一种压缩文件格式,会略微降低图像质量,但却要小得多。

  • 如果图片有很多不同的颜色,推荐使用 JPEG。
  • 如果是一个简单的图片或者需要透明背景的图片,则使用 PNG。

推荐使用插件 Download TinyPNG – JPEG, PNG & WebP image compression 来优化产品图片。只需简单获取一个 API 密钥,该插件就可以在woocomerce中使用,每月最多免费优化 100 张图像,对于许多 WooCommerce 外贸站来说足够了。

3.选择轻量级的woocomerce主题和插件

woocomerce的大多数主题是设计出身,没有考虑页面加载速度,主题美感通常优先于页面加载速度。如何选择使用正确的 WooCommerce 主题就变得尤为重要。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量
⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

一些流行的woocomerce主题测速结果:

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

推荐 选择 Astra、OceanWP 或者 GeneratePress 主题 搭配 Elementor 或 Beaver Builder 等页面构建器使用。

而woocomerce 还需要安装一些拓展来完善站点功能,推荐安装:

  • WPForms – 最快最简单的表单生成器。
  • All in One SEO – 强调提高网站性能的SEO插件。
  • MonsterInsights – 最佳 Google 分析插件,不会减慢网站速度。包含在本地加载 gtag.js 的选项,提高 Google Core Web Vitals 得分。
  • SeedProd – 可拖放的登陆页面插件,可快速构建登陆页面。

4.使用 CDN

CDN 是一组位于世界各地的服务器,这些服务器位置称为 PoP。主要功能是缓存和输出静态资源,如图像、JavaScript、CSS等,有些 CDN 甚至还可以托管和输出动态内容,如音频和视频。例如,假设网站的服务器放在美国,那么从中国访问的速度将需要更长的加载时间,如果 WooCommerce 外贸站使用了CDN,则CDN会从最近的 PoP 获取内容并输出。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

推荐使用Sucuri、Bunny CDN或 Cloudflare。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

5.优化Woocomerce网站资源加载,减少HTTP请求

5.1. 文件压缩

使用 Gzip 压缩可以减少静态资源的大小。

5.2. CSS资源

浏览器向用户显示内容之前,必须等待所有CSS文件加载完毕,通过减少CSS文件的数量,可以大大加快访问 WooCommerce 外贸站的速度。

5.3. JavaScript 文件

像 CSS 资源一样, 太多太大的JavaScript 文件也会对页面加载速度产生负面影响。

与CSS的不同的是,可以通过js加载方式,设置浏览器异步渲染JS脚本,从而加快 WooCommerce 商店的速度。

使用浏览器的开发工具(Google Chrome 中的 Inspect 和 Firefox 中的 Inspect Element)。单击“network”选项卡,然后重新加载网站,能够看到浏览器如何加载每个文件。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量
⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

还可以使用 Pingdom 和 GTmetrix 等第三方工具来查看这一点。除了其他有用的信息之外,这些工具还会向显示所有已加载的文件以及加载所需的时间。

接下来我们需要使用代码优化这些请求。在 WordPress 中加载JS脚本和CSS的方法是使用wp_enqueue_stylewp_enqueue_script函数。大多数 WordPress 插件开发人员使用这两个函数来加载插件文件。但同时 WordPress 还提供了简单的函数来取消加载这些JS脚本和CSS文件。

但是,如果只是直接禁用加载这些JS脚本和CSS,有可能将破坏插件或者主题,无法正常工作。要解决此问题,需要将这些样式和脚本复制并粘贴到主题的样式表和 JavaScript 文件中。

通过这种方式,能够一次加载所有资源文件,最大限度地减少 http 请求并有效减少页面加载时间。

如何在 WordPress 中取消加载CSS 和 JavaScript 资源文件?

查找资源文件的ID属性

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

将代码添加到主题的functions.php文件或其他固定加载的插件文件:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
}

取消多个css文件:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}

禁用JS脚本,可以先通过代码打印出属性:

function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles'); 

添加此代码后,可以使用[pluginhandles]简码来显示插件脚本句柄列表。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

现在有了脚本文件属性,可以使用以下代码取消加载:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
 
function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'gdwpm_lightbox-script' );
wp_deregister_script( 'another-plugin-script' );
}

如果有一个插件只需要在网站的特定页面加载,那么可以在该特定页面上引入插件的资源文件。

这样插件的文件在网站的所有其他页面上保持禁用状态,仅在有需要的页面加载。

以下是在特定页面上加载脚本的方法。

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
 
function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

这段代码将在除了联系我们页面以外禁用联系表单脚本。

如果不具备代码基础,可以使用插件Asset CleanUp: Page Speed Booster。Asset CleanUp 会扫描将加载到页面上的所有脚本和样式表。可以禁用页面上未使用的那些文件,记得完成更改后要测试页面的设计和功能是否正确。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

Asset Cleanup专业版可以给资源文件设置异步延迟加载,有助于减少网站的页面加载时间。

6.限制/禁用修订

WooCommerce 在产品页面上提供了默认的修订检查,允许返回并查看对产品页面的更改。

假设创建了一个产品页面并进行了五次修改,每次仅仅更改一两个单词,这时将创建原始产品页面的六份副本。长期以往会迅速降低 WooCommerce 的性能。

在网站根目录的wp-config.php文件中插入以下代码禁用修订版本:

define ('WP_POST_REVISIONS', false);

也可以减少修订版本数量:

define( 'WP_POST_REVISIONS', 4 );

7.减少AJAX请求

当用户修改购物车时,WooCommerce 会使用 Get Refreshed Fragments AJAX 请求来动态更新购物车。从用户体验的角度来看,在不重新加载的情况下刷新购物车页面很友好,但会减慢网站的速度。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

尽管大小仅为1.1 KB,但wc-ajax=get_refreshed_fragments请求的执行时间为0.76 秒。如果网站页面加载时间为 3 秒,则这个请求占了 25% 的页面加载时间。

如果禁用此请求,则建议在 WooCommerce → 产品设置面板中启用选项“Redirect to the cart page after successful addition”

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

启用后,将确保用户在将产品添加到购物车后被重定向到购物车页面。

8.优化管理面板

8.1 及时更新主题与插件版本

8.2 禁用对象和数据库缓存

对象和数据库缓存通过减少数据库查询的数量来加速网站,但这样做是加大服务器内存消耗。理想情况下,如果服务器内存足够大,这不会有什么影响。比如站点使用 Kinsta 托管,则无需担心缓存,因为已经在服务器级别实现了。

如果使用 W3 Total Cache插件,只需单击一下即可轻松启用所有类型的缓存。在W3 Total Cache → General Settings面板中,可以禁用对象缓存或数据库缓存。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

8.3 降低 WordPress Heartbeat API 请求频率

WordPress Heartbeat API 通过保持浏览器和服务器之间的连接实现实时更新。API 每 15-60 秒向服务器发送一次请求,然后在接收到数据时触发事件(或回调)。这样可以实现例如自动保存帖子、锁定帖子和登录过期警告。但当以管理员身份登录时,每分钟向服务器发送一些请求会降低管理面板的速度。

9.优化 WooCommerce 设置

首先,请更改登录页面 URL。默认情况下,每个 WordPress 站点的登录 URL 都是domain.com/wp-admin/。将登录 URL 更改为其他文件名,将保护免受爬虫和黑客的攻击。还可以帮助您解决如 429 Too Many Requests 之类的限速HTTP错误。

如果外贸站也包含博客功能,可以限制博客显示的帖子数量。WordPress 默认将此限制设置为 10 个帖子,可以在WordPress Dashboard → Settings → Reading下找到此设置项。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

接下来,在网站上禁用 pingback,因为通常会生成毫无价值的垃圾邮件。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

如果页面上有很多用户评论,那么 WordPress 还提供了限制评论显示的数量。将此数字保持在 10 到 20 之间可以优化产品页面加载时间。

如果不喜欢在商店中显示产品评论,可以在WooCommerce → 设置下禁用产品评论。

⚡️12 woocomerce 网站加速的 10 个基本技巧-A.J. WWW 专注电商流量

10.增加 WordPress 内存限制

WordPress默认为 PHP分配 32 MB内存。如果遇到任何问题,会自动尝试将此限制增加到 40 MB(对于单个站点)或 64 MB(对于多站点)。

在大多数情况下,此内存限制对于 WooCommerce 站点来说是不够的。如果在仪表板上收到一条如下错误消息:

“Allowed memory size of xxxxxx bytes exhausted

建议将此限制增加到 256 MB。