Who has not inserted a map on their website or that of a client at some time in their life? In this article we will see why it is important to choose free software as an alternative, when inserting maps in WordPress.
This article is inspired by the talk I gave in March 2023 at WordCamp Chiclana, which you can see below:
Problem statement
We have all added a map on our websites or those of our clients. The typical location map of a business or the “Where we are” map. And we always turn to Google Maps to insert such a map.
Remember that time when you saw a lot of maps with the warning ” For development purposes only” and the background half hidden by a gray veil?
This was caused by a sudden change in the Google Maps API, in which its use was no longer so “free”, and it was necessary to register in said API and, above all, introduce our card, in case one day we had enough traffic to start paying for a small price the use of the famous map platform. However, in this blog we explained a little trick to insert a map without using the Google Maps API.
However, I was clear that Google had to make a dent in the performance of our website, given its fondness for taking advantage of each and every one of its services to obtain information from each user’s click.
This involves several problems:
- If this map makes too many external requests or connections, our website can show poor performance, with the consequences that this can have for SEO.
- On the other hand, through this map you can track user behavior on the web. This, especially in Europe, poses a privacy issue. Nor is it good that the map does not work if the user does not accept the cookies required for its proper functioning.
Options to insert a map in a web
Thus, a priori, we could consider several solutions:
- We can not add the map to the web: I don’t think we should go to these extremes either. It is true that we end up with all possible problems, except one, how does the user find our business?
- We can insert a Google map into an iframe. This is the solution we want to avoid, and the one that poses these problems. Let’s keep looking.
- We can
take a screenshot of the map image. As you can see, I find it a crappy solution and I don’t like it at all. In addition, it raises certain accessibility issues. That is why I have crossed it out. - We can use a map plugin. This already seems more civilized to me. What could this plugin be? Let’s look at some examples.
- Map Block for Google Maps: It is a very interesting plugin for a Google map. It facilitates the connection with the API and works with blocks, which also facilitates its use on the web.
- WP Open Street Map: It is an interesting plugin, since it uses a cartographic base different from Google’s, in this case Open Street Map. It is open source.
- Leaflet Map: This is another open source technology based on a Javascript library for cartography.
- Mapster WP Maps: Here we are talking about big words. It is a very interesting commercial plugin, which makes use of Mapbox, a Javascript library for cartography that has great power.
Why can a map make a website go slow?
Let’s look at what is called a waterfall plot. In this case, we have created it with the WebPageTest performance analysis tool, which allows us to test the speed and performance of any website:
As you can see, this graph shows all the requests made by a website since we enter the domain name, or click from a search result in Google, until the page is completely loaded.
If you look closely at it, from request 17 to the last, which is 227, the word Google appears. Therefore, more than 200 requests to Google are being produced throughout 23 seconds of loading. It is true that you can interact with the web before those 23 seconds are over, but I would have already left.
## Let’s get out of doubt with an experiment
From seeing this, I decided to do an experiment. For this I created 6 websites with identical WordPress. These websites had the same characteristics:
- A classic theme (Twenty Twelve)
- 10 entries that were displayed complete on the home page. Yes, there are websites that may need to display several maps on the same page, and so I wanted to see the cumulative effect they could produce on the performance of it.
- To all the websites, except for one that I used as a control, I inserted 10 maps, one in each entry, with different locations so that they would not be searched.
- I did 5 speed tests with WebPageTest for each of the websites in order to obtain a representative sample and an average measurement. I calculated this average with the median and not with the mean, in order to eliminate the bias effect of some anomalous measures.
From the tests I extracted the following parameters, which I considered the most important to answer my questions:
- FCP (First Contentful Paint): This is the time that elapses until the first pixel that is painted on the screen since the web was called is painted.
- DC Time (Document Complete Time): This is the time that elapses until everything that is necessary for us to interact with the elements of the web while continuing to load things is loaded.
- Time: It is the total loading time of the web. When the browser wheel stops, indicating that there is no more to load.
- Requests: These are all the external requests that are made from the web to be able to show all the content.
- Total bytes: This is the weight of the files downloaded in our browser to show the complete web in kbytes.
All this I put together in a spreadsheet, calculated the averages for each of the chosen parameters (please do not go, these are the only numbers you will see).
Results of the experiment
If we look at the results obtained for the first two parameters, First Contentful Paint and DC Time, we see that there are no significant differences.
Always keep in mind that, in these and the following graphs, the first column corresponds to the control website, the second to the website where I added Google maps with an iFrame (without API), the third is a website in which Google Maps maps are added with a plugin and using the API. Of the following, the fourth corresponds to the use of a plugin that inserts the maps using Open Street Map, the fifth is a plugin that works with Leaflet and the last is the plugin that makes use of Mapbox. It is therefore about the plugins that I raised at the beginning of the article.
If you look, the first pixel is painted with differences of tenths of a second, while the moment in which we can interact is basically the same with very little difference. A Photo-Finish would have to be done.
Therefore, this tells us absolutely nothing. But what about the other parameters? Let’s see the result.
Well, you can say, the twin towers in all the graphs correspond to Google.
As you can see, the control website has done its job, and gives the significantly lower values in the total loading time of the web, in the amount of data downloaded and in the number of requests, which are minimal.
However, we see that both the total loading time and the number of requests are really scandalous both in the case of inserting a map with an iFrame and in doing it through a plugin and connecting with the Google API.
It should be noted the short time it takes to load both Open Street Map and Leaflet, as well as the low number of requests made by the three different options to Google.
Without a doubt, the worst option is the insertion of an iFrame. And, embedding a website within another, is a bit old-fashioned, it is a technology of the past.
Mapbox does take a longer total loading time, which is close to Google, and it is understood, since it offers graphic possibilities that are not those of Google. In fact, we are going to treat Mapbox a little separately, since it is a Javascript library, with a 3D rendering engine, which allows us to do brutal things.
What solution would you choose to insert a map?
I think that in light of the result of these experiments, there is no doubt that Leaflet, for the possibilities it offers and for its performance, seems to be the most suitable option when inserting a map on a website.
In fact, if you are a WordPress developer, I invite you to get into Leaflet, and encourage you to create new plugins that use this library. If you do not know what Leaflet is, I invite you to know it in this article.
How can we embed Leaflet in WordPress?
We can do it thank you. aVarious plugins:
- Map Block Leaflet: It is a fantastic plugin, and very simple, that I told you about in this blog. To add simple maps is great.
- Leaflet Map: You could say it’s the official Leaflet plugin. It is quite complete, although it drags a little the delay of still working with shortcodes. However, it is a very good option for somewhat more complex maps.
- Extensions for Leaflet Map: This is a complement to the previous plugin, and allows us to do very crazy things. It is somewhat experimental, but you can not miss it if you want to make more vitaminized maps. For example, with it we could assemble maps of bike routes from the .gpx file of our GPS. But much more can be done.
Conclusions
As we have seen in this article, free software offers us very powerful options to enter maps on a website in WordPress, without compromising its performance.
According to the data, Google Maps offers rather little and at a fairly high cost of performance and privacy.
Therefore, a very interesting option can be Leaflet, in case we have basic to intermediate use needs. And, if we need to offer more power, with 3D maps, showing certain effects, etc., Mapbox will always be a very good option.
Tell me in the comments your experience, and if you know other plugins to insert maps, that use free software.