Google Maps 100% PageSpeed Guide

Einfluss von Google Maps auf den Lighthouse-Score

Es gibt viele Gründe, eine 'Google Maps'-Karte auf Ihrer Seite einzubetten. Es ist großartig, um zum Beispiel den Standort Ihres Unternehmens zu zeigen.
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 PageSpeed-Fresser.
Es kostet 14% meines perfekten 100% PageSpeed-Scores. Das macht es mit meinen Google Lighthouse  -Statistiken

1. First Contentful Paint + 0.8 Sek. . Der First Paint läuft fast eine Sekunde später, weil Google Maps das Laden der Seite stört.
2. Speed ​​Index + 3.1 Sek. Speed ​​Index verdreifacht durch Karten-Rendering und Blockierung des Main Threads
3. Largest Contentful Paint + 0.8 Sek. Der Largest Contentful Paint wird um .8 Sekunden verzögert, genau wie der First Contentful Paint.
4. Time to Interactive + 6.5 Sek. . Da Google Maps stark auf JavaScript setzt, das alles ausgeführt werden muss, dauert es mehr als 6 Sekunden, bis eine Interaktion mit der Seite möglich ist.
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' . Um das Ganze abzurunden, erhalten Sie noch eine Warnung, dass Sie große Teile des Google Maps JavaScripts nicht verwenden. Versuchen Sie das mal einem Kunden zu erklären.

Ihr erster Gedanke ist vielleicht, die Karten mit dem iFrame-Attribut   loading="lazy"  'lazy' zu laden. Leider hat das oft wenig Sinn. iFrames, die über loading = "lazy" verzögert werden, werden trotzdem von Browsern heruntergeladen und ausgeführt. Also müssen wir uns etwas Schlaueres einfallen lassen.

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 dabei 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 PageSpeed nicht behindert.

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 manuell ein Bild einer statischen Karte herunterladen.

1 - Platzieren Sie die Karte auf Ihrer Seite.

Platzieren Sie die Karte auf Ihrer Seite. Gehen Sie zu Google Maps, suchen Sie einen Ort 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 nun den iFrame-Code, klicken Sie mit der rechten Maustaste darauf und wählen Sie 'Capture Scale Screenshot'.

2. Das statische Bild in das WebP-Format konvertieren.

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

Schritt 2 - Die statische Karte in eine interaktive Karte umwandeln

Die statische Karte sorgt dafür, dass während des Ladens der Seite kein PageSpeed verloren geht. Beim Laden der Seite bedeutet dies, dass wir noch keine interaktive Google-Karte haben. Zu einem bestimmten Zeitpunkt nach dem Laden der Seite ersetzen wir die statische Karte im Hintergrund durch eine interaktive Karte. Dies tun wir, nachdem die Seite gerendert und gemalt 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 Bild der statischen Karte in einem speziellen 'Platzhalter'

Da wir möchten, dass unsere Karte sowohl auf Mobilgeräten als auch auf Desktops gut aussieht, verwenden wir diesen  CSS-Trick  , bei dem die Proportionen der Karte unabhängig von der Bildschirmgröße des Besuchers immer korrekt sind. Wir fügen nun dem Container ein data-src-Attribut hinzu, das wir später als Quell-URL für die Google Map verwenden.

Platzieren Sie zuerst 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 Bild der statischen Karte als Hintergrundbild und wenden unten ein Padding von 76.25% für ein 16:9-Kartenformat an. Die endgültige Karte erhält eine absolute Position über die gesamte Breite und Höhe der statischen Karte.

#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 während der ersten Interaktion

Hier geschieht 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 Ihrer Maus über die statische Karte fahren), um die interaktive Karte in den Container zu injizieren.

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

5. Pre-load des Hintergrundbildes (optional)

Wenn die Google-Karte direkt im Viewport sichtbar ist, ist es oft eine schlaue Idee, das Hintergrundbild der Karte 'vorzuladen'. Verwenden Sie diesen Code, um das Bild der statischen Karte 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 Beispielfall beschleunigt das Vorladen des Platzhalterbildes den LCP um fast eine Sekunde.

Schritt 2b - Das Bild der statischen Karte automatisch ersetzen

Wenn die Chance groß ist, dass der Besucher mit der Karte interagiert, kann es eine gute Idee sein, nicht auf das Mouseover-Event zu warten. Sobald der Browser im Leerlauf ist, beginnen Sie mit dem Injizieren der Karte in die Seite. Der Prozess ist mehr oder weniger derselbe wie oben. Sie können sogar beides kombinieren.

4b - Laden Sie die interaktive Karte automatisch

Wir verwenden hier das 'Load Event'. Das Load Event ist ein Signal, das Ihr Browser aussendet, sobald die Seite fertig geladen ist. Dann konvertieren wir die statischen Karten in die interaktive Karte!

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

Das Ergebnis

Wenn Sie eine der beiden Techniken anwenden, werden Sie bemerken, dass die Seite mit einem 100% Lighthouse-Score und einem 100% PageSpeed Insight-Score lädt, während alle Funktionen von Google Maps erhalten bleiben!

Viel Erfolg dabei, Google Maps schneller zu machen. Brauchen Sie Hilfe? Dann kontaktieren Sie mich!