互联网上有许多拖放式网站建设者可以在没有技术技能的情况下创建网站。但是,您必须学习SEO的一些技术方面,才能使您的网站保持在搜索引擎结果页面的顶部。 关键CSS是这样的技术主题之一,用于优化您的内容交付,进而直接影响速度。对于在其网站上使用多个插件的普通用户来说,WordPress生态系统使这变得更加复杂。 在本文中,让我们探讨如何为WordPress网站创建关键CSS以提高Google PageSpeed分数。 基础知识 在讨论关键CSS之前,有必要了解一些术语,例如首屏和内容交付优化。此外,您还需要了解在WordPress上使用外部样式表的基本方法。 首屏内容 当您在桌面或移动设备上打开网站时,您在屏幕上看到的可见部分是首屏内容区域。这是一个传统的报纸术语,您可以在其中看到首页顶部的首屏内容。一般来说,人们习惯于折叠报纸,折叠区域上方提供重要内容。同样,首先加载的网页顶部可见部分应该为用户提供最有价值的内容。因此,您应该专注于优化可见顶部以快速加载。 内容交付优化 许多速度工具(如Google PageSpeed Insights)衡量网站如何提供首屏内容。您可以将其视为对首次内容绘制 (FCP) 的测量。如果他们检测到阻塞,您将看到删除阻塞元素的警告。您将在Google PageSpeed Insights工具中看到的流行建议之一是消除渲染阻塞资源。如果您点击该建议,Google将向您展示优化关键CSS/JS的交付并推迟所有非关键CSS/JS。 关键的CSS和JS建议 修复阻塞渲染的JavaScript (jQuery) 非常容易,因为主题/插件默认在页脚部分加载脚本。jQuery是唯一的问题,许多网站可能需要它来加载首屏内容。因为,WordPress也使用jQuery,如果它只是由于jQuery,你可以忽略这个错误。否则,如果不会破坏您网站的布局,请使用WP Rocket之类的插件来组合和交付所有脚本。 然而,问题在于生成关键的CSS并首先加载它。在本文中,我们将解释如何处理CSS优化以提高页面速度得分。 相关阅读: 正确地配置WP Rocket插件以提升网站加载速度。 在网站中加载CSS 有多种方法可以在您的网页中插入CSS 。您可以通过内联、内部或外部方式执行此操作。最流行和推荐的方法是在网页的标题部分链接外部样式表。由于页眉部分中的内容首先与网页一起加载,因此会极大地影响首屏内容的加载,从而影响页面速度。 <!DOCTYPE html> <html lang=”en”> <head> <!– Meta Tags for Bootstrap 4 –> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”Link Your Stylesheet URL Here”> </head> <body> […]

































