Google maps %100 sayfa hızı rehberi

Google maps'in Lighthouse puanı üzerindeki etkisi

Sayfanıza 'Google maps' haritası yerleştirmek için birçok neden var. Örneğin şirketinizin konumunu göstermek için harika.
Ama bir sorun var. Google maps bir Google hizmetinden beklediğiniz kadar hızlı değil. Aslında, sayfanızdaki Google maps oldukça ciddi bir pagespeed kaybı.
Mükemmel %100 sayfa hızı puanımın %14'üne mal oluyor. Bunu Google Lighthouse  istatistiklerimle yapıyor

1. First contentful paint + 0.8 sn . İlk paint neredeyse bir saniye sonra gerçekleşiyor çünkü Google maps sayfanın yüklenmesine müdahale ediyor.
2. Speed ​​index + 3.1 sn Speed ​​index harita render edilmesi ve ana thread engellemesi nedeniyle üç katına çıktı
3. Largest contentful paint + 0.8 sn. En büyük contentful paint, tıpkı first contentful paint gibi .8 saniye gecikiyor.
4. Time to interactive + 6.5sn . Google maps yoğun bir şekilde JavaScript'e dayandığından ve bunların hepsinin çalıştırılması gerektiğinden, sayfa ile etkileşime girmek 6 saniyeden fazla sürüyor.
5. Total blocking time + 320ms . Google maps ana thread'i 320ms ile engelliyor. Tam olarak istemediğimiz şey bu.
6. Kullanılmayan JavaScript'i kaldır uyarısı . Üstüne üstlük, Google Maps JavaScript'inin büyük bölümlerini kullanmadığınıza dair başka bir uyarı alıyorsunuz. Bunu bir müşteriye açıklamaya çalışın.

İlk düşünceniz haritaları iframe özelliği ile loading="lazy"  'lazy' yüklemek olabilir. Ne yazık ki, bu çoğu zaman pek mantıklı değil. loading = "lazy" ile ertelenen iFrame'ler tarayıcılar tarafından yine de erken indirilip çalıştırılıyor. Bu yüzden daha akıllıca bir şey bulmamız gerekiyor.

Adım 1 - Statik haritalar

En kolay seçenek statik bir harita kullanmaktır. Bu, etkileşimli bir harita yerine yalnızca haritanın bir görselini kullandığınız anlamına gelir. Bunun avantajı, bir görselin çok daha hızlı yüklenmesidir. Dezavantajı ise bir görsel ile etkileşime girememenizdir. Yani yakınlaştıramazsınız, kaydıramazsınız veya gezinme yapamazsınız. 

Statik bir harita ile başlayacağız. Daha sonra bu statik haritayı pagespeed'i etkilemeyen etkileşimli bir haritaya dönüştürebiliriz.

Sayfanıza statik bir harita yerleştirmenin birkaç yolu var. Bunu yapmanıza yardımcı olacak Static Map Maker,  gibi araçlar var ama bir API anahtarına ihtiyacınız var. Size statik bir harita görselini elle nasıl indireceğinizi göstereceğim.

1 - haritayı sayfanıza yerleştirin.

Haritayı sayfanıza yerleştirin. Google maps'e gidin, bir konum bulun ve paylaş > bu haritayı yerleştir'e tıklayın. Kodu kopyalayın ve sayfanıza yapıştırın. Şimdi sayfaya sağ tıklayın ve 'öğeyi incele' seçeneğini seçin. Artık tarayıcınızın 'dev console'unun element inspector'ını göreceksiniz. Şimdi iframe kodunu bulun, üzerine sağ tıklayın ve 'capture node screenshot' seçeneğini seçin.

2. Statik klasörü WebP formatına dönüştürün.

Az önce indirdiğiniz harita görseli png formatında. Sayfa hızı için gittiğimize göre, çok daha hızlı olan WebP formatını kullanacağız. Görselinizi ezgif  sitesinde çevrimiçi olarak dönüştürebilir veya cwebp aracı ile kendiniz dönüştürebilirsiniz:  cwebp -q 60 image.png -o image.webp.

Adım 2 - Statik harita görselini etkileşimli bir haritaya dönüştürün

Statik harita, sayfa yüklenirken hiçbir sayfa hızının kaybolmamasını sağlar. Sayfa yüklenirken bu henüz etkileşimli bir Google haritamız olmadığı anlamına gelir. Sayfa yüklendikten sonra bir noktada arka planda statik haritayı etkileşimli bir harita ile değiştireceğiz. Bunu sayfa render edilip boyandıktan sonra yapacağız. Bu 2 şekilde yapılabilir. Statik haritayı değiştirmenin ilk yolu, fareyi üzerine getirdiğiniz anda yapmaktır. İkincisi ise tarayıcı boşta kaldığında statik haritayı değiştirmektir.

3. Statik harita görselini özel bir 'placeholder' içine yerleştirin

Haritamızın hem mobilde hem de masaüstünde iyi görünmesini istediğimiz için, haritanın oranlarının ziyaretçinin ekran boyutundan bağımsız olarak her zaman doğru olduğu bu  CSS tekniğini  kullanacağız. Şimdi container'a, daha sonra google map için kaynak url olarak kullanacağımız bir data-src özelliği ekliyoruz.

Önce harita container'ını sayfaya yerleştirin:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Stil sayfanıza biraz stil ekleyin. Gördüğünüz gibi statik harita görselini arka plan görseli olarak kullanıyoruz ve 16:9 harita formatı için altta %76.25 padding uyguluyoruz. Nihai harita, statik haritanın tüm genişliği ve yüksekliği boyunca mutlak bir konuma sahip olacaktır.

#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. İlk etkileşim sırasında etkileşimli haritayı yükleyin

Sihir burada gerçekleşiyor. Bu küçük JavaScript parçası olmadan, harita sadece statik bir görseldir. Bu JavaScript, placeholder container'a bir eventlistener ekler (ve kaldırır) ve etkileşimli haritayı container'a enjekte etmek için 'mouseover' olayını (farenizi statik haritanın üzerine getirdiğinizde) bekler.

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. Arka plan görselini önceden yükleyin (isteğe bağlı)

Eğer Google harita viewport'ta hemen görünür durumdaysa, arka plan harita görselini 'preload' etmek genellikle akıllıca bir fikirdir. Statik harita görselini preload etmek için bu kodu kullanın  <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> ve bunu sayfanızın <head> kısmında mümkün olduğunca erken yerleştirin. Bu örnek durumda, placeholder görselini preload etmek LCP'yi neredeyse bir saniye hızlandırıyor.

Adım 2b - Statik harita görselini otomatik olarak değiştirin

Ziyaretçinin harita ile etkileşime girme olasılığı yüksekse, mouseover olayını beklememek iyi bir fikir olabilir. Tarayıcı boşta kalır kalmaz haritayı sayfaya enjekte etmeye başlayın. Süreç yukarıdakiyle aşağı yukarı aynıdır. Hatta ikisini birleştirebilirsiniz.

4b - etkileşimli haritayı otomatik olarak yükleyin

Burada 'load event'inden yararlanacağız. Load event, tarayıcınızın sayfa yüklenmeyi bitirdiği anda gönderdiği bir sinyaldir. Ardından statik haritayı etkileşimli haritaya dönüştürüyoruz!

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

Sonuç

İki teknikten birini uygularsanız, sayfanın %100 Lighthouse puanı ve %100 page speed insight puanı ile yüklendiğini ve aynı zamanda Google Maps'in tüm işlevselliğini koruduğunu fark edeceksiniz!

Google maps'i hızlandırmak için iyi şanslar. Yardıma mı ihtiyacınız var? O zaman benimle iletişime geçin!