Google Maps实现导致Google页面速度问题

Question

我是一个相当新手的站长，在这里得到了很多优秀的志愿者的帮助，我很感谢你们所有人。

最近，这里有人(Davie)帮我弄了一个Google地图来查询数据库并显示在网页上，但它导致了页面速度问题，我自己似乎无法破解。

我将用这个URL总结一下；(故意将链接从https中删除1 t以满足algo here)：

http://classifieds.your-adrenaline-fix.com/detail.php?fatherID=37&TypeID=42&ListingID=42

Google Page Speed说；(我注意:下面的urls看起来像：

htps://mts0.googleapis.com/vt?lyrs=h@210000000&src=apiv3&hl=en-US&x=36&y=52&z=7&s=&style=api%7Csmartmaps)

以下资源具有相同的内容，但由不同的URL提供。从一致的URL提供这些资源，以节省10个请求和1.9KiB。

htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 

另外，我得到了；

以下资源缺少缓存验证器。无法有效地刷新未指定缓存验证器的资源。指定Last-Modified或ETag标头以启用以下资源的缓存验证：

htp://www.google.com/.../brand?... 
htps://maps.googleapis.com/.../GeocodeService.Search?... 
htps://maps.googleapis.com/.../StaticMapService.GetMapImage?... 
htps://maps.googleapis.com/.../StaticMapService.GetMapImage?... 
htps://maps.googleapis.com/maps/api/js?sensor=true 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts0.googleapis.com/vt?... 
htps://mts1.googleapis.com/.../ft?... 
htps://mts1.googleapis.com/.../ft?... 
htps://mts1.googleapis.com/.../ft?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?... 
htps://mts1.googleapis.com/vt?...

我希望这里有人熟悉这一点，并对如何解决这些问题有一个想法。

这是detail.php上的代码

$TypeID = isset($_GET['TypeID']) ? $_GET['TypeID'] : ''; 
            $ListingID = isset($_GET['ListingID']) ? $_GET['ListingID'] : ''; 
            $allowed_tables = array('tt_42', 'tt_43');
            $table ="tt_".$TypeID;
            $dbh = new PDO("mysql:host=$host;dbname=$db", $username, $password);
            $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

      try {
        if (in_array($table, $allowed_tables)) {
        $query = "SELECT `Address`, `City`, `State/Province`, `Zip/Postal`, `Country` FROM `$table` WHERE `ID` = ? AND `ExpireDate` > NOW()";
        }
                $stmt = $dbh->prepare($query);
                $stmt->bindParam(1,$ListingID);
                $stmt->setFetchMode(PDO::FETCH_ASSOC);
                $stmt->execute();

                $Address = $listing['Address'];
                $City = $listing['City'];
                $State = $listing['State/Province'];
                $Zip = $listing['Zip/Postal'];
                $Country = $listing['Country'];

                echo '<h2>Map of Surrounding Area With Navigational Aides</h2>';
                echo '<div class="CalloutBoxBlue">Hover over map and scroll, or use + and - in LH corner of map to zoom or expand viewing area. Alternatively, hold down mouse to manually move the map to a different geographical location, or drag the person icon to a specific location on the map for a street view.</div>';

                echo '<div id="GoogleMap">'; 
                echo '<iframe scrolling="no" style="width:480px; height:300px; border:0px;" frameborder="0" src="googlemap.php?Address='.$Address.'&amp;City='.$City.'&amp;State='.$State.'&amp;Zip='.$Zip.'&amp;Country='.$Country.'"></iframe>'; 
                echo '</div>'; 
            }

            catch(PDOException $e) {
                echo "Error in Displaying Google Map.". $e->getMessage() ;// Remove or modify after testing 
                //file_put_contents('PDOErrors.txt',date('[Y-m-d H:i:s]').", mapSelect.php, ". $e->getMessage()."\r\n", FILE_APPEND);  
             }

另外，这是googlemap.php的代码

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map { height: 100% }
    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true">
      var geocoder;
      var map;
     <?php
      // Get parameters from URL
      $Address = isset($_GET['Address']) ? $_GET['Address'] : ''; 
      $City = isset($_GET['City']) ? $_GET['City'] : ''; 
      $State = isset($_GET['State']) ? $_GET['State'] : ''; 
      $Zip = isset($_GET['Zip']) ? $_GET['Zip'] : ''; 
      $Country= isset($_GET['Country']) ? $_GET['Country'] : '';

      //Set javascript variables
      echo "var Address ='".$Address."';\n"; 
      echo "var City ='".$City."';\n"; 
      echo "var State ='".$State."';\n";
      echo "var Zip ='".$Zip."';\n"; 
      echo "var Country ='".$Country."';\n";
?>
  function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(0,0);
        var mapOptions = {
          zoom: 7,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.HYBRID
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        codeAddress();
      }

      function codeAddress() {
        var address = Address+','+City+','+State+','+Zip+','+Country;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
          } else {
            alert('Location not acquired for the following reason: ' + status);
          }
        });
      }
    </script>

  </head>
  <body onload ="initialize()">
    <div id="map" style="width:100%; height:100%"></div>
  </body>
</html>

我不知道它是否真的是100%相关的，但我的htaccess中也有以下缓存资源：

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 year"
# Favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

我希望这是一个简单的问题，需要添加一行代码到我的htaccess。如果是这样，我不知道我会添加什么，如果有人能在这方面帮助我，我将非常感激。

Answer 1

你不能影响你不能控制的资源的缓存头，这些地图切片是在Googles域上的，而不是你的。我不知道为什么谷歌在提供地图切片时不遵循他们自己的建议，但归根结底，除了删除地图，或者尝试不同的地图解决方案之外，你别无选择。

它只是一个缓存头，所以无论如何都不会在初始加载时使页面加载变慢。忘掉它，继续前进吧。