Shopify 中的 Critical CSS

Arjen Karel
linkedin

Shopify 中的 Critical CSS - 简述

Critical CSS 是首次渲染所需的 CSS 规则集合。这些 CSS 规则被放置在页面的 head 中。这确保了浏览器可以开始渲染，而无需下载所有阻塞渲染的 CSS 文件

Shopify 是一个广泛使用的一站式网店解决方案，任何人都可以轻松构建自己的网店。不幸的是，Shopify 并非以完美的 pagespeed 分数构建，也不支持自动化的 Critical CSS。Shopify 中的 Critical CSS 只能手动添加。

在这篇文章中，我将向您展示如何快速将 Critical CSS 添加到您的 Shopify 网店中。

什么是 Critical CSS？

由于所有现代浏览器的工作方式，页面渲染会被外部 CSS 文件阻塞。当浏览器需要下载一个或多个 CSS 文件时，页面渲染可以轻松阻塞 100 毫秒甚至更长时间。
避免这种情况的一种方法是使用 Critical CSS。Critical CSS 是仅渲染页面可见部分所需的 CSS 集合。这些 Critical CSS 通常以内联方式放置在页面的 head 中。这确保了浏览器不必在开始渲染之前下载一个或多个 CSS 文件。同时，在页面显示期间，您的浏览器会在后台下载最终的 CSS 文件。

快速开始：在 Shopify 中使用 Critical CSS！

Shopify 是一个流行的一站式网店解决方案。它使用非常简单，但页面速度并不是 Shopify 的强项。例如，默认情况下没有良好的自动化 Critical CSS 支持。因此，我们需要手动添加 Critical CSS 支持。幸运的是，这并不需要太多工作。按照下面的分步指南在 Shopify 中使用 Critical CSS。

1. 创建新主题

在 Shopify 中编辑模板的核心行为时，最好创建一个新主题。通过 'Online Store'> 'Themes' 导航到您当前的主题，然后点击 'Actions'> 'Duplicate' 将当前主题复制到新主题

duplicate shopify theme for critical CSS

2 生成 Critical CSS

有许多方法可以以各种方式生成 Critical CSS。我自己使用 NodeJs Critical 模块配合一些手动调整。这需要一些摸索，但通常是最佳解决方案。
如果这对您来说有点太技术性了，您可以尝试众多在线 Critical CSS 生成器之一。在此输入您网站的 URL，该工具将自动为您生成 Critical CSS。复制此 Critical CSS 并继续下一步。

generate critical CSS for shopify

3. 上传 Critical CSS

在您的新主题中，导航到 snippets 文件夹并创建一个名为 critcal.css.liquid 的新文件。将步骤 2 中生成的 Critical CSS 内容粘贴到新文件中。

upload critical CSS in shopify

4. 编辑模板文件

打开 Layout 文件夹中的模板。我们需要在这里进行 2 项调整。首先，我们在页面的 head 中添加 Critical CSS：

<head>
{% include 'critical.css'%}

然后编辑现有的 CSS 引用，以在后台下载原始 CSS 文件。为此，我们将使用 preload 标签。preload 标签向浏览器指示页面稍后将使用某个文件。浏览器将并行下载此文件。下载完成后，通过 JavaScript 激活 CSS 文件：

<link 
    rel = "preload" 
    href = "{{ 'theme.scss.css' | asset_url}}" 
    type = "text / css" as = "style" 
    onload = "this.onload = null; this.rel = 'stylesheet';" />

4. 测试新主题

现在您已准备好在 Shopify 中测试 Critical CSS。在主题页面上，点击复制主题的 'Actions' > 'Preview'。彻底测试新主题，特别注意 Lighthouse 中 Layout Shift (CLS) 的值。不完整或不正确的 Critical CSS 可能会导致严重的布局偏移。

critical CSS in shopify testing

5. 发布新主题

在左侧菜单中的 'Online Store' 下导航到 Themes，然后在 'Actions' 下为您的新主题选择 'Publish'。

publish critical CSS in shopify

Critical CSS 已上线！

恭喜，您的 Shopify 网店现在正在使用 Critical CSS。这使您的网店加载速度大大提高！您需要帮助加速您的网店吗？我很乐意帮助您！

Shopify 的限制

通常，您只想向浏览器缓存中没有最终 CSS 文件的访客提供 Critical CSS。通过浏览器缓存提供原始 CSS 文件通常比使用 Critical CSS 更快。
这是通过在首次请求时发送 cookie 和一些服务器端渲染来实现的。不幸的是，Shopify 不允许在 Shopify Liquid 编辑器中读取和发送 cookie。这很遗憾，但也没办法。
尽管如此，将 Critical CSS 添加到您的 Shopify 网店中仍然是有意义的。速度提升将使其非常值得！

Secure your Q3 Metrics.

Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.

Start the Engagement >>

Strategic Planning
Code Implementation
Verification & Testing