谷歌地图 API 导致页面速度命中
Posted
技术标签:
【中文标题】谷歌地图 API 导致页面速度命中【英文标题】：Google Maps API causes Page Speed hit 【发布时间】：2012-05-12 15:26:05 【问题描述】：我一直在努力优化我的Page Speed 分数，我发现加载 Google 地图似乎会被扣 5 分左右。它抱怨很多事情，但导致黄点的原因是大多数加载的资源中缺少缓存验证器。
为了排除我可能做的任何事情，我针对最简单的地图运行 Page Speed - Google 地图文档中的 Hello World。果然，它得到了我在我的网站上得到的相同警告。对此运行 Page Speed 以查看警告。
https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
这些警告可以修复吗？或者，一般来说，任何带有 Google 地图的页面都有可能获得高于 95 Page Speed 的分数吗？
【问题讨论】：
颇具讽刺意味的是，Google 自己的代码与他们的 Page Speed 测试器发生冲突！ （不过，我在那个例子中得到了 85 分，而不是 95 分。）我不认为你可以用你无法控制的资源做任何事情。 【参考方案1】：我在这张简单地图上的最高分数是 81/95（移动/桌面）。
以下示例给出 81/94。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas
height: 100%;
margin: 0px;
padding: 0px;
</style>
</head>
<body>
<div id="map-canvas"></div>
<script>
var map;
function initialize()
var mapOptions = zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) ;
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
function loadScript()
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
document.body.appendChild(script);
window.onload = loadScript;
</script>
</body>
</html>
通过代理加载 Google 地图库，我能够在桌面得分上获得 +1 分。
【讨论】：
以上是关于谷歌地图 API 导致页面速度命中的主要内容，如果未能解决你的问题，请参考以下文章