![]() ![]() ![]() 4b - load the interactive map automatically The process is more or less the same as above. As soon as the browser is idle start injecting the Map into the page. When there is a high chance that the visitor will interact with the map it might be a good idea not to wait for the mouseover event. Step 2b - Replace the static maps image automatically In this example case, preloading the placeholder image speeds up the LCP by almost a second. Use this code to preload the static maps image and place this as early as possible in the of your page. If the Google map is immediately visible in the viewport, it is often a smart idea to 'preload' the background map image. Map.addEventListener ('mouseover', maplistner) ĥ. Map.removeEventListener ("mouseover", maplistner) Var frame = document.createElement ('iframe') įrame.src = this.getAttribute ('data-src') var map = document.getElementById ('mymap') This JavaScript adds (and removes) an eventlistner to the placeholder container and waits for the 'mouseover' event (when you hover your mouse over the static map) to inject the interactive map in the container. Without this little piece of JavaScript, the map is just a static image. Load the interactive map during the first interaction The final map will have an absolute position over the entire width and height of the static map.Ĥ. As you can see we use the static map image as a background image and apply a 76.25% padding at the bottom for a 16: 9 map format. We now add a data-src attribute to the container that we will alter use as the source url for the google map.įirst place the maps container on the page:Īdd some styling in your stylesheet. Since we want our map to look good on both mobile and desktop, we will use this CSS trick where the proportions of the map are always correct regardless of the visitors screen size. Place the static maps image in a special 'placeholder' The second is to replace the static maps once the browser is idle. The first way to replace the static map as soon as you hover the mouse over it. ![]() We will do this after the page has been rendered and painted. At some point after pageload we will replace the static mas in the background with an interactive map. At page load this means we do not have an interactive Google map yet. The static map ensures that no page speed is lost during page load. Step 2 - Convert the static map image to a interactive map You can convert your image online at ezgif or you can converert it yourself with the tool cwebp: cwebp -q 60 image.png -o image.webp. Because we are going for page speed, we will use the much faster WebP format. The map image you just downloaded is in the png format. Convert the static folder to WebP format. Now find the iframe code, right click on it and select 'capture node screenshot'.Ģ. You will now see the element inspector of the 'dev console' of your browser. Now right click on the page and select 'inspect element'. Go to Google maps, find a location and click share > embed this map. I will show you how to download a static map image by hand. The are tools that will hep you do that like Static Map Maker, but you need an API key. There are several ways to place a static maps on your page. Later we can convert this static map into an interactive map that does not interfere with the pagespeed. So you cannot zoom in, scroll or navigate. The disadvantage is that you cannot interact with an image. The advantage of this is that an image loads much faster. This means that instead of an interactive map, you use only an image of the map. The easiest option is to use a static map. So we need to come up with something smarter. iFrames deferred via loading = "lazy" are still downloaded and executed early by browsers. Unfortunately, that often makes little sense. Your first thought might be to load the maps 'lazy' with the iframe attribute loading="lazy" . To top it off, you get another warning that you are not using large parts of the Google Maps javascript. Google maps blocks the main thread with 320ms. Because Google maps relies heavily on javascript that all has to be executed, it takes more than 6 seconds to interact with the page. 8 seconds, just like the first contentful paint. The largest contentful paint is delayed by.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |