当前位置:首页>网站建设>WooCommerce按需加载前端资源 提高页面打开速度

WooCommerce按需加载前端资源 提高页面打开速度

释放双眼,带上耳机,听听看~!

按需加载是网站前端优化中很重要的一条原则, 而WooCommerce为我们提供的前端资源中,却没有很好的遵循这一原则,WooCommerce虽然对 CSS 进行了一些分离,但是分离得并不合理,这就导致了页面中出现很多不必要的 CSS。

对于使用默认WooCommerce样式的网站来说,这样的设置可能没有什么问题。但是如果我们需要对网站进行较为精细的定制开发,就避免不了要添加很多 CSS,如果把这些 CSS 放在一个文件了,这个文件很快就会变得很大,影响页面的渲染速度。

使用WooCommerce判断函数按需加载CSS代码

为了避免这个问题,我们可以对WooCommerce站点中使用的 CSS 按页面进行分离,根据显示的页面加载。在购物车页面,加载购物车需要的CSS,在结算页面,加载结算页面需要的 CSS,如此进行分离。在网站首页,商品列表页,商品详情页,就不需要加载这些用不到的 CSS。这可以在一定程序上加快这些页面的打开速度。

WooCommerce为我们提供了一些很实用的判断函数来帮助我们判断当前显示的是哪种类型的页面,下面是我们在一些主题中使用的模版代码,需要的朋友可以参考。

// 商品列表页面
if (is_product() || is_shop() || is_product_category() || is_product_tag()) {
    wp_enqueue_style('_s-woocommerce-checkout', _s_asset('styles/products.css'));
}

// 商品详情页面
if (is_singular('product')) {
    wp_enqueue_style('_s-woocommerce-review', _s_asset('styles/review.css'));
}

// 购物车页面
if (is_cart()) {
    wp_enqueue_style('_s-woocommerce-cart', _s_asset('styles/cart.css'));
}

// 结账页面
if (is_checkout()) {
    wp_enqueue_style('_s-woocommerce-checkout', _s_asset('styles/checkout.css'));
}

// 账户页面和订单已收到页面
if (is_account_page() || is_order_received_page()) {
    wp_enqueue_style('_s-woocommerce-account', _s_asset('styles/account.css'));
}

类似WooCommerce,其实我们还可以在 WordPress 中进行这样的处理,在首页、列表页、文章页加载各自页面需要的 CSS。前提是我们需要对这些页面的 CSS 进行合理的分离。除了通过后端按需加载 CSS,也有一些前端方法来实现这个功能,具体就不再展开讨论了,有兴趣的朋友可以自己搜索研究一下。

欢迎访问秀主题博客,分享简单实用WP教程
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
网站建设

WordPress纯代码添加网站地图

2023-2-23 10:35:45

网站建设

蜘蛛池是干嘛的怎么搭建蜘蛛池?

2023-2-26 10:40:29

温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:971318156@qq.com,我们将第一时间处理!

2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索