CLS - 避免大的布局偏移 - Div inside HTML

Question

正如我们大多数人所见，GTMetrix 中有一个名为 CLS 的“半新”扫描。我正处于学习解决这些问题的开始阶段，确实需要一个值得这样做的示例（我相信这在搜索更多信息教程时也可以帮助成千上万的其他人）

GT Metrix 内容如下：

我尝试添加宽度和高度变量，但没有解决。我确信解决方案超出了这个范围……有人可以教我（和其他人）采取哪些直观的步骤来解决与位置有关的此类问题。我已阅读有关此过程的其他文章，但正在寻找人与人之间的解释

更新： 如果我删除 css 的“预加载”，CLS 会下降到 0.16（但仍然有相同的元素贡献）

Answer 1

以下是<head>的一部分：


    <!-- Preloading -->
    <link rel="preload" href="assets/fonts/Montserrat-Regular.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="assets/fonts/Montserrat-Bold.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="assets/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="assets/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="assets/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Styles -->
    <style>
        <?php
        // Inlining critical CSS, so it's known before DOM load (preventing CLS)
        include_once __DIR__ . '/assets/css/critical-inline.min.css';
        ?>
    </style>
    <link rel="stylesheet" href="assets/css/critical-link.min.css?v1" type="text/css" />
    <link rel="stylesheet" media="none" onload="this.media = 'all'" href="assets/css/main.min.css?v1" type="text/css" />

我最初只想要两个文件（关键文件和主要文件），但是通过 <link> 加载这两个文件导致了 CLS。将关键 CSS 移动到内联 <style> 修复了 CLS 问题，但字体停止加载。因此我将字体移至 critical-link 并将 critical 重命名为 critical-inline.

对我有用，但我不是说这是最佳实践！

CLS - 避免大的布局偏移 - Div inside HTML

CLS - Avoid Large Layout Shifts - Div inside HTML

html

css

php

performance

google-pagespeed