Speed Up Blogger Mobile Page Navigation

Did you notice? When visiting a Blogger blog on mobile devices with a small screen, clicking an internal link can sometimes feel slightly slower than on the desktop.

Beginner info: an internal link is a link that opens up a page in the same blog.

The reason being, on the mobile version of blogspot, clicking any internal link that has no "?m=1" as part of the link will trigger two redirects:

1. redirect to the desktop version of the blog, (~230ms, fastest server response)

2. uh-oh! The request comes from a mobile device. Gotta redirect again to the mobile version of the blog. (another ~230ms).

To improve that, we can use JavaScript to modify all internal links to include the "?m=1" if it's the mobile version of the blog.

HTML Widget Script

Create an HTML widget and add the following script:

<script>

(async function () {

  await new Promise(resolve => window.setTimeout(resolve, 500));

  const currentUrl = new URL(window.location.href);
  const currentParams = currentUrl.searchParams;
  const hasM1 = currentParams.has("m") && currentParams.get("m") === "1";

  if (!hasM1) return; // Exit if m=1 is not present in the current URL

  document.querySelectorAll("a").forEach((link) => {
    const linkUrl = new URL(link.href, window.location.origin);

    if (linkUrl.origin === window.location.origin) { // Internal link check
      if (!linkUrl.searchParams.has("m")) {
        linkUrl.searchParams.set("m", "1");
      }
      link.href = linkUrl.toString();
    }
  });
  
})();

</script>

The above code will wait 500ms before modifying all internal links. You may want to adjust the number if you have dynamically injected internal links.

**