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

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

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

58120

为什么我用 JavaScript 来编写 CSS

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

1.3K50
您找到你想要的搜索结果了吗?
是的
没有找到

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

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

3.4K20

从零开始学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.5K20

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

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

2.3K20

玩转谷歌优化(Google Optimize)

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

3.7K70

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

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

3.7K20

详解 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  测试目录,所有的测试文件都在这里,可以直接删除。 ?

3.6K20

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

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

97220

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

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

87530

HTTP 缓存最佳实践和 max-age 带来陷阱

在这个模式下,您永远不会更改特定 URL 内容,而是更改 URL: <link rel="stylesheet...在这种模式下,<em>可以</em>在响应中添加 ETag(你选择<em>的</em>版本 ID)<em>或</em> Last-Modified 日期标头。...可变内容<em>的</em> max-age 通常是错误<em>的</em>选择 遗憾<em>的</em>是,这种情况并不少见,例如在 Github 页<em>面上</em>就会发生。...如果有些页面不包含 JS,<em>或</em>包含不同<em>的</em> <em>CSS</em>,过期日期就会不同步。...更糟糕<em>的</em>是,浏览器经常会从缓存中<em>删除</em>一些内容,而它并不知道 HTML、<em>CSS</em> 和 JS 是相互依存<em>的</em>,所以它会很乐意<em>删除</em>其中一个,而不<em>删除</em>其他<em>的</em>。

20320

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

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

2K20

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.1K21

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.6K50

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: $( "

48350

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

7K30

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

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

1.6K20

WebStorm激活码2022年6月实测,WebStorm安装教程

缺点:没有上一个*标记,一键盘误操作会立即被存储。只要文件关闭,任何编辑器都没有历史记录,webstorm有。...Vcs->本地历史记录->显示历史记录(快捷键:alt+~->7)好处:只要webstorm没有关闭,您文件可以随时返回到以前操作(这就是为什么在webstorm中使用ctrl+y删除一行)。...在编写CSS时,它会智能地提示各种文件和图片路径,因此您无需确认文件是否存在。还介绍了其他功能。如果您想了解更多信息,可以访问webstron官方网站继续搜索。...最后,下载并安装就可以了在开发JS时,发现需要Ctrl+return来选择候选人:文件->设置->编辑器->代码完成->选择第一个建议:“智能”更改为“始终”JS提示慢文件->代码完成->下1000中...如果你没有git,你就不需要它插件安装:文件->插件,然后选择要安装很棒插件(“css-x-fire”插件用于在使用firebug修改css属性时更改编辑器中css代码。)稍后更新

3K10

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

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

4.2K10

容易被忽略CSS安全性

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

86230
领券