1. David Wu首页
  2. web前端
  3. CSS

厦门网站建设之如何在网站建设中避免“重复”的CSS

网页设计师似乎一直在努力优化其创作。在短期内,这将有利于性能。从长远来看,它也可以简化维护。 通常,这意味着优化图像,通过内容分发网络(CDN)实现页面缓存和提供文件。这些都是有效的措施。但是,没有引起足够重视的一项内容是网站CSS的潜在膨胀。 尽管您可以缩小样式表或通过CDN提供样式表,但可以做更多的事情。 WP网站建设

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

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

尽管您可以缩小样式表或通过CDN提供样式表,但可以做更多的事情。具体来说,摆脱那些没有被使用的浪费的标记,并收紧仍然有用的样式。

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

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

过去,网站本质上是从头开始构建的。这是一个很棒的方法,因为设计师可以只包含所需的样式和脚本。如果谨慎进行,此过程可能会导致网站的优化。

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

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

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

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

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

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

另一个替代方法是Tailwind CSS,它提供了基本样式,并假定您将在它们之上进行构建。如果您正在寻找一个很好的起点,而不是更成品,那么这可能是个合适的选择。

使用框架没有错。但是,请寻找以下之一:a)让您选择要加载的组件,或者;b)提供可以轻松自定义的准系统样式表。无论哪种方式,您的项目都将从减少的负载中受益。

WordPress网站建设

WordPress网站建设

CMS主题怎么办?

诸如商业WordPress主题之类的产品可能会很棘手,因为它们经常包含大量样式–无论您是否需要它们。

一个特定的主题可能会组织得井井有条,以至于可以很容易地使不需要的样式表出队。甚至可能有一个主题选项面板,让您单击几下即可执行此操作。但是,这很可能是例外而不是规则。

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

WordPress网站建设

WordPress网站建设

整理现有样式表

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

手动检查样式

启动您最喜欢的代码编辑器并打开网站的样式表始终是一个不错的起点。是的,这可能是一个乏味的经历。但这也是照顾低挂水果的有效方法。

不必仔细检查CSS的每一行。取而代之的是,该想法是找到您未使用或效率不高的所有项目。

例如,假设您运行的WordPress网站具有一些自定义样式以覆盖插件的样式。如果您不再使用该特定插件怎么办?在这种情况下,可以轻松删除样式。

或者,也许您偶尔会使用一些样式,例如在寒假期间。将这些样式移动到单独的文件中并仅在需要时才调用它们可能是值得的。

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

如果您的网站设计已有两年之久,您可能会惊讶于可以找到多少多余的样式。

厦门网站建设之如何在网站建设中避免“重复”的CSS

使用自动化工具

有很多工具可以扫描您的网站(或网站的至少一部分)并使用未使用的CSS列表进行报告。但是,在等待完美时不要屏住呼吸。

与自动辅助工具一样,未使用的CSS扫描器只能为您提供大量信息。因此,最好以一粒盐作为结果,并将其用作指导,而不是问题的最终答案。

CSS-Tricks的Chris Coyier就此特定问题撰写了出色的文章,值得一试。他不仅测试了其中一些工具,还研究了手头更大的问题,例如媒体查询。

但是,如果您有兴趣尝试这些工具中的一种或多种,​​那么一些较流行的选择是:

  • 吉比特
  • 清除CSS
  • 净化CSS
  • 未使用的CSS

自动化工具和手动审核的结合可能是最好的做法。两者都可以使您对潜在的性能优化有更全面的了解。您可能不会捕获所有单个项目,但仍有机会产生可衡量的影响。您可以在测试之前和之后使用GTmetrix之类的工具进行一些操作以查看结果。

厦门网站建设之如何在网站建设中避免“重复”的CSS

说到CSS:不要浪费,不要浪费

样式表可以达到多大令人惊讶,尤其是在使用现成的CSS框架时。当然,很高兴作者在样式元素方面为您完成了许多艰苦的工作。同时,在页面呈现和加载时间方面,它留在桌子上很多。

从项目一开始就应该注意这一点。通过减少样式表的权重,您正在帮助将优化的最后一滴从网站中删除。

如果您的网站已经遍布全世界,那么您仍然可以采取一些积极的步骤。查看CSS,查找要简化或删除的项目。利用那里的许多自动化工具之一查找您可能错过的物品。

最重要的是,将CSS缩减为基本要素并不是一个完美的过程。但是,仍然值得您花费时间和精力。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/102226

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注