|
|
|
级联样式表可以将枯燥的HTML文档转换为动态网页，但随意使用CSS可能会使网站在开始渲染之前瘫痪。本指南将介绍一些快速简便的方法来微调网站的CSS性能，以便您可以更快地向用户提供内容。什么是CSS？级联样式表或CSS是用于基于标记语言文档中提供的内容定义网站的可视化表示的语言，它被认为是Web和HTML和JavaScript的“基石技术”之一。CSS通常存储在外部样式表中，或者.css files也可以直接集成到HTML文档中。CSS允许网站的演示文稿和内容之间的分离，这使得网站更容易被不同的设备访问。将颜色和字体的信息与内容分开也会降低网站的复杂性，因为几个HTML页面可能共享相同的内容.css file。但是，如果使用不当，CSS可能会严重影响网站的性能。CSS性能和网站速度在评估网站的速度时，需要衡量各种性能指标，但有两个突出显示：第一个字节的时间开始渲染的时间第一个字节的时间是指访问者在请求您的URL后接收第一个数据字节所需的时间，开始渲染的时间是用户的浏览器实际开始显示内容的时间点。前者在很大程度上取决于您的服务器设置，但后者更多地取决于CSS结构。也就是说，浏览器在接收数据之前不会开始渲染，因此第一个字节的慢速时间显然会缩短开始渲染的时间。因此，在获得优化CSS性能之前，您应该优先解决服务器的任何潜在问题。CSS性能如何影响启动渲染的时间？在浏览器开始布置网页内容之前，它需要HTML和CSS形式的说明。因此，在下载和处理所有外部样式表之前，渲染无法开始。这需要的往返次数越多，游客就越需要等待。使用外部CSS涉及发出一个或多个HTTP请求，因此您的目标应该是尽可能减少所需请求的数量。例如，将插件，横幅和布局链接样式放入单个.css文件中可以显着加快首次渲染的时间。提高CSS性能：内联简介确保快速交付CSS的一种方法是内联实践，内联意味着将外部CSS资源直接插入HTML文档。这种技术适合较小的资源，但它仍然有明显的区别。内联CSS减少了浏览器在开始呈现页面之前需要下载的数据量，使用外部CSS文件时，必须在标记文档完成下载后单独下载它们，内联可以让你一石二鸟，可以这么说。要内联CSS，只需从外部CSS文件中复制所需的CSS代码，然后将其粘贴到HTML文档头部的样式标记之间，如下所示：<head> <!– Your header markup –> <style> .your-styles { font-weight: bold; } .etc-etc { color: #222222; } </style></head>内联更大的CSS资源如果您尝试内联大型CSS文件，可能会从性能测试工具收到警告，指出您的首屏内容太大。因此，对于较大的CSS文件，您应该只内联渲染您的首要内容所需的CSS。然后，您应该异步加载完整的样式表，以便页面可以在解析时继续呈现。关键CSS是一个GitHub项目，可以帮助您选择哪个CSS属于首屏，但您还应该进行手动检查以确保没有遗漏关键组件。在缩小和Gzip压缩之后，所有您的首要样式，脚本，标记理想情况下总重量应小于14 kb。由于14 kb大致是服务器在第一次往返中可以发送的数据量，保持在该阈值之下允许用户在他们收到的第一个数据包中获得所有内容。使用异步加载和缓存提高CSS性能上述技巧可以将用户的浏览器保存一次往返服务器，因此他们在第一次访问时会更快地看到内容。不幸的是，用户的浏览器不会缓存CSS，因此每次访问时都必须从头开始加载所有内容。如果你有相当简单的CSS，这不是一个问题。但是，在大多数情况下，您仍然希望用户的浏览器缓存大部分CSS，这就是为什么许多Web开发人员只需在其主页或登录页面上内联CSS，同时在其网站的其余部分使用外部CSS。解决此问题的一种方法是异步加载，不幸的是，没有办法本地异步加载CSS文件，但你可以使用像loadCSS.js这样的脚本来完成这项工作。提高CSS性能的7个提示1.使用preload / HTTP / 2 Push预加载资源提示告诉浏览器提前获取资源，要让CSS先行一步，请将其设置为HTML文档中的链接标记，如下所示：<link rel=”preload” href=”/css/styles.css” as=”style”>或者，您可以在服务器配置中包含preload作为HTTP标头：Link: </css/styles.css>; rel=preload; as=style如果您的服务器配置为HTTP / 2，预加载将被解释为服务器推送。一些CDN还支持服务器推送，这将有助于进一步加快高优先级CSS文件的传送速度。2.不要内联一切不要在HTML文件中内嵌所有内容，因为这会导致初始HTML文档的大小增加，因此TTFB需要更长的时间。3.连接并缩小CSS将样式表连接到一个文件并发送缩小版本可以大大减小CSS的大小。4.减小样式表的大小样式表越小，它们包含的选择器越少，浏览器在呈现网页时必须执行的工作就越少。因此，您应该尽力删除不需要的选择器，利用实用程序类并避免重复的CSS代码，您可以使用诸如uncss之类的工具来确保样式表仅包含必需的CSS代码。5.选择你的选择器说到选择器，使用后代选择器强制浏览器检查所有后代元素是否匹配，因此它们可以创建比它们旋转更多的问题。通用选择器也可能相当昂贵，因此也避开它们。尽可能使用浅选择器。6.避免一些属性某些CSS属性比其他属性要臃肿得多，所以应该保守地使用它们，这些是需要注意的几个属性：边界半径箱阴影过滤位置：固定转变如果它们每页出现数百次，那么整体CSS性能可能会受到影响。7.避免@import不要使用@import指令来包含外部样式表，因为它会阻止并行下载，这是一种古老的做法。相反，始终使用链接标记结论无论网页加载完成后网页看起来多么令人眼花缭乱，如果访问者在此之前转身离开，您的任何努力都无关紧要。将上述策略集成到您的编码中将允许您构建更快速，更一致地执行的网站，这将鼓励新客户继续回访。相关文章推荐如何将Favicon添加到网站 大多数在线网站都有自己的特定徽标，在大多数情况下，它们被用作网站favicon。如果您不知道favicon是什 […]...如何正确实施网站分页？ 分页是什么？ 分页是页面的序数编号，通常位于网站页面的底部，在大多数情况下，它用于页面分区。通常情况下看起来像 […]...如何在CentOS 7上创建Apache虚拟主机？ 如果想要在服务器上托管多个域，则需要在web服务器上创建相应的主机，以便服务器知道应该为传入的请求提供哪些内容 […]...Favicon对网站建设的重要性 Favicon图标是一个16×16的ICO文件，支持16或24位颜色和透明度，现在一些浏览器支持32×32大小 […]...HTML5：SVG入门 SVG（可缩放矢量图形）允许您在网页中创建完全按比例放大和缩小的图像，无论用户设备屏幕的大小如何。此外，您可以 […]... |
|
发表于 2020-6-29 22:44