Faster Google Maps load times

Google Maps is notoriously slow. The moment you add a Google Map to your page you can cut your Lighthouse performance score in half.

There are several ways you can fight with it:

  • Add async/defer to your Google script - certainly helps, but no much. This technique is very common so I won't be talking about it.
  • Loading the map only when a user scrolls to it. This works well the map is located below the fold. Code.
  • Using a static google maps image. There are cases when you might not need an interactive map and an image is all you need. The API for it is surprisingly versatile. Code.
  • Skipping fonts loading. Whenever you include Google maps script it automatically fetches a Roboto font. The map works perfectly fine without it, you can shave off a decent amount of time if you know how to block the font. Code.
  • Using a static preview of the map and then loading a full version on click. Perhaps the best technique when a map is located above the fold. Code.

By using these tricks you can achieve much better page performance (and SEO!) and save money on the costly Google Maps API.

Loading map on scroll (Code)

The idea here is to skip loading script until a user scrolls to it. This can be achieved using the IntersectionObserver API.
Below is an example implementation:

Using Maps Static API (Code)

Instead of loading the heavy script, at times, we can get away with loading only an image of the map. Google provides a way to add markets to it as well.
One of the unpleasant gotchas is that image resolution cannot go above 640px (1280px for x2 scale). Which means that an image is blurry.
Another interesting observation is that while this API is fast, you can make the image load 2x as fast by placing it behind a CDN. You can save some money this way as well.
You can read more about this API here.
Below is an example implementation:

Skipping font load (Code)

Whenever you include the Google maps script it automatically loads Roboto fonts to load. IMHO maps looks just fine without them and the extra HTTP requests are not necessary when every byte and millisecond counts.
Below is an example implementation:

Using an image placeholder and loading the map on click (Code)

If you want to provide users with a dynamic map but also care about page performance you can go with a hybrid approach and show a static image with a button to load the full version
Below is an example implementation:

These techniques can be combined any way you want to get even better results. For example, you can use observer API and use a static image as a placeholder.
You can read the full code at https://github.com/TheRusskiy/google-maps-optimizations.
Thank you for reading!

Popular posts from this blog

HTTP server in Ruby 3 - Fibers & Ractors

Image
This is part #2. Head over to part #1 to learn about HTTP in Ruby. Motivation Historically Ruby's been lacking in the concurrency department. Ruby has "native" threads (prior to 1.9 there were only "green"), which means there can be multiple threads controlled by an OS, but only 1 thread can be executed at a time, this is managed via Global Interpreter Lock (GIL). However, native calls and I/O calls can be executed in parallel. During an I/O call, a thread gives up control and waits for a signal that the I/O has finished. This means I/O heavy applications can benefit from multiple threads. In this article we are going to explore different concurrency modes for our HTTP server: Single-threaded Multi-threaded Fibers Ractors Single-threaded Let's start simple and see how a single threaded HTTP server could look like ( full code ): def start socket = TCPServer.new(HOST, PORT) sock...
Read more

Next.js: restrict pages to authenticated users

Image
Many websites have pages that need to be restricted to authenticated users, for example profile pages or dashboards. Next.js web framework comes with a lot of functionality built-in JS compilation, rendering code on server and caching. When it comes to most other aspecs, it's up to a programmer to build, including such needed functionality as restricting access to some pages only to authenticated users. In this article we are going to build just that: a function that augments a page object, that could be used like that: Here's the implementation in TypeScript: In order to make it work on server we are going to need one more utility function fetchWithCookies . When making HTTP request from inside a Web Browser, the browser automatically sends cookies with each requests and then stores new cookies if a response comes in with set-cookie header. On server-side we need to build this feature ourselves, because neither Next.js nor NodeJS make any a...
Read more

Migration locks for TypeORM

Image
Schema migrations is a must-have functionality for any DB framework. TypeORM provides decent utilities for dealing with migrations, however having a decade of experience in Ruby on Rails I got really spoiled and take some features for granted. One of these features is locking a database while a migration going on so 2 processes running concurrently don't step on each other's toes. This is also important when you run migrations in Kubernetes before launching your app. I was really surprised to find out that this basic feature is not supported , so decided to implement it on my own. Implementation // typeormMigrationUtils.ts import { Connection, createConnection } from 'typeorm' import config from '../ormconfig' import CRC32 from 'crc-32' const MIGRATOR_SALT = 2053462845 async function withAdvisoryLock( connection: Connection, callback: () => Promise<void> ): Promise<boolean> { // generate a unique lock...
Read more