Google maps 100% page speed 指南

Arjen Karel
linkedin

简而言之，闪电般的地图

遗憾的是，Google Maps 对您的 Lighthouse 分数几乎没有尊重。Google 注入了一个 iFrame、各种 JavaScript 文件和样式表，所有这些都会阻塞页面的呈现。

遗憾的是，您无法控制 Google Maps 注入您页面的内容。为了保持您的页面分数，您需要确保 Google 在您的浏览器完成呈现和绘制页面最重要的内容之前不会加载地图。

嵌入 Google Maps 并仍获得 100% page speed insights 和 lighthouse 分数的最佳方法是使用占位符图像，并仅在访问者与地图交互时替换它。

我们将向您展示如何做到这一点！

Google Maps 对 Lighthouse 分数的影响

有很多理由在您的页面上嵌入 'Google maps' 地图。例如，这对于显示贵公司的位置非常有用。
但这有一个问题。 Google Maps 并不像您期望的 Google 服务那样快。事实上，页面上的 Google Maps 极大地消耗了 pagespeed。
这消耗了我完美的 100% page speed 分数的 14%。它对我的 Google lighthouse 统计数据就是这样做的

First contentful paint + 0.8 sec . 第一次绘制几乎在一秒钟后运行，因为 Google Maps 干扰了页面的加载。
Speed index + 3.1 sec Speed index 由于地图呈现和 main thread 阻塞而增加了三倍
Largest contentful paint + 0.8 sec. 最大内容绘制延迟了 0.8 秒，就像第一次内容绘制一样。
Time to interactive + 6.5sec . 由于 Google Maps 严重依赖 javascript 并且必须全部执行，因此与页面交互需要超过 6 秒。
Total blocking time + 320ms . Google Maps 阻塞 main thread 320 毫秒。这正是我们不想要的。
删除未使用的 JavaScript 警告 . 最重要的是，您会收到另一个警告，提示您没有使用 Google Maps javascript 的大部分内容。试着向客户解释这一点。

initial page speed for google maps

您的第一个想法可能是使用 iframe 属性 loading="lazy" 来 'lazy' 加载地图。不幸的是，这通常没有什么意义。通过 loading = "lazy" 推迟的 iFrame 仍会被浏览器提前下载和执行。所以我们需要想出更聪明的方法。

第 1 步 - 静态地图

最简单的选择是使用静态地图。这意味着您只使用地图的图像，而不是交互式地图。这样做的好处是图像加载速度要快得多。缺点是您无法与图像进行交互。因此，您无法缩放、滚动或导航。

我们将从静态地图开始。稍后我们可以将此静态地图转换为不干扰 pagespeed 的交互式地图。

有几种方法可以将静态地图放置在您的页面上。有些工具可以帮助您做到这一点，例如 Static Map Maker，但您需要一个 API 密钥。即使向您展示如何手动下载静态地图图像。

1 - 将地图放置在您的页面上。

将地图放置在您的页面上。转到 Google Maps，找到一个位置，然后单击共享 > 嵌入此地图。复制代码并将其粘贴到您的页面上。现在右键单击页面并选择 '检查元素'。您现在将看到浏览器 'dev console' 的元素检查器。现在找到 iframe 代码，右键单击它并选择 'capture node screenshot'。

2. 将静态文件夹转换为 WebP 格式。

您刚刚下载的地图图像是 png 格式。因为我们的目标是 page speed，我们将使用更快的 WebP 格式。您可以在 ezgif 在线转换您的图像，或者您可以使用工具 cwebp 自行转换： cwebp -q 60 image.png -o image.webp。

第 2 步 - 将静态地图图像转换为交互式地图

静态地图可确保在页面加载期间不会丢失 page speed。在页面加载时，这意味着我们还没有交互式 Google 地图。在页面加载后的某个时间点，我们将在后台将静态地图替换为交互式地图。我们将在页面呈现和绘制后执行此操作。这可以通过 2 种方式完成。第一种方法是在您将鼠标悬停在静态地图上时立即替换它。第二种是即使浏览器处于空闲状态就替换静态地图。

3. 将静态地图图像放置在特殊的 '占位符' 中

因为我们要让我们的地图在手机和桌面上看起来都不错，我们将使用这个 CSS 技巧无论访问者的屏幕尺寸如何，地图的比例始终正确。现在我们将一个 data-src 属性添加到容器中，稍后我们将以此用作 Google Maps 的源 URL。

首先将地图容器放置在页面上：
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

在您的样式表中添加一些样式。如您所见，我们将静态地图图像用作背景图像，并在底部应用 76.25% 的填充以实现 16:9 的地图格式。最终地图将在静态地图的整个宽度和高度上具有绝对位置。

#mymap{
    background: url(/image.webp); 
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding-top: 76.25%;
}
#mymap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

4. 在第一次交互期间加载交互式地图

这就是发生魔法的地方。没有这一小段 JavaScript，地图只是一个静态图像。此 JavaScript 向占位符容器添加（并删除）一个事件侦听器，并等待 'mouseover' 事件（当您将鼠标悬停在静态地图上时）将交互式地图注入容器。

var map = document.getElementById ('mymap'); 
var maplistner = function (e) { 
    var frame = document.createElement ('iframe'); 
    frame.src = this.getAttribute ('data-src'); 
    map.appendChild (frame); 
    map.removeEventListener ("mouseover", maplistner); 
}; 
map.addEventListener ('mouseover', maplistner);

5. 预加载背景图像（可选）

如果 Google Maps 在视口中立即可见，这通常是 '预加载' 背景地图图像的一个明智想法。使用此代码预加载静态地图图像 <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> 并将其尽可能早地放置在页面的 <head>中。在此示例中，预加载占位符图像可将 LCP 加快近一秒。

第 2b 步 - 自动替换静态地图图像

当访问者很有可能与地图交互时，不等待 mouseover 事件可能是一个好主意。只要浏览器处于空闲状态，就开始将地图注入页面。过程与上述大致相同。您甚至可以结合使用两者。

4b - 自动加载交互式地图

我们将在此处使用 'load event'。load event 是浏览器在页面完成加载后立即发送的信号。然后我们将静态地图转换为交互式地图！

window.addEventListener('load', 
    function(e) {
        var map = document.getElementById ('mymap'); 
        var frame = document.createElement ('iframe'); 
        frame.src = map.getAttribute ('data-src'); 
        map.appendChild (frame); 
});