Przewodnik po Google maps i 100% page speed

Wpływ map Google na wynik Lighthouse

Istnieje wiele powodów, aby osadzić mapę 'Google maps' na swojej stronie. Jest to świetne na przykład do pokazania lokalizacji firmy.
Ale jest haczyk. Mapy Google nie są tak szybkie, jak można by oczekiwać od usługi Google. W rzeczywistości Mapy Google na Twojej stronie to spory drenaż pagespeed.
Kosztuje to 14% mojego idealnego wyniku 100% page speed. Robi to z moimi statystykami Google lighthouse  

1. First contentful paint + 0.8 sec . Pierwsze malowanie następuje prawie sekundę później, ponieważ Mapy Google zakłócają ładowanie strony.
2. Speed ​​index + 3.1 sec Speed ​​index potroił się z powodu renderowania mapy i blokowania main thread
3. Largest contentful paint + 0.8 sec. Największe malowanie treści jest opóźnione o 0,8 sekundy, tak jak pierwsze malowanie treści.
4. Time to interactive + 6.5sec . Ponieważ Mapy Google w dużej mierze polegają na JavaScript, który musi zostać wykonany, interakcja ze stroną zajmuje ponad 6 sekund.
5. Total blocking time + 320ms . Mapy Google blokują main thread na 320ms. To jest dokładnie to, czego nie chcemy.
6. Ostrzeżenie Usuń nieużywany kod JavaScript . Na domiar złego otrzymujesz kolejne ostrzeżenie, że nie używasz dużych części JavaScript Map Google. Spróbuj wyjaśnić to klientowi.

Twoją pierwszą myślą może być załadowanie map w trybie 'lazy' za pomocą atrybutu iframe   loading="lazy" . Niestety, często ma to niewielki sens. Ramki iFrame odroczone przez loading = "lazy" są nadal pobierane i wykonywane wcześnie przez przeglądarki. Musimy więc wymyślić coś mądrzejszego.

Krok 1 - Mapy statyczne

Najprostszą opcją jest użycie mapy statycznej. Oznacza to, że zamiast interaktywnej mapy używasz tylko obrazu mapy. Zaletą tego jest to, że obraz ładuje się znacznie szybciej. Wadą jest to, że nie można wchodzić w interakcje z obrazem. Nie można więc powiększać, przewijać ani nawigować. 

Zaczniemy od mapy statycznej. Później możemy przekonwertować tę mapę statyczną na mapę interaktywną, która nie zakłóca pagespeed.

Istnieje kilka sposobów na umieszczenie map statycznych na stronie. Istnieją narzędzia, które pomogą Ci to zrobić, takie jak Static Map Maker,  ale potrzebujesz klucza API. Pokażę Ci, jak ręcznie pobrać obraz mapy statycznej.

1 - umieść mapy na swojej stronie.

Umieść mapę na swojej stronie. Przejdź do Map Google, znajdź lokalizację i kliknij udostępnij > umieść tę mapę. Skopiuj kod i wklej go na swojej stronie. Teraz kliknij prawym przyciskiem myszy na stronie i wybierz 'zbadaj element'. Zobaczysz teraz inspektora elementów w 'konsoli deweloperskiej' przeglądarki. Teraz znajdź kod iframe, kliknij go prawym przyciskiem myszy i wybierz 'capture node screenshot'.

2. Przekonwertuj folder statyczny na format WebP.

Obraz mapy, który właśnie pobrałeś, jest w formacie png. Ponieważ zależy nam na page speed, użyjemy znacznie szybszego formatu WebP. Możesz przekonwertować obraz online na stronie ezgif  lub możesz przekonwertować go samodzielnie za pomocą narzędzia cwebp:  cwebp -q 60 image.png -o image.webp.

Krok 2 - Przekonwertuj statyczny obraz map na mapę interaktywną

Mapa statyczna zapewnia, że podczas ładowania strony nie traci się page speed. Przy ładowaniu strony oznacza to, że nie mamy jeszcze interaktywnej mapy Google. W pewnym momencie po załadowaniu strony zastąpimy statyczne mapy w tle interaktywną mapą. Zrobimy to po wyrenderowaniu i namalowaniu strony. Można to zrobić na 2 sposoby. Pierwszym sposobem jest zastąpienie mapy statycznej, gdy tylko najedziesz na nią myszką. Drugim jest zastąpienie map statycznych, gdy przeglądarka będzie bezczynna.

3. Umieść statyczny obraz map w specjalnym 'placeholderze'

Ponieważ chcemy, aby nasza mapa wyglądała dobrze zarówno na urządzeniach mobilnych, jak i komputerach stacjonarnych, użyjemy tej  sztuczki CSS  gdzie proporcje mapy są zawsze poprawne, niezależnie od rozmiaru ekranu odwiedzającego. Teraz dodajemy atrybut data-src do kontenera, którego później użyjemy jako adresu URL źródła mapy Google.

Najpierw umieść kontener map na stronie:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Dodaj trochę stylu w swoim arkuszu stylów. Jak widać, używamy statycznego obrazu mapy jako obrazu tła i stosujemy 76,25% dopełnienia u dołu dla formatu mapy 16: 9. Ostateczna mapa będzie miała pozycję absolutną na całej szerokości i wysokości mapy statycznej.

#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. Załaduj interaktywną mapę podczas pierwszej interakcji

To tutaj dzieje się magia. Bez tego małego kawałka JavaScript mapa jest tylko statycznym obrazem. Ten JavaScript dodaje (i usuwa) nasłuchiwacz zdarzeń do kontenera zastępczego i czeka na zdarzenie 'mouseover' (po najechaniu myszą na mapę statyczną), aby wstrzyknąć interaktywną mapę do kontenera.

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. Wstępne ładowanie obrazu tła (opcjonalne)

Jeśli mapa Google jest natychmiast widoczna w rzutni, często dobrym pomysłem jest 'wstępne załadowanie' obrazu mapy w tle. Użyj tego kodu, aby wstępnie załadować statyczny obraz map  <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> i umieść to jak najwcześniej w <head>swojej strony. W tym przykładzie wstępne ładowanie obrazu zastępczego przyspiesza LCP o prawie sekundę.

Krok 2b - Automatycznie zastąp statyczny obraz map

Gdy istnieje duża szansa, że odwiedzający wejdzie w interakcję z mapą, dobrym pomysłem może być nie czekanie na zdarzenie mouseover. Gdy tylko przeglądarka będzie bezczynna, zacznij wstrzykiwać Mapę na stronę. Proces jest mniej więcej taki sam jak powyżej. Możesz nawet połączyć oba.

4b - załaduj mapę interaktywną automatycznie

Użyjemy tutaj 'load event'. Load event to sygnał wysyłany przez przeglądarkę po zakończeniu ładowania strony. Następnie konwertujemy mapy statyczne na mapę interaktywną!

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

Wynik

Jeśli zastosujesz 1 z obu technik, zauważysz, że strona ładuje się z wynikiem lighthouse 100% i wynikiem page speed insight 100%, zachowując jednocześnie całą funkcjonalność Map Google!

Powodzenia w przyspieszaniu map Google. Potrzebujesz pomocy? Wtedy skontaktuj się ze mną!