土耳其民宿预订页地图瓦片换静态图后，我又踩了流量坑

上周在伊斯坦布尔用 4G 测自家卡帕多奇亚民宿的预订页：首屏加载 4.2 秒，地图瓦片请求 137 个，占全部请求量的六成。Booking 页面上线后我发现，住客在手机上打开页面时，地图先于房价渲染，滚动到价格区域之前就走了。

做法不复杂，但我把瓦片服务换成静态图后，遇到的是缓存和缩放两个问题。

location /static/maps/ {
  expires 30d;
  add_header Cache-Control "public, immutable";
}

静态图按民宿周边 3 公里切一张 1200px 宽的底图，叠加自绘的 POI，用 <picture> 给移动端 600px 版本。图源是 OpenStreetMap 导出后本地渲染，不走第三方瓦片。

为什么这么做：瓦片是逐块请求，移动网络下延迟叠加明显；静态图一次请求，首屏能压到 1.8 秒。代价是缩放失效，住客看街区细节要跳外链，我接受这个取舍，因为预订页的目标是成交不是导航。

失效的地方：静态图在卡帕多奇亚山区冬季低对比度下 POI 不清，我加了一层浅色描边；另外 OSM 的许可证要求署名，导出时我把 attribution 写进了图角。踩过的坑是 immutable 加 expires 同时写，部分 CDN 会忽略后者，最后只留 Cache-Control。

你们在土耳其做民宿页时，地图和房价哪个先出？