Google PageSpeed Insights说我的网站很重.外部模态是一种解决方案吗?

Google PageSpeed Insights says my website is heavy. Is external modals a solution?

本文关键字：一种 解决方案 模态 Insights PageSpeed 我的 网站 外部 Google      更新时间：2023-09-26

我正在为我的办公室的作品集开发这个单页网站，为了保持干净，我正在使用引导模式来隐藏一些内容（几乎是图像和描述）。根据Google PageSpeed Insights，这使得整个页面变得沉重。为了寻找解决方案，我正在考虑使用以下方式将所有模态加载为外部 html 文件：

www.jsfiddle.net/qp7NP/

我不知道这是否是我的情况最明智的解决方案。我也担心SEO。我读到AJAX以某种方式用于动态加载内容，但我根本不熟悉AJAX。如果你们中的任何人知道我的情况的任何解决方案，或者可以就页面速度问题向我提供建议，我将不胜感激！

谢谢大家！

AJAX 真的并不像听起来那么可怕，对于这样的事情来说，这是一个很好的选择，因为它允许您使用几行 JavaScript 加载大量连续性，这意味着无论其他内容如何，初始加载时间都会更小。

下面的示例演示了如何将"首屏"（起始滚动位置下方）的内容加载为 HTML 并在必要时插入。

<!DOCTYPE html>
<html>
<head>
    <title>example</title>
</head>
<body>
    <h1>Page Title.</h1>
    <p>This is the content which is on the screen at load</p>
    <!-- this is the div which will hold all content outside of view when the page loads -->
    <div id="below_fold"></div>
    <script>
    // get the content on once the page has loaded
    window.onload = function() {
      // set up http request object
      var xhttp = new XMLHttpRequest();
      // tell http object what to do when response is recieved
      xhttp.onreadystatechange = function() {
        // if its all good then go ahead
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          // add content to div
          document.getElementById("below_fold").innerHTML = xhttp.responseText;
        }
        // else we don't do anything, you could display an error or try again
      };
      // set file path for contents
      xhttp.open("GET", "below_fold_content_html.txt", true);
      // send request, xhttp.onreadystatechange will be called when completed
      xhttp.send();
    }
    </script>
</body>
</html>

（上面的例子是 http://www.w3schools.com/ajax/的添加）

相关文章：