#Mapbox Integration slows down page load

12 messages · Page 1 of 1 (latest)

wanton mango
#

I created a custom map component that uses Mapbox to render map tiles. However, using it results in a significant decrease in performance with Google PageSpeed Insights. How can I solve this issue? Is it possible to defer the loading of the Mapbox JavaScript and CSS?

The code for the component is included below.

📎 message.txt
strong geyserBOT
#

Hi @wanton mango. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I'm sorry, but there's no information in the provided knowledge sources about Mapbox integration or specifically how to defer external JavaScript and CSS files for third-party libraries.

However, based on the knowledge sources regarding Astro's Server Directives, you can defer the rendering of a component by using the server:defer directive [Template directives reference].

This directive transforms a component into a server island, causing it to be rendered on demand and outside the scope of the rest of the page rendering [Template directives reference]. While this primarily handles the server-side rendering timing, it may help your initial page load performance by isolating the component's execution.

Example usage:

<MapComponent server:defer />

The knowledge sources do not contain enough information to provide a specific solution for deferring the Mapbox-specific assets (JS/CSS) or addressing Google PageSpeed Insights results for that library.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wanton mango Kapa.ai is still learning and improving, please let me know how I did by reacting below.

wanton mango
#

@strong geyser ok but I'm not using server side rendering

strong geyserBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

In Astro, you can use client directives to control exactly when your interactive components load and hydrate in the browser, which is the standard way to improve performance without relying on Server-Side Rendering (SSR).

By default, Astro strips all client-side JavaScript from UI components. To defer the loading of your map component and its associated Mapbox JavaScript, you can use one of the following directives:

  • client:visible: This is likely the most effective for performance. It tells Astro to only load and hydrate the component's JavaScript once the component enters the browser's viewport. If the user never scrolls to the map, the Mapbox library is never loaded [Client Islands].
  • client:idle: This tells the component to load and hydrate once the browser has reached an idle state and finished its initial high-priority tasks [Client Islands].

You can apply these to your component in your Astro page like this:

---
import MyMapComponent from '../components/MyMapComponent';
---

<!-- This component will only load when it becomes visible on the page -->
<MyMapComponent client:visible />

This approach creates a Client Island, allowing the rest of your website to remain static HTML while only loading the heavy Mapbox assets when they are actually needed [Client Islands]. This prevents the map from blocking the initial page load and should help improve your performance scores.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wanton mango Kapa.ai is still learning and improving, please let me know how I did by reacting below.

wanton mango
#

@strong geyser I tried client:visible but the files are still loaded at first when the page is loaded

strong geyserBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I'm sorry, but the provided knowledge sources do not contain information explaining why files might still load immediately when using client:visible. The documentation only states that client:visible should load and hydrate the component JavaScript once the component has entered the user’s viewport using an IntersectionObserver internally [Template directives reference].

However, the knowledge sources do mention a specific limitation that might be relevant to your setup:

  • Direct Imports Only: A client directive can only be used on a UI framework component that is directly imported into a .astro component. Hydration directives are not supported when using dynamic tags or custom components passed via the components prop (such as in MDX) [Template directives reference].

If your component is imported and used directly, you might try adding a rootMargin to the directive to gain more control over when the hydration is triggered:

<MyMapComponent client:visible={{rootMargin: "200px"}} />

This specifies a margin (in pixels) around the component that must enter the viewport before the JavaScript hydrates [Template directives reference].

#

The knowledge sources do not explicitly mention how to handle external CSS or JS files that might be imported globally or via <script> tags, which could be why you are seeing them load immediately.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: