7个最佳CSS优化技巧，可缩短页面加载时间

今的网络中，页面加载速度是最重要的网站指标之一。即使是毫秒也会对用户体验、产品产生巨大影响，而缓慢的页面加载会轻易的的降低转化率。您可以采用许多工具和技术来加快网站速度。在本文中，我们将介绍可用于改善前端性能的最佳CSS优化技巧。

1.查找性能瓶颈

所有优化中最重要的事情是从全面诊断开始。幸运的是，有许多CSS诊断工具可以帮助您发现任何性能瓶颈。首先，您可以使用网络浏览器的DevTools检查资产加载的速度。在大多数浏览器中，您可以通过按F12按钮打开DevTools 。

例如，在Firefox DevTools中，可以使用“ 网络”选项卡检查页面加载的所有CSS文件的大小和加载时间。您还可以测试使用和不使用缓存时CSS加载的速度。由于DevTools还显示了外部CSS，例如Google字体文件和从第三方CDN提取的CSS资源，因此您可以找到许多您以前都不知道的资源。

Pingdom Tools和Google提供的Lighthouse是开发人员经常用来分析网站速度和前端性能的另外两个免费工具。例如，如果您运行简单的网站速度测试，则Pingdom Tools会为您提供一些有用的CSS优化技巧。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2.缩小和压缩CSS文件

大多数网站都依赖多个CSS文件。尽管在大多数情况下，模块化CSS被认为是最佳实践，但是加载所有文件可能需要一段时间。但是，这正是CSS缩小和压缩工具存在的原因。如果您适当地使用它们，则可以大大缩短页面加载时间。

有一些在线工具，例如CSS Minify，可让您通过将其复制粘贴为简单形式来缩小CSS文件的大小。这种类型的工具可以与较小的项目很好地配合。但是，对于带有多个CSS文件的大型项目，使用它们会变得很麻烦且耗时。在这种情况下，最好选择自动化解决方案。

如今，大多数构建工具可让您在代码库上自动执行压缩。例如，默认情况下，Webpack将所有文件作为缩小的包返回。PostCSS还具有诸如CSS Nano之类的智能插件，它们不仅可以缩小文件的大小，还可以通过许多有针对性的优化来运行它。

3.使用Flexbox和CSS网格

如果在编写CSS时仍仅依靠传统的框模型，并使用边距，填充和浮点在屏幕上对齐项目，则应考虑采用更现代的布局模块，即flexbox和CSS Grid。这些新模型使您可以用更少的代码来实现复杂的布局。

使用较旧的技术，您甚至需要进行许多技巧和调整，即使是比较简单的事情，例如将项目垂直居中。但是，flexbox和CSS Grid并非如此。尽管拾取新的布局模块可能要花费一些时间，但还是值得的，因为CSS文件要小得多。flexbox尤其如此，到目前为止，flexbox具有相当不错的浏览器支持（目前全球支持 98.3％）。

尽管浏览器对CSS Grid的支持还不够完善（目前占全球的92.03％），但如果不必支持旧版浏览器或愿意提供后备功能，则仍然可以使用它。

4.使用<link>标记代替@import规则**

您可以使用两种主要技术来使网页加载CSS文件：

使用<link>标记将它们添加到HTML页面的<head>部分，

使用*@import *CSS规则从其他样式表导入它们。

您需要将@import规则添加到主CSS文件的顶部。在大多数情况下，它用于加载较小的资源，例如字体和其他设计元素。最初，这似乎是一个不错的解决方案，但是，与HTML页面使用<link>标记直接加载样式表相比，浏览器加载额外的样式表所花的时间要长得多。

当您在HTML页面中添加多个CSS文件时，请务必注意CSS特殊性。首先添加最通用的样式表，然后再选择更具体的样式表。您需要这样做，因为以后添加的样式表会覆盖以前的CSS文件的规则。例如，以下示例以正确的顺序添加CSS文件时：

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="component.css">

5.使用渐变和SVG代替图像

将所有图像加载到网页上可能要花费大量时间。开发人员使用许多图像优化技术来减轻这种影响，例如从外部CDN加载图像或使用诸如TinyJPG之类的图像压缩工具。这些解决方案可以提供很多帮助，但是很多时候，您都可以使用原生CSS效果替换大量资源的JPG和PNG图像。

例如，您可以使用渐变来代替背景图像，而背景图像可能会大大降低用户浏览器的速度。您可以使用CSS的渐变功能来创建线性，径向和重复渐变。使用这些CSS原生功能，您不仅可以定义颜色，还可以定义渐变的角度。

例如，以下规则创建了一个很好的渐变背景，其加载速度比任何图像都要快：

div {
    background: linear-gradient(45deg, lightgreen, royalblue);
}

对于更复杂的渐变和纹理，还可以使用CSSmatic（在下图显示）和ColorZilla这样的生成器。

除渐变外，您还可以使用可缩放矢量图形（SVG）替换传统的JPG和PNG图像。它们不仅加载速度更快，而且您只需要包含该图像的一个版本。这是因为SVG由于其向量性质而可以按比例放大到任何大小而没有任何质量损失。此外，您也可以使用CSS设置SVG的样式，就像普通的HTML文件一样。

6.避免重要规则

尽管！important规则在某些情况下可能是天赐之物，但您仅应将其作为最后的选择。此规则从级联中创建一个异常。因此，当您在CSS声明中添加！important时，它将覆盖所有其他声明，即使是那些具有更高特异性的声明。它的语法如下所示：

h1{
  margin-bottom: 20px!important;
}

如果CSS中有太多重要规则，则用户的浏览器将不得不对代码进行额外的检查，这可能会大大降低页面速度。根据经验，切勿在整个站点范围的CSS或创建主题或插件时使用！important。如果可能，请仅在要覆盖来自第三方库的CSS时使用它。

7.考虑CSS重构

尽管CSS重构很少是一件容易的事，但在许多情况下，它可以显着提高网站性能。例如，如果CSS文件太大，或者您继承了旧版代码库，或者页面加载时间很差，严重损害了转换率。CSS重构的目标是使代码更整洁，更可维护并且加载更快。

CSS重构是一个多步骤的过程，在此过程中，您需要分析CSS代码库的各个方面。您需要检查几件不同的事情，例如：

无论您有未使用或重复的CSS规则或资源，

是否可以利用Flexbox和CSS网格等更现代的技术，

是否使用过多的特异性（可以使用此视觉特异性计算器进行计算），

CSS文件的结构是否合理（例如，维护较小的文件比维护较大的文件更容易），

是否值得使用自动构建工具，

还有很多其他

在开始重构之前，还应设置可衡量的目标并选择要使用的基准，例如页面加载时间或第一个有意义的绘制，以便您可以比较它们的前后值。

同样不要忘记使用版本控制工具，例如Git。这样，如果出现任何问题，您可以返回到以前的代码版本。

包起来

您可以使用许多CSS优化技巧来改善网站的性能。它们中的大多数易于实现，但会对页面加载时间产生重大影响。更快的加载页面不仅可以增强用户体验，还可以帮助您在Google和其他搜索引擎中获得更好的排名。

除了CSS优化最佳实践之外，您还可以使用许多其他技术来提高加载速度，例如缓存，Google AMP和HTTPS协议。

作者：游X鱼
链接：https://www.jianshu.com/p/69198ac60e53

何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。

很显然HTML 已经达到了一个瓶颈，尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。

如何有效的降低HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了如何编写简练，清晰的HTML 代码，能够使得页面加载更为迅速，且能在多种设备中运行良好。

在设计和开发过程中需要遵循以下原则：

结构分离：使用HTML 增加结构，而不是样式内容；
保持整洁：为工作流添加代码验证工具；使用工具或样式向导维护代码结构和格式
学习新语言：获取元素结构和语义标记。
确保可访问：使用ARIA 属性和Fallback 属性等
测试：使网站在多种设备中能够良好运行，可使用emulators和性能工具。

HTML,CSS 和JavaScript三者的关系

HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容，也不能在头标签中输入文本内容，使代码变得冗长和复杂，相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的，如在Chrome中h1标签元素会渲染成32px的Times 粗体。

三条通用设计规则：

使用HTML 来构造页面结构，CSS修饰页面呈现，JavaScript实现页面功能。CSS ZenGarden 很好地展示了行为分离。
如果能用CSS或JavaScript实现就少用HTML代码。
将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

文档结构方面也可以做优化，如下：

使用HTML5 文档类型，以下是空文件：

<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>
 <h1>Pesto</h1>
 <p>Pesto is good!</p>
</body>
</html>

在文档起始位置引用CSS文件，如下：

<head>
 <title>My pesto recipe</title>
 <link rel="stylesheet" href="/css/global.css">
 <link rel="stylesheet" href="css/local.css">
</head>

使用这两种方法，浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。

在页面底部body结束标签之前输入JavaScript代码，这样有助于提升页面加载的速度，因为浏览器在解析JavaScript代码之前将页面加载完成，使用JavaScript会对页面元素产生积极的影响。

<body>
 ...
 <script src="/js/global.js">
 <script src="js/local.js">
</body>

使用Defer和async属性，脚本元素具有async 属性无法保证会按顺序执行。

可在JavaScript代码中添加Handlers。千万别加到HTML内联代码中，比如下面的代码则容易导致错误且不易于维护：

index.html:

<head>
 ...
 <script src="js/local.js">
</head>
<body onload="init()">
 ...
 <button onclick="handleFoo()">Foo</button>
 ...
</body>

下面的写法比较好：

index.html:

<head>
 ...
</head>
<body>
 ...
 <button id="foo">Foo</button>
 ...
 <script src="js/local.js">
</body>

js/local.js:

init();
var fooButton =
 document.querySelector('#foo');
fooButton.onclick = handleFoo();

验证

优化网页的一种方法就是浏览器可处理非法的HTML 代码。合法的HTML代码很容易调试，且占内存少，耗费资源少，易于解析和渲染运行起来更快。非法的HTML代码让实现响应式设计变得异常艰难。

当使用模板时，合法的HTML代码显得异常重要，经常会发生模板单独运行良好，当与其他模块集成时就报各种各样的错误，因此一定要保证HTML代码的质量，可采取以下措施：

在工作流中添加验证功能：使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。
使用HTML5文档类型
确保HTML的层次结构易于维护，要避免元素嵌套处于左开状态。
保证添加各元素的结束标签。
删除不必要的代码；没有必要为自关闭的元素添加结束标签；Boolean 属性不需要赋值，如果存在则为True;

代码格式

格式一致性使得HTML代码易于阅读，理解，优化，调试。

语义标记

语义指意义相关的事物，HTML 可从页面内容中看出语义：元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素，如<header>，<footer>及<nav>。

选择合适的元素来编写代码可保证代码的易读性：

使用<h1>(<h2>,<h3>…)表示标题，<ul>或<ol>实现列表
注意使用<article> 标签之前应添加<h1>标签；
选择合适的HTML5语义元素如<header>，<footer>,<nav>,<aside>;
使用<p>描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
使用<em>和<strong>标签替代<i>和<b>标签。
使用<label>元素，输入类型，占位符及其他属性来强制验证。
将文本和元素混合，并作为另一元素的子元素，会导致布局错误，

例如：

<div>Name: <input type="text" id="name"></div>

换种写法会更好：

 1: <div>
 2: <label for="name">Name:</label><input type="text" id="name">
 3: </div>

布局

要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。

使用<p>元素修饰文本，而不是布局；默认<p>是自动提供边缘，而且其他样式也是浏览器默认提供的。
避免使用<br>分行，可以使用block元素或CSS显示属性来代替。
避免使用<hr>来添加水平线，可使用CSS的border-bottom 来代替。
不到关键时刻不要使用div标签。
尽量少用Tables来布局。
可以多使用Flex Box
使用CSS 来调整边距等。

CSS

虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：

避免内联css
最多使用ID类一次
当涉及多个元素时，可使用Class来实现。

以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理，因此我们在日常开发中，能够考虑到用户体验，后期维护等方面，则会产生更高效的开发。

页加载速度在Shopify独立站中扮演着相当重要的角色。

你的网站加载速度越快，跳出率就会越低，转化率也会更高。相应的SEO的排名也会比速度慢的站点靠前。

Page speed is a critical factor when it comes to ranking your website higher on Google’s search engine results. Neil Patel Seo Expert Blog

那么今天我将介绍优化shopify加载速度的所有方式。

速度测试工具

以下几个工具可以免费测试网页速度。不要只测试首页，别忘了产品页（product page）和类目页（collection page）

1. Google Speed Insight

2. Gtmetrix

3. Pindom

4. Test My Site

注意：以下步骤需要了解HTML,CSS和Javascript等知识

在开始优化之前，请备份主题！！！

1. 压缩图片

Shopify允许使用以下图片格式

1. JPEG或JPG

2. Progressive JPEG

3. PNG

4. GIF

5. webp

图片压缩非常重要，可以说是影响网页速度最重要的因素之一。在进行图像优化时，请确保图片尺寸正确。不要在单个页面添加太多图片

在压缩图片时，尽量保证图片质量。

要压缩图片，有以下两种选择

1. 使用Shopiy图片压缩插件压缩图片

2.使用在线图片压缩网站压缩图片，然后下载压缩之后的图片并上传。推荐大家使用TinyPng。

2. 减少请求

使用GiftOfSpeed的HTTP请求检查器工具可以找出您的页面HTTPS请求总数。可以通过执行以下操作减少HTTP请求

1. 合并内联CSS

2. 合并所有JavaScript

3. 减少页面图片的数量

4. 雪碧图

5. 将图像转换为Base64代码

6. 限制社交按钮的数量

3. 分析shopify插件

shopify插件可以帮助我们提升我们的销售额。但是需要注意的是，大多数插件都会拖慢网页加载速度。

但是我不建议冒然卸载，而是应该通过以下步骤来优化：

1. 卸载效果不佳或者完全不需要的插件

你可能安装过一些看起来很炫酷，或者别人说很好用的插件。但是你一定得进行A/B test来检查它是否真的有用。可以通过GA,插件自带的分析工具，客户的反馈，热图等工具来进行分析

2. 检查模板代码中是否有旧的插件代码

如果你已经卸载了插件。那么你的模板代码中很大概率存在没有删除干净的插件代码（很多插件单纯卸载是删不干净的）你可以通过Chrome开发者工具打开Sources来查看

你可能无法识别每个域名，但是如果你发现了某个域名属于你卸载的插件，那么这个插件就没有删除干净，它依然在加载文件。例如，如果你卸载社交媒体登陆插件social-login.但是查看的时候依然发现了它的域名，那么就可以判断并没有删除干净

通常，你可以在theme.liquid文件中找到这些JS和CSS文件。

3. 根据条件加载插件

根据条件加载 = 仅仅在需要的页面加载资源

这个操作需要编辑html或者其他代码并且测试没有错误，请谨慎操作。

例如：大多数插件会将JS/CSS放在theme.liquid文件中。但是如果只是在产品页需要这个插件的效果。那么脚本文件就不需要加载到所有页面。

为了解决这个问题，可以限制脚本只加载到需要的地方：

4. 压缩CSS、JS文件

CSS和JavaScript用于控制网站的样式和行为。缩小这些文件可通过删除多余的字符（如空格和注释），缩短变量名以及组合常用样式来压缩它们。

使用该工具来缩小JavaScript：JSCompress。

如果您的模板代码Assets文件夹中的文件名以.liquid结尾，则可能将无法使用这些策略，因为其中混入了liquid代码。也可以通过多种方式进行操作，但很繁琐，也可能可能会导致错误，因此不太建议冒然修改。

5. 选择速度更快的主题模板

实际上，shopify网站的加载速度主要取决于网站模板，因此在选择模板时，一定要检查一下内容。

1. 通过速度测试工具测试模板预览页（首页、产品页、类目页）

在安装模板之后，不断检查或者联系主题作者是否有更新，请保持在模板的最新状态。

6. 删除Quick Shop功能

Quick Shop也就是产品预览/快速购买，可以很好的预览产品。不过随之而来的是更多图片，JS和DOM的加载,我认为这个功能会对转化率造成负面影响，也会拖慢加载速度不利于用户体验。所以这个功能建议关闭或删除。

7. 首页Banner使用单图而不是轮播图

轮播图之前流行了一段时间，大家通常在轮播图中添加3-4张高质量的图片。但是这极大的增加了页面加载时间，其实可以完全使用Hero image代替轮播图。

下面是一些有意思的统计，表面为什么不该使用轮播图

1. 大多数用户不会点击轮播按钮，实际上只有1%的人会点击。资料

2. 轮播图会影响用户体验。资料

3. 轮播图不利于SEO.资料

4. 轮播图在移动端不太友好。资料

建议大家使用Hero image来代替轮播图。例如以下网站均是单个Banner

- Shein

- Fashionnova - Colourpop

Hero image具体定义

维基百科：主页横幅 (Hero Image) 是网页设计的一个专业术语，一种特殊的网页广告。主页横幅是一个较大的横幅图片，放置在首页面的醒目位置。

主页横幅往往是针对网站访问者遇到的第一视觉页面，其目的是要提出一个该网站最重要的内容进行概述。主页横幅往往由图像和文字构成，可以是静态或动态的内容。

参考文献：

How to Improve Page Load Speed on Shopify — Razorrank

Suggestions to optimize website loading speed — Google Web Performance

Improving Load Performance — Chrome DevTools 101

Shopify Speed Optimization — Step-by-Step Guide

How to Optimize a Shopify Site: Complete Guide to Faster Load Speed — SpeedBoostr

（来源：shopify fans）

以上内容属作者个人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。

上雨果网搜索“跨境资料库”,领取欧美/东南亚各国市场商机、各大平台热销品报告、跨境电商营销白皮书！

在线咨询

上一篇：「胖达分享」网页中的图片和html文档的路径
下一篇：「前端面试」HTML5的优点与缺点？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

7个最佳CSS优化技巧，可缩短页面加载时间

您的项目需求