避免网站建设中的浪费CSS

佚名 2022-08-06 23:59

网页设计师似乎一直在努力优化他们的创作。这将有利于短期内的性能。从长远来看,它还可以简化维护。

通常,这意味着通过内容分发网络优化图像(CDN)实现页面缓存和文件提供。这些都是有效的措施。然而,没有引起足够重视的内容是网站CSS潜在膨胀。

虽然你可以通过缩小样式表或通过CDN提供样式表,但可以做更多的事情。具体来说,删除未使用的样式,格式化仍然有用。

最好从施工过程的开始就完成。但也有可能减轻现有网站的负担。让我们来看看所涉及的挑战,以及一些可以使网站更快的工具和技术。

处理内置于主题和框架中的膨胀

过去,网站本质上是从头开始建立的。这是一个很好的方法,因为设计师只能包含所需的风格和脚本。如果你小心,这个过程可能会导致网站的优化。

当然,我们很多人放弃这种做法的原因有很多。就时间和预算限制而言,这根本没有效率。

因此,现代网站通常基于预建产品。那可能是CSS框架,例如Bootstrap或精心设计的WordPress主题。在某些情况下,CMS主题甚至可能包含框架。

这些产品是一刀切的。它可以使开发更快,包含你可能需要的所有内容。不幸的是,不能说它们对性能的影响。

那怎样才能改善这种情况呢?

尽量使用基于组件或轻量级的框架

从理论上讲,既有可能在避免膨胀的同时获得框架优势。这可以通过使用基于组件的程序包来实现。这些程序包允许您加载特定功能而忽略其他功能。前面提到的Bootstrap确实允许这种类型的定制。

另一种替代方法是Tailwind CSS,它提供了基本的风格,假设你将在它们之上建造它们。假如你在寻找一个好的起点,而不是更成品,那么这可能是一个合适的选择。

使用框架没有错。但请寻找以下内容之一:a)让您选择要加载的组件;b)准系统样式表可以轻松定制。无论如何,您的项目都将从减少的负荷中受益。

CMS主题呢?

无论你是否需要它们,商业主题等模板产品都可能很棘手,因为它们通常包含大量的风格。

一个特定的主题可能组织得井井有条,很容易减少不必要的样式表。甚至可能有一个主题选项面板,让你单击几次。但这很可能是例外,而不是普遍。

避免主题臃肿的最好方法是创建自己的主题。例如,WordPress入门主题将提供一些您可以定制的准系统CSS。这有助于确保样式表更简洁,至少消除和消除CMS相关的少量开销。

整理现有样式表

我们对现有网站的关注、整理和重构可以通过以下两种方式之一来改变CSS:

手动检查样式

启动您最喜欢的代码编辑器并打开网站的样式表总是一个很好的起点。是的,这可能是一次无聊的经历。但这也是照顾低挂水果的有效方法。

不必仔细检查CSS的每一行。相反,这个想法是找到所有你没有使用或效率低下的项目。

假设你操作WordPress网站具有一些自定义样式以覆盖插件的样式。如果你不再使用这个特定的插件呢?在这种情况下,样式

或者,也许你偶尔会用一些风格,比如寒假。有必要将这些样式移动到单独的文件中,并在必要时只调用它们。

然后是一些CSS选择器,它们写得不太好。也许他们有许多不再需要的浏览器前缀或不必要的重复属性。这是成熟区域的清理。

假如你的网站设计已经两年了,你可能会惊讶于你能找到多少多余的风格。

使用自动化工具

扫描你的网站(或网站的至少一部分)并使用未使用的工具有很多CSS报告列表。如果您有兴趣尝试这些工具中的一种或多种,我们已经测试了一些工具,以下是我们推荐的自动化工具:

JitBit

PurgeCSS

PurifyCSS

Unused CSS

最好将自动化工具与手动审核相结合。两者都能让你对潜在的性能优化有更全面的了解。您可能无法捕获所有单个项目,但仍有机会产生可衡量的影响。测试前后均可使用GTmetrix一些操作等工具来检查结果。

说到CSS:不要浪费

款式表可以大到惊人,尤其是现成的CSS框架时。从网站建设开始就要注意这一点。通过减少样式表的无用部分,您将优化网站的性能,加快加载速度。

假如你的网站已经上线,你仍然可以采取一些积极的步骤。查看CSS,搜索要简化或删除的项目。找出你可能错过的部分,使用许多自动工具之一。

最重要的是,将CSS减少到基本要素并不容易,但仍然值得花时间和精力。

下一篇: 增加网站收录,注意这些问题
上一篇: 四川企业网站优化有哪些注意事项?
相关文章
返回顶部小火箭