Google maps 100% page speed 指南
简而言之，闪电般的地图
遗憾的是，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 的大部分内容。试着向客户解释这一点。
您的第一个想法可能是使用 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);
}); 结果
如果您应用这两种技术中的 1 种，您会注意到页面加载时的 lighthouse 分数为 100%，page speed insight 分数为 100%，同时保留了 Google Maps 的所有功能！
祝您在加快 Google Maps 速度方面好运。您需要帮助吗？那么 联系 我！
Compare your segments.
Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.
- Device filtering
- Route Analysis
- Connection Types
