Google Maps 100% Page Speed Anleitung

Auswirkungen von Google Maps auf Ihre Core Web Vitals

Es gibt viele Gründe, Google Maps auf Ihrer Seite einzubetten. Es eignet sich beispielsweise hervorragend, um den Standort Ihres Unternehmens anzuzeigen. Aber es gibt einen Haken. Google Maps ist nicht so schnell, wie man es von einem Google-Dienst erwarten würde. Tatsächlich ist Google Maps auf Ihrer Seite ein ziemlicher Page Speed Fresser.

Es kostet 14% meines perfekten 100% Page Speed Scores. Dies geschieht mit folgenden Google Lighthouse Statistiken:

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 durch das Rendern der Karte und das Blockieren des Main Threads verdreifacht.
3. Largest Contentful Paint + 0,8 Sek. Der Largest Contentful Paint wird um 0,8 Sekunden verzögert, genau wie der First Contentful Paint.
4. Time to Interactive + 6,5 Sek. Da Google Maps stark auf JavaScript angewiesen ist, dauert es mehr als 6 Sekunden, bis mit der Seite interagiert werden kann. Lighthouse hat TTI inzwischen durch Total Blocking Time ersetzt, aber die Ursache ist dieselbe: Google Maps JavaScript blockiert Ihren Main Thread und beeinträchtigt Ihren Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. Google Maps blockiert den Main Thread mit 320ms. Das ist genau das, was wir nicht wollen.
6. Warnung: Ungenutztes JavaScript entfernen. Obendrein erhalten Sie eine weitere Warnung, dass Sie große Teile des Google Maps JavaScript nicht verwenden. Versuchen Sie mal, das einem Kunden zu erklären.

Ihr erster Gedanke könnte sein, die Karten 'lazy' mit dem iframe-Attribut loading="lazy" zu laden. Das funktioniert tatsächlich in modernen Browsern mit 95% globaler Abdeckung. Aber für maximale Performance reicht es nicht aus. Chrome beginnt Lazy-iframes bei schnellen Verbindungen etwa 1.250px unterhalb des Viewports zu laden und bei langsamen Verbindungen 2.500px. Wenn Ihre Karte irgendwo in der Nähe des sichtbaren Bereichs ist, wird sie trotzdem während des initialen Seitenrenderings geladen und konkurriert mit Ihren kritischen Ressourcen. Für echten Null-Impact benötigen Sie ein Facade: Laden Sie absolut nichts, bis der Benutzer tatsächlich mit der Karte interagiert.

Schritt 1: Statische Karten

Die einfachste Option ist die Verwendung einer statischen Karte. Das bedeutet, dass Sie anstelle einer interaktiven Karte nur ein Bild der Karte verwenden. Der Vorteil ist, dass ein Bild viel schneller lädt. Der Nachteil ist, dass Sie nicht mit einem Bild interagieren können. Sie können also nicht zoomen, scrollen oder navigieren.

Wir beginnen mit einer statischen Karte. Später können wir diese statische Karte in eine interaktive Karte umwandeln, die die Page Speed nicht beeinträchtigt.

Es gibt mehrere Möglichkeiten, eine statische Karte auf Ihrer Seite zu platzieren. Es gibt Tools, die Ihnen dabei helfen, wie Static Map Maker, aber Sie benötigen einen API-Schlüssel. Ich zeige Ihnen, wie Sie ein statisches Kartenbild manuell herunterladen können.

1. Platzieren Sie die Karte auf Ihrer Seite

Platzieren Sie die Karte auf Ihrer Seite. Gehen Sie zu Google Maps, suchen Sie einen Standort und klicken Sie auf Teilen > Karte einbetten. Kopieren Sie den Code und fügen Sie ihn auf Ihrer Seite ein. Klicken Sie nun mit der rechten Maustaste auf die Seite und wählen Sie 'Element untersuchen'. Sie sehen nun den Element-Inspektor der 'Dev Console' Ihres Browsers. Suchen Sie den iframe-Code, klicken Sie mit der rechten Maustaste darauf und wählen Sie 'Knoten-Screenshot aufnehmen'.

2. Konvertieren Sie das statische Bild ins WebP-Format

Das Kartenbild, das Sie gerade heruntergeladen haben, liegt im PNG-Format vor. Da wir auf Page Speed setzen, verwenden wir das wesentlich schnellere WebP-Format. Sie können Ihr Bild online bei ezgif konvertieren oder es selbst mit dem Tool cwebp konvertieren: cwebp -q 60 image.png -o image.webp.

Schritt 2: Konvertieren Sie das statische Kartenbild in eine interaktive Karte

Die statische Karte stellt sicher, dass beim Laden der Seite keine Page Speed verloren geht. Beim Laden der Seite bedeutet dies, dass wir noch keine interaktive Google-Karte haben. Irgendwann nach dem Seitenladen werden wir die statische Karte im Hintergrund durch eine interaktive Karte ersetzen. Wir tun dies, nachdem die Seite gerendert und gezeichnet wurde. Dies kann auf 2 Arten geschehen. Die erste Möglichkeit ist, die statische Karte zu ersetzen, sobald Sie mit der Maus darüber fahren. Die zweite ist, die statische Karte zu ersetzen, sobald der Browser im Leerlauf ist.

3. Platzieren Sie das statische Kartenbild in einem Platzhalter

Da unsere Karte sowohl auf Mobilgeräten als auch auf dem Desktop gut aussehen soll, verwenden wir diesen CSS-Trick, bei dem die Proportionen der Karte unabhängig von der Bildschirmgröße des Besuchers immer korrekt sind. Dies reserviert Platz für die Karte und verhindert Layout Shift (CLS) beim Laden der interaktiven Karte. Wir fügen dem Container nun ein data-src-Attribut hinzu, das wir später als Quell-URL für die Google-Karte verwenden.

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

Fügen Sie etwas Styling in Ihrem Stylesheet hinzu. Wie Sie sehen, verwenden wir das statische Kartenbild als Hintergrundbild und wenden oben ein 76,25% Padding für das korrekte Seitenverhältnis an. Die endgültige Karte wird eine absolute Position über die gesamte Breite und Höhe der statischen Karte haben.

#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. Laden Sie die interaktive Karte bei der ersten Interaktion

Hier passiert die Magie. Ohne dieses kleine Stück JavaScript ist die Karte nur ein statisches Bild. Dieses JavaScript fügt dem Platzhalter-Container einen Event Listener hinzu (und entfernt ihn) und wartet auf das 'mouseover'-Event (wenn Sie mit der Maus über die statische Karte fahren), um die interaktive Karte in den Container einzufügen.

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 vorladen (optional)

Wenn die Google-Karte sofort im Viewport sichtbar ist, ist es oft eine kluge Idee, das Kartenhintergrundbild vorzuladen. Verwenden Sie diesen Code, um das statische Kartenbild vorzuladen: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> und platzieren Sie dies so früh wie möglich im <head> Ihrer Seite. In diesem Beispiel beschleunigt das Vorladen des Platzhalterbildes den LCP um fast eine Sekunde.

Schritt 2b: Ersetzen Sie das statische Kartenbild automatisch

Wenn es eine hohe Wahrscheinlichkeit gibt, dass der Besucher mit der Karte interagiert, ist es möglicherweise eine gute Idee, nicht auf das Mouseover-Event zu warten. Sobald der Browser im Leerlauf ist, beginnen Sie damit, die Karte in die Seite einzufügen. Der Prozess ist mehr oder weniger derselbe wie oben. Sie können sogar beide kombinieren.

4b. Laden Sie die interaktive Karte automatisch

Wir verwenden hier das 'Load Event'. Das Load Event ist ein Signal, das Ihr Browser sendet, sobald die Seite fertig geladen ist. Dann konvertieren wir die statische Karte in die interaktive Karte! Weitere Techniken wie diese finden Sie unter 16 Methoden zum Verzögern von JavaScript.

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 Sie eine dieser Techniken anwenden, werden Sie feststellen, dass die Seite mit einem 100% Lighthouse Score und einem 100% PageSpeed Insights Score geladen wird und dabei die gesamte Funktionalität von Google Maps beibehalten wird!

Laut dem 2025 Web Almanac fehlt bei 91% der Seiten mit iframes noch immer ein Loading-Attribut. Das bedeutet, dass die überwiegende Mehrheit der Google Maps Einbettungen ohne jegliche Optimierung geladen wird. Der Facade-Ansatz bringt Sie weit nach vorne.

Um zu überprüfen, ob Ihre Änderungen die tatsächliche user experience verbessern, richten Sie Real User Monitoring ein. Lab-Scores sind nützlich zum Debuggen, aber Felddaten von echten Besuchern sind das, was Google für das Ranking verwendet.

Viel Erfolg beim Beschleunigen von Google Maps. Brauchen Sie Hilfe? Dann kontaktieren Sie mich!