首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么 Google PageSpeed 等级分值不重要?

您不能从字面上接受Google PageSpeed的所有建议,因为有时它们是不切实际或不可能的。 例如,它可能会告诉您缩小或添加过期标头到不在您的网站上托管的文件。这是不可能的。...WP Rocket网站上显示的“ 通过有效的缓存策略服务静态资产 ”是一个很好的例子,它说明了无法控制这些资源的可能性: 通过启用Deferred JS选项,页面上的所有JavaScript文件(包括WP...Rocket压缩的JavaScript文件)都将带有defer属性加载;使用“ 合并JS”选项,所有JS文件(包括内联JS和第3方脚本)都将放置在页脚中,从而使它们不会“阻止渲染”。...激活“优化CSS交付设置”复选框时,将在后台为您的网站生成关键CSS,并在下一页加载时添加。之后,CSS将异步加载到您的站点上。...如果要求您做一些不可能的事情,则应该忽略它! 不要忘记永远 专注于速度 不用担心成绩。 总是 使用不同的速度测试工具,例如Pingdom或GTMetrix 查看您所做的任何更改对网站的影响。

61220

使用CSS提高网站性能的30种方法

您的用户可能根本不会注意到。当然,你的设计师会... 7.删除不必要的字体 标准字体需要为每种粗细和样式创建单独的文件。您可以删除那些不常用的。 同样,您不太可能需要字体中的所有字符和字形。...; fill: #0f0; } 您可以: 从HTML中删除SVG样式属性 对不同的节或页使用具有不同样式的相同图像,以及 动画任何CSS属性。...更改任何子项的内容时,浏览器将不会重新计算该项目、列表中的其他项目或页面上的任何其他元素的大小或位置。渲染速度更快。 26.尝试渐进式渲染 渐进式呈现是一种为每个页面和组件定义单独样式表的技术。...对一个组件的样式所做的更改不会影响其他缓存文件。 你可以领养原生Web组件或在组件出现在HTML中之前立即引用较小的CSS文件: 都是呈现阻止的,但每个文件不应超过几千字节。 较旧的浏览器可能会显示一个空白页面,直到所有CSS都加载完毕,但总体影响应该不会比一个大的呈现阻塞样式表更糟。

3.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    为什么我用 JavaScript 来编写 CSS

    我可以在不产生任何意外后果的情况下,添加、更改和删除 CSS。我对组件样式的更改不会影响其他任何内容。如果删除组件,我也会删除它的 CSS。不再是只增不减的样式表了!...✨ 信心:在不产生任何意外后果的情况下,添加、更改和删除 CSS,并避免无用代码。 易维护:再也不需要寻找影响组件的 CSS 了。 尤其是我所在的团队从中获取了很大的信心。...高性能:仅向用户发送关键 CSS 以快速进行首次绘制。 我还可以基于不同的状态(variant="primary" vs variant="secondary")或全局主题轻松调整组件的样式。...当我动态更改该上下文时,该组件将自动应用正确的样式。? 动态样式:基于全局主题或不同状态设置组件样式。 CSS-in-JS 还提供 CSS 预处理器的所有重要功能。...我知道你在想什么:“Max,你也可以通过其他工具或严格的流程或大量的培训来获得这些好处。是什么让 CSS-in-JS 变得特别?”

    1.3K50

    从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

    -- 注释 --> 换行标签: 或 水平线标签: 或 2、双标签 段落标签: 特点:上下自动生成空白行。br 换行不会生成空白行。...,如果只更改图片的宽度或者高度,图片等比例缩放 ---- 二、超链接 填写内容 href :去往的路径、跳转的页面, 必写属性...其中的属性说明如下: all:(默认)文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询...; noindex:文件将不被检索,但页面上的链接可以被查询; nofollow:文件将不被检索,页面上的链接可以被查询。...样式表还是图标 type="text/css" type="text/css":规定链接文件的MIME类型,就是说链接文件时css还是js href="1.css":链接的文件路径 5、设置 icon

    2.6K20

    玩转谷歌优化(Google Optimize)

    受限的变量测试免费版的谷歌优化提供多元测试,但多元试验仅限于16组。 预选目标。优化360的一个重要功能是可以通过追溯来更改测试目标,以了解实验是如何影响其他GA的目标。...在同一页(或页面模板)上测试具有两个或多个不同部分的变体。当你想尝试在同一页面(或页面模板)上测试多个元素的组合时,多变量测试则是一个非常好的选择。 重定向测试。 用于测试不同URL或路径的网页。...已进行的更改数。单击此元素将打开一个菜单,其中显示对当前变体所做的每个更改,并为你提供编辑或删除每个更改的选项。 5. 诊断。这是你所做出更改的潜在问题的计数。这些问题也会在你的更改列表中标记。...CSS元素选择器。 如果你知道如何使用CSS选择器,你可以使用这个功能深入挖掘DOM。这是修改页面上每个元素的最简单的方法。...CSS编辑器 如果你不熟悉CSS,谷歌优化有一个编辑器调色板,使得改变样式非常简单。只需单击,或使用元素层次结构,即可选择要更改的元素。 CSS调色板将填充该元素的所有样式。

    3.8K70

    50个有价值的CSS编写规则,让你写出更好的CSS

    我将所有全局样式保存在一个单独的文件中(尤其是在使用预处理器时),但你也可以将其放在 CSS 文件的顶部,然后专注于为站点的特定组件、元素或部分设置特定样式。...可以说,性能最高的CSS将为页面上的每个HTML元素提供一个ID,并使用它们进行样式设置,而使用CSS选择器则非常昂贵,深度嵌套时更糟。...如果你知道页面上唯一的链接是导航链接,也许使用选择器 a 是可以的,但如果你知道会有更多,使用一个类来区分它,比如 .nav-link。...21 、考虑更好的字体加载策略 你可以继续使用 @font-face 来定义你的字体,但使用 标签来加载你的字体,这样你就可以推迟它们,尤其是当你有 1 个以上的字体文件时。...如果你决定稍后删除该库,则删除会更容易,并且将它们放入自己的文件中已经是自我文档化了。 37 、指定需要转换的属性 当你指定转换时,请始终包括你打算转换的所有属性名称。

    2.4K20

    轻松改善您网站上最大的内容绘制 (LCP)

    这样做时,它平衡了图像的视觉质量和输出大小。 只需更改 URL 参数,您就可以选择实时更改压缩级别(或质量),从而平衡视觉质量和加载时间的业务需求。 3....预加载关键资源 在某些情况下,浏览器可能不会优先加载影响 LCP 的视觉上重要的资源。例如,折叠上方的横幅图像可以指定为 CSS 文件中的背景图像。...由于浏览器在下载 CSS 文件并与 DOM 树一起解析之前永远不会知道此图像,因此它不会优先加载它。...如果 CSS 可以稍后下载,或者特定页面上不需要 JS 功能,则没有理由预先加载它并阻止浏览器中的渲染。 假设您不能将特定文件拆分为较小的包,但这对页面的功能也不是关键。...因此,您可以删除它们,从而减少生产中的文件大小。较小的文件大小意味着文件可以快速加载,从而减少您的 LCP 时间。 如前所述,压缩技术使用数据压缩算法来减小通过网络传输的文件大小。

    4.3K20

    详解 Vue 目录及配置文件之 node_modules,src,static,test 目录

    1.3 src assets:放置静态资源,包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。...之所以强调是公共的 css 文件,是因为要在组件的 css 标签里加入 ‘scoped‘ 标记,将其作用范围限制在此组件以及调用它的父级组件中,避免污染全局样式; components:放置通用模块组件...assets 放可能会变动的文件;static 里的文件不会被 webpack 解析,会直接被复制到最终的打包(默认是dist/static)下,必须使用绝对路径引用这些文件。...static 放不会变动的文件。这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来设置的。...如果更改 assetSubDirectory 的值为 assets,那么路径需改为 /assets/[filename]。 1.5 test  测试目录,所有的测试文件都在这里,可以直接删除。 ?

    4K20

    40+个对初学者非常有用的PHP技巧(一)

    所以现在,即使你将项目转移到一个不同的目录,例如将其移动到一个在线的服务器上,这些代码不需要更改就可以运行。...2.不使用require,包括require_once或include_once 你的脚本上可能会包括各种文件,如类库,实用程序文件和辅助函数等,就像这些: ? 这相当粗糙。代码需要更加灵活。...轻松更改包含类文件的目录,而不破坏任何地方的代码。 使用类似的函数用于加载包含辅助函数、HTML内容等的文件。...3.在应用程序中维护调试环境 在开发过程中,我们echo数据库查询,转储创造问题的变量,然后一旦问题被解决,我们注释它们或删除它们。但让一切留在原地可提供长效帮助。...因为它们无法通过重定向发送(除非你将它们作为GET变量传播给下一个脚本,但这非常愚蠢)。而且在大型脚本中可能会有多个消息等。 最好的办法是使用会话来传播(即使是在同一页面上)。

    98520

    40+个对初学者非常有用的PHP技巧(一)

    所以现在,即使你将项目转移到一个不同的目录,例如将其移动到一个在线的服务器上,这些代码不需要更改就可以运行。...2.不使用require,包括require_once或include_once 你的脚本上可能会包括各种文件,如类库,实用程序文件和辅助函数等,就像这些: ? 这相当粗糙。代码需要更加灵活。...轻松更改包含类文件的目录,而不破坏任何地方的代码。 使用类似的函数用于加载包含辅助函数、HTML内容等的文件。...3.在应用程序中维护调试环境 在开发过程中,我们echo数据库查询,转储创造问题的变量,然后一旦问题被解决,我们注释它们或删除它们。但让一切留在原地可提供长效帮助。...因为它们无法通过重定向发送(除非你将它们作为GET变量传播给下一个脚本,但这非常愚蠢)。而且在大型脚本中可能会有多个消息等。 最好的办法是使用会话来传播(即使是在同一页面上)。

    89230

    180多个Web应用程序测试示例测试用例

    6.下拉字段的第一项应为空白或诸如“选择”之类的文本。 7.页面上任何记录的“删除功能”都应要求确认。 8.如果页面支持记录添加/删除/更新功能,则应提供“选择/取消选择所有记录”选项 。...22.验证所有网页的标记(验证语法和错误的HTML和CSS)以确保其符合标准。 23.应用程序崩溃或不可用的页面应重定向到错误页面。 24.检查所有页面上的文本是否存在拼写和语法错误。...18.页面上的所有按钮都应该可以通过键盘快捷键访问,并且用户应该能够使用键盘执行所有操作。 19.检查所有页面上是否有损坏的图像。 20.检查所有页面上是否有损坏的链接。 21.所有页面都应有标题。...2.检查图像上传和更改功能。 3.使用不同扩展名的图像文件(例如 JPEG,PNG,BMP等) 检查图像上传功能。4.使用文件名中带有空格或任何其他允许的特殊字符的图像检查图像上传功能。...4.检查数字格式以获取数字或货币值。格式应与页面上显示的相同。 5.导出的文件应具有带有正确列名的列。 6.默认页面排序也应在导出的文件中进行。 7.

    8.3K21

    IE内核浏览器的404页面问题和IE自动缓存引发的问题

    本站404页面被IE替换成IE自己的404页面 在权限设置正确的情况下,自定义的404页面文件大小如果小于512字节,那么IE内核的浏览器会认为你自定义的404页面不够权威,从而使用其自带的404页面代替...和css可以独立到一个二级域名中,启用GZIP,且设置较长的过期时间 对于图片独立到另一个二级域名中,且设置较长的过期时间 对于静态文件(html)如果长期不更新也可以设置稍长的过期时间(如30天),需要根据当前网站的实际而定...对于动态文件可以设置较短的过期时间(如120秒) 注意:在过期时间内,如果您对文件内容进行了变化,对于用户或蜘蛛都不能浏览或抓取到你更改后的内容。 这也是动态文件设置较短过期时间的主要原因。...|nofollow">   其中的属性说明如下:   设定为all:文件将被检索,且页面上的链接可以被查询;   设定为none:文件将不被检索,且页面上的链接不可以被查询;   设定为index...:文件将被检索;   设定为follow:页面上的链接可以被查询;   设定为noindex:文件将不被检索,但页面上的链接可以被查询;   设定为nofollow:文件将不被检索,页面上的链接可以被查询

    1.7K50

    WordPress主题开发基础:Body 类指南

    Body类(body_class)是WordPress函数,可让您将CSS类分配给body元素。 HTML正文标签通常从主题的header.php文件开始,该文件会加载到每个页面上。...之后,您还可以将自己的自定义CSS类添加到body元素。您可以在需要时添加这些类。 例如,如果要更改特定类别下的特定作者的文章外观。...在向您展示特定用例场景之前,我们将向您展示如何使用过滤器添加body类,以便每个人都可以在同一页面上。...不要忘记单击“保存更改”按钮来存储您的设置。 接下来,您可以直接编辑WordPress网站上的任何文章或页面。...您可以选择要启用body分类功能的文章类型以及谁可以访问它。不要忘记单击“保存更改”按钮来存储您的设置。 接下来,您可以直接编辑WordPress网站上的任何文章或页面。

    2.1K20

    Apriso 开发葵花宝典之五 Process Builder JavaScript 篇

    该应用程序能够快速方便地管理和修改开发的设计,使您能够根据需要随时更改业务流程。由于增强了对可重用性的支持,以前开发的逻辑可以在新的设计中快速重用。...4、控制UI元素-你可以建立一些html输出包括一些特殊的UI元素,包括一些特殊的javaScript函数到客户端或执行一些函数库或输出html。...; } 4、 包含外部Iavascript文件: 在Html和Javascript Tab页中都可以使用占位符链接到外部Javascript文件,如: [AprisoScripts] (e.g, <script...}); 使用样式表更改许多元素的CSS,如果要使用....CSS()更改超过20个元素的CSS,请考虑在页面中添加样式标记,这样可以将速度提高近60%,如 // Fine for up to 20 elements, slow after that: $( "

    64960

    Adobe dreamweaver CS6小白入门教程「建议收藏」

    3.管理站点的操作: 打开站点、 编辑站点、 删除站点、 复制站点、 导入导出站点 4.管理站点中的文件 1.创建文件夹和文件 2.复制移动文件 3.站点地图:以树形结构图方式显示站点中文件的连接关系...在站点地图中添加、修改、删除文件间链接关系。 5.DW文本网页的设计 5.1确定网页页面的属性 5.1.1如何写入连续多个空格?...这个通道中的“链接”是“当前网页和本站点中的另一网页之间的关系” 5.3.6.注意。...能在不离开当前网页文档的情况下,为访问者提供信息,和其他。 输入函数 预览 7.5.空链接 用于访问向页面上的对象或者文本附加行为。... 10.2使用CSS样式 10.2.1.CSS样式控制面板(新建CSS规则(以上图)、编辑样式、删除CSS规则、附加样式表) 10.2.2样式的类型与创建 第3.4

    7.3K30

    为什么你永远不应该在CSS中使用px来设置字体大小

    外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。...在我们的 CSS 中, 1px 的东西可能会占用多个物理硬件像素,而我们没有任何纯 CSS 的方法来指定一个字面设备像素。但这没关系,因为它们通常太小了,我们不想去处理它们。...一些用户从不更改默认设置,但许多人会更改。但默认情况下, 1em 和 1rem 都将等于 16px 。 “Em” 最初是指 “M” 字符的宽度,这也是名称的由来。...因为边框宽度和边距都是在 px 中设置的,它们保持不变,不会缩放。 但是请注意,如果将CSS中的 px 更改为相应的 rem 值,会发现线条和间距确实变大了!...(zh-Hans) 所以,这里的总结是: 当用户更改字体大小时, px 值不会缩放。 em 和 rem 的值会随字体大小成比例调整。

    1.8K20

    容易被忽略的CSS安全性

    第三方CSS ? CSS的作用更接近于脚本而不是图像。和脚本一样,它适用于整个页面。 它可以: 删除/添加/修改页面内容。 根据页面内容发出请求。 对许多用户交互作出响应。...CSS不能修改原始存储,你不能用CSS写一个挖矿程序(也有可能,或许我还不知道),但恶意CSS仍然可以造成很大的破坏。 键盘记录器 咱们从最开始的那个问题开始 ?...更加腹黑的黑客可能会偶尔删除“购买”按钮,或着重新排列内容中的段落。 添加内容 ? 哎呀,你这么快就涨价了! 移除内容 ?...攻击者还可以在页面上放一个非密码文本输入框(可能是搜索字段)并将其覆盖在密码输入框之上,呵呵,现在他们又回来了。 读取属性 你担心的可不仅仅是密码。 一些私有内容可能会保存在属性中: ?...虽然图像或沙盒iframe有着非常小的沙箱,但脚本和样式的作用范围却影响你的整个页面,甚至是整个站点。

    88530

    复制文件到正在运行的Docker容器中

    我们知道镜像是不可更改的,但容器是可以修改的。每个容器都有自己的可编辑文件系统。 如果你用同一个镜像创建了两个容器,它们运行后也是完全相同的,因为包含相同的文件。...这说明了每个容器都有自己的存储,对一个容器的修改不会影响到另一个。而容器的文件系统的更改是持久性的,这意味着你可以停止和启动容器,而他们不会有变化。...C /app/wwwroot/css/site.css 结果中的每个列,都有一个字母表示变化的类型,请查看以下注释说明: A 表示已将一个文件或文件夹添加到容器中。...C 表示文件或文件夹已被修改。如果是文件夹,表示该文件夹内的文件已被添加或删除。 D 表示文件或文件夹已从容器中删除。...我们可以看到除了site.css发生了变化,还创建了一些文件,这些文件均是和调试有关的内容。

    4.2K10

    不得不佩服,美观小巧的网页内容编辑器——ContentTools

    以上截图中的功能还不完整,如果想体验以下完整的功能可以直接去DEMO页面体验,如果需要在HTML级别上更改元素的内容,那也是可以的。...通过属性对话框中的最后一个选项卡,可以查看所选元素的内部HTML代码并直接对其进行更新。 使用 第一步是下载JS,CSS和其他关联的项目文件: 下载仓库并打开/ build文件夹,包括预构建的源文件。...但是,/ images文件夹和icons.woff字体需要复制到与content-tools.min.css相同的文件夹中,文件结构应类似于: ?...每种样式均声明为一个Style实例,该实例使用显示名称,CSS类和可以应用该样式的标签列表初始化。我们需要添加相关的CSS来支持这种样式,因此在HTML的开头添加: ......区域名称在同一页面中必须唯一。 保存更改 最后,我们希望在用户保存页面时得到通知,以便我们可以将每个区域的更新内容存储在文件或数据库中。为此,我们监听由编辑器触发的保存事件。

    2.8K10
    领券