Google Maps: Leitfaden für 100 % Page-Speed

Einfluss von Google Maps auf deine Core Web Vitals

Es gibt viele gute Gründe, Google Maps auf deiner Seite einzubinden – zum Beispiel, um den Standort deines Unternehmens zu zeigen. Die Sache hat nur einen Haken: Google Maps ist nicht so schnell, wie du es von einem Google-Dienst erwarten würdest. Auf deiner Seite ist Google Maps eine echte Page-Speed-Bremse.

Mich kostet es 14 % meines perfekten Page-Speed-Scores von 100 %. Bei meinen Google-Lighthouse-Werten sieht das so aus:

1. First Contentful Paint + 0,8 Sek. Der erste Paint erfolgt fast eine Sekunde später, weil Google Maps das Laden der Seite stört.
2. Speed Index + 3,1 Sek. Der Speed Index hat sich verdreifacht: Das Rendern der Karte blockiert den Main-Thread.
3. Largest Contentful Paint + 0,8 Sek. Der Largest Contentful Paint verzögert sich um 0,8 Sekunden – genau wie der First Contentful Paint.
4. Time to Interactive + 6,5 Sek. Weil Google Maps stark auf JavaScript setzt, dauert es über 6 Sekunden, bis du mit der Seite interagieren kannst. Lighthouse hat TTI mittlerweile durch Total Blocking Time ersetzt. Die Ursache bleibt dieselbe: Das JavaScript von Google Maps blockiert deinen Main-Thread und schadet deiner Interaction to Next Paint (INP).
5. Total Blocking Time + 320 ms. Google Maps blockiert den Main-Thread für 320 ms. Genau das wollen wir nicht.
6. Warnung „Remove unused JavaScript“. Zu allem Überfluss bekommst du noch eine Warnung, dass du große Teile des JavaScripts von Google Maps gar nicht nutzt. Versuch das mal einem Kunden zu erklären.

Dein erster Gedanke ist vielleicht, die Karte mit dem Iframe-Attribut loading="lazy" „lazy“ zu laden. In modernen Browsern funktioniert das bei 95 % weltweiter Abdeckung auch tatsächlich. Für maximale Performance reicht das aber nicht. Chrome fängt bei schnellen Verbindungen schon rund 1.250 px unterhalb des Viewports an, Lazy-Iframes zu laden – bei langsamen Verbindungen sogar 2.500 px. Liegt deine Karte auch nur in der Nähe des sichtbaren Bereichs, lädt sie trotzdem beim initialen Seiten-Rendering und konkurriert mit deinen kritischen Ressourcen. Wenn du wirklich null Impact willst, brauchst du eine Fassade: Lade rein gar nichts, bis der Nutzer tatsächlich mit der Karte interagiert.

Schritt 1: Statische Karten

Die einfachste Option ist eine statische Karte. Statt einer interaktiven Karte nutzt du einfach nur ein Bild davon. Der Vorteil: Ein Bild lädt viel schneller. Der Nachteil: Mit einem Bild kannst du nicht interagieren. Du kannst also nicht hineinzoomen, scrollen oder navigieren.

Wir starten mit einer statischen Karte. Später wandeln wir diese statische Karte in eine interaktive Karte um, die deinen Page-Speed nicht ausbremst.

Es gibt mehrere Wege, eine statische Karte auf deiner Seite einzubinden. Tools wie der Static Map Maker helfen dir dabei, verlangen aber einen API-Key. Ich zeige dir, wie du ein statisches Kartenbild von Hand herunterlädst.

1. Platziere die Karte auf deiner Seite

Platziere die Karte auf deiner Seite. Geh auf Google Maps, suche einen Ort und klicke auf Teilen > Karte einbetten. Kopiere den Code und füge ihn auf deiner Seite ein. Klicke jetzt mit der rechten Maustaste auf die Seite und wähle „Element untersuchen“. Du siehst nun den Element-Inspector in der Entwicklerkonsole deines Browsers. Suche dort den Iframe-Code, klicke mit rechts darauf und wähle „Capture node screenshot“.

2. Statisches Bild in das WebP-Format konvertieren

Das gerade heruntergeladene Kartenbild liegt im PNG-Format vor. Weil es uns um Page-Speed geht, nutzen wir das viel schnellere WebP-Format. Du kannst dein Bild online bei ezgif umwandeln oder selbst mit dem Tool cwebp: cwebp -q 60 image.png -o image.webp.

Schritt 2: Statisches Kartenbild in eine interaktive Karte umwandeln

Die statische Karte sorgt dafür, dass beim Laden der Seite kein Page-Speed verloren geht. Beim Seitenaufruf bedeutet das: Wir haben noch keine interaktive Google-Karte. Nach dem Laden ersetzen wir die statische Karte im Hintergrund durch eine interaktive Karte. Und zwar erst, nachdem die Seite gerendert und gezeichnet ist. Das geht auf 2 Arten: Die erste Möglichkeit ist, die statische Karte zu ersetzen, sobald du mit der Maus darüberfährst. Die zweite: Du ersetzt die statische Karte, sobald der Browser idle ist.

3. Statisches Kartenbild in einen Platzhalter einfügen

Unsere Karte soll auf Mobilgeräten und auf dem Desktop gut aussehen. Wir nutzen deshalb diesen CSS-Trick: Die Proportionen der Karte bleiben unabhängig von der Bildschirmgröße des Besuchers immer erhalten. Das reserviert den nötigen Platz und verhindert einen Layout-Shift (CLS), wenn die interaktive Karte lädt. Dem Container fügen wir jetzt ein data-src-Attribut hinzu, das wir später als Quell-URL für die Google-Karte verwenden.

Platziere zuerst den Karten-Container auf der Seite:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Füge nun etwas Styling in dein Stylesheet ein. Wie du siehst, nutzen wir das statische Kartenbild als Hintergrundbild und setzen oben ein Padding von 76,25 % für das richtige Seitenverhältnis. Die spätere Karte wird absolut über die gesamte Breite und Höhe der statischen Karte positioniert.

#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. Interaktive Karte bei der ersten Interaktion laden

Hier passiert das Entscheidende: Ohne dieses kleine bisschen JavaScript ist die Karte nur ein statisches Bild. Das Skript bindet einen Event-Listener an den Platzhalter-Container (und entfernt ihn wieder). Es wartet auf das „mouseover“-Event (wenn du mit der Maus über die statische Karte fährst) und bettet dann die interaktive Karte in den Container ein.

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

5. Hintergrundbild per Preload laden (optional)

Ist die Google-Karte sofort im Viewport sichtbar, ist es oft eine gute Idee, das Hintergrundbild der Karte per Preload vorab zu laden. Nutze diesen Code, um das statische Kartenbild vorab zu laden: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> und binde ihn so früh wie möglich im <head> deiner Seite ein. In diesem Beispielfall beschleunigt der Preload des Platzhalterbilds den LCP um fast eine Sekunde.

Schritt 2b: Statisches Kartenbild automatisch ersetzen

Ist die Wahrscheinlichkeit hoch, dass der Besucher mit der Karte interagiert, solltest du besser nicht auf das Mouseover-Event warten. Binde die Karte stattdessen ein, sobald der Browser idle ist. Der Ablauf ist im Grunde derselbe wie oben. Du kannst sogar beides kombinieren.

4b. Interaktive Karte automatisch laden

Hier nutzen wir das „load“-Event. Das Load-Event ist ein Signal, das dein Browser sendet, sobald die Seite fertig geladen ist. Genau dann wandeln wir die statische Karte in die interaktive Karte um! Weitere Techniken dieser Art findest du unter 16 Methoden, um JavaScript verzögert zu laden.

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

Das Ergebnis

Wenn du eine dieser Techniken anwendest, wirst du feststellen: Die Seite lädt mit einem Lighthouse-Score von 100 % und einem PageSpeed-Insights-Score von 100 % – und behält trotzdem alle Funktionen von Google Maps!

Laut dem Web Almanac 2025 fehlt bei 91 % der Seiten mit Iframes noch immer jedes Loading-Attribut. Die überwiegende Mehrheit aller Google-Maps-Embeds lädt also völlig ohne jede Optimierung. Mit dem Facade-Ansatz bist du weit voraus.

Richte Real User Monitoring ein, um zu prüfen, ob deine Änderungen die echte Nutzererfahrung tatsächlich verbessern. Lab-Scores sind nützlich fürs Debugging – aber Google nutzt Field Data von echten Besuchern fürs Ranking.

Viel Erfolg dabei, Google Maps schneller zu machen. Brauchst du Hilfe? Dann kontaktiere mich!